@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_light: rgb(253, 216, 186);
	--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: 10px;
	--sidebar_margin_top_left: 10px;
	--sidebar_starting_width: 400px;
	--sidebar_resizer_grab_width: 10px;
	--new_comment_entry_margin_right: 8px;
}

[data-theme="light"]
{
	--accent_color: #e76c00;
	--startup_loading_background_color: #fff;
	--link_font_color: var(--accent_color);
	--checkbox_color_selected: #ff5500;
	--top_bar_background_color: #fff;
	--top_bar_bottom_line_color: var(--light_gray);
	--top_bar_link_color: #333;
	--font_color: var(--dark_gray);
	--font_color_subtle: #00000099;
	--selection_color: rgb(255, 162, 57);
	--selection_text_color: var(--font_color);
	--window_background_color: #fff;
	--sidebar_background_color: #fff;
	--sidebar_resizer_left_line_color: #777;
	--input_background_color: #fff;
	--input_outline_color: #b1b1b1;
	--input_outline_color_selected: var(--accent_color);
	--global_search_bar_magnifying_glass_image: 0.2;
	--tab_container_background_color: #fff;
	--tab_container_border_color: #b0b0b0;
	--tab_header_container_border_color: var(--tab_container_border_color);
	--tab_header_background_color_active: #fff;
	--tab_header_background_color_inactive: #ddd;
	--tab_header_background_color_hover: #eee;
	--button_background_color: #f8f8f8;
	--button_border_color: #ccc;
	--button_background_color_disabled: #bbb;
	--button_font_color_hover: var(--font_color);
	--button_font_color_disabled: #00000033;
	--button_icon_brightness: 0.2;
	--button_icon_brightness_hover: 0.2;
	--top_bar_button_icon_brightness: 0.3;
	--comment_list_container_background_color: #fdfdfd;
	--button_cross_red_brightness: 1.0;
	--button_cross_red_saturate: 1.0;
	--button_duplicate_icon_brightness: 0.5;
	--button_duplicate_icon_brightness_hover: 0.6;
	--dropdown_border_color: #a6a6a6;
	--dropdown_font_color_hover: var(--font_color);
	--dropdown_background_color: var(--window_background_color);
	--dropdown_background_color_hover: rgb(255, 228, 200);
	--change_theme_icon_brightness: 0.5;
	--sidebar_dropdown_icon_brightness: 0.2;
	--graph_list_entry_button_brightness: 0.4;
	--graph_list_entry_image_wrapper_border_color: #555;
	--graph_list_entry_image_wrapper_border_color_selected: #ff7b00;
	--graph_list_entry_image_wrapper_border_color_hovered: #ffaf38;
	--graph_list_entry_image_wrapper_border_radius: 4px;
	--comment_entry_comment_background_color: #fff3ed;
	--comment_entry_comment_border_color: var(--accent_color);
	--comment_entry_user_image: var(--dark_gray);
	--sidebar_main_graph_bottom_hr_separator: #fff;
	--text_input_simple_underlined_line_color: #bbb;
	--scroll_bar_background_color: #00000022;
	--scroll_bar_background_color_hover: #00000033;
	--scroll_bar_color: #00000022;
	--scroll_bar_color_hover: #00000033;
	--profile_window_graphs_scroll_panel_border_color: #bbb;
	--profile_window_graphs_list_background_color: #f8f8f8;
	--textarea_background_color: #f8f8f8;
	--textarea_border_color: #bbb;
}

