@font-face
{
	font-display: swap;
	font-family: 'Roboto';
	src: url('../fonts/Roboto.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}


html,
body
{
	zoom: 1;
}

/*
	* { outline: 1px solid red; }
*/

:root
{
	--accent_color: #e76c00;
	--accent_color_transparent_50: #e76c0088;
	--accent_color_transparent_25: #e76c0044;
	--accent_color_super_light: rgb(255 230 210);
	--accent_color_ultra_light: rgb(255 241 226);
	--light_gray: #ccc;
	--dark_gray: #333;
	--sidebar_graph_list_div_padding_left: 20px;
	--sidebar_starting_width: 400px;
}

body
{
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100vh;
	color: var(--dark_gray);
	background-color: #f0f0f0;
	font-family: 'Roboto';
	filter: blur(0.000001px); /* This fixes blurriness in fonts sometimes */
}

.custom_scrollbar
{
	scrollbar-width: 50px;
	scrollbar-color: #1abc9c #34495e;
}

::-webkit-scrollbar
{
	width: 10px;
}
::-webkit-scrollbar-track
{
	background: #00000011;
	border-radius: 16px;
}
::-webkit-scrollbar-track:hover
{
	background: #00000022;
}
::-webkit-scrollbar-thumb
{
	background: #000000aa;
	border-radius: 16px;
}
::-webkit-scrollbar-thumb:hover
{
	background: var(--accent_color);
	cursor: grab;
}

button
{
	padding: 8px;
	box-sizing: border-box;
	border: 1px solid #777;
	outline: 0px solid var(--accent_color);
	border-radius: 8px;
	cursor: pointer;
	transition: all ease 0.25s;
	-moz-user-select: none; -webkit-user-select: none; user-select: none;
	background-color: white;
}

button:focus,
button:focus-visible
{
	border: 1px solid var(--accent_color);
	outline: 1px solid var(--accent_color);
	transition: all ease 0.25s;
}

button:hover:enabled
{
	border-color: var(--accent_color);
	background-color: var(--accent_color_super_light);
	border-width: 1px;
	transition: all ease 0.25s;
}

button:disabled
{
	cursor: not-allowed;
}

input
{
	box-sizing: border-box;
	border: 1px solid var(--light_gray);
	border-radius: 8px;
}

.not_supported_in_mobile_notice
{
	display: none;
	position: fixed;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	z-index: 9999999;
	background-color: #cd6000;
	color: white;
	font-size: 20pt;
	margin-top: auto;
	margin-bottom: auto;
	text-align: center;
	gap: 30px;
}

.login_form_header,
.register_form_header
{
	font-size: 14pt;
	color: #333;
	margin-bottom: 10px;
	width: calc(100% - 15px);
	padding: 5px 5px 5px 10px;
	border-left: 5px solid #ff8800;
	font-weight: bold;
}

.login_form_forgot_password_link,
.login_form_forgot_password_link:visited
{
	font-size: 10pt;
	color: var(--accent_color);
}

.login_register_div
{
	display: flex;
	width: fit-content;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: calc(100% - 20px);
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 8px;
	flex-grow: 999;
	overflow-x: hidden;
	overflow-y: auto;
}

.login_register_div td:nth-child(1)
{
	min-width: 140px;
}

.login_register_div td:nth-child(2)
{
	width:100%
}

.login_register_div.highlight
{
	animation: login_register_div_highlight_animation 0.25s infinite;
}

@keyframes login_register_div_highlight_animation
{
	0%
	{
		outline: 1px solid var(--accent_color);
		background-color: var(--accent_color_transparent_25);
	}

	100%
	{
		outline: 0px solid var(--accent_color);
		background-color: #00000000;
	}
}

.login_register_div input
{
	padding: 4px;
}

.login_register_div td
{
	text-align: right;
}

.login_register_error_message_cell
{
	text-align: right;
}

input[type="checkbox"]
{
	accent-color: #ff5500;
}

.error
{
	color: red;
	font-size: 14px;
}

.sidebar_dropdown_icon
{
	font-size: 32px;
	width: 20px;
	filter: brightness(0) saturate(100%);
	align-content: center;
	color: rgb(0.5, 0.5, 0.5);
	margin-right: 10px;
	align-items: center;
	cursor: pointer;  /* Changes cursor to a hand */
	-moz-user-select: none; -webkit-user-select: none; user-select: none; /* Prevents text selection */
}

.sidebar_resizer
{
	min-width: 10px;
	cursor: ew-resize;
	height: 100%;
	-webkit-user-drag: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	margin-right: 5px;
}

.sidebar_resizer_inner_line
{
	cursor: ew-resize;
	height: 100%;
	z-index: 1000;
	-webkit-user-drag: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	border-right: 1px solid #aaa;
	user-select: none;
	margin-right: 7px;
}

.sidebar_resizer.open
{
	min-width: 20px;
	transition: min-width 0.5s ;
}

.sidebar_resize_full_screen_blocking_overlay
{
	position:fixed;
	width: 100%;
	height: 100%;
	z-index: 99999;
	cursor: ew-resize;
}

.sidebar_main_graph_bottom_hr_separator
{
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}

.undraggable
{
	-webkit-user-drag: none;
}

.unselectable
{
	-moz-user-select: none; -webkit-user-select: none; user-select: none;
}

.main_hbox
{
	display: flex;
	overflow: hidden;
	height: 100%;
}

.graphi_container
{
	flex-grow: 1;
	flex-shrink: 99999;
	width: 100%;
	transition: width 0.3s ease-in-out;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	overflow: hidden;
}
.sidebar,
.sidebar_hbox_sneaky_space_filler
{
	display: flex;
	right: 0;
	flex-direction: row;
	justify-content: flex-start;
	justify-items: flex-start;
	align-items: flex-start;
	opacity: 1;
	border: 0;
	overflow: hidden;
	flex-shrink: 1;
	flex-grow: 1;
	transition-property: width, transform;
	transition-duration: 0.25s;
	transition-timing-function: ease-in;
	background: white;
}

.sidebar
{
	position: absolute; /* Absolute for transform-based animation to work */
	transform: translateX(100%); /* Hidden */
	height: calc(100% - 25px);
}

.sidebar_hbox_sneaky_space_filler
{
	display: block;
	background-color: white;
}

.sidebar.open,
.sidebar_hbox_sneaky_space_filler.open
{
	opacity: 1;
	padding-right: 5px;
	border-left: solid #777 1px;
	overflow: auto;
	max-height: 100%;
	transition-timing-function: ease-out;
}

.sidebar.open
{
	transform: translateX(0%); /* Hide animation */
}

.sidebar.resizing
{
	transition-property: none; /* So that the dragging is an instantaneous change */
}

.sidebar_content_div
{
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	flex-shrink: 1;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	padding-left: 2px;
	margin-top: 15px;
	overflow: hidden;
	height: calc(100% - 25px);
}

.row_left_right_full_width
{
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: left;
	width: 100%;
	gap: 10px;
}

.user_options_button
{
	cursor: pointer;
	margin-right: 30px;
}

.user_options_button:hover
{
	text-decoration: underline;
}

.uncolored_link,
.uncolored_link:hover,
.uncolored_link:visited
{
	color: var(--dark_gray);
}


/* Simple text input underlined */
.text_input_simple_underlined
{
	display: inline;
	min-width:0;
	width: fit-content;
	text-align: center;
	border: none;
	border-bottom: 1px solid #555;
	border-radius: 0px;
	background: transparent;
	outline: none;
}

.text_input_simple_underlined:hover,
.text_input_simple_underlined:focus,
.text_input_simple_underlined:focus-visible,
.text_input_simple_underlined:focus-within
{
	border-color: orange;
}

.graph_list_outer
{
	height: 100%;
}

.graph_list_container
{
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 100%;
	height: calc(100% - 30px);
	padding-left: var(--sidebar_graph_list_div_padding_left);
	overflow-x: hidden;
	overflow-y: auto;
	min-width: 250px;
}

.graph_list_container.search_bar_hidden
{
	height: calc(100% - 35px); /* When search bar is hidden, we don't need to subtract anything to height to account for search bar height */
}

.graph_list_container.empty
{
	overflow: hidden;
	height: 95%; /* So that .graph_list_content_empty_label can be vertically aligned */
}

.graph_list_content_entries
{
	display: flex;
	flex-grow: 1;
	flex-shrink: 1;
	flex-direction: row;
	max-width: 100%;
	flex-wrap: wrap;
	column-gap: 10px;
	justify-content: space-between;
}

.graph_list_content_entries_top_padding
{
	height: 8px;
}

.graph_list_content_entries_bot_padding /* To make bot pages row stay completely stuck at the bottom */
{
	flex-grow: 1;
	flex-shrink: 0;
	min-height: 20px;
}

.graph_list_search_bar_row
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 30px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.search_bar_input_div,
.global_search_bar_input_div
{
	position: relative;
	margin-left: 10px;
	margin-right: 10px;
}
.search_bar_input_div
{
	width: 100%;
}
.global_search_bar_input_outer_div
{
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	margin-right: auto;
	margin-left: 30px;
	justify-content: center;
	align-items: center;
}

.global_search_bar_input_inner_div
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 90%;
	max-width: 300px;
}

.search_bar_input,
.global_search_bar_input
{
	padding: 5px;
	border-radius: 99999px;
	padding-left: 10px;
}
.search_bar_input
{
	width: 100%;
}
.global_search_bar_input
{
	width: 100%;
	flex-grow: 1;
}

.search_bar_magnifying_glass_image,
.global_search_bar_magnifying_glass_image
{
	width: 18px;
	height: 14px;
	position: absolute;
	right: 5px;
	top: 50%;
	bottom: 50%;
	transform: translateY(-50%);
	overflow: visible;
	-webkit-user-drag: none;
	-moz-user-select: none;
	user-select: none;
	pointer-events: none;
}

.graph_list_content_empty_label,
.profile_description_empty_label,
.comment_list_empty_label,
.global_search_window_user_list_empty_label
{
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% - 20px);
	transform: translateX(-50%) translateY(-100%);
	text-align: center;
	color: #aaa;
}

