/* CSS Variables */
:root {
	/* Brand Colors */
	--primary-color: #a81010;
	--primary-dark: #b71218;

	/* Background Colors */
	--bg-white: #fff;
	--bg-dark: #444;
	--bg-light-pink: #f2bfc0;
	--bg-light-yellow: #ffc;

	/* Text Colors */
	--text-black: #000;
	--text-dark: #222;
	--text-medium: #555;
	--text-light: #aaa;
	--text-error: red;

	/* Border Colors */
	--border-silver: silver;
	--border-light: #ddd;
	--border-lighter: #eee;

	/* Modal/Overlay Colors */
	--overlay-dark: rgba(0, 0, 0, 0.5);

	/* White */
	--white: white;

	--main-bg-color: #111;
	--form-back-color: #111;
	--form-fore-color: #fff;
	--tab-back-color: #444;
	--tab-back-color-active: #111;
	--tab-fore-color: #fff;
	--tab-hover-background-color: #333;
	--tab-hover-color: #fff;
	--input-back-color: #111;
	--input--fore-color: #fff;
	--card-back-color: #111;
	--card--fore-color: #fff;
	--menu-hover-background-color: #333;
	--menu-background-color: #111;
	--border-color-primary: silver;
	--border-color-primary-hover: #1976d2;
	--border-color-input: #1976d2;
	--selected-background-color: #333;
	--box-shadow-color: #333;
	--fore-color: #fff;
	--fore-color-secondary: #aaa;
	--button-back-color: #eee;

	--button-primary-hover-back-color: #1565c0;
	--button-primary-back-color: #1976d2;
	--button-primary-fore-color: #f8f8f8;

	--sentMessage-background-color: #333;
	--receivedMessage-background-color: #339;
	--warning-color: #ff0000;
	--highlight-color: #48abe0;
	--modal-back-color: rgba(0, 0, 0, 0.5);
	--mention-color: #1976d2;
	--progress-back-color: #559900;
	--logo-color: #2c5aa0;
}

html,
body {
	margin: 0;
	padding: 1em;
	font-family: Geneva, Arial, Helevtica, sans;
	position: relative;
}

a {
	cursor: pointer;
	color: var(--primary-color);
}

.sidebar {
	grid-area: sidebar;
}

.app {
	grid-area: app;
	position: relative;
	height: auto;
}

.header {
	grid-area: header;
	display: flex;
	justify-content: space-between;
}

.footer {
	grid-area: footer;
}

.wrapper {
	display: grid;
	height: 100%;
	grid-gap: 0.5em;
	grid-template-rows: 3em auto;
	grid-template-areas:
		"header"
		"app";
	background-color: var(--bg-white);
	color: var(--primary-color);
}

.box {
	background-color: var(--bg-dark);
	color: var(--bg-white);
	border-radius: 0.25em;
	padding: 0.5em;
	/* font-size: 150%; */
}

.header,
.footer {
	background-color: var(--primary-color);
}

.profileHeader {
	padding-top: 1em;
	right: 2em;
}

.topleft {
	position: absolute;
	top: 0;
	left: 0;
}

.topright {
	position: absolute;
	top: 0;
	right: 0;
}

.bottomleft {
	position: absolute;
	bottom: 0;
	left: 0;
}

.bottomright {
	position: absolute;
	bottom: 0;
	right: 0;
}

div.row {
	vertical-align: top;
	display: block;
}

div.col {
	display: inline-block;
	padding: 0.5em;
}

div.headerCol {
	width: auto;
}

div.w30 {
	width: 30em;
}

div.w20 {
	width: 20em;
}

div.w10 {
	width: 10em;
}

div.w5 {
	width: 5em;
}

div.md {
	/* width: 10em; */
}

div.pane {
	border: 1px solid var(--border-silver);
	border-radius: 0.25em;
	padding: 1em;
}

div.completedTask div {
	text-decoration: line-through;
}

div.centered {
	text-align: center;
}

.right-align {
	text-align: right;
}

#consoleDiv {
	overflow: scroll !important;
}

input {
	width: 100%;
}

input[type="text"],
input[type="date"],
input[type="password"],
input[type="email"] {
	height: 2em;
}

.bold {
	font-weight: bold;
}

button {
	height: 2em;
}

div[name="cpDiscussion"] {
	min-height: 800px;
}

div[name="feed"],
div[name="quotedcommentModal"],
div[name="cpAuthModal"] {
	display: none;
}

div[name="cpAuthModal"] {
	width: 500px;
	height: 400px;
}
/* div[name='feed'], #threadModal, #quotedcommentModal{
  width: 800px;
  margin-left: auto;
  margin-right:auto;
  background-color:#fff;
  padding:.25em;
} */

div[name="editor"] {
	grid-area: editor;
	padding: 0.25em;
}

div[name="console"] {
	grid-area: console;
	padding: 25em;
}

div[name="htmlFrame"] {
	grid-area: htmlFrame;
	padding: 0.25em;
}

nav ul li {
	display: inline-block;
	padding-right: 2em;
	cursor: pointer;
	font-weight: bold;
}