[data-theme="dark"]
{
	--accent_color: #e97e21;
	--startup_loading_background_color: #333;
	--link_font_color: var(--accent_color);
	--checkbox_color_selected: #ff8f00;
	--top_bar_background_color: #272727;
	--top_bar_bottom_line_color: #000;
	--top_bar_link_color: #ccc;
	--font_color: #eee;
	--font_color_subtle: #ffffffbb;
	--selection_color: rgb(255, 162, 57);
	--selection_text_color: var(--dark_gray);
	--window_background_color: #333;
	--sidebar_background_color: #2d2d2d;
	--sidebar_resizer_left_line_color: #000;
	--input_background_color: #333;
	--input_outline_color: #000;
	--input_outline_color_selected: var(--accent_color);
	--global_search_bar_magnifying_glass_image: 1.0;
	--tab_container_background_color: #1a1a1a;
	--tab_header_background_color_active: var(--tab_container_background_color);
	--tab_header_background_color_inactive: #333;
	--tab_header_background_color_hover: #444;
	--tab_container_border_color: #000;
	--tab_header_container_border_color: var(--tab_container_border_color);
	--button_background_color: #3a3a3a;
	--button_border_color: #181818;
	--button_background_color_disabled: #222;
	--button_font_color_hover: #333;
	--button_font_color_disabled: #ffffff33;
	--button_icon_brightness: 1.0;
	--button_icon_brightness_hover: 0.2;
	--top_bar_button_icon_brightness: 0.8;
	--comment_list_container_background_color: #141414;
	--button_cross_red_brightness: 3;
	--button_cross_red_saturate: 0.6;
	--button_duplicate_icon_brightness: 0.9;
	--button_duplicate_icon_brightness_hover: 1.0;
	--dropdown_border_color: #000;
	--dropdown_font_color_hover: rgb(255, 150, 120);
	--dropdown_background_color: var(--window_background_color);
	--dropdown_background_color_hover: var(--window_background_color);
	--change_theme_icon_brightness: 1.0;
	--sidebar_dropdown_icon_brightness: 1.0;
	--graph_list_entry_button_brightness: 1.0;
	--graph_list_entry_image_wrapper_border_color: #000;
	--graph_list_entry_image_wrapper_border_color_selected: #ff9900;
	--graph_list_entry_image_wrapper_border_color_hovered: #ffaf38;
	--graph_list_entry_image_wrapper_border_radius: 4px;
	--comment_entry_comment_background_color: #222;
	--comment_entry_comment_border_color: #000;
	--comment_entry_user_image: #000;
	--sidebar_main_graph_bottom_hr_separator_color: #222;
	--text_input_simple_underlined_line_color: #888;
	--scroll_bar_background_color: #ffffff22;
	--scroll_bar_background_color_hover: #ffffff33;
	--scroll_bar_color: #ffffff33;
	--scroll_bar_color_hover: #ffffff77;
	--profile_window_graphs_scroll_panel_border_color: #000;
	--profile_window_graphs_list_background_color: var(--tab_container_background_color);
	--textarea_background_color: #2a2a2a;
	--textarea_border_color: #000;
}

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

a
{
	color: var(--link_font_color);
}

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

::-webkit-scrollbar
{
	width: 10px;
}
::-webkit-scrollbar-track
{
	background: var(--scroll_bar_background_color);
	border-radius: 16px;
}
::-webkit-scrollbar-track:hover
{
	background: var(--scroll_bar_background_color_hover);
}
::-webkit-scrollbar-thumb
{
	background: var(--scroll_bar_color);
	border-radius: 16px;
}
::-webkit-scrollbar-thumb:hover
{
	background: var(--scroll_bar_color_hover);
	cursor: grab;
}

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

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);
	color: var(--button_font_color_hover);
	background-color: var(--accent_color_super_light);
	border-width: 1px;
	transition: all ease 0.25s;
}

button:disabled
{
	cursor: not-allowed;
	background-color: var(--button_background_color_disabled);
	color: var(--button_font_color_disabled);
}

input
{
	box-sizing: border-box;
	border: 1px solid var(--input_outline_color);
	outline-width: 0px;
	border-radius: 8px;
	color: var(--font_color);
	background-color: var(--input_background_color);
}

input:focus,
input:focus-visible
{
	outline: 0px;
	border-color: var(--input_outline_color_selected);
}

