@charset "utf-8";

 :root
{
	--nav-bar-height: 40px;
	--primary-color: 187, 187, 187;
	--secondary-color: 136, 136, 136;
	--tertiary-color: 85, 85, 85;
	--bg-color: 0, 0, 0;
	--heading-color: #292922;
	--input-color: white;
	--input-bg-color: #666666;
	--link-color: lightblue;
	--link-visited-color: #9999ff;
	--cancelled-color: #555555;
	--positive-color: #002d00;
	--negative-color: #400000;
	--shadow-color: 192, 192, 192;
	--emoji-icon-filters: grayscale(100%) contrast(120%) brightness(120%);
	--card-default-background-filters: opacity(30%) grayscale(100%) saturate(50%);
	--card-highlight-background-filters: opacity(70%) grayscale(0%) saturate(90%);
	--event-background-filters: grayscale(20%) saturate(70%) brightness(70%);
	--event-background-gradient: linear-gradient(to bottom, transparent 50%, rgba(var(--bg-color)) 80%);
	--event-background-min-opacity: 0.3;
	--event-header-text-stroke: 0px;
	--desktop-layout-min-width-threshold: 769px;
}

[data-theme="light"]
{
	--primary-color: 0, 43, 54;
	--secondary-color: 170, 164, 146;
	--tertiary-color: 227, 218, 195;
	--bg-color: 238, 232, 213;
	--heading-color: #073642;
	--input-color: #073642;
	--input-bg-color: #fdf6e3;
	--link-color: #268bd2;
	--link-visited-color: #6c71c4;
	--cancelled-color: #657b83;
	--positive-color: #b6c89c;
	--negative-color: #e6c4b0;
	--shadow-color: 0, 43, 54;
	--emoji-icon-filters: sepia(100%) contrast(50%) brightness(120%);
	--card-default-background-filters: opacity(20%) sepia(100%);
	--card-highlight-background-filters: opacity(70%) sepia(20%);
	--event-background-filters: saturate(50%), sepia(10%);
	--event-background-gradient: linear-gradient(to bottom, transparent 10%, rgba(var(--bg-color)) 80%);
	--event-background-min-opacity: 0.25;
	--event-header-text-stroke: 0.02em rgba(var(--primary-color));
}

@media only screen and (min-width: 769px)
{
	:root
	{
		--nav-bar-height: 70px;
		--event-background-gradient: linear-gradient(to bottom, transparent 50%, rgba(var(--bg-color)) 80%);
	}
	[data-theme="light"]
	{
		--event-background-gradient: linear-gradient(to bottom, transparent 0%, rgba(var(--bg-color)) 80%);
	}
}

html, body
{
	scroll-padding-top: var(--nav-bar-height);
	padding: 0px;
	margin: 2rem 0px 0px 0px;
	text-align: left;
	font-size: 16px;
	background: rgba(var(--bg-color));
	color: rgba(var(--primary-color));
	/* Disable font boosting */
	text-size-adjust: none;
	-ms-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
}

@media only screen and (min-width: 769px)
{
	html, body
	{
		font-size: 32px;
	}
}

.nowrap
{
	white-space: nowrap;
}

.bold
{
	font-weight: bold;
}

a, button
{
	text-decoration:  none;
	color: var(--link-color);
}
a:visited
{
	color: var(--link-visited-color);
}
a.disabled
{
	pointer-events: none;
	cursor: default;
}

/* Make buttons look like links */
button {
	align-items: normal;
	background-color: rgba(0,0,0,0);
	border-style: none;
	box-sizing: content-box;
	cursor: pointer;
	display: inline;
	font: inherit;
	height: auto;
	padding: 0;
	perspective-origin: 0 0;
	text-align: start;
	transform-origin: 0 0;
	width: auto;
	-moz-appearance: none;
	-webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
	-webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
  }
  
  /* Mozilla uses a pseudo-element to show focus on buttons, */
  /* but anchors are highlighted via the focus pseudo-class. */
  
  @supports (-moz-appearance:none) { /* Mozilla-only */
	button::-moz-focus-inner { /* reset any predefined properties */ 
	  border: none;
	  padding: 0;
	}
	button:focus { /* add outline to focus pseudo-class */
	  outline-style: dotted;
	  outline-width: 1px;
	}
  }