.global_search_window
{
	FONT-WEIGHT: 500;
	position: absolute;
	width: fit-content;
	height: calc(75% - 50px);
	background-color: white;
	border-radius: 8px;
	box-shadow: 0px 11px 22px 0px rgba(0,0,0,0.2);
	opacity: 0;
	transition-property: opacity;
	transition-duration: 0.5s;
	transition-timing-function: ease;
	overflow-x: hidden;
	overflow-y: hidden;
	border: 1px solid var(--dark_gray);
}

.global_search_window.show
{
	opacity: 1;
}

.global_search_window_main_hbox
{
	overflow: hidden;
	display: flex;
	flex-direction: row;
	height: 100%;
	width: fit-content;
}

.global_search_window_left_vbox
{
	overflow: hidden;
	flex-grow: 1;
}

.global_search_window_left_vbox_title,
.global_search_window_right_vbox_title
{
	font-size: 16pt;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-bottom: 5px;
	padding-top: 5px;
}

.global_search_window_right_vbox
{
	flex-grow: 1;
	overflow: hidden;
	height: auto;
	margin-left: 0px;
	min-width: 300px;
}

.global_search_window .graph_list_content_entries
{
	flex-wrap: nowrap;
	flex-direction: column;
}

.global_search_window_user_list_div
{
	overflow-x: hidden;
	overflow-y: auto;
	height: calc(100% - 35px);
	position: relative;
}