textarea
{
	resize: none;
	border-radius: 8px;
	padding: 10px;
	border-style: solid;
	box-sizing: border-box;
	outline: 0px;
	color: var(--font_color);
	background-color: var(--textarea_background_color);
	border: 1px solid var(--textarea_border_color);
}

.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: var(--font_color);
	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: var(--checkbox_color_selected);
}

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

.sidebar_dropdown_icon
{
	font-size: 32px;
	width: 20px;
	filter: brightness(var(--sidebar_dropdown_icon_brightness)) 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
{
	cursor: ew-resize;
	height: 100%;
	min-width: var(--sidebar_resizer_grab_width);
	-webkit-user-drag: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	margin-right: 5px;
	z-index: 99; /* So that it is grabbable */
}

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

.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: 5px;
	margin-bottom: 5px;
	border-style: solid;
	border-width: 1px;
	border-color: transparent;
}

.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
{
	display: none;
	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;
	background: var(--sidebar_background_color);
	height: 100%;
}

.sidebar.open
{
	display: flex;
	opacity: 1;
	padding-right: 5px;
	border-left: solid var(--sidebar_resizer_left_line_color) 1px;
	max-height: 100%;
}

.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: var(--sidebar_margin_top_left);
	padding-top: var(--sidebar_margin_top_left);
	overflow: hidden;
	height: calc(100% - 25px);
	margin-left: calc(-1.0 * var(--sidebar_resizer_grab_width) - 5px);
}

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

.user_options_button
{
	cursor: pointer;
	color: var(--font_color);
	margin-right: 10px;
}

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

.uncolored_link,
.uncolored_link:hover,
.uncolored_link:visited
{
	white-space: nowrap;
	color: var(--font_color);
}


