@import url('animations.css');
@import url('bots.css');
@import url('chat.css');
@import url('experience.css');
@import url('members.css');
/* css main variables */
:root {
	--dandelion-background-color: #1d4253;
	--dandelion-border-radius: 0.5rem;
    --dandelion-base-z-index: 1;
	--dandelion-help-z-index: 5;
	--dandelion-sidebar-z-index: 20;
}
/* Basic Reset */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html,
body {
	color: #333;
	display: flex;
	flex-direction: column;
	font-family: "Raleway", serif;
	height: 100%;
	margin: 0;
}

/* dandelion Menu Navigation */
.top-nav {
	align-items: center;
	color: #fff;
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
	max-height: 10vh;
	max-width: 100vw;
	padding: 1.5rem 0rem;
	position: relative;
	width: 100%;
}
.top-nav .logo {
	color: #fff;
	font-family: "EB Garamond", serif;
	font-size: 2.5rem;
	font-style: normal;
	font-weight: 400;
	text-decoration: none;
}
.top-nav a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}
.top-nav img {
	height: 8vh;
	width: auto;
}
.top-nav li {
	display: flex;
}
.top-nav ul {
	align-items: baseline;
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin-bottom: 0;
	margin-left: auto;
}
.top-nav .navigation-version img {
	height: 1rem;
	width: auto;
}
a.login-btn {
	background: #557a8b;
	border: thin solid navy;
	border-radius: var(--dandelion-border-radius);
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	padding: 0.5rem 1rem;
	border-radius: var(--dandelion-border-radius);
	font-weight: bold;
}
a.login-btn:hover {
	background: #1d292f;
}
.navigation-version {
	align-items: flex-end;
	display: flex;
	color: rgb(232, 210, 255);
	flex-direction: column;
	font-size: 0.8rem;
	font-style: italic;
	justify-content: flex-end;
	margin-left: 1rem;
	text-align: right;
}
/* Hamburger Icon - Hidden on Desktop */
.hamburger {
    cursor: pointer;
    display: none;
    flex-direction: column;
	gap: 0.3rem;
    height: 2rem;
    margin-left: auto;
    width: 2rem;
}
.hamburger span {
    display: block;
    height: 1rem;
    width: 100%;
    background: #fff;
    border-radius: var(--dandelion-border-radius);
}
/* dandelion system alerts */
.alert-container{
	align-items: center;
	display: flex;
	flex-direction: column;
	margin: 0.1em 0;
}
.alert-box {
    align-items: center;
	background-color: aliceblue;
	border: rgba(0,0,0,.25) 2px solid;
	border-radius: var(--dandelion-border-radius);
	box-shadow: inset 4px 4px 2px 0px rgba(0, 0, 0, 0.1); /* Shadow for depth */
	display: flex;
    flex-direction: row; /* Stack alert elements horizontally */
    width: 85%; /* Full width */
}
.alert-content {
	align-items: stretch; /* Vertically center align items */
	/* animation: alertFadeOut 2s forwards; */
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
    color: rgba(0, 0, 0, 0.9);
	cursor: help;
    display: flex;
	font-size: clamp(10px, 2vw, 20px);
    justify-content: space-between;
    pointer-events: none;
	padding: 0.75vh 2vw;
    width: 100%; /* Each alert box takes the full width */
}
.alert-close {
    align-self: stretch;
	align-items: center;
    background-color: rgba(0, 0, 0, 0.15); /* Example different background color */
	border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
	display: flex;
    font-size: clamp(18px, 3vw, 26px); /* Adjust the min and max values as needed */
	justify-content: center;
	min-width: 5vh;
	opacity: 0.9;
	transition: opacity 0.3s, background-color 0.3s;
}
.alert-close:hover {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); /* Example text shadow */
    opacity: 1; /* Full opacity */
    background-color: rgba(0, 0, 0, 0.35); /* Darkened background color */
}
.alert-hide {
	opacity: 0;
	display: none;
}
.alert-high {
	color: rgba(0, 0, 0, 0.8);
	background-color: rgba(255, 168, 162, 0.4); /* Red for error, can change based on alert type */
}
.alert-low {
	color: rgba(0, 0, 0, 0.8);
	background-color: rgba(31, 124, 163, 0.3); /* Red for error, can change based on alert type */
}
.alert-medium {
	color: rgba(0, 0, 0, 0.8);
}
.alert-show {
	display: flex;
	opacity: 1;
	animation: alertFadeIn 0.5s forwards;
}
/* dandelion main content */
.main-content {
	background-color: var(--dandelion-background-color);
	background-image: url("../jpg/bkg_child_dandelion.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
	flex: 1; /* Pushes the footer down */
	justify-content: center;
	overflow: hidden;
}
.page-container {
    display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 1rem;
	justify-content: center;
	max-width: 1400px;
	padding: 0.5rem 1rem 0.5rem 1rem;
}
.main-content h1 {
	font-family: 'Arial Narrow', sans-serif;
	font-size: 1.2rem;
	font-weight: lighter;
	margin-bottom: 0;
	padding: 2rem;
	padding-bottom: 0;
}
.main-content hr {
    border: none; /* Removes the default border */
    height: .5px; /* Sets the height of the horizontal rule */
    background-color: rgb(0, 25, 51, 1); /* Faint line color using RGBA for transparency */
    margin-left: 0%; /* Aligns with the start of the container */
    margin-right: 10%; /* Leaves space at the end of the container */
	margin-top: 2%;
	margin-bottom: 0%;
    width: auto; /* Takes the full available width minus margin */
}
.main-content h2 {
	font-size: 20px;
}
/* Sidebar Section */
.sidebar {
	padding: 1rem;
	background: #ffffffad;
    border-radius: var(--dandelion-border-radius);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	color: #12094d;
	flex: 1 1 320px; /* Makes it flexible with a base width of 600px */
	flex-direction: column;
	max-height: 100%;
	max-width: 400px; /* Maximum width of 600px */
    min-width: 320px; /* Prevents excessive shrinking */
	overflow: hidden;
}
.sidebar h2 {
	color: black;
	display: flex;
	font-weight: bold;
	justify-content: center;
}
.sidebar li {
	margin-bottom: 0.2rem;
}
.sidebar p {
	font-size: 0.8rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}
.sidebar span{
	color: #263d48;
	font-style: italic;
	font-size: 0.85rem;
}
.sidebar ul {
	font-size: 0.85rem;
    list-style: disc;
	margin: 0;
    padding: 0rem 2rem;
}
.signup-content {
	display: flex;
	flex-direction: column;
	max-width: 100%;
	padding: 0.5rem;
	width: 100%;
}
.signup-join,
.signup-success {
	display: flex;
	flex-direction: column;
}
.signup-success p {
	font-size: 0.9rem!important;
}
/* dandelion Signup Routine */
.button {
	align-items: center;
	background-color: navy; /* Default background color */
	border: 2px solid #061320; /* Blue border */
	border-radius: var(--dandelion-border-radius); /* Rounded corners */
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); /* Drop shadow */
	cursor: pointer; /* Cursor changes to pointer on hover */
	color: #fff; /* Text color */
	display: flex;
	margin: 12px;
	margin-bottom: 18px;
	font-weight: bold; /* Bold text */
	justify-content: center; /* Centers the button horizontally */
	padding: 6px 12px; /* Adjust as needed */
	text-align: center; /* Center text */
}
.button:hover {
	background-color: #fff29a;
	color: navy;
	display: flex;
}
.button:disabled { /* alphabetically wrong, but disabled trumps hover */
    background-color: #CCCCCC; /* Lighter/Different background color for disabled state */
    color: #666666; /* Lighter/Different text color for disabled state */
    border: 2px solid #CCCCCC; /* Border color for disabled state */
    cursor: not-allowed; /* Cursor to indicate the button is not clickable */
    box-shadow: none; /* Optional: remove shadow for disabled state */
}
.button-container {
    display: flex;
    justify-content: center; /* Centers the button horizontally */
    width: 100%;
}
.button-join {
    background-color: green; /* Default background color */
    color: #fff; /* Text color */
    border: 2px solid red; /* Red border */
    border-radius: var(--dandelion-border-radius); /* Rounded corners */
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); /* Drop shadow */
    font-weight: bold; /* Bold text */
    padding: 10px 20px; /* Adjust as needed */
	margin: 0.5em;
    cursor: pointer; /* Cursor changes to pointer on hover */
    text-align: center; /* Center text */
}
.button-join:hover {
    background-color: darkslategray; /* Background color on hover */
}
.button-join:active {
    background-color: lightslategray; /* Background color when the button is clicked */
}
.signup {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 0.5rem;
}
.join-form {
	display: flex;
	flex-direction: column;
	font-size: 0.8rem;
	gap: 0.5rem;
}
.join-form button {
	align-self: center;
	background-color: #741237;
	border: 1px solid #ccc;
	border-radius: var(--dandelion-border-radius);
	color: #fff;
	cursor: pointer;
	display: flex;
	font-size: 0.9rem;
	justify-self: unset;
	padding: 0.15rem 1rem;
	width: fit-content
}
.join-form button:disabled {
	background-color: #ccc;
	color: #666;
	cursor: not-allowed;
}
.join-form h2 {
	align-self: flex-start;
	margin: 0;
}
.join-form input {
    display: flex;
    flex: 1 1 60%;
    width: 100%;
}
.join-form label {
    align-items: center;
    cursor: pointer;
    display: flex;
	font-weight: bold;
    gap: 0.5em;
}
.join-form section { /* input container */
	align-items: baseline;
	display: flex;
	flex-direction: row;
	gap: 1rem;
}
/* Page Footer */
footer {
	align-items: baseline;
	background: #345e6b;
	color: #fff;
	display: flex;
	justify-content: center;
	width: 100%;
}
footer p {
	font-size: 1rem;
    margin: 0.5rem 0;
}
/* dandelion miscellaneous */
.content-transition {
    width: 100%; /* Adjust based on your design */
}
.fade {
	opacity: 0;
	display: none;
}
.hidden {
	transition: opacity 1s ease;
	opacity: 0;
	display: none; /* Initially not displayed */
}
.hide {
    animation: none !important;
    display: none !important;
}
.ital {
	font-style: italic;
}
.show {
    display: flex !important;
	opacity: 1 !important;
}
/* dandelion Generic Popup */
.popup-await {
	align-items: center;
	animation: slideInFromBottom 1s	ease-out;
	border: solid aliceblue;
	background-color: navy;
	display: none;
	justify-content: center;
	margin: 0.5rem 1rem;
	padding: 0.5rem 1rem;
	width: auto;
}
.popup-await-text {
	animation: blink 1.5s infinite;
	color: aliceblue;
	font-size: 1rem;
	font-weight: normal;
}
.popup-close {
	position: absolute;
    top: .5em;
    right: .5em;
    cursor: pointer;
    font-size: 1.5rem;
}
.popup-container {
    background-color: aliceblue;
    bottom: 2em;
    border: thin solid #ccc;
	border-radius: var(--dandelion-border-radius);
	color: navy;
    display: flex;
    left: 0;
	margin: 0;
	padding: 0;
    position: absolute;
    width: 45%; /* default width */
    z-index: calc(var(--dandelion-sidebar-z-index)+10);
}
.popup-content {
	color: navy;
	display: flex;
	flex: 1 1 auto; /* grows to inhabit */
	font-size: 1rem;
	height: auto;
	max-height: 100%;
	overflow-x: hidden;
    overflow-y: auto;
    padding: 1em;
	position: relative;
}
.popup-dialog {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	width: 100%;
}
.popup-dialog-box {
    background-color: rgba(229, 59, 0, 1);
    border: solid navy;
    border-radius: var(--dandelion-border-radius);
    color: aliceblue;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 0 1rem;
    overflow: visible;
    padding: .5rem;
    width: 85%;
}
.popup-header {
    align-items: center;
    border-bottom: thin solid #eee;
    display: flex;
	font-size: 1.25rem;
	justify-content: flex-start;
	padding: 0.75rem;
}
.popup-input {
	align-items: center;
	border: thin solid black;
	display: flex;
	flex-direction: row;
	font-size: 1rem;
	margin: 0;
	padding: 0;
    width: 100%;
}
.popup-input-prompt {
	padding: 0 0.5em;
}
.popup-input-submit {
	padding: 0 0.5em;
}
.popup-input-text {
    flex: 1 1 auto;
    width: 100%;
    padding: 0.25rem;
    font-size: 1rem;
}
.popup-refresh {
	cursor: pointer;
	position: absolute;
	right: 1em;
	top: 1em;
}
.popup-sidebar {
    align-items: center;
	display: flex;
	flex-direction: column;
	max-width: 3rem;
    justify-content: center;
}
.popup-sidebar-emoticon,
.popup-sidebar-icon {
	cursor: pointer;
	font-size: 1.25rem;
	margin: 0;
	margin-bottom: 0.5rem;
	width: auto;
}
.popup-sidebar-icon {
	font-size: 1.5rem;
}
.popup-sidebar-icon:hover {
	color: navy;
	font-size: 2.0rem;
}
.popup-sidebar-icon-active {
	animation: rainbow 3s infinite;
	font-size: 2.0rem;
}
.popup-title {
	margin-left: 1em;
    font-weight: bold;
}
/* dandelion Help System */
.help-await {
	border: medium solid lightpink;
	border-radius: var(--dandelion-border-radius);
}
.help-button {
	align-content: center;
	background-color: #741237;
	border: medium solid aliceblue;
	border-radius: var(--dandelion-border-radius);
	color: aliceblue;
	cursor: pointer;
	display: flex;
	font-size: 0.9rem;
    font-weight: bold;
	margin: 0.5rem;
	padding: 0.5rem;
}
.help-await-text {
	font-size: 1.2rem;
	font-weight: bold;
}
.help-close {
	padding: 0.1em;
}
.help-close:hover {
	background-color: white;
	cursor: pointer;
    border: thin solid red;
    border-radius: var(--dandelion-border-radius);
}
.help-container {
	border: solid indianred;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	cursor: default;
    display: flex;
	flex-direction: column;
	font-size: 1em;
	left: auto;
    position: absolute;
    right: 1em;
    top: 2.2em; /* Position it right below the parent */
    width: 63%;
    z-index: var(--dandelion-help-z-index); /* Make sure it's above other elements */
}
.help-header {
	font-size: 1.5rem;
}
.help-icon img {
    height: 2em;
    width: 2em;
}
.help-title {
	padding-right: 1em;
}
.help-type {
    background-color: #f9f9f9;
    display: flex;
	font-size: 1rem;
    justify-content: space-evenly;
    padding: 10px;
}
.help-type-item {
	border-radius: var(--dandelion-border-radius);
    cursor: pointer;
    padding: 5px 10px;
}
.help-type-item:hover {
    background-color: #65a3a9;
	color: white;
	opacity: 1;
}
.help-type-item.active {
	background-color: orangered;
	color: white;
	cursor: not-allowed;
}
.help-type-item {
	background-color: aliceblue;
	color: darkgray;
	cursor: pointer;
}
.help-chat {
	border: #4CAF50 1px solid;
	display: flex;
}
.help-error {
	align-items: center;
	background-color: darkred;
	color: lightcoral;
	display: none;
	font-size: 0.9rem;
	padding: 0.5rem 0;
	width: 100%;
}
.help-error-close {
	align-self: flex-start;
	background-color: transparent;
	color: white;
	cursor: pointer;
	font-size: 1.5rem;
	margin: 0 0.5rem;
	width: auto;
}
.help-error-icon {
	background-color: transparent;
	font-size: 1.5rem;
	margin: 0 0.7rem;
	width: auto;
}
.help-error-text {
	color: white;
	width: 100%;
}
.help-input {
    border: none;
}
.help-input-submit {
	white-space: nowrap;
	width: auto;
}
.help-input-text {
	border: thin solid #ccc;
	border-radius: var(--dandelion-border-radius);
	color: black;
	margin: 0.5rem;
}
.help-input-text:focus {
	color: purple;
}
/* dandelion error handling */
.error {
    border-color: red;
}

