/*
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: -129px;
  top: 50%;
  margin-top: -40px;
  /* = approximately -height/2, though height can change */
}
#configure-login-service-dialog {
  width: 530px;
  margin-left: -269px;
  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: #dfdfdf;
	--accent-bg-lighter: #eeeeee;
	--accent-bg: #999999;
	--text: #212121;
	--text-light: #585858;
	--border: #d8dae1;
	--accent: #0d47a1;
	--accent-light: #90caf9;
	--code: #d81b60;
	--preformatted: #444;
	--marked: #ffdd33;
	--disabled: #efefef;
	/* 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;
	}
}

@property --shimmer-progress {
	syntax: '<number>';
	initial-value: 100;
	inherits: false;
}

/* @media print {
	.no-print,
	.no-print * {
		display: none !important;
	}
} */

@media print {
	.no-print {
		visibility: hidden;
	}
}

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: 60rem;
	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;
}

.swal-confirm-btn {
	color: black !important;
	border-radius: 30px !important;
	padding-left: 25px;
	padding-right: 25px;
	margin-left: 7px;
	margin-right: 7px;
	box-shadow: 0px 4px 20px rgba(128, 127, 127, 0.4);
	font-weight: bold;
}

.swal-cancel-btn {
	color: black !important;
	border-radius: 30px !important;
	padding-left: 25px;
	padding-right: 25px;
	margin-left: 7px;
	margin-right: 7px;
	box-shadow: 0px 4px 20px rgba(128, 127, 127, 0.4);
	font-weight: bold;
}

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

tr {
	border-bottom: 2px solid #999999;
}

td,
th {
	text-align: left;
	padding: 0.5rem;
	word-break: normal;
}

th {
	font-weight: bold;
}

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

.notepad-table {
	border-collapse: separate !important;
	border-radius: 20px !important;
}

.notepad-table-head {
	border-collapse: unset !important;
	border: solid 2px #999999 !important;
	border-radius: 20px !important;
	-moz-border-radius: 20px !important;
	-webkit-border-radius: 20px !important;
	-webkit-box-shadow: 0 1px 1px #ccc !important;
	-moz-box-shadow: 0 1px 1px #ccc !important;
	box-shadow: 1px 1px 1px #ccc !important;
}

/* 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: 16;
	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-x: hidden;
}

.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-container-goal.fade-out {
	animation: fadeOut 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;
}

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

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

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

/* Scrollbar styles */
::-webkit-scrollbar {
	overflow-x: hidden;
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: #f5f5f5;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: #ccc;
}

::-webkit-scrollbar-thumb:hover {
	background: #999;
}

.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: #0080ff;
}
.text-warning {
	color: #ffb300;
}
.text-danger {
	color: #ff0000;
}

.btn {
	background-color: #00e7e5;
	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;
	font-family: 'Nunito';
}

.btn-default {
	background-color: #c9c9c9;
	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-small {
	background-color: #00e7e5;
	border: none;
	color: black;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	font-weight: lighter;
	display: inline-block;
	font-size: 12px;
	margin: 2px 1px;
	width: fit-content;
	border-radius: 6px;
}

.btn-info {
	background-color: #0080ff;
	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: #ffb300;
	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: #ff0000;
	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-rounded {
	border-radius: 30px !important;
	padding-left: 25px;
	padding-right: 25px;
	margin-left: 7px;
	margin-right: 7px;
	box-shadow: 0px 4px 20px rgba(128, 127, 127, 0.4);
	font-weight: bold;
}

.btn-rounded.light {
	background-color: #efefef;
}

.circle-btn {
	background-color: #00e7e5;
	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;
}

.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: 25%;
	top: 0px;
	right: 0px;
	color: #585858;
	cursor: default;
}
.divider {
	height: 0;
	margin: 0.5rem 0;
	overflow: hidden;
	border-top: 1px solid #adadad;
}

.weak {
	font-weight: lighter;
}

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

.cursor-pointer {
	cursor: pointer !important;
}

.cursor-grab {
	cursor: grab;
}

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

.new-input-field {
	border: none;
	border-bottom: 1px solid #e0e0e0;
	border-radius: 0px;
}

.new-input-label {
	text-align: end;
}

/*
========  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: #f1f1f1;
	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: #00e7e5;
	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, #00e7e5, #00e7e5);
	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%);
}
/* login start */
.login-container {
	margin-top: 30%;
	margin-left: 10%;
	width: 80%;
}

.login-title {
	text-align: center;
}

.login-body {
	width: 100%;
}

.login-body-input {
	display: grid;
	grid-template-columns: 20% 120%;
	gap: 5%;
	width: 100%;
}

.login-footer {
	display: grid;
	grid-template-columns: 50% 50%;
}

.login-forgot {
	margin-left: 50%;
}

.login-forgot-text {
	color: black !important;
}

.login-btn {
	margin-top: 20%;
	color: #a8a8a8 !important;
	background-color: #f0f0f0;
	box-shadow: var(--box-shadow);
}
/* login end*/

/* persons start*/
.persons-header {
	text-align: center;
}

.persons-add {
	font-weight: bold;
	cursor: pointer;
	margin: 5%;
}

.persons-delete-restore {
	text-decoration: underline;
	cursor: pointer;
}

.persons-avatar-head {
	filter: grayscale(0);
}

.persons-circle-btn {
	background-color: #00e7e5;
	border: none;
	color: black;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 8px;
	margin: 4px 2px;
	border-radius: 50%;
	width: fit-content;
}

.persons-circle-avatar {
	background-color: #e0e0e0;
	border: none;
	color: black;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 8px;
	margin: 4px 2px;
	border-radius: 50%;
	width: fit-content;
}
/* persons end*/

/* person start*/
.person-title {
	text-align: center;
	margin: auto;
}

.person-code {
	width: 15%;
}

.person-page-heading {
	text-align: center;
}
.person-heading {
	display: grid;
	grid-template-columns: 50% 50%;
}

.person-archived {
	color: red;
	font-weight: bold;
}

.person-button {
	background-color: #e0e0e0;
	border-radius: 50%;
	color: black;
}

.person-circle-edit {
	background-color: #e0e0e0;
	border: none;
	color: black;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 8px;
	margin: 4px 2px;
	border-radius: 50%;
	width: fit-content;
}

.person-reset-text {
	padding-top: 20px;
	color: black !important;
	text-decoration: underline;
}

.person-button-footer {
	position: absolute;
	width: 100%;
	bottom: 2vh;
	display: grid;
	gap: 1%;
	grid-template-columns: 10% 40% 20%;
}

.open-modules-footer {
	position: absolute;
	width: 100%;
	bottom: 2vh;
	display: grid;
	grid-template-columns: 100%;
}

.open-modules {
	position: relative;
	left: 45%;
}
/* person end*/

/* profile start*/
.profile-button-footer {
	position: absolute;
	width: 100%;
	bottom: 2vh;
	display: grid;
	gap: 1%;
	grid-template-columns: 50% 20%;
}

.profile-reset-text {
	padding-top: 20px;
	color: black !important;
	text-decoration: underline;
}

/* profile end*/

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

/* Loading end*/

/* Progress bar start */
.progress-bar {
	z-index: 10;
	height: var(--progress-bar-height);
	width: 100%;
	position: fixed;
	left: 0px;
	bottom: 0px;
	background-color: #5ae3e3;
	--progress: 0%;
	--progress-bar-height: 1%;
}

.progress-bar.relative {
	position: relative;
}

.progress-bar::before {
	z-index: 11;
	content: '';
	display: flex;
	height: 100%;
	width: var(--progress);
	background-color: #20bcbc;
	transition: width 0.5s;
}

.progress-markers {
	z-index: 12;
	display: flex;
	justify-content: space-between;
	position: fixed;
	width: 100%;
	left: 0px;
	bottom: 0px;
}

.marker {
	position: relative;
	width: 1vh;
	height: 1vh;
	left: 0.5vh;
	background-color: #f0f0f0;
	border-radius: 50%;
}

.hidden-marker {
	width: 1vh;
}
/* Progress bar end */

/* Module menu start */

.section-menu {
	position: absolute;
	right: 2vw;
	background: white;
	background-image: url('img/icons/menu-icon.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 3vh;
	aspect-ratio: 1;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4vh;
	cursor: pointer;
}

.section-menu-container {
	user-select: none;
	position: absolute;
	right: 8vw;
	z-index: 3;
}

.menu-container {
	background: white;
	width: 15vw;
	height: 40vh;
	overflow: overlay;
	border-radius: 2vh;
	padding: 2vh;
	box-shadow: var(--box-shadow);
}

.menu-session-container {
	padding-left: 1vw;
}

.menu-close {
	position: absolute;
	top: 1vh;
	right: 1vh;
	cursor: pointer;
}

.menu-title {
	padding-top: 1vh;
	font-weight: bold;
	font-size: 2vh;
}

.menu-padding {
	padding-bottom: 1vh;
}

.menu-text {
	margin-top: 1vh;
	position: relative;
	font-size: 2vh;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.menu-text:hover {
	background: rgba(0, 0, 0, 0.2);
}

.menu-content-video-icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #5ae3e3;
	height: 2vh;
	aspect-ratio: 1;
	border-radius: 50%;
	left: -1.5vw;
}

.menu-content-notes-icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2vh;
	aspect-ratio: 1;
	left: -1.5vw;
}

.menu-text-icon {
	position: absolute;
	font-size: 2vh;
	display: flex;
	align-self: center;
	align-items: center;
	justify-content: center;
}

.menu-text-icon:hover {
	color: black;
}

.menu-end {
	font-size: 2vh;
	text-decoration: underline;
	cursor: pointer;
}

/*  Module menu end */

/* Module help start */

.section-help {
	background: white;
	border-radius: 50%;
	box-shadow: var(--box-shadow);
	width: 5vh;
	aspect-ratio: 1;
	position: fixed;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 15vh;
	cursor: pointer;
}

.section-background {
	width: 80%;
	left: 10%;
	z-index: 0;
	position: absolute;
}

.popup.module-help {
	align-items: start;
	overflow: overlay;
	border-radius: 3vh;
	height: 75%;
	z-index: 16;
	white-space: pre-line;
	line-height: 1em;
}

.module-help-title {
	width: 100%;
	white-space: pre-wrap;
}

.module-help-subTitle {
	width: 100%;
	white-space: pre-wrap;
	font-style: italic;
}

.module-help-text {
	width: 100%;
	white-space: pre-wrap;
}

.module-help-bullet {
	white-space: pre-line;
}

/*  Module help end */

/* Module start start */

.text-button.start-goals {
	align-self: center;
	text-decoration: underline;
	position: relative;
	bottom: 2vh;
	cursor: pointer;
	user-select: none;
	z-index: 2;
}

.popup.start-goals {
	overflow: overlay;
}

.start-goal {
	display: flex;
	align-items: center;
}

.start-goal-text {
	padding-left: 1rem;
}

.start-goals-title {
	padding-bottom: 2vh;
	font-size: x-large;
}

.start-goals-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 4vh;
}

.card-container {
	display: flex;
	overflow-y: visible;
	overflow-x: scroll;
	padding-block: 6vh;
	padding-inline: 3vh;
	grid-column: 1;
	grid-row: 1;
	scroll-behavior: smooth;
}

.journey-carousel-container {
	display: block;
	height: 100vh;
	width: 100vw;
}

.carousel-container {
	display: grid;
	position: absolute;
	width: 100%;
	top: 12em;
	left: 0px;
	grid-template-columns: 100%;
	grid-template-rows: 100%;
}

.carousel-nav {
	display: flex;
	grid-column: 1;
	grid-row: 1;
	height: 100%;
	position: relative;
	align-self: center;
	z-index: 2;
	width: 10%;
	transition: 0.1s;
	align-items: center;
	justify-content: center;
	user-select: none;
}