.cancel_post_edit
{
	margin-left: 3em;
}

.navi
{
	position: fixed;
	top: 0;
	width: 100%;
	height: var(--nav-bar-height);
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	z-index: 11;
	background-color: rgba(var(--bg-color), 0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0px -2px 10px 1px rgba(var(--shadow-color), 0.8);
}

.navi.signedout
{
	justify-content: flex-end;
}

.navi_item
{
	height: var(--nav-bar-height);
	line-height: var(--nav-bar-height);
	min-height: 1em;
	min-width: 5em;
	text-align: center;
}

.navi_popup_header
{
	background-color: rgba(var(--tertiary-color));
}

.navi_popup_item
{
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	text-align: center;
}

button.navi_popup_item
{
	display: block;
	width: 100%;
}

button.navi_popup_item.group,
div.navi_popup_item.group,
div.navi_popup_item.event,
div.navi_popup_item.album,
div.navi_popup_header
{
	width: 100%;
}

.navi_popup_item.group,
.navi_popup_item.event,
.navi_popup_item.album
{
	text-align: left;
}

.navi_popup_item_more
{
	text-align: center;
}

span.navi_popup_text.header,
span.navi_popup_text.group,
span.navi_popup_text.event,
span.navi_popup_text.album
{
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media only screen and (min-width: 769px)
{
	span.navi_popup_text.group::before,
	span.navi_popup_text.event::before,
	span.navi_popup_text.album::before
	{
		font-size: 0.8em;
		padding-right: 1em;
		display: inline-block;
		width: 1em;
		filter: var(--emoji-icon-filters);
	}
	span.navi_popup_text.group::before
	{
		content: "👥";
	}
	span.navi_popup_text.event::before
	{
		content: "🗓️";
	}
	span.navi_popup_text.album::before
	{
		content: "🖼️ ";
	}
}

.theme_switch.navi_item
{
	min-width: 3em;
}

.theme_switch_content
{
	font-size: 1.5rem;
	position: relative;
	min-height: 1em;
	text-shadow: 0px 0px 0.4em rgba(var(--shadow-color), 1);
}

.forgot_password
{
	position: absolute;
	right: 1%;
	font-size: 1rem;
}

table
{
	border-spacing: 0.2rem;
	margin: 0.2rem 0.2rem;
}

table.list,
table.event_title,
table.event_participation_form
{
	/* required because the absolute background image element will otherwise overlap the table contents */
	position: relative;
	width: 98%;
}

@media only screen and (min-width: 769px)
{
	table.list,
	table.event_title,
	table.event_participation_form
	{
		width: 80%;
	}
}

table.list_paging
{
	padding-top: 1em;
	padding-bottom: 1em;
	margin-left: auto;
	margin-right: auto;
}

td, th
{
	vertical-align: top;
}

td.event_description
{
	padding-left: 1rem;
	background-color: rgba(var(--bg-color), 0.5);
	border-radius: 0.25em;
}

th.account_label
{
	vertical-align: middle;
	width: 8rem;
}

.link_chain
{
	font-size: 1.4rem;
	font-weight: normal;
	max-width: 90%;
}

#event_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: var(--event-background-gradient), var(--event-background-image);
	background-size: cover;
	background-position: center;
	filter: var(--event-background-filters);
}

.event_title_background_photo_spacer
{
	margin-top: 25vh;
}

.event_name
{
	font-size: 1.5rem;
	padding-bottom: 0.4em;
}

@media only screen and (min-width: 769px)
{
	#event_background
	{
		background-position: 50% 35%;
	}

	.event_title_background_photo_spacer
	{
		margin-top: 33vh;
	}

	.event_name
	{
		font-size: 1.8rem;
		padding-bottom: 0.5em;
	}
}

.event_header_text
{
	text-shadow: -0.06em -0.06em 0.05em rgba(var(--bg-color)), -0.06em 0.00em 0.05em rgba(var(--bg-color)), -0.06em 0.06em 0.05em rgba(var(--bg-color)), 0.00em 0.06em 0.05em rgba(var(--bg-color)), 0.06em 0.06em 0.05em rgba(var(--bg-color)), 0.06em 0.00em 0.05em rgba(var(--bg-color)), 0.06em -0.06em 0.05em rgba(var(--bg-color)), 0.00em -0.06em 0.05em rgba(var(--bg-color));
	-webkit-text-stroke: var(--event-header-text-stroke);
	text-stroke: var(--event-header-text-stroke);
}

.post_container
{
	font-size: 1rem;
	margin-bottom: 1em;
}

.post_header
{
	font-size: 1.1em;
}

pre
{
	width: 90%;
	overflow-x: auto;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
}

.view_image
{
	max-width: 90%;
	min-width: 300px;
}

@media only screen and (min-width: 769px)
{
	.view_image
	{
		min-width: 600px;
	}
}

.view_image_container
{
	font-size: 1rem;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0.25em 0;
	min-width: 300px;
	min-height: 300px;
}

@media only screen and (min-width: 769px)
{
	.view_image_container
	{
		min-width: 600px;
		min-height: 600px;
	}
}

.view_image_loading
{
	font-size: 20em; /* Fallback */
	font-size: 25vw; /* Another fallback */
	font-size: max(10em, 25vw);
	white-space: nowrap;
	overflow: hidden;

}

.view_image_navigation_overlay_link_left
{
	position: absolute;
	display: inline-block;
	z-index: 1;
	top: 0;
	left: 0;
	right: 50%;
	height: 100%;
}

.view_image_navigation_overlay_link_video_left
{
	right: 66%;
	height: 66%;
}

.view_image_navigation_overlay_link_right
{
	position: absolute;
	display: inline-block;
	z-index: 1;
	top: 0;
	right: 0;
	left: 50%;
	height: 100%;
}

.view_image_navigation_overlay_link_video_right
{
	left: 66%;
	height: 66%;
}

.view_image_navigation_overlay_arrows
{
	z-index: 2;
	margin: 0.25em;
}

.thumbnail_img
{
	width: 100%;
}

.photo_list_object
{
	font-size: 0.8em;
	position: relative;
	float:left;
	border: rgba(var(--tertiary-color)) ridge 2px;
	width: 170px;
	height: 210px;
	overflow: hidden;
	margin: 0;
}

.photo_list_object.new
{
	color: var(--bg-color);
	background-color: rgba(var(--primary-color));
	border-color: rgba(var(--secondary-color));
	animation: pulse-background-color 2s infinite;
}

@keyframes pulse-background-color
{
	0%
	{
		background-color: rgba(var(--primary-color), 1);
	}
	70%
	{
		background-color: rgba(var(--primary-color), 0.75);
	}
	100%
	{
		background-color: rgba(var(--primary-color), 1);
	}
}

img.thumbnail_img.new
{
	box-shadow: 0 0 0 0 rgba(var(--bg-color), 1);
	animation: pulse-size 2s infinite;
}

@keyframes pulse-size
{
	0%
	{
		transform: scale(0.98);
		box-shadow: 0 0 0 0 rgba(var(--bg-color), 0.7);
	}
	70%
	{
		transform: scale(1.03);
		box-shadow: 0 0 0 0.25em rgba(var(--bg-color), 0);
	}
	100%
	{
		transform: scale(0.98);
		box-shadow: 0 0 0 0 rgba(var(--bg-color), 0);
	}
}

div.photo_list_object.new a
{
	color: rgba(var(--bg-color));
}

@media only screen and (min-width: 769px)
{
	.photo_list_object
	{
		font-size: 1em;
		border: rgba(var(--tertiary-color)) ridge 5px;
		width: 352px;
		height: 432px;
	}
}

td.photo_list
{
	position: relative;
}

.thumbnail_img
{
	width: 156px;
	height: auto;
}

@media only screen and (min-width: 769px)
{
	.thumbnail_img
	{
		width: 326px;
		height: auto;
	}
}
.photo_list_object .photo_owner, .photo_list_object .photo_taken
{
	font-size: 0.8em;
	white-space: nowrap;
}

.photo_comment_balloon
{
	position: absolute;
	top: -0.4em;
	right: -0.4em;
	z-index: 1;
	text-shadow: -0.1em 0.1em 0.2em rgba(var(--shadow-color));
}

.photo_selection_indicator
{
	position: absolute;
	top: -0.2em;
	left: 0em;
	z-index: 1;
	text-shadow: -0.1em 0.1em 0.2em rgba(var(--shadow-color));
	display:none;
}

.photo_selected .photo_selection_indicator_selected
{
	display:block;
}

.photo_not_selected .photo_selection_indicator_not_selected
{
	display:block;
}

.photo_disabled .photo_selection_indicator_disabled
{
	display:block;
}

.photo_reactions_indicator_container
{
	position: absolute;
	width: 2em;
	height: 2em;
	bottom: -0.7em;
	right: -0.2em;
	z-index: 1;
	font-size: 0.9em;
	text-shadow: 0px 0px 0.4em rgba(var(--shadow-color));
}

.photo_reactions_indicator
{
	position: absolute;
}

.post_textcontent
{
	width: 99%;
	height: 6em;
}

.photo_post_textcontent
{
	height: 1em;
	overflow: hidden;
	resize: none;
}

#file_upload_info
{
	font-size: 0.7em;
	color: rgba(var(--secondary-color));
}

.event_participation_guests
{
	width: 2em;
}

.event_actions_container
{
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}

.event_actions_container > td
{
	margin: 1em;
	max-width: 12em;
}

.event_card_container
{
	position: relative;
	margin: 0.25em 0.25em 0.25em 0.25em;
}

.event_card
{
	position: relative;
	font-size: 1rem;
	margin: 0.25em 0.25em 0.25em 0.25em;
	padding: 0.8em 0.8em 0.8em 0.8em;
	border-radius: 0.25em;
	box-shadow: 0px 0.02em 0.1em 0.05em rgba(var(--shadow-color));
	text-shadow: -0.06em -0.06em 0.05em rgba(var(--bg-color)), -0.06em 0.00em 0.05em rgba(var(--bg-color)), -0.06em 0.06em 0.05em rgba(var(--bg-color)), 0.00em 0.06em 0.05em rgba(var(--bg-color)), 0.06em 0.06em 0.05em rgba(var(--bg-color)), 0.06em 0.00em 0.05em rgba(var(--bg-color)), 0.06em -0.06em 0.05em rgba(var(--bg-color)), 0.00em -0.06em 0.05em rgba(var(--bg-color));
}

/* https://coder-coder.com/background-image-opacity/ */
.event_card::before
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border-radius: 0.25em;
	background-image: var(--card-background-image);
	background-size: cover;
	background-position: center;
	filter: var(--card-background-filters, var(--card-default-background-filters));
	transition: filter 0.5s;
}