.CodeMirror {
	border-radius: 0.25em;
	height: auto;
	border: 1px solid var(--border-light);
}
/* .CodeMirror-scroll { max-height: 200px; } */
.CodeMirror pre {
	padding-left: 7px;
	line-height: 1.25;
}
.banner {
	background: var(--bg-light-yellow);
	padding: 6px;
	border-bottom: 2px solid var(--border-silver);
}
.banner div {
	margin: 0 auto;
	max-width: 700px;
	text-align: center;
}

div[name="console"] {
	border: 1px solid var(--border-silver);
	overflow: scroll;
	border-radius: 0.25em;
	margin-bottom: 0.5em;
}

div[name="console"] .log {
	padding: 0.5em;
	border-bottom: 1px solid var(--border-lighter);
}

div[name="console"] .error {
	padding: 0.5em;
	border-bottom: 1px solid var(--border-lighter);
	color: var(--text-error);
}

#codeOutput {
	width: 100%;
	overflow: scroll;
}

#iframe {
	border-radius: 0.25em;
	width: 100%;
	height: 95%;
	border: 1px solid var(--border-silver);
}

#codeDiv {
	width: 100%;
	height: 80%;
}

#consoleDiv {
	width: 100%;
	height: 15%;
}

.profilePic_small {
	width: 2.5em;
	border-radius: 50%;
	display: inline;
	margin-right: 0.25em;
	margin-left: 0.25em;
}

.profilePic_mini {
	width: 2em;
	border-radius: 50%;
	display: inline;
	margin-left: 0.5em;
	margin-top: -0.25em;
}

div.editorWrapper {
	background-color: var(--bg-light-pink);
	display: grid;
	grid-template-columns: 3.5em auto;
	grid-template-rows: auto;
	grid-template-areas:
		"profilePic commentEditor"
		"profilePic commentEditorButtons";
	padding: 0.5em 0.5em 0.5em 0;
	border-radius: 0 0 5px 5px;
}

div.editorWrapper .profilePic {
	grid-column: 1;
	grid-row: 1 / span 2;
}

div.comment {
	background-color: var(--bg-white);
	color: var(--text-dark);

	display: grid;
	grid-template-columns: 60px auto;
	/* grid-template-rows: auto 50px; */
	grid-template-areas:
		"profilePic messagecomment"
		"profilePic commentButtons"
		"editorWrapper editorWrapper";
	/* width: 790px; */
	padding: 1em 0 0 0;
	border: 1px solid var(--primary-dark);
	border-radius: 5px;
	margin: 0.25em;
}

div.comment .editorWrapper {
	grid-column: 1 / span 2;
	grid-row: 4;
	height: fit-content;
}

.empty {
	grid-column: 1;
	grid-row: 1;
}

div.comment .profilePic {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.messagecomment {
	grid-column: 2;
	grid-row: 1;
}

.quotedMessagecomment {
	border: 1px solid var(--primary-dark);
	border-radius: 0.5em;
	padding: 0.5em;
	margin-bottom: 0.5em;
}

div.quotedEditorWrapper {
	background-color: var(--bg-light-pink);
	display: block;
	padding: 0.5em 0.5em 0.5em 0;
	border-bottom: 2px solid var(--primary-dark);
}

div.quotedComment {
	background-color: var(--bg-white);
	border-radius: 0.5em;
}

.commentMessage {
	grid-column: 2;
	min-height: 1.5em;
	padding: 0.5em 0;
	color: var(--text-black);
	font-size: 0.9rem;
}

.commentMessage img {
	width: 95%;
}

.commentEditor {
	grid-column: 2;
	border-radius: 0.25em;
	min-height: 1.5em;
	border: 1px solid var(--primary-dark);
	padding: 0.5em;
	margin: 0.5em;
	color: var(--text-medium);
	grid-row: 1;
	background-color: var(--bg-white);
	height: fit-content;
}

.commentEditor img {
	width: 400px;
}

div.comment .commentMessage {
	grid-row: 4;
}

div.commentEditorButtons,
div.commentButtons {
	padding: 0.25em 0 0.25em 0;
	grid-column: 2;
	color: var(--primary-dark);
}

div.commentButtons {
	grid-row: 3;
	font-size: 1.2rem;
	font-weight: bold;
}

div.markTypesFloatingDiv {
	background-color: var(--main-bg-color);
}

div.commentEditorButtons div,
div.commentButtons div {
	display: inline-block;
	/* cursor: pointer; */
}

div.commentButtons button {
	background-color: var(--white);
	border-radius: 1em;
	height: 2sem;
	border: 0;
	padding: 0 1em 0 1em;
	color: var(--primary-color);
	font-weight: bold;
	font-size: 0.9em;
	vertical-align: middle;
}

div.commentEditorButtons div:nth-last-child(1n + 2),
div.commentButtons div:nth-last-child(1n + 2) {
	/* padding-right: 2em; */
}

div.commentEditorButtons {
	display: none;
}

div.quotedAuthor {
	padding: 0.25em 0.25em 0.25em 1.5em;
	font-size: 0.8em;
	color: var(--primary-color);
}

div.commentHeader {
	height: 1.5em;
	grid-row: 2;
	grid-column: 2;
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
}

div.replyToAuthor {
	font-size: 0.8em;
	grid-row: 3;
	grid-column: 2;
	color: var(--text-light);
	padding: 0.35em 0;
}

div.commentHeader div {
	display: inline;
}

.profileTitle {
	font-weight: bold;
	padding-right: 0.3em;
}

.username {
	padding-right: 0.3em;
}

.commentDate {
}

.commentMenu {
}

#comments {
	color: var(--primary-color);
	border-radius: 5px;
}