/* 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 var(--text_input_simple_underlined_line_color);
	border-radius: 0px;
	background: transparent;
	outline: none;
}
::selection
{
	background: var(--selection_color);
	color: var(--selection_text_color);
}
::-moz-selection
{
	background: var(--selection_color);
	color: var(--selection_text_color);
}
.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%;
	background-color: var(--tab_container_background_color);
}

.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;
	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;
	background-color: transparent;
}

.search_bar_input_div,
.global_search_bar_input_div
{
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
	outline-width: 0px;
}
.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: start;
	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;
	outline: 0px;
}

.search_bar_magnifying_glass_image,
.global_search_bar_magnifying_glass_image
{
	width: 18px;
	height: 14px;
	position: absolute;
	filter: brightness(var(--global_search_bar_magnifying_glass_image));
	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: var(--font_color);
}

.global_search_window
{
	FONT-WEIGHT: 500;
	position: absolute;
	width: fit-content;
	height: calc(75% - 50px);
	background-color: var(--window_background_color);
	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);
	z-index: 50;
}

.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_main_hbox .graph_list_outer
{
	background-color: transparent;
}
.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:hover > div
{
	color: #444;
}

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

.user_entry_user_name_label
{
	text-decoration: underline;
	cursor: pointer;
	flex-grow: 1;
}

.graph_list_entry,
.graph_list_entry.fade_out,
.graph_list_entry.highlight
{
	margin-left: 0px;
	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 > .graph_list_entry_right_vbox
{
	align-self: stretch;
}
.graph_list_entry:last-child
{
	margin-bottom: 0px;
}
.graph_list_entry.fade_out
{
	opacity: 0;
	transition: all 0.4s ease;
}
.graph_list_entry.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,
.text_input_simple_underlined
{
	display: flex;
	flex-direction: row;
	flex-shrink: 1;
	flex-grow: 1;
	min-width: 0;
	width: 100%;
}

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

.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;
	outline: 1px solid var(--graph_list_entry_image_wrapper_border_color);
	border-radius: var(--graph_list_entry_image_wrapper_border_radius);
	-webkit-user-drag: none;
}
.graph_list_entry_image_wrapper:hover
{
	outline: 2px solid var(--graph_list_entry_image_wrapper_border_color_hovered);
}
.same_as_current_graph .graph_list_entry_image_wrapper
{
	outline: 4px solid var(--graph_list_entry_image_wrapper_border_color_selected);
}
.graph_list_entry_image
{
	width: 80px;
	height: 80px;
	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;
	-webkit-user-drag: none;
	-moz-user-select: none;
	user-select: none;
	opacity: 1;
	border-radius: var(--graph_list_entry_image_wrapper_border_radius);
}

.graph_list_entry_button,
.graph_list_entry_button.remove,
.graph_list_entry_button.remove:hover,
.graph_list_entry_button.duplicate,
.graph_list_entry_button.duplicate:hover,
.graph_list_entry_button.share,
.graph_list_entry_button.share:hover,
.graph_list_entry_button.share.disabled
{
	width: 20px;
	height: 20px;
	right: 80px;
	z-index: 5;
	cursor: pointer;
	border: solid 2px red;
	border-color: transparent;
	background-color: transparent;

	-webkit-user-drag: none;
	-moz-user-select: none; -webkit-user-select: none; user-select: none;
}
.graph_list_entry_button.remove
{
	filter: saturate(var(--button_cross_red_saturate)) brightness(var(--button_cross_red_brightness));
}
.graph_list_entry_button.duplicate
{
	filter: brightness(var(--button_duplicate_icon_brightness));
}
.graph_list_entry_button.duplicate:hover
{
	filter: brightness(var(--button_duplicate_icon_brightness_hover));
}

.graph_list_entry_button.share,
.graph_list_entry_button.share:hover,
.graph_list_entry_button.share.disabled
{
	position: relative;
	right: 0px;
	border-radius: 8px;
}
.graph_list_entry_button.share.disabled
{
	opacity: 0.8;
	cursor: not-allowed;
	transition: all 0.5s ease;
}
.graph_list_entry_button .img
{
	filter: brightness(var(--graph_list_entry_button_brightness));
}

img.graph_list_entry_button.duplicate
{
	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;
	cursor: pointer;
	opacity: 0.8;
	display: flex;
	align-items: center;
	gap: 0px;
	justify-content: center;
}

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

.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: var(--font_color_subtle);
	margin: 0px;
}

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

.graph_list_entry_modification_date
{
	color: var(--font_color_subtle);
	font-size: 14px;
	pointer-events: none; /* Ignore so that container can grab 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: 5px;
}

.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');
	filter: brightness(var(--button_icon_brightness));
	-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');
	filter: brightness(1.0);
}
.graph_list_entry_favorite_button.on
{
	opacity: 1;
	content: url('../img/HeartFilled.svg');
	filter: brightness(1.0);
}

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

.comment_entry_container
{
	display: flex;
	flex-direction: row;
	gap: 2px;
	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: var(--comment_entry_comment_background_color);
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 1px solid var(--comment_entry_comment_border_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;
}

.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 var(--tab_container_border_color);
	background-color: var(--comment_list_container_background_color);
	border-radius: 8px;
	margin-top: 5px;
	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: calc(100% - var(--new_comment_entry_margin_right));
}

.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,
.comment_entry_user_image
{
	width: 32px;
	height: 32px;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	outline: 1px solid var(--comment_entry_user_image_border_color);
	transform: translateX(0%) translateY(20px);
	cursor: pointer;
}

.comment_entry_user_image
{
	margin-right: 4px;
	margin-left: 2px;
}

.new_comment_entry_bottom_row
{
	display: flex;
	flex-direction: row;
	justify-content: right;
	align-items: center;
	margin-right: var(--new_comment_entry_margin_right);
}

.new_comment_entry_post_comment_button,
.new_comment_entry_post_comment_button:not(:disabled),
.new_comment_entry_post_comment_button::after
{
	position: relative;
	transition: none !important;
}
.new_comment_entry_post_comment_button:not(:disabled)
{
	padding-right: 30px;
}
.new_comment_entry_post_comment_button:not(:disabled)::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,
.new_graph_button::before,
.save_graph_button,
.save_graph_button::before,
.restore_graph_button,
.restore_graph_button::before
{
	position: relative;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	padding-left: 30px;
}
.new_graph_button::before,
.save_graph_button::before,
.restore_graph_button::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;
	filter: brightness(var(--button_icon_brightness));
}
.new_graph_button:hover::before,
.save_graph_button:hover::before,
.restore_graph_button:hover::before
{
	filter: brightness(var(--button_icon_brightness_hover));
}

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

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

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

.top_bar
{
	height: 32px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: var(--top_bar_background_color);
	outline: 1px solid var(--top_bar_bottom_line_color);

	/* Sink down top bar 1px, so that it covers the topmost pixel of Graphi app, to hide the 1px row that we add/remove in Graphi when resizing it to avoid it being blurry */
	transform: translateY(1px);
	z-index: 4;
}