.global_search_window_user_list
{
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	align-items: center;
	justify-items: center;
	padding-right: 20px;
	width: 100%;
}

.user_entry_row
{
	display: flex;
	flex-direction: row;
	gap: 20px;
	width: calc(100% - 20px);
	align-items: center;
	padding: 10px;
	border-radius: 8px;
	box-sizing: border-box;
	cursor: pointer;
	outline-color: var(--accent_color);
}

.user_entry_row:first-child {
	margin-top: 10px;
}

.user_entry_row:last-child {
	margin-bottom: 10px;
}

.user_entry_row:hover {
	background-color: var(--accent_color_ultra_light);
	outline: 1px solid var(--accent_color);
}

.user_entry_profile_picture_image
{
	border-radius: 50%;
	width: 32px;
	height: 32px;
	outline: 1px solid var(--dark_gray);
	outline-offset: -1px;
}

.user_entry_user_name_label
{
	text-decoration: underline;
	color: var(--dark_gray);
	cursor: pointer;
	flex-grow: 1;
}

.graph_list_entry
{
	margin-left: 0px;
	margin-bottom: 10px;
	padding-right: 5px;
	width: auto;
	min-width: 300px;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	-webkit-user-drag: none;
	border-radius: 16px;
	opacity: 1;
	background-color: #00000000;
	transition-property: opacity;
	transition-duration: 0.5s;
	transition-timing-function: ease;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: fit-content;
	transition-property: background-color, box-shadow, opacity;
	transition-duration: 0.4s, 0.4s, 1.0s;
	transition-timing-function: ease;

	& > .graph_list_entry_right_vbox
	{
		align-self: stretch;
	}

	&:last-child
	{
		margin-bottom: 0px;
	}

	&.fade_out
	{
		opacity: 0;
		transition: all 0.4s ease;
	}

	&.highlight
	{
		background-color: var(--accent_color_transparent_25);
		box-shadow: inset 0px 0px 10px 0px var(--accent_color);
		transition: all 0.4s ease;
	}
}

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

.graph_list_entry_dirty_star
{
	width: 20px;
	padding-right: 5px;
}

.graph_list_entry_name_hbox
{
	display: flex;
	flex-direction: row;
	flex-shrink: 1;
	flex-grow: 1;
	min-width: 0;
	
	& .text_input_simple_underlined
	{
		width: 100%;
	}
}

.graph_list_entry_center_vbox,
.graph_list_entry_right_vbox
{
	margin-left: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	text-align: left;
	-webkit-user-drag: none;
	flex-shrink: 1;
	min-width: 0;
	margin-right: 10px;
	width: fit-content;
}

.graph_list_entry_center_vbox
{
	flex-grow: 1;
}

.graph_list_entry_right_vbox
{
	flex-grow: 0;
	padding-top: 10px;
	padding-bottom: 10px;
}

.graph_list_entry_center_vbox_middle_hbox,
.graph_list_entry_center_vbox_lower_hbox
{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: left;
	gap: 4px;
	max-width: 100%;
}

.graph_list_entry_center_vbox_middle_hbox
{
	margin-top: 5px;
	margin-bottom: 5px;
}

.graph_list_entry_name_input
{
	text-align: left;
}

.graph_list_entry_name_input:read-only
{
	text-decoration: none;
	border: 0px;
}

.graph_list_entry_current_graph_label
{
	font-size: 15pt;
	-webkit-user-drag: none;
	overflow-wrap: anywhere;
	max-width: 100%;
}

.graph_list_entry_image_wrapper
{
	flex-grow: 0;
	align-items: center;
	margin-right: auto;
	margin-left: 0px;
	min-width: 100px;
	min-height: 100px;
	max-width: 100px;
	max-height: 100px;
	width: 100px;
	height: 100px;
	-webkit-user-drag: none;
}

.graph_list_entry_image
{
	width: 96px;
	height: 96px;
	object-fit: cover; /* This will crop the largest side to fill the square */
	object-position: center; /* Optional: To keep the center of the image visible */
	cursor: pointer;
	display: block;
	border-radius: 15px;
	border: solid 2px #777;
	-webkit-user-drag: none;
	-moz-user-select: none;
	user-select: none;
	opacity: 1;
	transition: all 0.5s ease;
}

.graph_list_entry_image:hover
{
	box-shadow: 0 0px 5px 4px rgb(255, 173, 102);
	border-color: white;
	transition: all 0.25s ease;
}

.same_as_current_graph .graph_list_entry_image
{
	box-shadow: 0 0px 0px 4px #ff7700ff;
	border-color: white;
}

.graph_list_entry_button
{
	width: 20px;
	height: 20px;
	right: 80px;
	z-index: 5;
	cursor: pointer;
	border: solid 2px red;
	background-color: white;

	-webkit-user-drag: none;
	-moz-user-select: none; -webkit-user-select: none; user-select: none;

	&.remove
	{
		border-color: red;
		background-color: #fff;
		border-radius: 8px;
		padding: 3px;

		&:hover
		{
			background-color: #fdd;
			transition: all 0.1s ease;
		}
	}

	&.duplicate
	{
		border-color: #333;
		background-color: #fff;
		border-radius: 8px;
		padding: 3px;

		&:hover
		{
			background-color: #ddd2;
			transition: all 0.1s ease;
		}
	}

	&.share
	{
		position: relative;
		right: 0px;
		border-color: #f17700ff;
		background-color: #fff;
		border-radius: 8px;
		padding: 5px;

		&:hover
		{
			background-color: #ffead3;
			transition: background-color 0.1s ease;
		}

		&.disabled
		{
			filter: brightness(1.0) saturate(0%);
			opacity: 0.8;
			cursor: not-allowed;
			transition: all 0.5s ease;
		}
	}
}