.icon {
	width: 2em;
	height: 2em;
}

svg {
	fill: var(--primary-dark);
}

.right {
	float: right;
}

button {
	background-color: var(--primary-color);
	border-radius: 1em;
	height: 2sem;
	border: 0;
	padding: 0 1em 0 1em;
	color: var(--bg-white);
	font-weight: bold;
	font-size: 0.9em;
}

button:disabled {
	background-color: var(--primary-color);
}

.feather {
	width: 0.8em;
	height: 0.8em;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	vertical-align: bottom;
}

.feather_bigger {
	width: 1.6em;
	height: 1.6em;
}

.filled {
	fill: currentColor !important;
}

.commentCounter {
	/* vertical-align: top; */
	padding-left: 0.25em;
	padding-right: 1.5em;
	font-size: 0.8em;
}

div.gadgetui-modalWindow {
	background-color: var(--overlay-dark) !important;
}

.modal {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--overlay-dark);
	opacity: 0;
	visibility: hidden;
	transform: scale(1.1);
	transition:
		visibility 0s linear 0.25s,
		opacity 0.25s 0s,
		transform 0.25s;
}

.modal-content {
	margin-left: auto;
	margin-right: auto;
	background-color: var(--bg-white);
	padding: 1em;
	width: 800px;
	border-radius: 0 0 5px 5px;
}

#imageModal {
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
	margin-top: 1% !important;
	width: 95%;
	height: 95%;
	border-radius: 0.25em;
	color: var(--white);
}

#imageModal img {
	margin-left: auto;
	margin-right: auto;
	max-width: 95%;
	max-height: 95%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.show-modal {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	transition:
		visibility 0s linear 0s,
		opacity 0.25s 0s,
		transform 0.25s;
}

.modalTitle {
	font-size: 1.2em;
	text-align: center;
	font-weight: bold;
	padding: 0.25em;
}

.highlighted {
	/* font-size: 1.2em; */
	/* font-weight: bold; */
}

div.morecomments {
	color: var(--primary-color);
	width: 100%;
	margin: 1em 0;
	text-align: center;
}

.morecomments a:hover {
	color: var(--primary-color);
}

.hidden {
	display: none;
	visibility: hidden;
}

/* Emoji Picker Styles */
.emojiPicker {
	position: relative;
	cursor: pointer;
	margin-top: 0.15em;
	height: 2em;
}

.emojiPicker svg {
	stroke: var(--fore-color);
}

.emojiPicker:hover {
	background-color: var(--menu-hover-background-color);
}

.emojiPicker:hover svg {
	stroke: var(--highlight-color);
}

.emojiPopoverContainer {
	position: fixed;
	background-color: var(--card-back-color) !important;
	border: 1px solid var(--border-color-primary) !important;
	border-radius: 8px;
	box-shadow: 0 4px 12px var(--box-shadow-color) !important;
	z-index: 1000;
	max-height: 500px;
	overflow-y: scroll;
	width: 320px;
}

.emoji-picker {
	padding: 0.5em;
	display: block !important;
	background-color: var(--main-bg-color);
}

.emoji-picker > div {
	display: block !important;
}

.emoji-picker-empty {
	padding: 1em;
	text-align: center;
	color: var(--fore-color-secondary);
}

.emoji-group {
	margin-bottom: 1em;
}

.emoji-group-name {
	font-weight: bold;
	font-size: 0.9em;
	color: var(--highlight-color);
	margin-bottom: 0.5em;
	padding: 0.25em 0.5em;
	border-bottom: 1px solid var(--border-color-primary);
	display: block !important;
}

.emoji-subgroup {
	margin-bottom: 0.75em;
	display: block !important;
}

.emoji-subgroup-name {
	font-size: 0.75em;
	color: var(--fore-color-secondary);
	margin-bottom: 0.25em;
	padding-left: 0.5em;
	text-transform: capitalize;
	display: block !important;
}

.emoji-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 0.25em;
	padding: 0.25em 0.5em;
	display: block !important;
}

.emoji-item {
	font-family: "Noto Color Emoji Regular", sans-serif;
	font-size: 1.5em;
	cursor: pointer;
	padding: 0.25em;
	border-radius: 4px;
	text-align: center;
	transition: background-color 0.2s ease;
	user-select: none;
	display: inline-block;
}

.emoji-item:hover {
	background-color: var(--selected-background-color);
	transform: scale(1.2);
}

.emojiPopoverContainer {
	position: fixed !important;
	display: block !important;
}

.markTypesFloatingDiv {
	font-size: 2em;
	padding: 0.5em !important;
	background-color: var(--bg-color) !important;
}