.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
{
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 5px;
	cursor: pointer;
	min-width: max-content;
	color: var(--top_bar_link_color);
}

.top_bar_user_picture
{
	border-radius: 50%;
	border: 0px;
	height: 80%;
	width: auto;
	aspect-ratio: 1;
	margin-right: 8px;
	cursor: pointer;
}

.top_bar_found_a_bug_div
{
	margin-left: 2px;
}

.top_bar_found_a_bug_icon,
.top_bar_documentation_icon
{
	height: 24px;
	padding-right: 5px;
	padding-left: 8px;
	cursor: pointer;
	filter: brightness(var(--top_bar_button_icon_brightness));
}

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

.found_a_bug_window_title_icon
{
	height: 32px;
	filter: brightness(var(--top_bar_button_icon_brightness));
}
.top_bar_social_media_div
{
	margin-left: 30px;
}
.top_bar_social_media_icon
{
	height: 14px;
	margin-right: 10px;
	filter: brightness(var(--top_bar_button_icon_brightness));
}

.top_bar_logo_image,
.top_bar_logo_image.start
{
	height: 24px;
	margin-right: 10px;
	transform: rotate(0deg) translate(0%);
	cursor: pointer;
	-moz-user-select: none; -webkit-user-select: none; user-select: none;
}
.top_bar_logo_image.start
{
	margin-left: 10px;
}
.top_bar_logo_image.animate
{
	transform: rotate(360deg) translate(0%);
	transition: all 0.5s ease;
}

.change_theme_button
{
	filter: brightness(var(--change_theme_icon_brightness)) saturate(100%);
}

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

.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: 100;
}

.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: var(--window_background_color);
	padding: 20px;
	border-radius: 8px;
	text-align: center;
	border: var(--dropdown_border_color) 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;
	background-color: var(--dropdown_background_color);
}

.dropdown_popup_item
{
	cursor: pointer;
	padding: 10px;
	overflow: visible;
	text-wrap-mode: nowrap;
	background-color: var(--window_background_color);
	-moz-user-select: none; -webkit-user-select: none; user-select: none;
}
.dropdown_popup_item:not(:last-child)
{
	border-bottom: 1px solid var(--dropdown_border_color);
}
.dropdown_popup_item:hover
{
	color: var(--dropdown_font_color_hover);
	background-color: var(--dropdown_background_color_hover);
	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-color: var(--window_background_color);
	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: 999;
	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;
}