img.graph_list_entry_button.duplicate
{
	filter: brightness(0.4);
	background-color: transparent;
	padding-top: 4px;
	padding-bottom: 2px;
}

.graph_list_entry_public_checkbox_container
{
	flex-grow: 0;
	width: fit-content;
	height: 20px;
	z-index: 10;
	border-radius: 8px;
	padding: 5px;
	border: solid 2px var(--dark_gray);
	background-color: #fff;
	cursor: pointer;
	opacity: 0.8;
	margin-left: 5px;
	display: flex;
	align-items: center;
	gap: 0px;
	justify-content: center;
}

.graph_list_entry_public_checkbox_container:hover
{
	opacity: 1.0;
	transition: all ease 0.25s;
	&:hover
	{
		background-color: #ffead3;
	}

}

.graph_list_entry_public_checkbox_label
{
	position: relative;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	margin-top: 0px;
	margin-bottom: 0px;
	display: inline;
	cursor: pointer;
	pointer-events: none; /* Ignore so that container can gran onclick events. Adding onclick to this explicitly did not work, don't know why. */
	font-size: 10pt;
	margin-left: 4px;
}

.graph_list_entry_public_checkbox
{
	position: relative;
	cursor: pointer;
	pointer-events: none; /* Ignore so that container can gran onclick events for a centralized onclick dispatcher. Otherwise they conflicted. */
	-moz-user-select: none; -webkit-user-select: none; user-select: none;
}

.graph_list_entry_by_label
{
	color: #777;
	margin: 0px;
}

.graph_list_entry_author_link,
.graph_list_entry_author_link:visited
{
	color: var(--dark_gray);
	margin-bottom: 2px;
	text-overflow: ellipsis;
	overflow: hidden;
	flex: 1 1 0%;
	min-width: 0;
}