.carousel-nav.left {
	justify-self: left;
	left: 0px;
	background: linear-gradient(90deg, #f0f0f0 47.71%, rgba(240, 240, 240, 0) 104.79%);
	transition: 0.4s;
}

.carousel-nav.right {
	justify-self: right;
	right: 0px;
	background: linear-gradient(270deg, #f0f0f0 47.71%, rgba(240, 240, 240, 0) 104.79%);
	transition: 0.4s;
}

.carousel-nav.right:hover {
	background: linear-gradient(270deg, #f0f0f0 85.71%, rgba(240, 240, 240, 0) 104.79%);
}

.carousel-nav.left:hover {
	background: linear-gradient(90deg, #f0f0f0 85.71%, rgba(240, 240, 240, 0) 104.79%);
}

.carousel-block {
	min-width: 20%;
	max-width: 20%;
	padding: 1vh;
	margin-inline: 3vh;
}

.carousel-icon {
	font-size: 8vh !important;
	color: #adadad;
}

.card-container::-webkit-scrollbar {
	display: none;
}

.card {
	display: flex;
	flex-direction: column;
	justify-content: end;
	height: 45vh;
	min-width: 10%;
	max-width: 10%;
	background-image: url(img/path.svg);
	margin-inline: 1.3vh;
	border-radius: 3vh;
	padding: 1vh;
	box-shadow: 0px 0.5vh 2vh rgba(128, 127, 127, 0.4);
	background-repeat: no-repeat;
	background-size: 1400%;
	background-position-y: 1vh;
}

.card.current {
	background-color: white;
}

.card.upcoming {
	background-color: white;
}

.card-print {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 45vh;
	min-width: 10%;
	max-width: 10%;
	margin-inline: 1.3vh;
	border-radius: 3vh;
	padding: 1vh;
	box-shadow: 0px 0.5vh 2vh rgba(128, 127, 127, 0.4);
	background-repeat: no-repeat;
	background-size: 1400%;
	background-position-y: 1vh;
	background: linear-gradient(to top left, #f0da8533, #c6b5ef33, #d3cdb933, #82ddf733, #a4d9f233);
	box-shadow: -2px 1px 4px 0px #00000026;
}

.print-path {
	position: relative;
	top: 17vh;
}

.card-bottom-print {
	position: relative;
	display: grid;
	grid-template-columns: 80% 20%;
	grid-template-rows: 65% 35%;
	padding: 1vh;
	cursor: grab;
}

.card-bottom {
	position: relative;
	display: grid;
	grid-template-columns: 80% 20%;
	grid-template-rows: 65% 35%;
	padding: 1vh;
	cursor: grab;
}

.card-title {
	font-size: 2vh;
	grid-column: 1;
	font-weight: bold;
}

.card-index {
	display: flex;
	align-items: flex-end;
	font-size: 2vh;
	grid-column: 1;
}

.check-box.start {
	grid-column: 2;
	grid-row-start: 1;
	grid-row-end: span 2;
	align-self: end;
	width: 4vh;
	height: 4vh;
	font-size: 4vh;
}

.avatar {
	display: grid;
	position: relative;
	align-self: center;
	/* overflow: hidden; */
	grid-template-rows: 5.5vh 7vh 10vh;
	grid-template-columns: 50%;
	justify-content: center;
	justify-items: center;
}

.avatar-head.start {
	height: 6vh;
}
.avatar-body.start {
	height: 12vh;
}
.avatar-legs.start {
	height: 12vh;
}

/* Module start end */

/* Module review start */
.card-images-container {
	display: grid;
	position: relative;
	bottom: 10%;
}

.card-tips-container {
	position: relative;
	grid-row-start: 1;
	grid-column-start: 1;
	bottom: 15%;
	display: grid;
	align-items: center;
	justify-content: center;
}

.card-tips-background {
	grid-row-start: 1;
	grid-column-start: 1;
	align-items: center;
	justify-content: center;
	max-width: 95%;
	max-height: 95%;
	z-index: 1;
}

.card-tips-text {
	position: relative;
	left: 20%;
	bottom: 15%;
	grid-row-start: 1;
	grid-column-start: 1;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.card-note-container {
	position: relative;
	grid-row-start: 1;
	grid-column-start: 2;
	left: 5%;
	bottom: 15%;
	display: grid;
	align-items: center;
	justify-content: center;
}

.card-note-background {
	grid-row-start: 1;
	grid-column-start: 1;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
	z-index: 1;
}

.card-note-icon {
	position: relative;
	left: 20%;
	bottom: 20%;
	grid-row-start: 1;
	grid-column-start: 1;
	align-items: center;
	justify-content: center;
	max-width: 60%;
	max-height: 60%;
	z-index: 2;
}

.popup.review-popup {
	overflow: overlay;
}

.review-popup {
	display: flex;
	align-items: center;
}

.review-popup-title {
	padding-bottom: 2vh;
	font-size: x-large;
}

.review-popup-content {
	display: grid;
	grid-template-rows: 15% 80%;
	grid-template-columns: 65% 35%;
	row-gap: 5%;
	column-gap: 1%;
	width: 100%;
	height: 100%;
}

.review-popup-text {
	grid-row: 1;
	grid-column: span 2;
}

.review-popup-tips {
	grid-row: 2;
	grid-column: 1;
}

.review-popup-notes {
	grid-row: 2;
	grid-column: 2;
	display: grid;
	grid-template-rows: 50% 50%;
}

.review-deck-container {
	align-self: center;
	display: grid;
	grid-template-columns: 24% 24% 24% 24%;
	grid-template-rows: 50% 50%;
	column-gap: 1%;
	row-gap: 1%;
	height: 100%;
}

.review-deck-tip {
	position: relative;
	background: #f1f1f1;
	border-radius: 1vh;
	align-items: center;
	justify-content: center;
}

.review-tip-icon-container {
	align-items: center;
	justify-content: center;
	position: relative;
	user-select: none;
	pointer-events: none;
}

.review-tip-icon {
	position: relative;
	left: 35%;
}

.review-tip-icon-label {
	font-variant: small-caps;
	font-size: 1.2vh;
	top: 7%;
	width: 80%;
	position: relative;
	left: 10%;
	text-align: center;
}

.review-tip-text {
	margin-top: 5%;
	padding-inline: 1vw;
	height: 60%;
	width: 80%;
	font-size: 1.5vh;
}

.review-popup-notes-text {
	position: relative;
	background: #f1f1f1;
	box-shadow: 0px 4px 20px rgba(128, 127, 127, 0.1);
	border-radius: 1vh;
	align-items: center;
	text-align: center;
	justify-content: center;
	padding: 2%;
	font-size: 1.5vh;
}

.review-popup-notes-audio {
	position: relative;
	align-items: center;
	text-align: center;
	justify-content: center;
	padding: 2%;
	overflow: hidden;
}
/* Module review end */

/* Radio start */

.radio-container {
	--slider-color: #c9c9c9;
	background-color: var(--slider-color);
	width: 100%;
	height: 6px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: relative;
	top: 50px;
}

.radio-tick {
	display: flex;
	width: 30px;
	flex-direction: column;
	align-items: center;
}

.radio-button {
	display: flex;
	position: relative;
	bottom: 18px;
	min-width: 30px;
	min-height: 30px;
	background-color: var(--bg);
	border: 6px solid var(--slider-color);
	border-radius: 50%;
	transition: 0.3s;
	align-self: center;
}

.radio-button:hover {
	background-color: #d3d3d3;
	transition: 0.1s;
	cursor: pointer;
}

.radio-button.selected {
	background-color: #424242;
	border-color: #424242;
	transition: 0.3s;
}

.radio-label {
	position: relative;
	overflow: visible;
	white-space: nowrap;
	user-select: none;
}

.radio-title {
	display: grid;
}

.radio-title.left {
	grid-row: 1;
	grid-column: 1;
}

.radio-title.middle-left {
	grid-row: 1;
	grid-column: 2;
}

.radio-title.middle {
	grid-row: 1;
	grid-column: 3;
	text-align: center;
}

.radio-title.middle-right {
	grid-row: 1;
	grid-column: 4;
	text-align: end;
}

.radio-title.right {
	grid-row: 1;
	grid-column: 5;
}

.multi-radio-container {
	margin-bottom: 25vh;
}

/* Radio end */

/* Choices start */

.choice-grid {
	display: grid;
	grid-template-columns: repeat(3, 33%);
	justify-content: center;
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	grid-auto-rows: 60px;
	position: relative;
	top: 40px;
}

.choice-button {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	border-radius: 12px;
	user-select: none;
	cursor: pointer;
	box-shadow: 0px 4px 20px rgba(128, 127, 127, 0.1);
	transition: 0.2s;
}

.choice-button:hover {
	background-color: #ababab;
	transition: 0.2s;
}

.choice-button.selected {
	background-color: #5ae3e3;
	transition: 0.2s;
}

.choice-button.disabled {
	background-color: var(--bg);
	color: #666;
	transition: 0.2s;
}

/* Choices end */

/* Form start */

.module-form {
	position: relative;
	user-select: none;
}

/* Form end */

/* Video start */

.video-controls {
	display: flex;
	align-items: center;
	height: 5vh;
}

.video-progress-container {
	--video-progress: 0%;
	height: 100%;
	display: grid;
	justify-content: center;
	width: -webkit-fill-available;
	width: stretch;
	width: -moz-available;
	grid-template-columns: 100%;
	grid-template-rows: 100%;
	justify-items: start;
	position: relative;
	margin-inline: 2vh;
}

.video-progress-bar {
	background-color: #5ae3e3;
	width: 100%;
	height: 25%;
	align-self: center;
	grid-column: 1;
	grid-row: 1;
	border-radius: 1vh;
	box-shadow: var(--box-shadow);
	cursor: pointer;
}

.video-progress-bar::before {
	content: '';
	display: flex;
	background-color: #20bcbc;
	width: var(--video-progress);
	height: 100%;
	align-self: center;
	border-radius: 1vh;
}

.video-progress-marker-container {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	width: 100%;
	position: relative;
	right: 1.5vh;
	pointer-events: none;
}

.video-progress-marker {
	background-color: #20bcbc;
	border-radius: 50%;
	width: 3vh;
	height: 3vh;
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	justify-self: start;
	position: relative;
	left: var(--video-progress);
	box-shadow: var(--box-shadow);
}

.video-progress-hover {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: 1;
	grid-row: 1;
	position: relative;
	height: 100%;
	top: -110%;
	background: black;
	color: white;
	padding-inline: 1vh;
	border-radius: 1vh;
	justify-self: start;
}

.video-play-pause-toggle {
	background-color: #5ae3e3;
	border-radius: 50%;
	width: 4vh;
	height: 4vh;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0.5vh;
	aspect-ratio: 1;
	cursor: pointer;
}

.video-back-10 {
	background-color: #5ae3e3;
	border-radius: 50%;
	width: 4vh;
	height: 4vh;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0.5vh;
	aspect-ratio: 1;
	cursor: pointer;
}

.video-forward-10 {
	background-color: #5ae3e3;
	border-radius: 50%;
	width: 4vh;
	height: 4vh;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0.5vh;
	aspect-ratio: 1;
	cursor: pointer;
}

.video-volume {
	border-radius: 50%;
	width: 4vh;
	height: 4vh;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0.5vh;
	aspect-ratio: 1;
	cursor: pointer;
}

.video-volume-slider-container {
	width: 15vh;
	height: 4vh;
	padding-inline: 1vh;
	border-radius: 3vh;
	display: flex;
}

.video-volume-slider {
	background: #5ae3e3;
	height: 25%;
	width: 100%;
	align-self: center;
	border-radius: 1vh;
	--video-volume: 100%;
	cursor: pointer;
}

.video-volume-slider::before {
	background: #20bcbc;
	display: flex;
	content: '';
	height: 100%;
	width: var(--video-volume);
	align-self: center;
	border-radius: 1vh;
}

.video-bookmark {
	border-radius: 50%;
	width: 4vh;
	height: 4vh;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0.5vh;
	aspect-ratio: 1;
	cursor: pointer;
}

.video-initial-button {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	left: 45.78125%;
	top: 42.5%;
	width: 8.4375%;
	background: #5ae3e3;
	height: 15%;
	border-radius: 50%;
	box-shadow: var(--box-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	font-size: 6vh;
}

.video-large-button-icon {
	font-size: 5vh;
}

.video-container {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: 100%;
}

.module-video {
	align-self: center;
	width: 100%;
	grid-column: 1;
	grid-row: 1;
}

.video-popup-container {
	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;
}

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

.video-popup {
	width: 60%;
	border-radius: 25px;
	padding: 15px;
	background: white;
	box-shadow: var(--box-shadow);
}

.video-popup-close {
	float: right;
}

.video-initial-button-preview {
	position: relative;
	background: #5ae3e3;
	left: -43%;
	top: -10%;
	border-radius: 50%;
	box-shadow: var(--box-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* Video end */

/* Audio start */

.audios-container {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-gap: 10px;
	width: 150%;
	left: -25%;
}

.audio-icon {
	position: relative;
	font-size: 4vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

.audio-image {
	max-width: 100% !important;
	max-height: 100% !important;
}

.audio-container {
	background: white;
	width: 100%;
	align-items: center;
	border-radius: 20px;
}

.audio-initial-button-preview {
	background: #5ae3e3;
	border-radius: 50%;
	box-shadow: var(--box-shadow);
	width: 25px;
	height: 25px;
	cursor: pointer;
	display: flex;
	align-items: end;
	justify-content: end;
	margin-bottom: 10px;
	margin-right: 10px;
}

.audio-large-button-icon {
	font-size: 2.5vh;
}

.audio-popups-container {
	position: relative;
	width: 100%;
}
.audio-popup {
	position: relative;
	border-radius: 25px;
	padding: 15px;
	background: white;
	box-shadow: var(--box-shadow);
	min-height: 200px;
}

.audio-popup-close {
	float: right;
}

.module-audio {
	align-self: center;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}

/* Audio end */

/* Bubble Start */

.bubble-container {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.bubble-container::-webkit-scrollbar {
	overflow-x: hidden !important;
	overflow-y: hidden !important;
}

.bubble-grid {
	display: grid;
}

.bubble {
	--bubble-grayscale: 0.5;
	position: relative;
	display: flex;
	place-self: center;
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	user-select: none;
	filter: grayscale(var(--bubble-grayscale));
}

.thought {
	display: flex;
	position: relative;
	place-self: center;
	grid-column: 1;
	grid-row: 1;
	max-width: 85%;
	min-width: 1ch;
	max-height: 13ch;
	overflow: hidden;
	justify-content: center;
	border: none;
	text-align: center;
}

.thought:active {
	border: none;
}

.thought:focus {
	border: none;
}

.thought:target {
	border: none;
}

[contenteditable] {
	outline: 0px solid transparent;
}

.bubble-size-container {
	padding: 5vh;
	width: 100%;
	display: grid;
	grid-template-columns: 10% 80% 10%;
	justify-items: center;
}

.bubble-color-container {
	padding: 5vh;
	width: 100%;
	display: grid;
	grid-template-columns: 10% 80% 10%;
	justify-items: center;
}

/* .bubble-slider-container {
	padding: 5vh;
	width: 100%;
	display: grid;
	grid-template-columns: 10% 80% 10%;
	justify-items: center;
} */

.bubble-scale-text {
	grid-row: 1;
	grid-column: 1 / span 3;
}

.bubble-scale-icon {
	width: inherit;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center;
}

.bubble-scale-icon.material-icons {
	align-self: center;
	text-align: center;
	font-size: 6vh;
	color: #4f4f4f;
}

.bubble-scale-icon.happy {
	background-image: url('img/happy.svg');
}

.bubble-scale-icon.sad {
	background-image: url('img/sad%20icon.svg');
}

.scaler {
	background-color: #c9c9c9;
	width: 100%;
	height: 6px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: relative;
	background-clip: content-box;
	padding: 30px;
	grid-column: 2;
	grid-row: 2;
	border-radius: 3rem;
}

.scale-pointer {
	background-color: var(--bg);
	width: 3vh;
	height: 3vh;
	position: relative;
	grid-column: 2;
	grid-row: 2;
	border-radius: 50%;
	border: 5px solid #c9c9c9;
	align-self: center;
}

.scale-pointer:hover {
	cursor: ew-resize;
}

.bubble-submit {
	background: white;
	border-radius: 1vh;
	box-shadow: var(--box-shadow);
	display: flex;
	height: 6vh;
	width: 12vh;
	align-items: center;
	justify-content: center;
}
/* Bubble End */

/* trigger start */

.trigger-input {
	outline: none;
	border: none;
	padding-left: 1vw;
	margin-bottom: 0px;
	border-bottom: 2px solid var(--text-light);
	border-radius: 0;
	width: 100%;
}

.notice-input-worry {
	padding-left: 1vw;
	width: 100%;
	background-color: white;
	outline: none;
}

.notice-input-safe {
	padding-left: 1vw;
	width: 100%;
	background-color: white;
	outline: none;
}

.trigger-safe-bubbles {
	position: absolute;
	width: 100vw !important;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: -1;
}

.tunnel-vision {
	position: absolute;
	width: 80vw !important;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: -2;
}

.rotate-expand-contract {
	animation: rotation 7s infinite linear;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg) scale(1);
	}
	12.5% {
		transform: rotate(45deg) scale(1.2);
	}
	25% {
		transform: rotate(90deg) scale(1);
	}
	37.5% {
		transform: rotate(135deg) scale(1.2);
	}
	50% {
		transform: rotate(180deg) scale(1);
	}
	62.5% {
		transform: rotate(225deg) scale(1.2);
	}
	75% {
		transform: rotate(270deg) scale(1);
	}
	87.5% {
		transform: rotate(315deg) scale(1.2);
	}
	100% {
		transform: rotate(359deg) scale(1);
	}
}

.trigger-thought {
	position: absolute;
	width: 10vw !important;
	bottom: 30%;
	right: 20%;
	margin: auto;
	z-index: 3;
	display: grid;
}

.trigger-thought-bubble {
	--bubble-grayscale: 0.5;
	position: relative;
	display: flex;
	place-self: center;
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	user-select: none;
	filter: grayscale(var(--bubble-grayscale));
}

.trigger-thought-text {
	display: flex;
	position: relative;
	place-self: center;
	grid-column: 1;
	grid-row: 1;
	max-width: 85%;
	min-width: 1ch;
	max-height: 13ch;
	overflow: scroll;
	justify-content: center;
	border: none;
	text-align: center;
}

.trigger-image-container {
	display: grid;
	align-items: center;
	justify-content: center;
}

.trigger-image {
	grid-row-start: 1;
	grid-column-start: 1;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
	z-index: 2;
}

.trigger-image-applied {
	grid-row-start: 1;
	grid-column-start: 1;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
	z-index: 1;
}

.trigger-tip-title {
	font-size: 12px;
	font-weight: 700;
}

.trigger-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.trigger-container button {
	display: flex;
	align-items: center;
	gap: 5px;
	border: #212121;
	padding: 5px 10px;
	font-size: 14px;
	cursor: pointer;
}

.delete-trigger {
	display: flex;
	align-items: center;
	gap: 5px;
	border: #212121;
	padding: 5px 10px;
	font-size: 14px;
	cursor: pointer;
	background-color: transparent;
	color: #212121;
}

.delete-trigger:hover {
	background-color: #5ae3e3;
	color: black;
}

.delete-trigger i {
	font-size: 16px;
	color: inherit;
	pointer-events: none;
}

.trigger-reset {
	position: absolute;
	bottom: 1vh;
	left: 50%;
}

.trigger-toggle {
	position: absolute;
	height: 7vh;
	width: 59rem;
	display: grid;
	grid-template-columns: 70% 30%;
	column-gap: 2vh;
	background: white;
	border-radius: 40px;
	bottom: 8vh;
	z-index: 10;
}

.trigger-toggle-tip {
	width: 41rem;
	display: grid;
	grid-template-columns: 30% 30%;
	align-items: center;
	align-content: center;
	justify-content: space-evenly;
}

.image-text-container {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.view-tip-icon img {
	width: 30px;
	height: 30px;
}

.trigger-toggle-tip-text {
	font-weight: 100;
}

.trigger-toggle-button {
	position: relative;
	display: inline-block;
	width: 100%;
}

.trigger-toggle-button input {
	opacity: 0;
	width: 0;
	height: 0;
}

.trigger-toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 34px;
}

.trigger-toggle-slider:before {
	position: absolute;
	content: attr(data-label); /* Add the dynamic label */
	height: 80%;
	width: 80%;
	left: 8px;
	bottom: 10%;
	background-color: white;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 34px;
	text-align: center;
	align-content: center;
	color: gray;
}

input:checked + .trigger-toggle-slider {
	background-color: #5ae3e3;
}

input:focus + .trigger-toggle-slider {
	box-shadow: 0 0 1px #5ae3e3;
}

input:checked + .trigger-toggle-slider:before {
	-webkit-transform: translateX(40px);
	-ms-transform: translateX(40px);
	transform: translateX(40px);
	color: black;
}

/* trigger end */

/* Triggers and Impacts start */

.triggers-impacts-container {
	display: grid;
	grid-template-columns: 49% 2% 49%;
	grid-template-rows: 49% 2% 49%;
	background: var(--bg);
	border-radius: 25px;
	height: 70vh;
	width: 80rem;
	margin-left: -10rem;
}

.triggers-impacts-safe-container {
	display: grid;
	height: 70vh;
	grid-template-columns: 48% 2% 48%;
	grid-template-rows: 48% 2% 48%;
	grid-column: 3;
	grid-row: 1 / span 3;
	column-gap: 1vh;
	row-gap: 1vh;
	border-radius: 25px;
	padding: 15px;
	background: var(--accent-bg-light);
}

.triggers-impacts-worry-container {
	display: grid;
	height: 70vh;
	grid-template-rows: 48% 2% 48%;
	grid-template-columns: 48% 2% 48%;
	grid-column: 1;
	grid-row: 1 / span 3;
	column-gap: 1vh;
	row-gap: 1vh;
	border-radius: 25px;
	padding: 15px;
	background: var(--accent-bg-light);
}

.triggers-impacts-text-container {
	box-shadow: var(--box-shadow);
	border-radius: 3vh;
	display: flex;
	flex-direction: column;
	align-items: left;
	padding: 3%;
	overflow: hidden;
}

.triggers-impacts-text-container.safe {
	grid-column: 3;
	grid-row: 3;
}

.triggers-impacts-text-container.worry {
	grid-column: 1;
	grid-row: 3;
}

.triggers-impacts-goal-container {
	box-shadow: var(--box-shadow);
	border-radius: 3vh;
	display: flex;
	flex-direction: column;
	align-items: left;
	padding: 3%;
	grid-column: 3;
	grid-row: 1;
	font-weight: bold;
	overflow-x: hidden;
}

.triggers-impacts-bubbles-container {
	border-radius: 3vh;
	box-shadow: var(--box-shadow);
	padding: 3%;
	background: white;
	overflow-x: hidden;
}

.triggers-impacts-bubbles-container.safe {
	grid-column: 1;
	grid-row: 1 / span 3;
}

.triggers-impacts-bubbles-container.worry {
	grid-column: 3;
	grid-row: 1 / span 3;
}

.triggers-arrow {
	text-align: center;
	height: 4vh;
	width: 2vw;
	display: flex;
	place-self: center;
	text-align: center;
	z-index: 15;
}

.triggers-arrow-vertical {
	text-align: center;
	height: 4vh;
	width: 1vw;
	display: flex;
	place-self: center;
	text-align: center;
	z-index: 15;
}

/* Commented out to remove bg from arrows on triggers/triggers and impacts
.triggers-arrow-bg-light {
	background: var(--accent-bg-light);
}
.triggers-arrow-bg {
	background: var(--bg);
} */

.triggers-arrow-padding {
	padding: 5%;
	place-self: center;
}

.triggers-arrow.row1 {
	grid-row: 1;
}

.triggers-arrow.col1 {
	grid-column: 1;
}

.triggers-arrow.row2 {
	grid-row: 2;
}

.triggers-arrow.col2 {
	grid-column: 2;
}

.triggers-arrow.row3 {
	grid-row: 3;
}

.triggers-arrow.col3 {
	grid-column: 3;
}

.triggers-impacts-triggers-container {
	grid-column: 1;
	grid-row: 1;
	box-shadow: var(--box-shadow);
	border-radius: 3vh;
	display: flex;
	flex-direction: column;
	align-items: left;
	overflow-x: hidden;
	padding: 3%;
}

.triggers-impacts-bubbles-list {
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	height: 55vh;
	scroll-behavior: smooth;
}

.triggers-impacts-bubble {
	background-image: url(img/Rectangle.png);
	width: fit-content;
	background-size: contain;
	background-repeat: no-repeat;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 5vw;
	max-width: 10vw;
	padding: 1vw;
	margin: 1vw;
	text-align: center;
	flex-shrink: 0;
}

.triggers-impacts-bubble:nth-child(even) {
	align-self: end;
}

.triggers-impacts-bubble.worry {
	filter: grayscale(1);
}

.impacts-container {
	height: 60vh;
	width: 100%;
}

.impacts-safe-container {
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-columns: 48% 2% 48%;
	grid-template-rows: 48% 2% 48%;
	column-gap: 1vh;
	row-gap: 1vh;
	transition: 0.4s;
}

.impacts-worry-container {
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-columns: 48% 2% 48%;
	grid-template-rows: 48% 2% 48%;
	column-gap: 1vh;
	row-gap: 1vh;
}

.impacts-top {
	display: flex;
	justify-content: space-between;
}

.impacts-text-container {
	box-shadow: var(--box-shadow);
	border-radius: 3vh;
	display: flex;
	flex-direction: column;
	align-items: left;
	overflow: hidden;
	padding: 3%;
}

.impacts-text-container.safe {
	grid-column: 3;
	grid-row: 3;
}

.impacts-text-container.worry {
	grid-column: 1;
	grid-row: 3;
}

.impacts-item-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	overflow: overlay;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

.impacts-triggers-container {
	grid-column: 1;
	grid-row: 1;
	box-shadow: var(--box-shadow);
	border-radius: 3vh;
	display: flex;
	flex-direction: column;
	align-items: left;
	overflow: hidden;
	padding: 3%;
}

.impacts-bubbles-container {
	border-radius: 3vh;
	box-shadow: var(--box-shadow);
	padding: 3%;
}

.impacts-bubbles-container.safe {
	grid-column: 1;
	grid-row: 1 / span 3;
}

.impacts-bubbles-container.worry {
	grid-column: 3;
	grid-row: 1 / span 3;
}

.impacts-bubbles-list {
	display: flex;
	flex-direction: column;
	overflow: overlay;
	height: 50vh;
	scroll-behavior: smooth;
}

.impacts-bubble {
	background-image: url(img/Rectangle.png);
	width: fit-content;
	background-size: contain;
	background-repeat: no-repeat;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 10vw;
	max-width: 18vw;
	padding: 1vw;
	margin: 1vw;
	text-align: center;
	flex-shrink: 0;
}

.impacts-bubble:nth-child(even) {
	align-self: end;
}

.impacts-bubble.worry {
	filter: grayscale(1);
}

.impacts-text {
	background-color: white;
	border-radius: 1vh;
	margin: 1vh;
	min-height: 9vh;
	width: 90%;
	padding-left: 5px;
	display: flex;
	align-items: center;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: horizontal;
	-webkit-box-align: center;
	overflow-x: hidden;
	text-overflow: ellipsis;
	cursor: default;
	max-height: 27vh;
}

.impacts-text-goal {
	background-color: white;
	border-radius: 1vh;
	margin: 1vh;
	min-height: 9vh;
	width: 90%;
	padding-left: 5px;
	display: flex;
	align-items: center;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-box-align: center;
	overflow-x: hidden;
	text-overflow: ellipsis;
	cursor: default;
	max-height: 27vh;
}

.impacts-text-input {
	width: 100%;
	background: none;
	outline: none;
	border: none;
	margin-bottom: unset;
}

.impacts-deck-button-container {
	position: absolute;
	bottom: 20%;
	left: 5%;
}

.impacts-button {
	border-radius: 50px;
}

.impacts-deck-container {
	position: absolute;
	width: 50%;
	top: 0;
	left: 0;
	padding-left: 8%;
	padding-right: 8%;
	padding-top: 3%;
	padding-bottom: 3%;
	background-color: #f1f1f1;
}

.impacts-deck-close {
	position: relative;
	right: 0;
	font-size: 5vh;
	width: 5vh;
	cursor: pointer;
	align-items: end;
}

/* Triggers and Impacts end */

/* Catchup start */

.catchup-container {
	align-self: center;
	display: grid;
	width: 70vw;
	height: 65vh;
	transition: 0.4s;
}

.catchup-main-container {
	grid-column: 1;
	grid-row: 1;
	justify-self: center;
	display: grid;
	width: 100%;
	height: 100%;
	max-height: 100%;
	overflow: hidden;
	padding: 3vh;
	background-clip: border-box;
	grid-template-columns: 33% 33% 33%;
	grid-template-rows: 50% 50%;
	column-gap: 1vh;
	row-gap: 1vh;
	transition: 0.4s;
}

.catchup-main-container.expand-learning {
	grid-template-rows: 75% 25%;
}

.catchup-main-container.expand-progress {
	grid-template-rows: 25% 75%;
}

.catchup-worries {
	grid-column: 1;
	grid-row: 1 / span 2;
	padding: 1vh;
	border-radius: 3vh;
	box-shadow: var(--box-shadow);
	display: flex;
	flex-direction: column;
	font-weight: bold;
}

.catchup-bubbles {
	display: flex;
	flex-direction: column;
	padding-block: 2vh;
	height: 60vh;
	font-weight: normal;
}

.catchup-worry {
	position: relative;
	background-image: url('img/Rectangle.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: grayscale(1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 20vh;
	height: 20vh;
}

.catchup-worry#count {
	left: 1vh;
}

.catchup-worry#new {
	align-self: end;
	right: 1vh;
}

.catchup-worries-more {
	align-self: center;
	cursor: pointer;
}

.catchup-safer {
	grid-column: 2;
	grid-row: 1 / span 2;
	padding: 1vh;
	border-radius: 3vh;
	box-shadow: var(--box-shadow);
	display: flex;
	flex-direction: column;
	font-weight: bold;
}

.catchup-safe {
	position: relative;
	background-image: url('img/Rectangle.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: grayscale(0);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 20vh;
	height: 20vh;
}

.catchup-safe#count {
	left: 1vh;
}

.catchup-safe#new {
	align-self: end;
	right: 1vh;
}

.catchup-safer-more {
	align-self: center;
	cursor: pointer;
}

.catchup-learning {
	grid-column: 3;
	grid-row: 1;
	padding: 1vh;
	border-radius: 3vh;
	box-shadow: var(--box-shadow);
	transition: 0.4s;

	font-weight: bold;

	display: grid;
	grid-template-columns: 80% 20%;
	grid-template-rows: 33% 33% 33%;
}

.catchup-learning.expanded {
	grid-template-rows: 15% 75% 10%;
}

.catchup-learning-content-container {
	grid-column: span 2;
	position: relative;
	width: 100%;
	height: 11vh;
	overflow-y: hidden;
	display: flex;
	align-self: start;
	flex-direction: column;
	top: -1vh;
	scroll-behavior: smooth;
}

.catchup-learning-content-container.expanded {
	height: 95%;
	min-height: 11vh;
	overflow: overlay;
	align-self: start;
}

.catchup-learning-content {
	width: 90%;
	padding-inline: 1vh;
	background: white;
	grid-column: span 2;
	box-shadow: var(--box-shadow);
	border-radius: 2vh;
	justify-self: center;
	display: flex;
	align-items: center;
	max-height: 100%;
	height: 8vh;
	overflow: hidden;
	margin-top: 1vh;
	margin-bottom: 6vh;
	position: relative;
	transition: 0.4s;
	flex-shrink: 0;
	align-self: center;
	animation: fadeIn 1s;
}

.catchup-learning-content.expanded {
	margin-bottom: 1vh;
}

.catchup-learning-more {
	align-self: end;
	justify-self: center;
	grid-column: 1 / span 2;
	grid-row: 3;
	cursor: pointer;
}

.catchup-progress {
	grid-column: 3;
	grid-row: 2;
	padding: 1vh;
	border-radius: 3vh;
	box-shadow: var(--box-shadow);
	transition: 0.4s;
	font-weight: bold;
	display: grid;
	grid-template-columns: 80% 20%;
	grid-template-rows: 33% 33% 33%;
}

.catchup-progress.expanded {
	grid-template-rows: 15% 75% 10%;
}

.catchup-progress-content-container {
	grid-column: span 2;
	position: relative;
	width: 100%;
	height: 11vh;
	overflow-y: hidden;
	display: flex;
	align-self: start;
	flex-direction: column;
	top: -1vh;
	scroll-behavior: smooth;
}

.catchup-progress-content-container.expanded {
	height: 95%;
	min-height: 11vh;
	overflow: overlay;
	align-self: start;
}

.catchup-progress-content {
	width: 90%;
	padding-inline: 1vh;
	background: white;
	grid-column: span 2;
	box-shadow: var(--box-shadow);
	border-radius: 2vh;
	justify-self: center;
	display: flex;
	align-items: center;
	max-height: 100%;
	min-height: 8vh;
	overflow: hidden;
	margin-top: 1vh;
	margin-bottom: 6vh;
	position: relative;
	transition: 0.4s;
	flex-shrink: 0;
	align-self: center;
	animation: fadeIn 1s;
}

.catchup-progress-content.expanded {
	margin-bottom: 1vh;
}

.catchup-progress-more {
	align-self: end;
	justify-self: center;
	grid-row: 3;
	grid-column: 1 / span 2;
	cursor: pointer;
}

.catchup-progress-add {
	align-self: end;
	padding-left: 2%;
	grid-row: 3;
	grid-column: 1;
	cursor: pointer;
}

.catchup-worries-full {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 1vh;
	background: var(--bg);
	grid-row: 1 / span 2;
	grid-column: 1 / span 3;
	box-shadow: var(--box-shadow);
	border-radius: 3vh;
	font-weight: bold;
}
.catchup-safer-full {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 1vh;
	background: var(--bg);
	grid-row: 1 / span 2;
	grid-column: 1 / span 3;
	box-shadow: var(--box-shadow);
	border-radius: 3vh;
	font-weight: bold;
}

.catchup-learning-full {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 1vh;
	background: var(--bg);
	grid-row: 1 / span 2;
	grid-column: 1 / span 3;
	box-shadow: var(--box-shadow);
	border-radius: 3vh;
	font-weight: bold;
}

.catchup-full-bubbles-container {
	width: 100%;
	padding-left: 10%;
	padding-top: 5%;
	padding-bottom: 15%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.catchup-full-bubble {
	background-image: url(img/Rectangle.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	padding: 5vh;
	display: flex;
	height: 10vh;
	width: 14vh;
	align-items: center;
	white-space: pre-wrap;
	justify-content: center;
	text-align: center;
	font-size: 2vh;
	font-weight: normal;
	position: relative;
}

.catchup-full-bubble.worry {
	filter: grayscale(1);
}

.catchup-full-bubble-text {
	min-width: 100%;
}

.catchup-new-bubble {
	position: absolute;
	left: 60%;
	top: 15%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	user-select: none;
	z-index: 5;
}

.catchup-new-bubble.worry {
	filter: invert(100%);
}

.catchup-bold-text {
	font-weight: bolder;
	font-size: normal;
	text-align: center;
	padding: 0px 10px 10px 10px;
}

.catchup-thin-text {
	width: 80%;
}

.catchup-return {
	align-self: center;
}

.catchup-learning-carousel {
	display: grid;
	width: 100%;
	height: 35vh;
}

.catchup-learning-container {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	overflow-x: scroll;
	scroll-behavior: smooth;
}

.catchup-learning-carousel-block {
	min-width: 12vh;
}

.catchup-learning-session {
	min-width: 30vh;
	padding-inline: 2vh;
	height: 100%;
}

.session-highlight {
	background: white;
	border-radius: 2vh;
	padding: 2vh;
	margin-top: 2vh;
	display: flex;
	font-weight: normal;
}

.catchup-goal-input {
	border: none;
	background: none;
	margin-bottom: 0rem;
	outline: none;
	width: 80%;
	align-self: center;
	padding-left: 2vh;
	font-weight: bold;
}

.check-box.newGoal {
	filter: opacity(0.4);
}

.catchup-goal-text {
	max-width: 75%;
	padding-left: 2vh;
	word-wrap: normal;
}

/* Catchup end */

/* Aims start */

.aims-container {
	display: grid;
	width: 100%;
	grid-auto-flow: column;
	column-gap: 1%;
	justify-items: center;
	align-self: center;
}

.aim-card {
	position: relative;
	display: grid;
	background-color: white;
	width: 100%;
	height: 40vh;
	box-shadow: 0px 4px 20px rgba(128, 127, 127, 0.4);
	grid-template-columns: 80% 20%;
	grid-template-rows: 70% 30%;
	border-radius: 5%;
	user-select: none;
}

.aim-card.passed {
	background-color: var(--bg);
}

.aim-img {
	grid-column: 1 / span 2;
	grid-row: 1;
	justify-self: center;
	align-self: center;
	width: 100%;
}

.aim-check {
	grid-row: 1;
	grid-column: 1;
	position: relative;
	left: 15%;
	top: 15%;
	width: 3vh !important;
	height: 3vh !important;
}

.aim-text {
	display: flex;
	flex-direction: column;
	font-size: smaller;
	padding-left: 5%;
	height: 100%;
	justify-content: space-between;
}

.aim-title {
	font-weight: bold;
}

.aim-index {
	align-self: baseline;
}

.goto-button {
	background: #e0e0e0;
	width: 30px;
	height: 30px;
	background-clip: content-box;
	border-radius: 50%;
	align-self: center;
	justify-self: right;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.2s;
	position: relative;
	right: 15%;
	cursor: pointer;
}

.goto-button:hover {
	background: #5ae3e3;
	transition: 0.2s;
}

.goto-button.current {
	background: #5ae3e3;
}

/* Aims end */

/* Activities start */

.activities-container {
	display: grid;
	width: 100%;
	grid-auto-flow: column;
	column-gap: 1%;
	justify-items: center;
	align-self: center;
}

.activities-card {
	position: relative;
	display: grid;
	background-color: white;
	width: 100%;
	height: 40vh;
	box-shadow: 0px 4px 20px rgba(128, 127, 127, 0.4);
	grid-template-columns: 80% 20%;
	grid-template-rows: 70% 30%;
	border-radius: 5%;
	user-select: none;
}

.activities-bookmark {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	font-size: 24px;
	transition: color 0.2s;
	background-clip: content-box;
	border-radius: 50%;
	width: 4vh;
	height: 4vh;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0.5vh;
	aspect-ratio: 1;
}

.activities-img {
	grid-column: 1 / span 2;
	grid-row: 1;
	justify-self: center;
	align-self: center;
}

.activities-text {
	display: flex;
	flex-direction: column;
	font-size: smaller;
	padding-left: 5%;
	height: 100%;
	justify-content: space-between;
}

.activities-title {
	font-weight: bold;
}

.activities-index {
	align-self: baseline;
}

.activities-button {
	background: #e0e0e0;
	width: 30px;
	height: 30px;
	background-clip: content-box;
	border-radius: 50%;
	align-self: center;
	justify-self: right;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.2s;
	position: relative;
	right: 15%;
}

.activities-button:hover {
	background: #5ae3e3;
	transition: 0.2s;
}

.activities-popup-container {
	top: -5vh;
	left: 0px;
	position: absolute;
	width: 100%;
	height: 100%;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.activities-popup {
	position: absolute;
	width: 60vw;
	height: 80vh;
	background: white;
	padding-inline: 1vw;
	padding-block: 1vh;
	border-radius: calc(1vw + 1vh);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: var(--box-shadow);
}

.activities-close {
	position: absolute;
	top: 1vh;
	right: 1vw;
	font-size: 5vh;
	cursor: pointer;
}

.activities-popup-text {
	width: 80%;
	word-wrap: normal;
	text-align: left;
	display: flex;
	align-items: center;
	white-space: pre-line;
}

.activities-popup-subtext {
	width: 80%;
	font-style: italic;
	word-wrap: normal;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	bottom: 0px;
}

/* Activities end */

/* Bubble examples start */
.bubble-examples-menu-container {
	position: fixed;
	left: 0;
	top: 35%;
}

.bubble-examples-menu {
	background: #e0e0e0;
	border-radius: 20px;
	box-shadow: 0px 4px 20px rgba(128, 127, 127, 0.4);
	width: 10vw;
	padding: 10px;
	margin-bottom: 20px;
}

.bubble-examples-name-button {
	width: 100%;
	background-color: #ccc;
}

.bubble-examples-thoughts-new-button {
	width: 15vw;
	height: 6vh;
	border-radius: 3vh;
	background: #5ae3e3;
	position: relative;
	align-items: center;
	display: flex;
}

.bubble-examples-hidden {
	opacity: 0.3;
}

.bubble-examples-container {
	position: relative;
	display: flex;
	height: 60vh;
	width: 120%;
	margin-left: 20%;
	align-self: center;
	flex-direction: column;
}

.bubble-examples-check {
	position: absolute;
	background-color: #00e7e5;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	user-select: none;
	z-index: 5;
}

.bubble-example {
	/* font-size: smaller !important; */
	/* font-weight: bold !important; */
}

/* Bubble examples end */

/* Summary start */

.summary-container {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.summary-path {
	background-image: url('img/wholepath.svg');
	background-size: cover;
	background-repeat: no-repeat;
	align-self: center;
	width: 120%;
	min-height: 20vh;
}

.summary-goal-list-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 3vh;
}

.summary-goal-container {
	display: flex;
}

.summary-goal {
	padding-left: 1vh;
}

.avatar.summary {
	width: 6rem;
	position: relative;
	left: 0%;
}

/* Summary end */

/* Text component starts */

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

.session-resume {
	position: fixed;
	bottom: 5vh;
}
.session-link {
	cursor: grab;
}

/* Text component ends */

/* Consent start */

.consentbox-container {
	display: grid;
	width: 100%;
	max-height: 60vh;
	border: 1px solid #bdbdbd;
	border-radius: 5%;
	grid-template-columns: 33% 33% 33%;
	grid-template-rows: 80% 20%;
	padding: 5%;
	align-self: center;
}

.consent-trust {
	padding-left: 2vw;
	padding-right: 2vw;
}

.consent-text {
	padding: 5%;
	background-clip: content-box;
	grid-column: 1 / span 3;
	grid-row: 1;
	overflow-y: scroll;
	overflow-block: scroll;
	font-size: 24px;
	mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);
}

.consent-text::-webkit-scrollbar {
	width: 5px;
	background-color: #d9d9d9;
	border-radius: 5px;
}

.consent-text::-webkit-scrollbar-thumb {
	width: 5px;
	background-color: #adadad;
	border-radius: 5px;
}

.consent-sub-text{
	z-index: 1;
}

.print-button {
	display: flex;
	width: 140px;
	height: 40px;
	justify-self: start;
	background: white;
	border-radius: 20px;
	align-self: end;
	align-items: center;
	justify-content: center;
	box-shadow: 0px 4px 20px rgba(128, 127, 127, 0.4);
	user-select: none;
}

.countersign {
	display: grid;
	width: 250px;
	height: 150px;
	background: white;
	border-radius: 20px;
	box-shadow: 0px 4px 20px rgba(128, 127, 127, 0.4);
	user-select: none;
	z-index: 15;
}

.countersign-name {
	width: 240px;
	margin: 5px;
	height: 40px;
	background: white;
	border-radius: 20px;
	user-select: none;
}

.countersign-role {
	width: 240px;
	margin: 5px;
	height: 40px;
	background: white;
	border-radius: 20px;
	user-select: none;
}

.countersign-date {
	width: 240px;
	margin: 5px;
	height: 40px;
	background: white;
	border-radius: 20px;
	user-select: none;
}

.consent-button {
	display: flex;
	width: 140px;
	height: 40px;
	justify-self: end;
	background: white;
	border-radius: 20px;
	align-self: end;
	align-items: center;
	justify-content: space-evenly;
	box-shadow: 0px 4px 20px rgba(128, 127, 127, 0.4);
	transition: 0.4s;
	pointer-events: all;
	user-select: none;
}

.consent-button:hover {
	background: #5ae3e3;
}

.consent-button.disabled {
	background-color: var(--bg);
	pointer-events: none;
}

/* Consent end */

/* info start */

.info-container {
	display: grid;
	width: 100%;
	max-height: 60vh;
	border: 1px solid #bdbdbd;
	border-radius: 5%;
	grid-template-columns: 50% 50%;
	grid-template-rows: 90% 10%;
	padding: 5%;
	align-self: center;
}

.info-text {
	padding: 5%;
	background-clip: content-box;
	grid-column: 1 / span 2;
	grid-row: 1;
	overflow-y: scroll;
	overflow-block: scroll;
	font-size: 24px;
	mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);
}

.info-text::-webkit-scrollbar {
	width: 5px;
	background-color: #d9d9d9;
	border-radius: 5px;
}

.info-text::-webkit-scrollbar-thumb {
	width: 5px;
	background-color: #adadad;
	border-radius: 5px;
}
/* info end */

/* setName start */

.set-name-container {
	display: flex;
	flex-direction: column;
	align-self: center;
	align-items: center;
	padding-top: 15%;
	width: 80%;
}

.heading-container {
	align-items: center;
	text-align: center;
	font-weight: bold;
}

.set-name-input {
	width: 100%;
	border: none;
	overflow: visible;
	height: 30px;
}

.set-name-underline {
	height: 5px;
	width: 100%;
	background-color: #bdbdbd;
}

.set-name-button {
	border-radius: 50%;
	display: flex;
	width: 50px;
	height: 50px;
	background: white;
	text-align: center;
	align-self: flex-end;
	justify-content: center;
	align-items: center;
	position: relative;
	user-select: none;
	top: 10px;
}

/* setName end */

/* Module generic start */

.section-title {
	text-align: center;
	font-size: 4.63vh;
	margin: 5vh 5vh 5vh 5vh;
}

.section-component {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.nav-button {
	z-index: 3;
	display: flex;
	justify-content: center;
	align-items: center;
	background: white;
	height: 7vh;
	min-width: 15vh;
	max-width: 35vh;
	border-radius: 5vh;
	color: black;
	position: fixed;
	transition: 0.4s;
	box-shadow: 0px 4px 20px rgba(128, 127, 127, 0.1), 4px 0px 20px rgba(128, 127, 127, 0.05);
	user-select: none;
	white-space: nowrap;
}

.nav-button:hover {
	filter: brightness(0.8);
	box-shadow: 0px 4px 20px rgba(128, 127, 127, 0.6), 4px 0px 20px rgba(128, 127, 127, 0.1);
	cursor: pointer;
}

.nav-button.next {
	bottom: 5%;
	right: 3%;
}

.nav-button.prev {
	bottom: 5%;
	left: 3%;
	background: none !important;
	box-shadow: none !important;
}

.nav-icon {
	font-size: inherit;
}

.nav-icon:hover {
	color: black;
}

.nav-back {
	background-color: #efefef;
	box-shadow: 0px 4px 20px rgba(128, 127, 127, 0.4);
	color: black;
	border-radius: 20px;
	padding-left: 40px;
	padding-right: 40px;
	font-weight: bold;
	position: relative;
	left: -10%;
}

.check-box {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 5vh;
	height: 5vh;
	background: #e0e0e0;
	border-radius: 50%;
	border: #ababab solid 0.5vh;
	box-shadow: 0px 4px 20px rgba(128, 127, 127, 0.4);
}

.check-box.checked {
	background: #5ae3e3;
}

.consent-check-box {
	width: 2.5vh;
	height: 2.5vh;
	border: #ababab solid 0.35vh;
}

/* Module Generic end */

/* Avatar Start */

.part-container {
	display: grid;
	justify-content: space-evenly;
	align-items: center;
	grid-template-columns: 20% 60% 20%;
	justify-items: center;
	grid-template-rows: 35% 16% 35%;
}

.avatar-head {
	margin-left: 5px;
}
.avatar-body {
	z-index: 1;
	margin-left: 8px;
}

.avatar-legs {
}

.avatar-button {
	display: flex;
	background-color: #00e7e5;
	width: 100px;
	height: 50px;
	border-radius: 50px;
	align-items: center;
	justify-content: center;
	user-select: none;
	transition: 0.4s;
}

.ava-btn.selected,
.ava-btn:focus {
	border: 2px solid #007bff;
	border-radius: 50%;
	transition: border-color 0.3s ease;
	filter: none;
}

.ava-btn:enabled:hover {
	border-radius: 50%;
	transition: border-color 0.3s ease;
	filter: none;
}

.avatar-button-container {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
}

.ava-btn {
	margin: 10px;
	border: none;
	width: fit-content;
	padding: 20px;
}

.skin1 {
	background-color: #f1c1a3;
}

.skin2 {
	background-color: #c3976a;
}

.skin3 {
	background-color: #8d6443;
}

.skin4 {
	background-color: #623a17;
}

.skin5 {
	background-color: #321f10;
}

/* Avatar End */

/* Connect Start */

.connect-container {
	display: grid;
	grid-template-columns: 33% 33% 33%;
	column-gap: 1%;
	justify-items: center;
	align-items: center;
	text-align: center;
}

.code-container {
	display: flex;
}

.code-char {
	font-size: larger;
	overflow: visible;
	width: 2ch;
	height: 5px;
	vertical-align: bottom;
	padding: 5px;
	background-clip: content-box;
	text-align: center;
}

.code-decorate {
	background-color: #d3d3d3;
	width: 2ch;
	height: 5px;
}

.step-container {
	align-self: normal;
}

.connect-instructions {
	font-size: 10px;
}

.connecting-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	height: 70vh;
}

.connected-container {
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	justify-content: space-around;
}

/* Connect End */

/* image start */

.image-bubble {
	background-image: url('img/Rectangle.png');
	background-size: contain;
	background-repeat: no-repeat;
	width: 5vh;
	aspect-ratio: 1;
}

.images-container {
	display: grid;
	grid-template-rows: repeat(2, min-content);
	grid-auto-flow: column;
	grid-gap: 10px;
}

.consent-images-container {
	display: flex !important;
}

.image-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.image-container > img {
	max-width: 80%;
	max-height: 80%;
}

.max-10 {
	max-height: 10%;
	max-width: 10%;
}

.max-20 {
	max-height: 20%;
	max-width: 20%;
}

.max-30 {
	max-height: 30%;
	max-width: 30%;
}

.max-40 {
	max-height: 40%;
	max-width: 40%;
}

.max-50 {
	max-height: 50%;
	max-width: 50%;
}

.max-60 {
	max-height: 60%;
	max-width: 60%;
}

.max-70 {
	max-height: 70%;
	max-width: 70%;
}

.max-80 {
	max-height: 80%;
	max-width: 80%;
}

.max-90 {
	max-height: 90%;
	max-width: 90%;
}

.max-100 {
	max-height: 100%;
	max-width: 100%;
}

.videos-image {
	max-width: 85% !important;
	max-height: 85% !important;
}

.images-container-vertical {
	display: grid;
	grid-template-rows: repeat(auto-fill, min-content);
	grid-template-columns: 100%;
	grid-auto-flow: row;
	grid-gap: 10px;
}

.textContainer {
	justify-content: center;
	height: 1vh;
}

.images-popup {
	height: 70%;
}

.open-images-popup {
	cursor: pointer;
	text-decoration: underline;
}

.popup-image-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup-image-container > img {
	max-width: 100%;
	max-height: 100%;
}

.popup-toggle {
	cursor: pointer;
	text-decoration: underline;
}

/* image end */

/* bubbleSlider start */

.bubble-slider-wrapper {
	background-color: #ffffff;
	padding: 2%;
	border-radius: 20px;
}

.bubble-slider-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.bubble-slider-bubbles-container {
	display: flex;
	width: 100%;
	justify-content: space-around;
	align-items: center;
	height: 300px;
}

.bubble-slider-bubble {
	width: 100px;
	position: relative;
	border-radius: 50%;
	background-image: url('img/Rectangle.png');
	background-repeat: no-repeat;
	background-size: contain;
}

.bubble-slider-skip {
	position: absolute;
	bottom: 5vh;
	left: 48%;
}

/* bubbleSlider end */

/* speed start */

.speed-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.speed-bubble-container {
	display: flex;
	position: relative;
	align-items: center;
}

.speed-bubble {
	background-image: url('img/Rectangle.png');
	background-size: contain;
	background-repeat: no-repeat;
	align-self: center;
	filter: grayscale(1);
	width: 20vw;
	aspect-ratio: 1;
	max-height: 80vh;
}

.speed-bubble-slider {
	position: absolute;
	display: flex;
	align-items: center;
	width: 100%;
}

.speed-bubble-marker {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	filter: grayscale(0);
	background: #5ae3e3;
	background-image: url('img/bubble-icon.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 3vw;
	width: 4vw;
	aspect-ratio: 1;
	border-radius: 50%;
	transform: translate(-2vw, 0px);
	cursor: pointer;
}

/* speed end */

/* Game start */

.game-container {
	display: grid;
	align-items: center;
	justify-items: center;
	justify-content: center;
	grid-template-columns: 15% 80% 15%;
	grid-template-rows: 90% 10%;
}

.game-background {
	width: 100%;
	grid-column: 2;
	grid-row: 1;
}

.game-scene-right {
	width: 100%;
	grid-column: 3;
	grid-row: 1;
}

.game-scene-left {
	width: 100%;
	grid-column: 1;
	grid-row: 1;
}

.game-scene-bottom {
	width: 100%;
	grid-column: 1 / span 3;
	grid-row: 2;
}

.game-scene-background {
	width: 100%;
	grid-column: 2;
	grid-row: 1;
	z-index: 2 !important;
}

.game-screen-right {
	position: absolute;
	right: 0px;
	top: 15vh;
	width: 20vw;
	font-size: 1.5vw;
	z-index: 3;
}

.game-screen-left {
	position: absolute;
	left: 0px;
	top: 15vh;
	width: 20vw;
	font-size: 1.5vw;
}

.game-screen-bottom {
	position: absolute;
	width: 70%;
	height: 20vh;
	align-self: center;
	bottom: 0px;
	z-index: 3;
}

.game-response {
	height: 90%;
	width: 90%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-bottom: 1vh;
	border-radius: 1vh;
}

.game-response-title {
	font-weight: bold;
}

.game-response-text {
	text-align: center;
}

.game-choice {
	display: flex;
	align-items: center;
	max-height: 4vh;
	background: white;
	border-radius: 1vw;
	padding: 1vw;
	margin: 1vw;
}

.game-scene-object {
	max-width: 100%;
	width: 100%;
	overflow: hidden;
	transition: 0.3s;
	animation: fadeIn 0.3s;
}

.game-scene-object.fade-out {
	animation: fadeOut 0.3s;
}

.game-scene-image {
	width: 100%;
}

/* Game end */

/* Slider start */

.slider-container {
	padding: 5vh;
	width: 100%;
	display: grid;
	grid-template-columns: 15% 70% 15%;
	justify-items: center;
	align-items: center;
}

.slider-indicator {
}

.slider-indicator.left {
	grid-row: 1;
	grid-column: 1;
}

.slider-indicator.right {
	grid-row: 1;
	grid-column: 3;
}

.slider-indicator-text {
	position: relative;
	top: 25px;
}

.slider-indicator-text.left {
	grid-row: 1;
	grid-column: 2;
}

.slider-indicator-text.right {
	grid-row: 1;
	grid-column: 2;
}

.slider-bar {
	background: linear-gradient(to right, #5ae3e3 50%, #d9d9d9 50%);
	width: 100%;
	height: 6px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: relative;
	background-clip: content-box;
	margin-block: 3vh;
	grid-column: 2;
	grid-row: 1;
	border-radius: 3rem;
	z-index: 1;
}

.slider-bar.background {
	position: relative;
	background-color: #999999;
	z-index: 0;
}

.slider-marker {
	display: flex;
	background-color: #5ae3e3;
	width: 3vh;
	height: 3vh;
	position: relative;
	grid-column: 2;
	grid-row: 1;
	border-radius: 50%;
	border: 5px solid #5ae3e3;
	align-self: center;
	justify-content: center;
	z-index: 3;
}

.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: #5ae3e3;
	flex-direction: column;
	align-items: center;
	min-width: 5vw;
	height: 3vh;
	border-radius: 6vh;
}

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

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

/* Slider 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(216, 137, 138);
	--toast-border-col: rgb(208, 97, 97);
}

.toast.success {
	--toast-bg: #5ae3e3;
	--toast-border-col: #52d1d1;
}

.toast.warn {
	--toast-bg: rgb(213, 216, 137);
	--toast-border-col: rgb(201, 208, 97);
}

.toast.info {
	--toast-bg: rgb(137, 216, 215);
	--toast-border-col: rgb(97, 195, 208);
}

/* Toast end */

/* ZXCVBN Password checker start */

.zxcvbn-check {
	width: 60%;
	border: 1px solid #ced4da;
	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 */

/* Notes start */

.notes-container {
	display: flex;
	align-self: center;
	height: 40vh;
}

.note-container {
	width: 60%;
	/* box-shadow: var(--box-shadow); */
	border: 1px solid #ccc;
	margin: 2vh;
	border-radius: 2vh;
	padding: 1vh;
	display: flex;
	flex-direction: column;
}

.single-note-container {
	display: flex;
	width: 150%;
	align-self: right;
	height: 40vh;
}

.single-note-add {
	display: flex;
	align-items: end;
	justify-content: end;
	align-self: flex-end;
	margin-block-start: auto;
}

.note-audio {
	box-shadow: var(--box-shadow);
	border-radius: 5vh;
}

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

.note-voice-container {
	display: flex;
	align-items: end;
	justify-content: end;
	align-self: flex-end;
	margin-block-start: auto;
}

.note-voice-button {
	position: relative;
	right: 5px;
	bottom: 30px;
	border: 0.5vh solid var(--bg);
	border-radius: 50%;
	width: 5vh;
	height: 5vh;
	padding: 0.5vh;
	transition: 0.2s;
	cursor: pointer;
}

.note-voice-button.recording {
	border: 0.5vh solid red;
}

.note-text-button {
	background: white;
	box-shadow: var(--box-shadow);
	width: 17vh;
	padding-block: 1vh;
	border-radius: 4vh;
	cursor: pointer;
	padding-inline: 2vh;
}

#note-box {
	resize: none;
	outline: none;
	border: none;
	background: none;
	width: 100%;
	min-height: 10vh;
	margin: 1em;
	overflow: hidden;
}

.recent-notes-container {
	min-height: 30%;
	overflow-x: hidden;
	z-index: 10;
	padding: 1vw;
}

.recent-note-container {
	width: 100%;
	padding-inline: 1vw;
	display: flex;
	padding: 1vh;
	align-items: center;
}
.recent-note-text {
	padding-left: 1vw;
	padding-right: 1vw;
	padding-block: 0.5rem;
}

.notes-title {
	text-align: center;
}

.notes-text {
	max-width: 100%;
	white-space: pre-line;
}
.notes-insert {
	background-color: #999999;
	border-radius: 100%;
	width: 24px;
	height: 24px;
	text-align: center;
}
.notes-checkbox {
	background-color: #999999;
	border-radius: 100%;
	border: 1px solid #444;
	width: 24px;
	height: 24px;
	text-align: center;
}

/* Notes end */

/* Notepad start */
.notepad-text {
	max-width: 100%;
	white-space: pre-line;
}
.notepad-insert {
	background-color: #f0f0f0;
	border: 1px solid #444;
	border-radius: 100%;
	width: 24px;
	height: 24px;
	text-align: center;
}
.notepad-checkbox {
	background-color: #999999;
	border-radius: 100%;
	border: 1px solid #444;
	width: 24px;
	height: 24px;
	text-align: center;
}
/* Notepad end */

/* goals start */

.goals-container {
	width: 40%;
	/* box-shadow: var(--box-shadow); */
	border: 1px solid #ccc;
	margin: 2vh;
	padding: 1vh;
	display: flex;
	flex-direction: column;
	border-radius: 2vh;
}

.goals-list {
	padding: 1vw;
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
}

.goals-list::-webkit-scrollbar {
	width: 5px;
	background-color: #adadad;
	border-radius: 5px;
}

.new-goal-container {
	display: flex;
	justify-content: space-between;
}

.main-goal-container {
	width: 90%;
	background-color: #ffffff;
	margin: 2vh;
	border-radius: 0.5vh;
	display: flex;
	flex-direction: column;
	padding: 1vh;
}

.tasks-container {
	padding: 1vh;
	width: 90%;
	border: 1px solid #ccc;
	margin: 2vh;
	border-radius: 2vh;
	display: flex;
	flex-direction: column;
}

.new-goal-input {
	margin-left: 3%;
	margin-right: 3%;
	width: 94%;
	background-color: var(--bg);
	outline: none;
}

.new-goal-add {
	background-color: #999999;
	border-radius: 100%;
	width: 24px;
	height: 24px;
	text-align: center;
}

/* GoalScore start */
/* goal-score-container */

.goal-score-text {
	display: grid;
	grid-template-columns: 35% 35% 30%;
	justify-content: center;
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	grid-auto-rows: 60px;
	position: relative;
	top: 40px;
}

.goal-score-buttons {
	display: grid;
	grid-template-columns: repeat(11, 9%);
	justify-content: center;
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	grid-auto-rows: 60px;
	position: relative;
	top: 40px;
}

.goal-score-button {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	border-radius: 12px;
	user-select: none;
	cursor: pointer;
	box-shadow: 0px 4px 20px rgba(128, 127, 127, 0.1);
	transition: 0.2s;
}

.goal-score-button:hover {
	background-color: #ababab;
	transition: 0.2s;
}

.goal-score-button.selected {
	background-color: #5ae3e3;
	transition: 0.2s;
}

.goal-score-button.disabled {
	background-color: var(--bg);
	color: #666;
	transition: 0.2s;
}

.goal-text-container {
	text-align: center;
}

/* GoalScore end */

/* GoalPartial start */

.goal-container {
	width: 100%;
	padding-inline: 1vw;
	display: flex;
	padding: 1vh;
	align-items: center;
}

.goal-text {
	padding-left: 1vw;
	padding-right: 1vw;
	padding-block: 0.5rem;
	width: 85%;
}

.goal-new-button {
	align-self: end;
	margin-bottom: auto;
	color: gray;
	justify-content: center;
}

.goal-partial-input {
	outline: none;
	border: none;
	padding-left: 1vw;
	margin-bottom: 0px;
}

.goal-partial-container {
	padding-left: 25%;
}

#goal-box {
	resize: none;
	outline: none;
	border: none;
	background: none;
	width: 100%;
	min-height: 10vh;
	margin: 1em;
	overflow: hidden;
}

/* GoalPartial end */

/* Goal module page start */

.goal-input-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.goal-input {
	outline: none;
	border: none;
	width: 10vw;
	text-align: center;
}

.goal-input-disabled {
	outline: none;
	border: none;
	text-align: center;
}

.goal-input.expanded {
	width: 100%;
}

.input-icon:hover {
	color: black;
}

.goal-community-button {
	position: absolute;
	display: flex;
	align-self: center;
	width: fit-content;
	align-items: center;
	justify-content: center;
	background: white;
	padding-inline: 3vw;
	padding-block: 1vh;
	border-radius: 3vw;
	box-shadow: var(--box-shadow);
	bottom: 20vh;
	font-weight: bold;
	cursor: pointer;
}

.goal-community-popup-container {
	top: 0px;
	left: 0px;
	position: absolute;
	width: 100%;
	height: 100%;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.goal-community-popup {
	position: absolute;
	width: 50vw;
	top: 5vh;
	/* height: 140vh; */
	background: white;
	padding-inline: 1vw;
	padding-block: 1vh;
	border-radius: calc(1vw + 1vh);
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: var(--box-shadow);
}

.goal-community-close {
	position: absolute;
	top: 1vh;
	right: 1vw;
	font-size: 5vh;
	cursor: pointer;
}

.community-goal-container {
	display: flex;
	padding-block: 2vh;
	width: 100%;
	justify-content: center;
	cursor: pointer;
	border-radius: 1vh;
	user-select: none;
}

.community-goal-container:hover {
	background: rgba(0, 0, 0, 0.1);
}

.community-goal-check {
	width: 1.5vw;
	height: 1.5vw;
	background: #ccc;
	aspect-ratio: 1;
	border-radius: 50%;
	margin-right: 1vw;
	margin-top: 0.75vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.community-goal-check.selected {
	background: #5ae3e3;
}

.goal-check-icon {
	display: none;
}

.goal-check-icon.selected {
	display: flex;
}

.goal-close-icon {
	display: none;
}

.goal-close-icon.selected {
	display: flex;
}

.community-goal-text {
	font-weight: bold;
	width: 35vw;
	word-wrap: normal;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Goal module page end */

/* goals end */

/* Complete start */

.complete-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.complete-confetti {
	position: relative;
	width: 50vw;
	height: 50vh;
	top: 0%;
	background-image: url('img/confetti.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	display: flex;
	align-items: center;
	justify-content: center;
}

.canvas-confetti {
	height: 0px;
	width: 0px;
}

.complete-text {
	font-weight: bold;
	font-size: x-large;
	text-align: center;
	width: 30vw;
}

.complete-bubble {
}

.complete-tips {
}

.complete-goal-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.complete-goal {
	background: white;
	border-radius: 1vh;
	margin-top: 1vh;
	height: 8vh;
	width: 40vw;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: var(--box-shadow);
	font-weight: bold;
	max-width: -webkit-fill-available;
	max-width: stretch;
	max-width: -moz-available;
	overflow: overlay;
}

.complete-goal::-webkit-scrollbar {
	display: none;
}

.complete-goal > * {
	margin-inline: 1vw;
}

.complete-print {
	margin-left: auto;
	margin-right: auto;
	margin-top: 2vh;
	width: 20vw;
	border-radius: 40px;
}
/* Complete end */

/* Learning card start */

.learning-card-background {
	background: linear-gradient(
		to bottom right,
		rgba(198, 181, 239, 0.2),
		rgba(211, 205, 185, 0.2),
		rgba(130, 221, 247, 0.2),
		rgba(164, 217, 242, 0.2),
		rgba(240, 218, 133, 0.2)
	);
	border-radius: 2vh;
	padding: 1%;
}

.learning-card-container {
	background-color: white;
	width: 100%;
	display: flex;
	flex-direction: column;
	height: fit-content;
	padding-block: 10vh;
	border-radius: 2vh;
	align-items: center;
	font-weight: bold;
}

.learning-card-icon {
	font-size: 7vh;
}

.learning-card-text {
	margin-top: 1vh;
	font-size: 5vh;
	padding-inline: 5vw;
	text-align: center;
}

.learning-card-sub-text {
	margin-top: 1vh;
	font-size: 5vh;
	padding-inline: 5vw;
	text-align: center;
	font-weight: normal;
	font-size: larger;
}

.learning-card-image-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.learning-card-image-container > img {
	max-height: 25vh;
}

.learning-card-tips-container {
	height: 25vh;
}

.learning-card-triggers-container {
	width: 100%;
}

.learning-card-trigger-input {
	margin-left: 3%;
	margin-right: 3%;
	width: 94%;
	background-color: var(--bg);
	outline: none;
}

/* Learning card end */

/* Qualities start */
.qualities-background {
	background: linear-gradient(
		to bottom right,
		rgba(198, 181, 239, 0.2),
		rgba(211, 205, 185, 0.2),
		rgba(130, 221, 247, 0.2),
		rgba(164, 217, 242, 0.2),
		rgba(240, 218, 133, 0.2)
	);
	border-radius: 2vh;
	padding: 1%;
}

.qualities-container {
	background-color: white;
	width: 100%;
	display: flex;
	flex-direction: column;
	height: fit-content;
	padding-block: 5vh;
	border-radius: 2vh;
	align-items: center;
	font-weight: bold;
}

.qualities-icon {
	font-size: 5vh;
}

.qualities-list-container {
	width: 95%;
}

.qualities-list {
	font-size: 2vh;
	list-style-type: none;
}

.qualities-help {
	font-size: 2vh;
	font-weight: normal;
	text-align: center;
}

.qualities-text {
	margin-top: 1vh;
	font-size: 5vh;
	padding-inline: 5vw;
	text-align: center;
}

.qualities-subtext {
	margin-top: 1vh;
	font-size: 3vh;
	padding-inline: 5vw;
	text-align: center;
	font-weight: normal;
}

.qualities-text-input {
	width: 100%;
	font-size: 2vh;
	background: none;
	outline: none;
	border: none;
	margin-bottom: unset;
}

.qualities-community-button {
	position: fixed;
	display: flex;
	align-self: center;
	width: fit-content;
	align-items: center;
	justify-content: center;
	background: white;
	padding-inline: 3vw;
	padding-block: 1vh;
	border-radius: 3vw;
	box-shadow: var(--box-shadow);
	bottom: 5vh;
	font-weight: bold;
	cursor: pointer;
}

.qualities-community-popup-container {
	top: 0px;
	left: 0px;
	position: absolute;
	width: 100%;
	height: 100%;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qualities-community-popup {
	position: absolute;
	width: 50vw;
	height: 70vh;
	background: white;
	padding-inline: 1vw;
	padding-block: 1vh;
	border-radius: calc(1vw + 1vh);
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: scroll;
	box-shadow: var(--box-shadow);
}

.qualities-community-close {
	position: absolute;
	top: 1vh;
	right: 1vw;
	font-size: 5vh;
	cursor: pointer;
}

.community-qualities-container {
	display: flex;
	padding-block: 2vh;
	width: 100%;
	justify-content: center;
	cursor: pointer;
	border-radius: 1vh;
	user-select: none;
}

.community-qualities-container:hover {
	background: rgba(0, 0, 0, 0.1);
}

.community-qualities-check {
	width: 3vw;
	background: #ccc;
	aspect-ratio: 1;
	border-radius: 50%;
	margin-right: 1vw;
	display: flex;
	align-items: center;
	justify-content: center;
}

.community-qualities-check.selected {
	background: #5ae3e3;
}

.qualities-check-icon {
	display: none;
}

.qualities-check-icon.selected {
	display: flex;
}

.qualities-close-icon {
	display: none;
}

.qualities-close-icon.selected {
	display: flex;
}

.community-qualities-text {
	font-weight: bold;
	width: 35vw;
	word-wrap: normal;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quality-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}

.quality-text {
	flex-grow: 1;
	font-size: 16px;
	padding-right: 10px;
}

.quality-actions {
	display: flex;
	gap: 10px;
	margin-right: 50px;
}

.quality-actions button {
	display: flex;
	align-items: center;
	gap: 5px;
	border: #212121;
	padding: 5px 10px;
	font-size: 14px;
	cursor: pointer;
}

.delete-quality {
	background-color: transparent;
	color: #212121;
}

.delete-quality:hover {
	background-color: #5ae3e3;
	color: black;
}

.delete-quality i {
	font-size: 16px;
	color: inherit;
	pointer-events: none;
}

/* Qualities end */

/*  Others start */

.others-container {
	position: absolute;
	bottom: 15vh;
	left: 3vw;
	background: #5ae3e3;
	border-radius: 3vh;
	padding-block: 1vh;
	padding-inline: 1vw;
	padding-right: 3vw;
	box-shadow: var(--box-shadow);
	cursor: pointer;
	z-index: 16;
}

.others-container.expanded {
	background: white;
	cursor: unset;
}

.others-button {
	height: 4vh;
	font-size: 2vh;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

.others-content-container {
}

.others-expand-toggle {
	position: absolute;
	right: 1vw;
	top: 2vh;
	cursor: pointer;
}

.others-content {
	display: flex;
	flex-direction: column;
}

.others-row {
	display: flex;
	flex-direction: row;
}

.others-profile {
	display: flex;
	flex-direction: column;
	width: 5vw;
}

.others-profile-img {
	align-self: center;
	width: 4vw;
}

.others-profile-name {
	align-self: center;
	text-align: center;
	font-size: 1.5vh;
	font-weight: bold;
}

.others-quotes {
	display: flex;
	flex-direction: column;
	width: 25vw;
	font-size: 2vh;
}

.others-quotes > * {
	margin-bottom: 1vh;
	padding-left: 1vw;
	border-radius: 2vh;
	height: 6vh;
	display: flex;
	align-items: center;
}

.others-quotes-top {
	font-size: small;
	background: var(--accent-bg-light);
}

.others-quotes-bottom {
	font-size: small;
	background: var(--accent-bg-lighter);
	margin-bottom: 3vh;
}

.others-footer {
	padding: 20px;
	font-size: 14px;
	font-weight: 700;
}

/* Others end */

/* tips start */

.tips-container {
	width: 100%;
	display: flex;
	justify-content: center;
	position: relative;
	animation: fadeIn 1s;
}

.tip-container {
	width: 25vw;
	height: 25vh;
	background: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	border-radius: 1vh;
	box-shadow: var(--box-shadow);
	transition: 0.4s;
	animation: fadeIn 0.4s;
}

.tip-bookmark {
	cursor: pointer;
	position: absolute;
	top: 1vh;
	right: 1vw;
	user-select: none;
}

.tip-bookmark-active {
	z-index: 15;
}

.tip-icon-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 6vh;
	width: 100%;
	padding-block: 2vh;
	margin-top: 2vh;
	user-select: none;
	pointer-events: none;
}

.tip-icon {
	position: absolute;
}

.tip-icon-label {
	position: absolute;
	font-variant: all-small-caps;
	font-size: 2.2vh;
	top: 8vh;
	text-align: center;
}

.tip-text {
	overflow: hidden;
	margin-top: 3vh;
	padding-inline: 1vw;
	height: 14vh;
	width: 80%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 3vh;
}

.tip-cycle {
	position: absolute;
	align-self: flex-start;
	bottom: 1vh;
	left: 1vw;
	background-color: #5ae3e3;
	width: 5vh;
	aspect-ratio: 1;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tip-check {
	position: absolute;
	align-self: flex-end;
	bottom: 1vh;
	right: 1vw;
	background-color: #5ae3e3;
	width: 5vh;
	aspect-ratio: 1;
	display: flex;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.tips-deck-button-container {
	position: absolute;
	bottom: 2vh;
	left: 45%;
}

.tips-deck-container {
	position: absolute;
	top: 0;
	left: 0;
	padding-left: 8%;
	padding-right: 8%;
	padding-top: 3%;
	padding-bottom: 3%;
	background-color: #f1f1f1;
}

.tips-deck-close {
	position: relative;
	font-size: 5vh;
	cursor: pointer;
	float: right;
}

.tips-deck-nav {
	margin-left: 10%;
}

/* tips end */

/*  Deck start */

.deck-container {
	align-self: center;
	display: grid;
	grid-template-columns: 20vw 20vw 20vw 20vw;
	column-gap: 1vw;
	row-gap: 2vh;
}

.deck-tip {
	position: relative;
	background: white;
	border-radius: 1vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 35vh;
}

.deck-locked-text {
	color: #ddd;
}

.deck-locked-fade {
	opacity: 0.45;
}

.deck-print {
	margin-top: 2vh;
	align-self: center;
	text-align: center;
	background-color: #5ae3e3;
	border-radius: calc(2vw + 1vh);
	padding-block: 1vh;
	padding-inline: 2vw;
	font-weight: bold;
	width: 10%;
	margin-left: 35%;
}

.deck-text-container {
	text-align: center;
	margin-left: -17%;
}

.deck-tip-text {
	overflow: hidden;
	margin-top: 3vh;
	padding-inline: 1vw;
	height: 14vh;
	width: 80%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 1.5vh;
}

/* Deck end */

/* thoughts start */
.thoughts-container {
	position: relative;
	display: flex;
	height: 60vh;
	width: 120%;
	align-self: center;
	flex-direction: column;
}

.thoughts-new-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.thoughts-new-button {
	width: 20vw;
	height: 6vh;
	border-radius: 3vh;
	background: #5ae3e3;
	position: relative;
	align-items: center;
	display: flex;
}

.thoughts-plus-icon {
	margin-left: 1vw;
}

.thoughts-input {
	height: 6vh;
	background: #5ae3e3;
	outline: none;
	border: none;
	margin-bottom: 0px;
	width: -webkit-fill-available;
	width: stretch;
	width: -moz-available;
	margin-right: 5vw;
}

.thought-community-button {
	top: 0vh;
	position: relative;
	width: fit-content;
	align-items: center;
	justify-content: center;
	background: white;
	padding-inline: 3vw;
	padding-block: 1vh;
	border-radius: 3vw;
	box-shadow: var(--box-shadow);
	left: 0vw;
	bottom: 0vh;
	font-weight: bold;
	cursor: pointer;
}

.thought-community-popup-container {
	top: 0vh;
	left: 0vw;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.2);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 16;
}

.thought-community-popup {
	position: absolute;
	width: 50vw;
	height: 80%;
	background: white;
	overflow-y: scroll;
	padding-inline: 1vw;
	padding-block: 1vh;
	border-radius: calc(1vw + 1vh);
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: var(--box-shadow);
}

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

.thought-community-close {
	position: absolute;
	top: 1vh;
	right: 1vw;
	font-size: 5vh;
	cursor: pointer;
}

.community-thought-container {
	display: flex;
	padding-block: 2vh;
	width: 100%;
	justify-content: center;
	cursor: pointer;
	border-radius: 1vh;
	user-select: none;
}

.community-thought-container:hover {
	background: rgba(0, 0, 0, 0.1);
}

.community-thought-text {
	font-weight: bold;
	width: 35vw;
	word-wrap: normal;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*  worries start */

.worries-subtext {
	align-self: center;
	margin-bottom: 5vh;
}

.worries-bubble {
	position: absolute;
	aspect-ratio: 1;
	max-width: 15vw;
	min-width: 5vw;
	background-image: url('img/Rectangle.png');
	background-repeat: no-repeat;
	background-size: contain;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	filter: grayscale(1);
	user-select: none;
	transition: 1s;
}

.safe-bubble {
	position: absolute;
	aspect-ratio: 1;
	max-width: 15vw;
	min-width: 5vw;
	background-image: url('img/Rectangle.png');
	background-repeat: no-repeat;
	background-size: contain;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	user-select: none;
	transition: 1s;
}

.bubble-text {
	cursor: pointer;
	width: 95%;
	word-wrap: break-word;
}

.shimmer-bubble {
	--shimmer-speed: 0.5;
	--shimmer-loop: infinite;
	--shimmer-progress: 100;
	position: absolute;
	top: 0px;
	border-radius: 50%;
	width: 100%;
	aspect-ratio: 1;
	transition: 0.2s;
	background: radial-gradient(
		circle at 100%,
		rgba(0, 0, 0, 0),
		rgba(0, 0, 0, 0) calc(var(--shimmer-progress) * 1%),
		#eee calc(10% + var(--shimmer-progress) * 1%),
		rgba(0, 0, 0, 0) calc(20% + var(--shimmer-progress) * 1%)
	);
	background-repeat: no-repeat;
	background-position-x: 0vw;
	animation: shimmer calc(var(--shimmer-speed) * 1s) var(--shimmer-loop);
}

.spinning-bubble {
	--shimmer-speed: 0.5;
	--shimmer-loop: infinite;
	--shimmer-progress: 100;
	position: absolute;
	top: 0px;
	border-radius: 50%;
	width: 100%;
	aspect-ratio: 1;
	transition: 0.2s;
	background-repeat: no-repeat;
	background-position-x: 0vw;
	animation: shimmer calc(var(--shimmer-speed) * 1s) var(--shimmer-loop);
}

/* worries end */

/* view tips start */

.view-tips-container {
	margin-top: 12vh;
	display: flex;
	align-self: center;
}

.view-tip-container {
	height: 50vh;
	width: 120%;
	display: flex;
	flex-direction: column;
}

.view-tip-card {
	position: relative;
	background-color: white;
	border-radius: 2vh;
	width: 8vw;
	height: 40vh;
	padding-inline: 1vw;
	margin-inline: 1vw;
	display: grid;
	grid-template-rows: 15vh 8vh 7vh 12vh;
	border: solid white 2px;
}

.view-tip-card.selected {
	border: solid #5ae3e3 2px;
}

.view-tip-edit {
	position: absolute;
	top: 1vh;
	left: 1vw;
	user-select: none;
}

.view-tip-bookmark {
	position: absolute;
	top: 1vh;
	right: 1vw;
	user-select: none;
}

.view-tip-icon {
	grid-row: 2;
	user-select: none;
}

.view-tip-type {
	grid-row: 3;
	font-size: 2vh;
	font-variant-caps: all-small-caps;
	user-select: none;
	line-height: 1em;
}

.view-tip-text {
	grid-row: 4;
	font-size: 1.8vh;
	overflow-y: scroll;
	line-height: 1em;
}

.view-tip-text::-webkit-scrollbar {
	display: none;
}

.view-tip-select {
	background: #ccc;
	width: 2.5vw;
	aspect-ratio: 1;
	border-radius: 50%;
	align-self: center;
	margin-top: 3vh;
}

.view-tip-select.selected {
	background: #5ae3e3;
}

.view-tips-print {
	margin-top: 2vh;
	align-self: center;
	background-color: #5ae3e3;
	border-radius: calc(2vw + 1vh);
	padding-block: 1vh;
	padding-inline: 2vw;
	font-weight: bold;
}

/* view tips end */

/* Journey start */

.journey-switch-container {
	display: flex;
	justify-content: center;
}

.journey-switch {
	background: white;
	display: flex;
	box-shadow: var(--box-shadow);
	border-radius: 2vh;
	padding-inline: 2vh;
	align-items: center;
	justify-content: center;
	width: 40%;
}

.journey-switch-center {
	background: #ccc;
	width: 1px;
	height: 2vh;
	align-self: center;
	max-height: 70%;
	position: absolute;
}

.journey-option {
	padding-inline: 2vh;
	color: #ccc;
	width: 50%;
	text-align: center;
	white-space: nowrap;
	transition: 0.4s;
	cursor: pointer;
}

.journey-option.active {
	color: black;
}

.graphContainer {
	height: 500px;
	width: 800px;
}
/* Journey end */

/* Sync start */
.sync-gif {
	width: 8vh;
}

.sync-cancel {
	text-decoration: underline;
	cursor: pointer;
}
/* Sync end */

/* plan start */

.plan-container {
	display: grid;
	grid-template-columns: 19% 29% 29% 19%;
	column-gap: 1%;
	border-radius: 25px;
	width: 150%;
	margin-left: -25%;
	background: var(--accent-bg-light);
	height: 65vh;
}

.plan-top {
	display: flex;
	justify-content: end;
}

.plan-bottom {
	display: flex;
	justify-content: end;
}

.plan-item-list {
	height: 100%;
	overflow: scroll;
}

.plan-item-list::-webkit-scrollbar {
	display: none;
}

.plan-item-text {
	background-color: white;
	border-radius: 1vh;
	margin: 1vh;
	height: 9vh;
	width: 90%;
	flex-shrink: 0;
	padding: 1vh;
	display: flex;
	align-items: center;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: horizontal;
	-webkit-box-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
}

.plan-text-input {
	width: 100%;
	background: none;
	outline: none;
	border: none;
	margin-bottom: unset;
}

.plan-triggers-container {
	height: 60vh;
	margin: 1vh;
	box-shadow: var(--box-shadow);
	border-radius: 3vh;
	display: flex;
	flex-direction: column;
	align-items: left;
	overflow: hidden;
	padding: 1vh;
	background: #efefef;
}

.plan-triggers-container::-webkit-scrollbar {
	display: none;
}

.plan-learning-container {
	height: 60vh;
	margin: 1vh;
	box-shadow: var(--box-shadow);
	border-radius: 3vh;
	display: flex;
	flex-direction: column;
	align-items: left;
	overflow: hidden;
	padding: 1vh;
	background: #efefef;
}

.plan-learning-container::-webkit-scrollbar {
	display: none;
}

.plan-bubbles-container {
	height: 60vh;
	margin: 1vh;
	border-radius: 3vh;
	box-shadow: var(--box-shadow);
	padding: 1vh;
	background: #efefef;
}

.plan-bubbles-list {
	display: flex;
	flex-direction: column;
	overflow: overlay;
	scroll-behavior: smooth;
	height: 90%;
}

.plan-bubbles-list::-webkit-scrollbar {
	display: none;
}

.plan-bubble {
	background-image: url(img/Rectangle.png);
	width: fit-content;
	background-size: contain;
	background-repeat: no-repeat;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 5vw;
	max-width: 10vw;
	padding: 1vw;
	margin: 1vw;
	text-align: center;
	flex-shrink: 0;
}

.plan-bubble:nth-child(even) {
	align-self: end;
}

.plan-bubble.worry {
	filter: grayscale(1);
}

.plan-goals-container {
	height: 60vh;
	margin: 1vh;
	box-shadow: var(--box-shadow);
	border-radius: 3vh;
	display: flex;
	flex-direction: column;
	align-items: left;
	overflow: hidden;
	padding: 1vh;
	background: #efefef;
}

.plan-goals-container::-webkit-scrollbar {
	display: none;
}

.plan-goals-list {
	display: flex;
	flex-direction: column;
	overflow: overlay;
	scroll-behavior: smooth;
}

.plan-goals-container::-webkit-scrollbar {
	display: none;
}

.plan-print {
	margin-left: auto;
	margin-right: auto;
	margin-top: 2vh;
	width: 20vw;
	border-radius: 40px;
}

.popup.plan-popup {
	overflow: overlay;
}

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

.plan-popup {
	display: flex;
	align-items: center;
}

.plan-popup-title {
	padding-bottom: 2vh;
	font-size: x-large;
}

.plan-popup-content {
	display: grid;
	grid-template-rows: 15% 80%;
	grid-template-columns: 65% 35%;
	row-gap: 5%;
	column-gap: 1%;
	width: 100%;
	height: 100%;
}

.plan-popup-title {
	grid-row: 1;
	grid-column: span 2;
}

.plan-popup-triggers {
	grid-row: 2;
	grid-column: span 2;
}
.plan-popup-textNotes {
	grid-row: 2;
	grid-column: span 2;
}
.plan-popup-safeBubbles {
	grid-row: 2;
	grid-column: span 2;
}
.plan-popup-goals {
	grid-row: 2;
	grid-column: span 2;
}

.plan-popup-triggers-container {
	align-self: center;
	display: grid;
	grid-template-columns: 24% 24% 24% 24%;
	grid-template-rows: 33% 33%;
	column-gap: 1%;
	row-gap: 1%;
	height: 100%;
}

.plan-popup-textNotes-container {
	align-self: center;
	display: grid;
	grid-template-columns: 24% 24% 24% 24%;
	grid-template-rows: 33% 33%;
	column-gap: 1%;
	row-gap: 1%;
	height: 100%;
}

.plan-popup-safeBubbles-container {
	display: grid;
	grid-template-columns: repeat(3, 33%);
	overflow: overlay;
	scroll-behavior: smooth;
	height: 100%;
}

.plan-popup-goals-container {
	align-self: center;
	display: grid;
	grid-template-columns: 24% 24% 24% 24%;
	grid-template-rows: 33% 33%;
	column-gap: 1%;
	row-gap: 1%;
	height: 100%;
}

.plan-popup-trigger {
	position: relative;
	background: #f1f1f1;
	border-radius: 1vh;
	align-items: center;
	justify-content: center;
}

.plan-popup-textNote {
	position: relative;
	background: #f1f1f1;
	border-radius: 1vh;
	align-items: center;
	justify-content: center;
}

.plan-popup-safeBubble {
	background-image: url(img/Rectangle.png);
	width: fit-content;
	background-size: contain;
	background-repeat: no-repeat;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 5vw;
	max-width: 10vw;
	padding: 1vw;
	margin: 1vw;
	text-align: center;
	flex-shrink: 0;
	flex-basis: 25%;
}

.plan-popup-safeBubble:nth-child(even) {
	align-self: end;
}

.plan-popup-goal {
	position: relative;
	background: #f1f1f1;
	border-radius: 1vh;
	align-items: center;
	justify-content: center;
}

/* plan end */

/* person bubbles start */
.person-bubbles-switch-container {
	display: flex;
	justify-content: center;
	padding: 3vh;
}

.person-bubbles-switch {
	background: white;
	display: flex;
	box-shadow: var(--box-shadow);
	border-radius: 2vh;
	padding-inline: 2vh;
	align-items: center;
	justify-content: center;
	width: 40%;
}

.person-bubbles-switch-center {
	background: #ccc;
	width: 1px;
	height: 2vh;
	align-self: center;
	max-height: 70%;
	position: absolute;
}

.person-bubbles-option {
	padding-inline: 2vh;
	color: #ccc;
	width: 50%;
	text-align: center;
	white-space: nowrap;
	transition: 0.4s;
	cursor: pointer;
}

.person-bubbles-option.active {
	color: black;
}
/* person bubbles end */

/* answers start */
.answers-title {
	display: grid;
	grid-template-columns: 30% 50%;
}
.answers-download {
	margin-top: 4%;
}
/* answers end */

/* team answers start */
.team-answers {
	position: relative;
	left: -45%;
	overflow-x: scroll;
	width: 190%;
}

.team-answers-table {
	font-size: 1.2vh;
}

.team-answers-table-td {
	padding: 0.1rem !important;
}
.team-answers-table-th {
	padding: 0.1rem !important;
}

/* team answers end */

/* Global functional Classes start */

.overflow-100 {
	width: 100px;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
}

.overflow-200 {
	width: 200px;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
}

.hidden {
	display: none;
	z-index: -99;
}

.disable {
	pointer-events: none;
}

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

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

@keyframes shimmer {
	0% {
		--shimmer-progress: 100;
		background-position-x: -4vw;
	}
	100% {
		--shimmer-progress: 0;
		background-position-x: 4vw;
	}
}

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