.event_card h2,
.event_card p
{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.event_card h2
{
	font-size: 1.33em;
	margin-top: 0;
	margin-bottom: 0.5em;
}

.event_card p
{
	margin-top: 0.1em;
	margin-bottom: 0.1em;
}

.event_card_media_count
{
	font-weight: bolder;
}

.event_card_text
{
	border-radius: 0.25em;
	background-color: rgba(var(--bg-color), 0.3);
	/* Disable backdrop-filter due to bad performance
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);*/
}
@media only screen and (min-width: 769px)
{
	.event_card_text
	{
		/* Disable backdrop-filter due to bad performance
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px); */
	}
}

.event_card_link_overlay
{
	position: absolute;
	display: inline-block;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0%;
	height: 100%;
	margin-left: 0.25em;
	margin-right: 0.25em;
	border-radius: 0.25em;
}

.event_card_link_overlay_left
{
	position: absolute;
	display: inline-block;
	z-index: 1;
	top: 0;
	left: 0;
	right: 25%;
	height: 100%;
	margin-left: 0.25em;
	border-top-left-radius: 0.25em;
	border-bottom-left-radius: 0.25em;
}

.event_card_link_overlay_right
{
	position: absolute;
	display: inline-block;
	z-index: 1;
	top: 0;
	right: 0;
	left: 75%;
	height: 100%;
	margin-right: 0.25em;
	border-top-right-radius: 0.25em;
	border-bottom-right-radius: 0.25em;
}

fieldset
{
	border: none;
	margin: 0px;
	padding: 0px;
}

input[type=submit], input[type=button]
{
	min-width: 6em;
	min-height: 1.5em;
}

input, textarea, select
{
	background: var(--input-bg-color);
	color: var(--input-color);
	font-size: 1.3rem;
}

input[type=text],
input[type=email],
input[type=password]
{
	width: 13em;
	font-size: 1.1em;
}
input[type=file]
{
	width: 15em;
	font-size: 1em;
}

.password_input_container
{
	display: inline-block;
	position: relative;
}

/* 🙈🙊 */
.password_visibility_toggle
{
	position: absolute;
	top: 0.2em;
	right: 1%;
}

.password_custom_field
{
	/* one letter padding on the right would ensure that password content doesn't overlap with 🙈🙊 but it changes the width of the input area */
	padding-right: 0em;
}

input[type=checkbox].email_subscription
{
	min-width:  1rem;
	min-height: 1rem;
}

span.email_subscription_pending
{
	font-style: italic;
}

.status_cancelled
{
	text-decoration: line-through !important;
	color: var(--cancelled-color) !important;
}

.attention
{
	color: red;
}

.photo_details
{
	margin-right: 1rem;
}

#debug_container
{
	position: fixed;
	right: 0;
	bottom: 0;
	padding-left: 0.5em;
	padding-top: 0.5em;
	z-index: 9001;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: flex-start;
}

.debug_content
{
	position: sticky;
	font-size: 0.8em;
	text-align: right;
	background-color: rgba(var(--bg-color), 0.8);
}

.reactions_container
{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}

.reaction_button,
.emoji_picker_button
{
	text-align: center;
	line-height: 1;
	min-width: 1.5em;
	margin: 0.3em;
	padding: 0.3em;
	border: solid;
	border-color: rgba(var(--tertiary-color));
	border-width: 1px;
	border-radius: 0.3em;
}

.reaction_button span
{
	filter: saturate(50%);
}

.reaction_button.reacted span
{
	filter: saturate(100%);
}

.reaction_button.reacted
{
	background-color: rgba(var(--tertiary-color));
}

.reaction_button_count
{
	font-size: 0.8em;
}

.reaction_button_action
{
	width: 100%;
	height: 1.5em;
	text-align: center;
	padding: 0.2em 0px 0.2em 0px;
	border-top: solid;
	border-color: rgba(var(--tertiary-color));
	border-width: 1px;
	border-bottom-left-radius: 0.2em;
	border-bottom-right-radius: 0.2em;
}

.reaction_button_action_content
{
	padding: 0px 0.5em 0px 0.5em;
}

.reaction_button_action
{
	background-color: var(--positive-color);
}

.reaction_button_action.reacted
{
	background-color: var(--negative-color);
}

.reaction_user_list
{
	padding: 0 0.6em;
	font-size: 0.7em;
	text-align: center;
}

.emoji_picker_button span
{
	filter: var(--emoji-icon-filters);
}

emoji-picker
{
	/* Custom variables for https://github.com/nolanlawson/emoji-picker-element */
	--background: rgba(var(--bg-color));
	--border-color: rgba(var(--tertiary-color));
	--button-active-background: rgba(var(--secondary-color));
	--button-hover-background: rgba(var(--tertiary-color));
	--input-font-color: rgba(var(--primary-color));
	--input-border-color: rgba(var(--secondary-color));
	--emoji-size: 1rem;
	--emoji-padding: 0.2rem;
	margin: 0 auto;
	width: 66vw;
	height: 70vh;
}

@media only screen and (min-width: 769px)
{
	emoji-picker
	{
		--emoji-size: 1.3rem;
		--emoji-padding: 0.4rem;
		--num-columns: 12;
	}
}
.modal {
	display: none;
	position: fixed;
	z-index: 11;
	left: 0;
	top: 0;
	width: 100%; /* This takes up the whole page */
	height: 100%;
	overflow: auto; /* Enable scrolling */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black with opacity */
}

.modal_content {
	display: table; /* This keeps the content centered */
	position: relative;
	background-color: rgba(var(--bg-color));
	margin: 12vh auto;
	border-radius: 0.25em;
}

.tippy-box[data-theme~='popup_groups'],
.tippy-box[data-theme~='popup_events']
{
	background-color: rgba(var(--bg-color));
	color: rgba(var(--primary-color));
	font-size: 0.9rem;
	white-space: nowrap;
	border: 1px solid rgba(var(--secondary-color));
	box-shadow: 0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(var(--shadow-color),0.25),0 4px 4px -2px rgba(91,94,105,.15)
}

.tippy-box[data-theme~='popup_groups'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='popup_events'][data-placement^='top'] > .tippy-arrow::before
{
	border-top-color: rgba(var(--bg-color));
}
.tippy-box[data-theme~='popup_groups'][data-placement^='bottom'] > .tippy-arrow::before,
.tippy-box[data-theme~='popup_events'][data-placement^='bottom'] > .tippy-arrow::before
{
	border-bottom-color: rgba(var(--bg-color));
}
.tippy-box[data-theme~='popup_groups'][data-placement^='left'] > .tippy-arrow::before,
.tippy-box[data-theme~='popup_events'][data-placement^='left'] > .tippy-arrow::before
{
	border-left-color: rgba(var(--bg-color));
}
.tippy-box[data-theme~='popup_groups'][data-placement^='right'] > .tippy-arrow::before,
.tippy-box[data-theme~='popup_events'][data-placement^='right'] > .tippy-arrow::before
{
	border-right-color: rgba(var(--bg-color));
}

.tippy-box[data-theme~='reaction_button'],
.tippy-box[data-theme~='reaction_button_reacted']
{
	font-size: 1em;
	background-color: rgba(var(--bg-color));
	color: rgba(var(--primary-color));
	border: 1px solid rgba(var(--secondary-color));
	box-shadow: 0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(var(--shadow-color),0.25),0 4px 4px -2px rgba(91,94,105,.15)
}

.tippy-box[data-theme~='reaction_button'] .tippy-content,
.tippy-box[data-theme~='reaction_button_reacted'] .tippy-content
{
	padding: 0px;
}

.tippy-box[data-theme~='reaction_button'][data-placement^='top'] > .tippy-arrow::before
{
	border-top-color: var(--positive-color);
}
.tippy-box[data-theme~='reaction_button'][data-placement^='bottom'] > .tippy-arrow::before
{
	border-bottom-color: var(--positive-color);
}
.tippy-box[data-theme~='reaction_button'][data-placement^='left'] > .tippy-arrow::before
{
	border-left-color: var(--positive-color);
}
.tippy-box[data-theme~='reaction_button'][data-placement^='right'] > .tippy-arrow::before
{
	border-right-color: var(--positive-color);
}
.tippy-box[data-theme~='reaction_button_reacted'][data-placement^='top'] > .tippy-arrow::before
{
	border-top-color: var(--negative-color);
}
.tippy-box[data-theme~='reaction_button_reacted'][data-placement^='bottom'] > .tippy-arrow::before
{
	border-bottom-color: var(--negative-color);
}
.tippy-box[data-theme~='reaction_button_reacted'][data-placement^='left'] > .tippy-arrow::before
{
	border-left-color: var(--negative-color);
}
.tippy-box[data-theme~='reaction_button_reacted'][data-placement^='right'] > .tippy-arrow::before
{
	border-right-color: var(--negative-color);
}

.noselect
{
	/* Make the element contents not selectable */
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

/* Prevent elements inside a button stealing the click events from the button itself */
button > *
{
	pointer-events: none;
}

div.destination_events_select_area
{
	display: inline-block;
	border: inset grey 3px;

	min-height: 242px;
	min-width: 250px;
	max-height: 242px;

	overflow-y: auto;

	font-size: 20px;

}

input.disabled
{
	color: #A0A0A0;
}

#file_upload_info_list
{
	border-radius: 3px;
	margin:  0.5rem 0.25rem 0.25rem 0.25rem;
	padding: 0.25rem;
}

#file_upload_error_list
{
	border-radius: 3px;
	margin:  1rem 0.25rem 0.25rem 0.25rem;
	padding: 0.25rem;
	display: inline-block;
	background-color: var(--negative-color);
}