.graph_list_entry_modification_date
{
	color: #777;
	font-size: 14px;
	pointer-events: none; /* Ignore so that container can gran onclick events for a centralized onclick dispatcher. Otherwise they conflicted. */
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.graph_list_entry_favorite_row
{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 5px;
	margin-left: 10px;
}

.graph_list_entry_favorite_count_label
{
	text-align: right;
	-moz-user-select: none; -webkit-user-select: none; user-select: none;
}

.graph_list_entry_favorite_button
{
	opacity: 0.5;
	width: 20px;
	height: 20px;
	cursor: pointer;
	content: url('../img/HeartEmpty.svg');
	transition: all 0.25s ease;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	padding-bottom: 1px;
}

.graph_list_entry_favorite_button:hover
{
	opacity: 0.5;
	content: url('../img/HeartFilled.svg');
	transform: scale(1.3);
	transition: all 0.25s ease;
}

.graph_list_entry_favorite_button.on
{
	opacity: 1;
	content: url('../img/HeartFilled.svg');
	transition: all 0.25s ease;
}

.comment_list_container_outer
{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.comment_entry_container
{
	display: flex;
	flex-direction: row;
	gap: 10px;
	justify-content: flex-start;
	align-items: flex-start;
	flex-shrink: 1;
	flex-grow: 1;
	max-width: 100%;
	width: 100%;
	position: relative;
}

.comment_entry_comment
{
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #fff3ed;
	padding: 10px;
	border: 1px solid var(--accent_color);
	border-radius: 8px;
	min-height: 20px;
	box-sizing: border-box;
	border-top-left-radius: 0px;
	text-overflow: ellipsis;
	overflow-wrap: anywhere;
	flex-shrink: 1;
}

/* Top-left triangle using a trick with zero-size box and 3 transparent borders (fill) */
.comment_entry_comment::after
{
	content: "";
	position: absolute;
	top: 0px;
	left: -10px;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top-color: #fff3ed;
}

/* Top-left triangle using a trick with zero-size box and 3 transparent borders (border) */
.comment_entry_comment::before
{
	content: "";
	position: absolute;
	top: -1px; /* slightly above the fill triangle */
	left: -12px;
	width: 0;
	height: 0;
	border: 11px solid transparent;
	border-top-color: var(--accent_color);
}

.comment_entry_user_image
{
	width: 32px;
	height: 32px;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	box-shadow: inset 0px 0px 2px 4px var(--dark_gray);
	cursor: pointer;
	margin-right: 4px;
	padding: 1px;
}

.comment_entry_right_vbox
{
	display: flex;
	flex-direction: column;
	min-height: 20px;
	width: 100%;
	gap: 5px;
	max-width: calc(100% - 60px);
	position: relative;
}

.comment_entry_author_row
{
	display: flex;
	flex-direction: row;
	gap: 3px;
	width: 100%;
	margin-left: -7px;
	flex-shrink: 1;
	align-items: flex-end;
}

.comment_entry_author_label
{
	text-decoration: underline;
	cursor: pointer;
	text-overflow: ellipsis;
	flex-shrink: 1;
	overflow: hidden;
}

.comment_entry_author_row_label_left
{
	color: #999;
}

.comment_entry_author_row_label_right
{
	margin-left: auto;
	color: #888;
	margin-right: -5px;
	font-size: 10pt;
}

.comment_list_container
{
	overflow-x: hidden;
	overflow-y: auto;
	padding: 10px;
	border: 1px solid;
	border-radius: 8px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	height: 100%;
	position: relative;
}

.comment_list_all_comments_content
{
	display: flex;
	flex-direction: column;
	gap: 15px;
	height: fit-content;
	width: 100%;
	min-height: 20px;
	max-width: calc(100%);
	overflow-x: hidden;
	position: relative;
}

.new_comment_entry_container
{
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: calc(100% - var(--sidebar_graph_list_div_padding_left));
	padding: 5px;
	padding-left: 7px;
}

.new_comment_entry_container .textarea_char_counter
{
	bottom: 6px !important;
}

.new_comment_entry_top_row
{
	display: flex;
	flex-direction: row;
	gap: 5px;
	justify-content: right;
	width: calc(100% - 5px);
}

.new_comment_entry_top_row
{
	display: flex;
	flex-direction: row;
	gap: 5px;
	justify-content: right;
	width: 100%;
}

.new_comment_entry_text_area
{
	width: 100%;
	padding: 15px;
	padding-top: 10px;
	padding-bottom: 35px;
	margin-top: 20px;
	max-height: 200px;
}

.new_comment_entry_profile_image
{
	width: 32px;
	height: 32px;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	outline: 1px solid var(--dark_gray);
	transform: translateX(0%) translateY(20px);
	cursor: pointer;
}

.new_comment_entry_bottom_row
{
	display: flex;
	flex-direction: row;
	justify-content: right;
	align-items: center;
}

.new_comment_entry_post_comment_button
{
	position: relative;
	transition: none !important;

	&:not(:disabled)
	{
		padding-right: 30px;
		&::after
		{
			content: "";
			background-size: contain;
			background-repeat: no-repeat;
			background-image: url("../img/Comment.svg");
			width: 20px;
			height: 20px;
			display: inline-block;
			text-align: center;
			position: absolute;
			right: 5px;
			top: 5px;
		}
	}
}

.new_graph_button,
.save_graph_button,
.restore_graph_button
{
	position: relative;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	padding-left: 30px;

	&::before
	{
		content: "";
		background-size: contain;
		background-repeat: no-repeat;
		width: 20px;
		height: 20px;
		display: inline-block;
		text-align: center;
		position: absolute;
		left: 5px;
		top: 5px;
	}
}

.new_graph_button::before
{
	background-image: url("../img/PlusDark.svg");
}

.save_graph_button::before
{
	background-image: url("../img/Save.svg");
}

.restore_graph_button::before
{
	background-image: url("../img/LoopDark.svg");
}

.top_bar
{
	height: 32px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: white;
	border-bottom: 1px solid var(--light_gray);
}

.top_bar_documentation_div,
.top_bar_found_a_bug_div,
.top_bar_social_media_div
{
	display: flex;
	flex-direction: row;
	cursor: pointer;
	align-items: center;
}

.top_bar_documentation_link,
.top_bar_found_a_bug_link
{
	text-decoration: underline;
	text-underline-offset: 5px;
	cursor: pointer;
	min-width: max-content;
}

.top_bar_user_picture
{
	border-radius: 50%;
	border: 1px solid #333;
	height: 60%;
	width: auto;
	aspect-ratio: 1;
	margin-right: 8px;
	cursor: pointer;
}

.top_bar_found_a_bug_div
{
	margin-left: 10px;
}

.top_bar_found_a_bug_icon,
.top_bar_documentation_icon
{
	height: 24px;
	padding-right: 5px;
	padding-left: 20px;
	cursor: pointer;
}

.flex_horizontal
{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;

	& .gap_5 { gap: 5px; }
	& .gap_10 { gap: 10px; }
	& .gap_15 { gap: 15px; }
	& .gap_20 { gap: 20px; }
}

.found_a_bug_window_title_icon
{
	height: 32px;
}

.top_bar_social_media_div
{
	margin-left: 30px;
}
.top_bar_social_media_icon
{
	height: 14px;
	margin-right: 10px;
}

.top_bar_logo_image
{
	height: 24px;
	margin-right: 10px;
	transform: rotate(0deg) translate(0%);
	cursor: pointer;
	-moz-user-select: none; -webkit-user-select: none; user-select: none;

	&.start
	{
		margin-left: 10px;
	}
}

.top_bar_logo_image.animate
{
	transform: rotate(360deg) translate(0%);
	transition: all 0.5s ease;
}

.top_bar_save_graph_hint
{
	margin-left: auto;
	margin-right: 30px;
	text-decoration: underline;
	cursor: pointer;
	min-width: max-content;
}

.top_bar_user_greeting
{
	margin-right: 3px;
}

.top_bar_user_greeting_name_link
{
	margin-right: 10px;
}

#sign_out_link,
#sign_out_link:hover
{
	float: left;
	margin-left: 5px;
	color: var(--dark_gray);
}

.login_or_register_form
{
	color: inherit; /* Useless rule just so that linter doesn't complain about empty scope */
	width: 100%;
    width: calc(100% - 0px);
    border-radius: 0px 0px 8px 8px;
}

.login_or_register_form_submit_row
{
	display: flex;
	flex-direction: row;
	justify-items: right;
	justify-content: right;
	align-items: baseline;
	gap: 40px;
	width: 100%;
}

.login_or_register_form .error
{
	margin-bottom: 10px;
}

.login_or_register_form input
{
	width: 100%;
	box-sizing: border-box;
}

.login_or_register_form table
{
	border-collapse: separate;
	border-spacing: 10px 0px; /* Adds horizontal spacing between columns */
	width: 100%;
}

.password_input_wrapper
{
	position: relative;
	width: 100%;
}

.password_input
{
	padding-right: 32px; /* Some space for the visible button */
}

.toggle_password_visibility_button
{
	position: absolute;
	right: 5px;
	top: 50%;
	filter: brightness(0.5) saturate(100%);
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	height: 24px;
	width: 24px;
	font-size: 14px;
	-webkit-user-drag: none;
	-moz-user-select: none; -webkit-user-select: none; user-select: none;
}

.toast_container_zindex /* Needed just to use z-index on a non-position:fixed element*/
{
	position: relative;
	z-index: 50;
}

.toast_container
{
	position: fixed;
	top: 20px;
	right: 50%;
	transform: translateX(50%);
	display: block;
}

.toast
{
	padding-bottom: 20px;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
	outline: 2px solid var(--dark_gray);
	border: 10px solid var(--dark_gray);
	border-radius: 20px;
	color: white;
	min-width: 200px;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
	box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 1), inset 0px 0px 2px rgba(0, 0, 0, 1);
	opacity: 0;
	transform: translateY(-100px);
	transition: all 0.5s ease;
}

.toast.show
{
	transform: translateY(0);
	opacity: 1;
}

.toast.hide
{
	transform: translateY(-100px);
	opacity: 0;
}

.toast_success
{
	background: #f2ffd8;
	border-color: #00ff2d;
	color: #003700;
}

.toast_warning
{
	background: #fff9c9;
	border-color: #ffc000;
	color: #713f00;
}

.toast_info
{
	background: #f9f9ff;
	border-color: #2e93ff;
	color: #1a1a1a;
}

.toast_error
{
	background: #ff8800;
	background-color: #ffe3e3;
	border-color: #ff0000;
	color: #690000;
}

.popup_blocking_background
{
	display: flex;
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: all ease-in 0.25s;
	z-index: 10;
}

.popup_blocking_background.show
{
	visibility: visible;
	opacity: 1;
	transition: all ease-out 0.25s;
}

.confirm_popup_container,
.save_graph_popup_container,
.dropdown_popup_container,
.forgot_password_popup_container
{
	background: white;
	padding: 20px;
	border-radius: 8px;
	text-align: center;
	border: var(--dark_gray) 2px solid;
	opacity: 0;
	transition: all ease 0.25s;
}

.confirm_popup_container.show,
.save_graph_popup_container.show,
.dropdown_popup_container.show,
.forgot_password_popup_container.show
{
	opacity: 1;
	transition: all ease 0.25s;
}

.dropdown_popup_container
{
	position: absolute;
	width: auto;
	padding: 0px;
	border-width: 1px;
	overflow: hidden;
	z-index: 10;
}

.dropdown_popup_item
{
	cursor: pointer;
	padding: 10px;
	overflow: visible;
	text-wrap-mode: nowrap;
	border-bottom: 1px solid #00000022;
	-moz-user-select: none; -webkit-user-select: none; user-select: none;
}

.dropdown_popup_item:hover
{
	background-color: rgb(255, 228, 200);
	background: var(--accent_color_super_light);
	transition: all ease 0.25s;
}

.confirm_popup_message,
.save_graph_popup_message,
.forgot_password_popup_message
{
	-moz-user-select: none; -webkit-user-select: none; user-select: none;
}

.confirm_popup_buttons_container
{
	margin-top: 20px;
	width: 100%;
}

.save_graph_popup_buttons_container
{
	margin-top: 10px;
}

.confirm_popup_buttons_container button,
.save_graph_popup_buttons_container button,
.forgot_password_popup_container button
{
	margin-left: 30px;
	margin-right: 30px;
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
}

.forgot_password_popup_input_row
{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: left;
	gap: 10px;
	width: 100%;
	height: 40px;
	flex-grow: 1;
}

.forgot_password_popup_secret_code_input
{
	min-width: 10ch;
	max-width: 10ch;
	text-align: center;
}

.forgot_password_popup_change_password_button
{
	margin-top: 10px;
}

.forgot_password_popup_container,
.forgot_password_popup_buttons_container
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.forgot_password_popup_container p
{
	min-width: 120px;
	text-align: right;
	flex-grow: 0;
	flex-basis: 0;
}

.forgot_password_popup_buttons_container
{
	gap: 0px;
	margin-top: 10px;
}

.forgot_password_popup_buttons_container input
{
	width: 150px;
	padding: 5px;
	flex-grow: 1;
}

.save_graph_popup_input
{
	padding: 5px;
	font-size: 14pt;
}

.clipboard_popup
{
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: absolute;
	background: white;
	width: 200px; /* Overriden by code */;
	padding: 10px; /* Overriden by code */;
	border: 1px solid var(--light_gray);
	box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
	border-radius: 5px;
	z-index: 20;
	opacity: 0;
	transition: all ease-in 0.25s;
}

.clipboard_popup.show
{
	opacity: 1.0;
	transition: all ease-out 0.25s;
}

.clipboard_popup_input
{
	padding: 5px;
	border: 1px solid var(--light_gray);
	border-radius: 3px;
	text-align: center;
	outline: none;
}

.clipboard_popup_warning
{
	background-color: #fffff3;
	border-radius: 8px;
	border: solid 1px#ff9d00;
	padding: 8px;
	padding-left: 12px;
	padding-right: 12px;
	text-align: center;
}

.tooltip_popup
{
	position: absolute;
	background: white;
	width: 200px; /* Overriden by code */;
	padding: 10px; /* Overriden by code */;
	border: 1px solid var(--light_gray);
	box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
	border-radius: 5px;
	z-index: 20;
	opacity: 0;
	transition: all ease-in 0.15s;
}

.tooltip_popup.show
{
	opacity: 1.0;
	transition: all ease-out 0.75s;
}

.tooltip_popup_text
{
	text-align: center;
}

.first_time_popup_container
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	border-color: #555;
	background-color: white;
	max-width: 80vw;
	height: fit-content;
	border-radius: 8px;
	padding: 40px;

	& .main_message
	{
		font-size: 26px;
		text-align: center;
	}

	& .secondary_message
	{
		text-align: center;
	}

	& .accept_button
	{
		font-size: 30px;
		margin-top: 20px;
	}
}