.error-message {
    color: red;
	font-weight: bold;
    margin-bottom: 10px;
}
/* others */
.selected {
	background-color: #ffc107;
	color: #fff;
}
.btn-hover-gray:hover {
	background-color: #dcdcdc;
}
.card {
	background-color: #fff;
	border: 1px solid rgba(0,0,0,.125);
	border-radius: var(--dandelion-border-radius);
	box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
	padding: 1rem;
	margin: 1rem;
}
code,
codeblock,
.code { /* employed by conversion to markdown */
	background-color: #f8f9fa;
	border: thin solid #ccc;
	border-radius: var(--dandelion-border-radius);
	margin: 0;
	padding: 0 0.25rem;
	resize: none;
}
code,
.code {
	display: inline;
}
codeblock {
	display: block;
}
.loader {
	animation: spin 2s linear infinite;
	border: 1.2rem solid indianred;
	border-radius: 50%;
	border-top: 1.2rem dotted #3498db;
	height: 5rem;
	width: 5rem;
}
.loader-container {
	align-items: center;
	background-color: #151535;
	display: flex;
	flex-direction: column;
	font-family: "Raleway", serif;
	justify-content: center;
	height: 100%;
	overflow: hidden;
}
.loader-text {
	font-size: 3rem;
	color: aliceblue;
	padding: 1.5rem;
	text-align: center;
}
.loading {
	display: none;
	font-size: 24px;
	color: #6c757d;
	text-align: center;
}
pre code {
	color: rgb(100, 14, 14);
	font-size: 0.8rem;
}
/* dandelion header */
.header {
	color: #fff;
	background: var(--dandelion-background-color);
	max-height: 10vh;
	padding: 0rem 1.5rem;
	width: 100%;
}
/* dandelion general */
.audio-icon {
	color: honeydew;
	cursor: pointer;
	font-size: 2rem;
	margin: 0.5rem 0rem 0rem 0.5rem;
}
.audio-popup {
	border: thin solid gray;
	border-radius: var(--dandelion-border-radius);
	background-color: aliceblue;
	color: black;
	display: flex;
	font-size: 1rem;
	margin: 0.5rem 0 0 0.5rem;
	max-width: 80%;
	padding: 0.5rem;
	width: auto;
}
.caret {
	border-style: solid;
    cursor: pointer;
	height: 0;
    width: 0;
}
.caret-up {
    border-width: 0 8px 8px 8px; /* Adjust sizes as needed */
    border-color: transparent transparent #ccc transparent;
    margin-bottom: 5px; /* Space between the up and down carets */
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)); /* Bevel effect */
}
.caret-down {
    border-width: 8px 8px 0 8px; /* Adjust sizes as needed */
    border-color: #ccc transparent transparent transparent;
    margin-top: 5px; /* Space between the up and down carets */
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)); /* Bevel effect */
}
.grabbing {
	cursor: grabbing;
}
.label-active {
	color: navy;
	cursor: default;
	font-weight: bold;
}
.label-inactive {
	color: gray;
	cursor: pointer;
	font-weight: normal;
}
.listening {
	background-color: lightcoral;
	color: indianred;
	font-weight: bold;
}
.listening-mic {
	animation: pulse 3s infinite;
	color: red;
}
.offscreen {
	position: absolute;
	left: 110vw;
}
/* keyframes */
@keyframes alertFadeOut {
    0% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes helpInitiatorFade {
	0% { opacity: 0; }
	100% { opacity: 1; }
} /* reverse for fade out */
@keyframes pulse {
	0% { transform: scale(1); color: lightcoral; }
	50% { transform: scale(1.3); color: red; }
	100% { transform: scale(1); color: lightcoral; }
}
@keyframes rainbow {
    0% { color: red; }
    14% { color: orange; }
    28% { color: yellow; }
    42% { color: green; }
    57% { color: blue; }
    71% { color: indigo; }
    85% { color: violet; }
    100% { color: red; }
}
/* media queries */
@media (max-width: 800px) {
	.top-nav ul {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-top: -20px;
		margin-left: -30px;
		margin-right: -30px;
		background: var(--dandelion-background-color);
		flex-direction: column;
		align-items: center;
		display: none;
		padding-bottom: 1rem;
	}
	.top-nav ul.show {
		display: flex;
	}
	.top-nav li {
		margin: 1rem 0;
	}
	.hamburger {
		display: flex;
	}
}
/* overflow */
@media (max-width: 688px) {
    .page-container {
        overflow-y: auto;
    }
}