.first_time_popup_container,
.first_time_popup_container.main_message,
.first_time_popup_container.secondary_message,
.first_time_popup_container.accept_button
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	border-color: #555;
	background-color: var(--window_background_color);
	max-width: 80vw;
	height: fit-content;
	border-radius: 8px;
	padding: 40px;
}
.first_time_popup_container.main_message
{
	font-size: 26px;
	text-align: center;
}
.first_time_popup_container.secondary_message
{
	text-align: center;
}
.first_time_popup_container.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: var(--window_background_color);
	max-width: 80vw;
	height: fit-content;
	border-radius: 8px;
	padding: 40px;
	width: 400px;
}
.captcha_challenge_popup .captcha_challenge_main_message
{
	font-size: 14pt;
}
.captcha_challenge_popup .captcha_challenge_canvas
{
	width: 256px;
	height: 256px;
	border-radius: 50%;
}
.captcha_challenge_popup .captcha_challenge_rotation_slider
{
	width: 100%;
	height: 30px;
	appearance: none;
	background: transparent;
	border: 2px solid #888;
	border-radius: 4px;
}
.captcha_challenge_popup .captcha_challenge_rotation_slider::-webkit-slider-runnable-track { height: 10px; }
.captcha_challenge_popup .captcha_challenge_rotation_slider::-moz-range-track { height: 10px; }
.captcha_challenge_popup .captcha_challenge_rotation_slider::-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;
}
.captcha_challenge_popup .captcha_challenge_rotation_slider::-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_wrapper
{
	z-index: 60;
}

.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: var(--window_background_color);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
	gap: 10px;
}

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

.profile_close_button,
.profile_close_button:hover,
.profile_close_button:hover:enabled,
.profile_close_button:focus,
.profile_close_button:focus-visible
{
	border: 0px;
	outline: 0px;
	background-color: transparent;
}

.profile_close_button img
{
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: saturate(var(--button_cross_red_saturate)) brightness(var(--button_cross_red_brightness));
}

.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;
	-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: var(--window_background_color);
	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: var(--font_color_subtle);
	margin-top: 10px;
	margin-bottom: 5px;
}

.profile_horizontal_separation
{
	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;
}

.profile_description_section .textarea_char_counter
{
    bottom: 12px;
}

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

.profile_right_panel
{
	width: 70%;
	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(--profile_window_graphs_scroll_panel_border_color) solid;
	outline: 0.5px var(--profile_window_graphs_scroll_panel_border_color) solid;
	padding: 0px;
	border-radius: 8px;
	margin-bottom: 10px;
	overflow-x: hidden;
	overflow-y: hidden;
}

.profile_scroll_panel > .graph_list_outer
{
	background-color: var(--profile_window_graphs_list_background_color);
}

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

.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;
	border-width: 0px;
}

.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%;
	background-color: transparent;
	border-color: var(--tab_header_container_border_color);
}

.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(--tab_container_border_color);
	border-left: 1px solid var(--tab_container_border_color);
	border-right: 1px solid var(--tab_container_border_color);
	background-color: var(--tab_header_background_color_inactive);
	cursor: pointer;
	overflow: hidden;
	z-index: 1;
}

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

.tab_container_tab_header:hover
{
	background-color: var(--tab_header_background_color_hover);
}

.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: var(--window_background_color);
	padding: 0px;
	border-radius: 0px;
	border-width: 0px;
}

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

.tab_container_content.active
{
	display: block;
	overflow-x: hidden;
	overflow-y: hidden;
	border: 1px solid var(--tab_container_border_color);
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	border-top-right-radius: 8px;
	background-color: var(--tab_container_background_color);
}

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

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

.textarea_char_counter
{
	position: absolute;
	bottom: 2px;
	right: 2px;
	font-size: 12px;
	color: #666;
	background-color: transparent;
	margin-right: 12px;
	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
{
	position: absolute;
	left: 0;
	right: 0;
}

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

#status
{
	background-color: var(--startup_loading_background_color);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	z-index: 9999;
}

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

@keyframes spin-burst
{
	0% { transform: rotate(0deg); }
	20% { transform: rotate(360deg); }
	100% { transform: rotate(360deg); }
}

#status-splash
{
	animation: spin-burst 1.5s infinite linear;
	transform-origin: center center;
}

#status-notice
{
	display: none;
}

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