.captcha_challenge_popup
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	border-color: #555;
	background-color: white;
	max-width: 80vw;
	height: fit-content;
	border-radius: 8px;
	padding: 40px;
	width: 400px;

	& .captcha_challenge_main_message
	{
		font-size: 14pt;
	}

	& .captcha_challenge_canvas
	{
		width: 256px;
		height: 256px;
		border-radius: 50%;
	}

	& .captcha_challenge_rotation_slider
	{
		width: 100%;
		height: 30px;
		appearance: none;
		background: transparent;
		border: 2px solid #888;
		border-radius: 4px;

		&::-webkit-slider-runnable-track { height: 10px; }
		&::-moz-range-track { height: 10px; }

		&::-webkit-slider-thumb
		{
			appearance: none;
			height: 26px;
			width: 26px;
			background: #fff;
			border: 2px solid #ff9000;
			border-radius: 4px;
			margin-top: -8px; /* Aligns thumb with the track */
			cursor: pointer;
		}

		&::-moz-range-thumb
		{
			appearance: none;
			height: 22px; /* A bit less in firefox, otherwise does not look good*/
			width: 22px;
			background: #fff;
			border: 2px solid #ff9000;
			border-radius: 4px;
			margin-top: -8px; /* Aligns thumb with the track */
			cursor: pointer;
		}
	}

}

.profile_overlay_container
{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 800px;
	height: 500px;
	border: 1px solid var(--dark_gray);
	padding: 20px;
	border-radius: 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background: white;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
	gap: 10px;
}

.profile_close_button
{
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	background: none;
	border: none;
	width: 24px;
	height: 24px;
	padding: 0;
}

.profile_close_button img
{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.profile_left_panel
{
	width: fit-content;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 400px;
	position: relative;
}

.profile_header
{
	display: flex;
	align-items: stretch;
	align-content: stretch;
	margin-bottom: 20px;
	gap: 25px;
}

.profile_picture_container
{
	position: relative;
	width: 128px;
	height: 128px;
}

.profile_picture
{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	background-color: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	outline: 3px solid var(--dark_gray); /* Interior border using outline with negative offset */
	outline-offset: -2px;
	-moz-user-select: none; -webkit-user-select: none; user-select: none; 
}

.profile_picture img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	-webkit-user-drag: none;
	min-width: 128px;
}

.profile_upload_button
{
	position: absolute;
	left: 0;
	bottom: 0;
	cursor: pointer;
	background: white;
	border: 1px solid #ddd;
	width: 32px;
	height: 32px;
	padding: 4px;
	border-radius: 4px 0 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 4px rgba(0,0,0,0.1);
	opacity: 0;
	transition: all ease 0.25s;
}

.profile_upload_button.show
{
	opacity: 1;
	transition: all ease 0.25s;
}

.profile_upload_button img
{
	width: 20px;
	height: 20px;
	object-fit: contain;
	filter: invert(50%);
}

.profile_info
{
	flex-grow: 1;
	margin-top: 20px;
}

.profile_name
{
	font-weight: bold;
	margin-bottom: 3px;
	font-size: 18px;
	margin-right: 15px;
}

.profile_registration_date
{
	font-size: 12px;
	color: #777;
	margin-top: 10px;
	margin-bottom: 5px;
}

.profile_horizontal_separation
{
	border-bottom: 1px solid #eee;
	background: none;
	height: 1px;
}

.profile_description_section
{
	position: relative;
	flex-grow: 1;
	flex-shrink: 1;
	overflow: hidden;
}

.profile_description_textarea
{
	font-size: 14px;
	padding: 10px;
	margin-top: 20px;
	width: 100%;
	height: calc(100% - 30px);
	resize: none;
	overflow-x: hidden;
	overflow-y: auto;
	background: none;
}

.profile_description_section .textarea_char_counter
{
    bottom: 12px;
}

.profile_description_textarea.read_only
{
	border: none;
	outline: none;
}

.profile_right_panel
{
	width: 70%;
	border-left: 1px solid #eee;
	padding-left: 15px;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}

.profile_graphs_label
{
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 5px;
}

.profile_scroll_panel
{
	position: relative;
	flex-grow: 1;
	overflow: hidden;
	border-right: 1px var(--dark_gray) solid;
	outline: 0.5px var(--dark_gray) solid;
	padding: 0px;
	border-radius: 8px;
	margin-bottom: 10px;
	background: rgba(250,250,250);
	overflow-x: hidden;
	overflow-y: hidden;
}

.found_a_bug_window
{
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 600px;
	height: 500px;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0px 0px 20px 5px black;
	padding: 20px;
	padding-bottom: 50px;
}

.found_a_bug_window_title
{
	font-size: 20pt;
	font-weight: bold;
	text-align: center;
}

.found_a_bug_window_explanation_label
{
	margin-top: 10px;
	margin-bottom: 10px;
}

.found_a_bug_window_explanation_textarea
{
	height: 100%;
	margin-bottom: 20px;
	width: 100%;
	padding-bottom: 30px;
}

.toggle_section_outer
{
	padding-left: 11px;
	padding-right: 10px;
	outline: 1px solid #00000030;
	background: #0000000c;
	width: 95%;
	display: flex;
	border-radius: 8px;
	flex-direction: column;
	margin-top: 10px;
	overflow: visible;
}

.toggle_section_outer.toggled_on
{
	transition: all 0.25s ease;
}

.toggle_section_header_row
{
	display: flex;
	flex-direction: row;
	align-items: center;
	cursor: pointer;
	gap: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	width: fit-content;
}

.toggle_section_header_row.toggled_on
{
	margin-bottom: 5px;
}

.toggle_section_header_label /* Level 1 */
{
	font-size: 12pt;
	padding-top: 0px;
	padding-bottom: 0px;
	height: fit-content;
}

.toggle_section_header_arrow
{
	font-size: 8pt;
	margin-bottom: 2px;
	transform: rotate(0deg);
	transition: all 0.25s ease;
}

.toggle_section_header_arrow.toggled_on
{
	transform: rotate(90deg);
	transition: all 0.25s ease;
}

.toggle_section_content_container
{
	display: none;
	overflow: visible;
	padding: 1px;
	pointer-events: none;
}

.toggle_section_content_container.toggled_on
{
	display: block;
	margin-bottom: 10px;
	pointer-events: all;
}

.toggle_section_header_icon
{
	width: 24px;
	height: 24px;
}

.tab_container
{
	display: flex;
	flex-grow: 1;
	flex-shrink: 1;
	width: 100%;
	flex-basis: max-content;
	overflow: hidden;
	flex-direction: column;
	flex-grow: 9999;
}

.tab_container_tab_headers_row
{
	display: flex;
	flex-direction: row;
	flex-basis: fit-content;
	flex-grow: 0;
	flex-shrink: 1;
	justify-content: flex-start;
	width: 100%;
}

.tab_container_tab_header
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 4px;
	padding-right: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-top: 1px solid var(--dark_gray);
	border-left: 1px solid var(--dark_gray);
	border-right: 1px solid var(--dark_gray);
	background-color: #ccc;
	cursor: pointer;
	overflow: hidden;
	z-index: 1;
}

.tab_container_tab_header.active,
.tab_container_tab_header.active:hover
{
	background-color: white;
	transform: translateY(1px);
}

.tab_container_tab_header:hover
{
	background-color: #ddd;
}

.tab_container_tab_header_tab_icon
{
	width: 24px;
	height: 24px;
	margin-right: 2px;
}

.tab_container_tab_header_tab_name
{
	display: inline-block;
	font-size: 11pt;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.tab_container_content_container
{
	display: flex;
	overflow-x: hidden;
	overflow-y: hidden;
	flex-grow: 1;
	flex-shrink: 1;
	justify-content: start;
	width: auto;
	flex-direction: column;
	margin-bottom: 5px;
	padding: 1px;
	background-color: white;
	padding: 0px;
	border-radius: 8px;
	border-top-left-radius: 0px;
	border: 1px solid var(--dark_gray);
}

.tab_container_content
{
	display: none;
	height: 100%;
}

.tab_container_content.active
{
	display: block;
	overflow-x: hidden;
	overflow-y: hidden;
}

.tab_container_content.comment_list_container_outer.active
{
	display: flex;
	height: 100%;
}

textarea
{
	resize: none;
	border-radius: 8px;
	padding: 10px;
	border-style: solid;
	box-sizing: border-box;
	outline: 0px;
}

.textarea_outer
{
	width: 100%;
	height: 100%;
	position: relative;
}

.textarea_char_counter
{
	position: absolute;
	bottom: 2px;
	right: 2px;
	font-size: 12px;
	color: #666;
	background-color: rgba(255, 255, 255, 0.7);
	padding: 2px;
	border-radius: 8px;
}

.dark
{
	filter: brightness(0.4);
	background-color: transparent; /* Otherwise it tints whatever it's modifying */
}

.very_dark
{
	filter: brightness(0.1);
	background-color: transparent; /* Otherwise it tints whatever it's modifying */
}

.loading_spinner_popup_container
{
	& .spinner
	{
	  width: 256px;
	  height: 256px;
	  border: 20px solid #fff;
	  border-top: 20px solid #ff9000;
	  border-radius: 50%;
	  animation: loading_spinner_animation 1s linear infinite;
	  margin: 20px auto;
	}
}
	
@keyframes loading_spinner_animation
{
	to { transform: rotate(360deg); }
}

/* This prevents Godot IME to displace the whole webpage upwards when dragging any window title bar (e.g. a Custom Shader window title bar) past the bottom of the screen*/
.ime
{
	position: fixed !important;
	opacity: 0.01 !important;
	pointer-events: none !important;
	overflow: hidden !important;
	width: 1px !important;
	height: 1px !important;
	max-width: 1px !important;
	max-height: 1px !important;
	inset: 0 auto auto 0 !important;
}

/* GODOT CSS BEGIN (modified) */

html, body, #canvas
{
	margin: 0;
	padding: 0;
	border: 0;
}

#canvas
{
	display: block;
}

#canvas:focus
{
	outline: none;
}

#status, #status-splash, #status-progress
{
	position: absolute;
	left: 0;
	right: 0;
}

#status, #status-splash
{
	top: 0;
	bottom: 0;
}

#status
{
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	visibility: hidden;
}

#status-splash
{
	max-height: 50%;
	max-width: 50%;
	margin: auto;
}

#status-splash.show-image--false
{
	display: none;
}

#status-splash.fullsize--true
{
	height: 100%;
	width: 100%;
	object-fit: contain;
}

#status-splash.use-filter--false
{
	image-rendering: pixelated;
}

#status-progress, #status-notice
{
	display: none;
}

#status-progress
{
	bottom: 10%;
	width: 50%;
	margin: 0 auto;
}

#status-notice
{
	background-color: #5b3943;
	border-radius: 0.5rem;
	border: 1px solid #9b3943;
	color: #e0e0e0;
	font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
	line-height: 1.3;
	margin: 0 2rem;
	overflow: hidden;
	padding: 1rem;
	text-align: center;
	z-index: 1;
}

progress
{
	border: 1px solid #888 !important;
	border-radius: 8px !important;
}

progress::-webkit-progress-value
{
	background-color: orange !important;
	border-radius: 8px !important;
}

progress::-moz-progress-bar
{ 
	background-color: orange !important;
	border-radius: 8px !important;
}

progress::-webkit-progress-bar
{
	background-color: #ccc !important;
	border-radius: 8px !important;
}

/* GODOT CSS END */