@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/Inter-Regular.woff2?v=3.19") format("woff2"),
       url("../fonts/inter/Inter-Regular.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/Inter-Italic.woff2?v=3.19") format("woff2"),
       url("../fonts/inter/Inter-Italic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/Inter-SemiBold.woff2?v=3.19") format("woff2"),
       url("../fonts/inter/Inter-SemiBold.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
       url("../fonts/inter/Inter-SemiBoldItalic.woff?v=3.19") format("woff");
}
:root {
	/* Design tokens */

	--font-stack: "Inter", sans-serif;
	--bold: 600;
	--regular: 400;

	--title: 21px;
	--title-height: 1.2;

	--text: 16px;
	--text-height: 1.4;

	--text-small: 14px;
	--text-mini: 11px;

	--app-margin: 48px;
	--app-margin-small: 24px;
	--app-margin-mini: 16px;

	/* Colors */

	--white: #ffffff;
	--light-gray-blue: #f5f9fd;

	--gray-1: #f6f6f6;
	--gray-2: #e1e1e1;
	--gray-3: #b6bcc1;

	--green-accent: #3fdb9c;
	--radius-control: 8px;
	--radius-field: 10px;
	--radius-container: 14px;
	--radius-pill: 999px;

	--green-200: #63e3bd;
	--green-500: #26b99a;
	--green-900: #0a4533;

	--blue-accent: #3495f5;
	--blue-200: #8fd2e8;
	--blue-500: #3b73ab;
	--blue-800: #2c3e50;
	--blue-900: #283744;

	--text-color: #566571;

	--alert: #f15151;
	--alert-hover: #f86b6b;;

	/* Light-mode */

	/* --color: var(--text-color); */
	/* --color-hover: var(--blue-800); */

	--color: var(--blue-800);
	--color-hover: var(--blue-900);
	--color-2: var(--gray-3);

	--bg: var(--white);
	--bg-hover: var(--gray-1);
	/* https://codepen.io/chriscoyier/pen/XjbzAW */
	--bg-50: #ffffff80;

	--bg-2: var(--gray-1);
	--bg-2-hover: var(--white);

	--border-color: var(--gray-2);
}

[data-theme="dark-mode"] {
	/* Dark mode */

	--color: var(--white);
	--color-hover: var(--white);
	--color-2: var(--text-color);/* var(--gray-3);*/

	--bg: var(--blue-800);
	--bg-hover: var(--blue-900);
	--bg-50: #2c3e5080;

	--bg-2: var(--blue-900);
	--bg-2-hover: var(--blue-800);

	--border-color: var(--text-color);
}

@media (max-width: 1024px) {
	:root {
		--app-margin: var(--app-margin-small);
	}
}

@media (max-width: 480px) {
	:root {
		--app-margin: var(--app-margin-mini);
	}
}
body {
	margin: 0;
	font-family: var(--font-stack);
	font-size: var(--text);

	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	max-width: 100%;
	/* hidden makes the body a scroll container, and a sticky descendant then pins to its
	   box rather than the viewport. clip hides the same overflow without that; engines
	   that do not know it keep the pair below */
	overflow-x: hidden;
	overflow-y: auto;
	overflow-x: clip;
	overflow-y: visible;

	color: var(--color);
	background-color: var(--bg);
	transition: background-color 0.3s;
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

a {
	color: currentColor;
	text-decoration: none;
}

.stretched-link::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

h1, h2, h3{
	font-size: var(--title);
	font-weight: var(--bold);
	line-height: var(--title-height)
}

/* Funtional css */

.text-small{
	font-size: var(--text-small);
}
.text-mini{
	font-size: var(--text-mini);
}


/* Forms */

input[type=text],
input[type=password]{
	width:100%;
	margin: 8px 0;
	padding: 0 16px;

	font-size: var(--text);
	/* text-transform: lowercase; */
	line-height: 48px;
	border-radius: 4px;

	-webkit-appearance:none;
    -moz-appearance:none;
    appearance: none;

	outline: none;
	box-shadow: none;

	border: 2px solid var(--green-500);
	color: var(--color);
    background-color: var(--bg);
}
input:focus,
input:active,
input:focus-visible{
	outline:none;
	border: 2px solid var(--green-500)!important;
}
/* TODO: quick reset, we shopuld properly remove other styles */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:focus,
input:active,
input:focus-visible{
	color:var(--color);
	font-size: var(--text);
	box-shadow:none;
	-webkit-text-fill-color: var(--color);
	-webkit-box-shadow:0 0 0 30px var(--bg-2) inset;
	border-color: var(--bg-2);
}


/* Checkboxs */
.checkbox__group {
	display: block;
	position: relative;
	padding-left: 32px;
	margin-bottom: 16px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	font-weight: var(--regular);
	font-size: 14px;
	text-align: left;
}

.checkbox__group a{
	text-decoration: underline;
}
.checkbox__group a:hover{
	color:var(--color);
}
.checkbox__group a:focus{
	outline: none;
	background-color: var(--bg-2);
}

/* Hide the browser's default checkbox */
.checkbox__group input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  border-radius: 4px;
  background-color: var(--bg);
  border: 2px solid var(--green-500);

}
.checkbox__group:hover input ~ .checkmark,
.checkbox__group input:focus ~ .checkmark {

	background-color: var(--bg-2);
}

/* When the checkbox is checked, add a blue background */
.checkbox__group input:checked ~ .checkmark {
	background-color: var(--green-500);
}

/* Create the checkmark (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox__group input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark */
.checkbox__group .checkmark:after {
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* Select */
select{
	appearance: none;

	color:var(--color);
	background-color: transparent;
	border: none;
	border-radious: 4px;
	margin: 8px ;
	padding: 0 16px;
	font-family: inherit;
	font-size: inherit;
	cursor: inherit;
	line-height: 48px;


}
select:focus,
select:active{
	outline:none;
	/* border: 2px solid var(--green-500)!important; */
	background-color: var(--bg-2);
}

/* Fade transition  */

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}


/* MQ visibility */


@media (max-width: 1024px) {
	.mobile-hidden{
		display: none!important;
	}
}
@media (min-width: 1024px) {
	.desktop-hidden{
		display: none!important;
	}

}
/*
.desktop {
	visibility: visible;
}

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

@media (max-width: 1024px) {
	.desktop {
		visibility: hidden !important;
		display: none;
	}

	.mobile {
		visibility: visible !important;
	}
} */
/* Status cards: summary banner, endpoint pairs, state pills, chips, callouts and the progress
   bar, for any view that reports on a background job. The tokens live on .pg-view, so a page
   opts in by carrying that class. */

/* ------------------------------------------------------------------
   Status cards
   Only CSS features already used elsewhere in this codebase.
   No color-mix(), no :has(), no container queries.
   ------------------------------------------------------------------ */

/* Design tokens. They live on :root so every component can use them: dialogs and
   prompts render outside .pg-view, and an unresolved var() silently drops the whole
   declaration. */
:root {
	--pg-muted: #566571;
	/* the summary disc keeps one value in both themes: its glyph is always white, so a
	   token that flipped would leave white on a pale disc */
	--pg-disc-ok: #146b57;
	--pg-on-ok: #146b57;
	--pg-on-busy: #1c5f9e;
	--pg-on-error: #b3261e;
	--pg-link: #3b73ab;
	/* amber, distinct from the red used for removing a pair: pausing is reversible */
	--pg-pause: #b45309;
	--pg-pause-hover: #92400e;
	--pg-on-pause: #ffffff;
	--pg-tint-pause: #fdf1e0;
	--pg-on-pause-tint: #92400e;
	--pg-surface-2: #f1f4f7;
	--pg-tint-ok: #e8f8f3;
	--pg-tint-busy: #eaf3fd;
	--pg-tint-error: #fdecec;
	--pg-border-error: #f0b4b4;
	--pg-track: #e6ebef;
	/* a border that has to read as more than the hairline between rows: what is
	   hovered, and which column a list is sorted by */
	--pg-border-strong: var(--gray-3);
	/* a filled action: white on --green-500 is 2.47:1, under the 3:1 a glyph needs and
	   well under the 4.5:1 its label needs, so the fill is the darker green the summary
	   disc already uses. Hover darkens, as the pause pair does. */
	--pg-primary: var(--pg-disc-ok);
	--pg-primary-hover: var(--green-900);
	--pg-on-primary: #ffffff;
	--pg-shadow: 0 1px 2px rgba(44, 62, 80, .07);
	/* a dialog sits above the cards, so it casts further; on a dark page a black shadow
	   fades out, so that one is deeper rather than the same value reused */
	--pg-shadow-dialog: 0 18px 48px rgba(0, 0, 0, .4);
	/* a sheet rises from the bottom of the screen, so its shadow is the dialog's
	   cast the other way */
	--pg-shadow-sheet: 0 -18px 48px rgba(0, 0, 0, .28);
	--pg-scrim: rgba(8, 15, 20, .55);
	--pg-gap: 16px;
}

.pg-view {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

[data-theme="dark-mode"] {
	--pg-muted: #a7b6c2;
	--pg-on-ok: #63e3bd;
	--pg-on-busy: #8fd2e8;
	--pg-on-error: #ffa1a1;
	--pg-link: #7fbcf7;
	--pg-pause: #fbbf24;
	--pg-pause-hover: #f59e0b;
	--pg-on-pause: #1f1300;
	--pg-tint-pause: #4a3a1d;
	--pg-on-pause-tint: #fbbf24;
	--pg-surface-2: #22303c;
	--pg-tint-ok: #1d4a41;
	--pg-tint-busy: #22405c;
	--pg-tint-error: #4d2b2e;
	--pg-border-error: #7c4348;
	--pg-track: #1f2c37;
	--pg-border-strong: var(--pg-muted);
	/* a dark fill recedes into a dark page, so the pair inverts: the light green
	   carries the fill and the darkest blue the label */
	--pg-primary: var(--green-200);
	--pg-primary-hover: var(--green-accent);
	--pg-on-primary: var(--blue-900);
	--pg-shadow: 0 1px 2px rgba(0, 0, 0, .25);
	--pg-shadow-dialog: 0 18px 48px rgba(0, 0, 0, .55);
	--pg-shadow-sheet: 0 -18px 48px rgba(0, 0, 0, .55);
	--pg-scrim: rgba(0, 0, 0, .65);
}

.pg-view main {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: 1 1 auto;
	width: 100%;
	max-width: 1040px;
	padding: var(--app-margin);
	margin: 0 auto;
	gap: var(--pg-gap);
}

.pg-view h2 {
	font-size: 18px;
	margin: 0;
}

/* ---------- buttons ---------- */

.pg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 9px 16px;

	font-family: inherit;
	font-size: var(--text-small);
	font-weight: var(--bold);
	line-height: 1.2;

	color: var(--color);
	background-color: transparent;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-control);
	cursor: pointer;
}

a.pg-btn {
	text-decoration: none;
}
.pg-btn svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.pg-btn:not(:disabled):hover {
	background-color: var(--bg-2);
}

.pg-btn:disabled {
	opacity: .55;
	cursor: default;
}

/* a filled button keeps reading as clickable when it is only faded, so an unavailable
   one gives up the accent entirely */
.pg-btn--primary:disabled,
.pg-btn--danger:disabled,
.pg-btn--onTone:disabled {
	opacity: 1;
	color: var(--pg-muted);
	background-color: var(--pg-track);
	border-color: var(--pg-track);
}

.pg-btn:focus-visible {
	outline: 2px solid var(--green-500);
	outline-offset: 2px;
}

.pg-btn--primary {
	color: var(--pg-on-primary);
	background-color: var(--pg-primary);
	border-color: var(--pg-primary);
}

.pg-btn--primary:not(:disabled):hover {
	background-color: var(--pg-primary-hover);
	border-color: var(--pg-primary-hover);
}

.pg-btn--quiet {
	border-color: transparent;
	color: var(--pg-muted);
}

/* --alert is 3.48:1 on the page, under what a label needs; --pg-on-error is the
   same red at 6.54:1, and is already the error text colour here */
.pg-btn--danger {
	color: var(--pg-on-error);
	border-color: transparent;
}

.pg-btn--danger:not(:disabled):hover {
	background-color: var(--pg-tint-error);
}

.pg-btn--onTone {
	border-color: currentColor;
	background-color: transparent;
}

/* Amber rather than the alert colour: removing a pair is permanent, pausing is
   undone by the same control. Pause is outlined so it stays below the primary
   action, and so both themes read the same - a solid fill has to invert to a
   bright yellow in dark mode, which then outshouts everything else. */
.pg-btn--pause {
	color: var(--pg-on-pause-tint);
	background-color: transparent;
	border-color: var(--pg-on-pause-tint);
}

.pg-btn--pause:not(:disabled):hover {
	color: var(--pg-on-pause);
	background-color: var(--pg-pause);
	border-color: var(--pg-pause);
}

/* while paused, resuming is the primary action, so it takes the solid fill */
.pg-btn--resume {
	color: var(--pg-on-pause);
	background-color: var(--pg-pause);
	border-color: var(--pg-pause);
}

.pg-btn--resume:not(:disabled):hover {
	background-color: var(--pg-pause-hover);
	border-color: var(--pg-pause-hover);
}

/* ---------- unavailable / empty ---------- */

.pg-unavailable,
.pg-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 560px;
	margin: 32px auto;
	padding: 32px 24px;
	text-align: center;
	border: 1px dashed var(--border-color);
	border-radius: var(--radius-container);
}

.pg-unavailable p,
.pg-empty p {
	margin: 0;
	color: var(--pg-muted);
	font-size: var(--text-small);
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.pg-unavailable a {
	color: var(--blue-accent);
	text-decoration: underline;
}

.pg-empty__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	color: var(--green-500);
	background-color: var(--pg-tint-ok);
}

.pg-empty__mark svg {
	width: 24px;
	height: 24px;
}

/* ---------- summary ---------- */

.pg-summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	/* the card it stacks with is bordered, so without the same allowance the two boxes
	   line up while everything inside them sits a pixel apart */
	border: 1px solid transparent;
	border-radius: var(--radius-container);
}

.pg-summary__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 50%;
	color: #ffffff;
}

.pg-summary__icon svg {
	width: 22px;
	height: 22px;
}

.pg-summary__text {
	min-width: 0;
}

.pg-summary__text p {
	margin: 4px 0 0;
	font-size: var(--text-small);
	opacity: .78;
	overflow-wrap: anywhere;
}

.pg-summary__actions {
	display: flex;
	gap: 10px;
	margin-left: auto;
	flex: none;
	flex-wrap: wrap;
}

.pg-tone--ok.pg-summary { background-color: var(--pg-tint-ok); }
.pg-tone--ok .pg-summary__icon,
.pg-tone--ok.pg-summary .pg-summary__icon {
	/* the mid green reads as 2.5:1 against a white glyph, under the 3:1 a graphic needs */
	background-color: var(--pg-disc-ok);
}

.pg-tone--busy.pg-summary { background-color: var(--pg-tint-busy); }
.pg-tone--busy.pg-summary .pg-summary__icon { background-color: var(--blue-accent); }

.pg-tone--paused.pg-summary { background-color: var(--pg-tint-pause); }
.pg-tone--paused.pg-summary .pg-summary__icon { background-color: var(--pg-pause); color: var(--pg-on-pause); }

.pg-tone--error.pg-summary { background-color: var(--pg-tint-error); }
.pg-tone--error.pg-summary .pg-summary__icon { background-color: var(--alert); }

.pg-tone--pending .pg-summary__icon,
.pg-tone--pending.pg-summary .pg-summary__icon {
	/* the only tone with no colour of its own: a plain surface and the muted ink, both of
	   which flip with the theme, so the glyph stays legible either way */
	background-color: var(--pg-surface-2);
	color: var(--pg-muted);
}

/* ---------- section head ---------- */

.pg-sectionhead {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 8px;
}

.pg-sectionhead h2 {
	font-size: 15px;
}

.pg-sectionhead span {
	font-size: var(--text-small);
	color: var(--pg-muted);
}

/* ---------- cards ---------- */

.pg-cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px 20px;
	background-color: var(--bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-container);
	box-shadow: var(--pg-shadow);
}

.pg-card--error {
	border-color: var(--pg-border-error);
}

/* a fixed column for the status keeps the remote paths aligned down the list:
   otherwise a wide pill on one card shifts that card's arrow and remote path */
.pg-card__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 150px;
	/* start, not centre: a path opened to full length grows the row, and centred
	   content would rise by half of that growth every time it is tapped */
	align-items: start;
	gap: 16px;
}

.pg-card__head .pg-pill {
	/* the second column, whether or not the first one has anything in it: as the only
	   item it fell into the first and stopped a column short of the card's edge */
	grid-column: 2;
	justify-self: end;
	/* half the difference between the pill and the icon box beside it, so the two
	   sit on one line while both stay anchored to the top of the row */
	margin-top: 3px;
}

.pg-route {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
	flex: 1 1 320px;
}

.pg-endpoint {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	/* a floor wide enough for the icon and a label: flex shrinks the two sides in
	   proportion to their content, so a long path opposite a short name would
	   otherwise squeeze the short side until its own label no longer fits */
	min-width: 140px;
	/* basis from content, so a long path takes the room a short one on the other
	   side of the arrow doesn't need, instead of both being locked to half a row */
	flex: 1 1 auto;
}

.pg-endpoint__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 9px;
	color: var(--pg-muted);
	background-color: var(--pg-surface-2);
}

.pg-endpoint__icon svg {
	width: 18px;
	height: 18px;
}

.pg-endpoint__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pg-endpoint__label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pg-muted);
	/* a label that wraps to two lines drops its value out of line with the one
	   opposite it, so it clips instead; the row stacks below 700px anyway */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pg-endpoint__value {
	display: flex;
	margin-top: 2px;
	min-width: 0;
	font-size: 15px;
	font-weight: var(--bold);
	white-space: nowrap;
	cursor: pointer;
}

.pg-path__head {
	flex: 0 999 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pg-path__tail {
	/* never shrinks; the cap only bites if the leaf alone is longer than the row */
	flex: 0 0 auto;
	max-width: 65%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* tapped open: the whole path wraps, since a tooltip is desktop only. Dropping the
   flex is what lets it wrap: as flex items the two halves are laid out side by side,
   so each one wraps in its own column instead of the path reading as one run. */
.pg-endpoint__value--open {
	display: block;
	white-space: normal;
	overflow-wrap: anywhere;
}

.pg-endpoint__value--open .pg-path__head,
.pg-endpoint__value--open .pg-path__tail {
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
}



.pg-endpoint__value--link {
	color: var(--pg-link);
	text-decoration: none;
}

.pg-endpoint__value--link:hover {
	text-decoration: underline;
}

.pg-route__arrow {
	/* flex, not inline: an inline svg sits on the text baseline, which leaves
	   descender space below it and lifts the glyph off the icons' centre line */
	display: flex;
	align-items: center;
	flex: none;
	/* the height of an endpoint icon, so the glyph centres on them and stays put
	   when the row grows underneath it */
	align-self: flex-start;
	height: 34px;
	color: var(--color-2);
}

.pg-route__arrow svg {
	width: 20px;
	height: 20px;
}

/* ---------- state pill ---------- */

.pg-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	padding: 6px 12px;
	font-size: var(--text-small);
	font-weight: var(--bold);
	border-radius: var(--radius-pill);
}

.pg-pill__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: currentColor;
}

@keyframes pg-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.7); opacity: .4; }
}

/* only while syncing: a still dot for the settled states keeps the motion meaningful */
.pg-tone--busy .pg-pill__dot {
	animation: pg-pulse 1.4s ease-in-out infinite;
}

.pg-tone--ok.pg-pill { color: var(--pg-on-ok); background-color: var(--pg-tint-ok); }
.pg-tone--busy.pg-pill { color: var(--pg-on-busy); background-color: var(--pg-tint-busy); }
.pg-tone--error.pg-pill { color: var(--pg-on-error); background-color: var(--pg-tint-error); }
.pg-tone--paused.pg-pill { color: var(--pg-on-pause-tint); background-color: var(--pg-tint-pause); }
.pg-tone--pending.pg-pill { color: var(--pg-muted); background-color: var(--pg-surface-2); }

/* ---------- activity ---------- */

.pg-activity {
	margin: 0;
	font-size: var(--text-small);
	line-height: 1.4;
	color: var(--pg-muted);
	overflow-wrap: anywhere;
}

/* clamped rather than scrolled: the ellipsis is the only visible cue text was cut */
.pg-clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	cursor: pointer;
}

.pg-clamp--open {
	-webkit-line-clamp: unset;
	overflow: visible;
}

.pg-endpoint__value::-webkit-scrollbar,
.pg-activity::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

.pg-endpoint__value::-webkit-scrollbar-thumb,
.pg-activity::-webkit-scrollbar-thumb {
	border-radius: var(--radius-pill);
	background-color: var(--pg-track);
}

.pg-errorbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
	font-size: var(--text-small);
	color: var(--pg-on-error);
	background-color: var(--pg-tint-error);
	border-radius: 9px;
	overflow-wrap: anywhere;
}

.pg-errorbox svg {
	width: 16px;
	height: 16px;
	flex: none;
	margin-top: 2px;
}

/* Indeterminate: the API reports no total, so never fake a percentage */
.pg-bar {
	position: relative;
	height: 4px;
	border-radius: var(--radius-pill);
	background-color: var(--pg-track);
	overflow: hidden;
}

.pg-bar > span {
	position: absolute;
	top: 0;
	left: 0;
	width: 34%;
	height: 100%;
	border-radius: var(--radius-pill);
	background-color: var(--blue-accent);
	animation: pg-slide 1.6s ease-in-out infinite;
}

.pg-bar--determinate > span {
	animation: none;
	transition: width .3s ease;
}

/* the percentage sits beside the activity text, which names what is progressing.
   min-width:0 lets a long path shrink rather than push the number off a phone screen */
.pg-activityrow {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.pg-activityrow .pg-activity {
	flex: 1;
	min-width: 0;
}

.pg-pct {
	flex: none;
	font-size: 13px;
	line-height: 1.4;
	color: var(--pg-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@keyframes pg-slide {
	0% { left: -34%; }
	100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.pg-tone--busy .pg-pill__dot {
		animation: none;
	}

	.pg-bar > span {
		animation: none;
		left: 0;
		width: 100%;
		opacity: .45;
	}
}

/* ---------- card footer ---------- */

.pg-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-top: 14px;
	border-top: 1px solid var(--border-color);
}

.pg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.pg-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px;
	font-size: 13px;
	color: var(--pg-muted);
	background-color: var(--pg-surface-2);
	border-radius: var(--radius-pill);
}

.pg-chip svg {
	width: 13px;
	height: 13px;
	flex: none;
}

.pg-chip--on {
	color: var(--pg-on-ok);
}

.pg-card__actions {
	display: flex;
	gap: 8px;
	margin-left: auto;
	flex: none;
	flex-wrap: wrap;
}

/* ---------- switch ---------- */

.pg-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 4px 11px 4px 8px;
	font-size: 13px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-pill);
	cursor: pointer;
	margin: 0;
	font-weight: var(--regular);
}

.pg-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* extends the tap target to ~44px without growing the visible control */
.pg-switch:after {
	content: "";
	position: absolute;
	top: -8px;
	right: -8px;
	bottom: -8px;
	left: -8px;
}

.pg-switch__track {
	position: relative;
	width: 30px;
	height: 18px;
	flex: none;
	border-radius: var(--radius-pill);
	background-color: var(--gray-3);
	transition: background-color .2s;
}

.pg-switch__track:after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #ffffff;
	transition: left .2s;
}

.pg-switch input:checked + .pg-switch__track {
	background-color: var(--green-500);
}

.pg-switch input:checked + .pg-switch__track:after {
	left: 15px;
}

.pg-switch input:focus-visible + .pg-switch__track {
	outline: 2px solid var(--green-500);
	outline-offset: 2px;
}

/* ---------- narrow screens (Android webview, small windows) ---------- */

@media (max-width: 700px) {
	.pg-view main {
		gap: 14px;
	}



	.pg-summary {
		flex-wrap: wrap;
		gap: 12px;
	}

	.pg-summary__text {
		flex: 1 1 200px;
	}

	.pg-summary__actions {
		margin-left: 0;
		width: 100%;
		flex: 1 1 100%;
	}

	.pg-summary__actions .pg-btn {
		flex: 1 1 0;
	}

	.pg-card__head {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}

	/* on its own, as when a mount syncs calendars or contacts and has no endpoints to show,
	   space-between leaves the status at the start: keep it at the end, where it is with them */
	.pg-card__head .pg-pill {
		margin-left: auto;
	}

	/* stack the two endpoints and turn the arrow upright. The route shrinks rather
	   than claiming the full row, so the status stays top right beside it */
	.pg-route {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		/* basis 0, not auto: the head wraps, and wrapping is decided on the hypothetical
		   size, so a long nowrap path would push the status onto its own line first */
		flex: 1 1 0;
		min-width: 0;
	}

	.pg-endpoint {
		flex: 0 0 auto;
		min-width: 0;
	}

	/* Material's minimum touch target; 40px is comfortable with a mouse, not a thumb */
	.pg-btn {
		min-height: 48px;
	}

	/* the arrow links the two endpoint icons, so it lines up with them rather than
	   with the card. Matching the icon width centres it without a magic offset. */
	.pg-route__arrow {
		width: 34px;
		justify-content: center;
		transform: rotate(90deg);
	}

	.pg-card__foot {
		align-items: stretch;
		flex-direction: column;
	}

	.pg-card__actions {
		margin-left: 0;
		width: 100%;
	}

	.pg-card__actions .pg-btn {
		flex: 1 1 0;
		border-color: var(--border-color);
	}
}

@media (max-width: 380px) {
	.pg-summary__actions {
		flex-direction: column;
	}

	.pg-card__actions {
		flex-direction: column;
	}
}

.pg-note {
	margin: 0;
	color: var(--pg-muted);
	font-size: var(--text-small);
}

/* a consequence worth reading before committing to it, not a failure */
.pg-callout {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	font-size: var(--text-small);
	color: var(--pg-on-pause-tint);
	background-color: var(--pg-tint-pause);
	border-radius: 12px;
}

.pg-input {
	width: 100%;
	min-height: 40px;
	padding: 9px 12px;
	font: inherit;
	color: inherit;
	background-color: var(--bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-field);
}

.pg-input[readonly] {
	color: var(--pg-muted);
	background-color: var(--pg-surface-2);
}

/* Tables. A list with a header that stays while its rows scroll under it: the
   uppercase labels of .pg-endpoint__label, hairline rules and tabular figures.
   A table sets its own columns and row height; this is everything else. */
.pg-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	color: var(--color);
	font-size: var(--text-small);
}

.pg-table thead tr {
	position: sticky;
	top: 0;
	z-index: 10;
	background-color: var(--pg-surface-2);
}

.pg-table thead th {
	/* ruled above as well as below: the band reads the same under a view's own bar as it
	   does directly under the title row, where there is no bar to rule it off */
	border-top: 1px solid var(--border-color);
	height: 38px;
	padding: 0 12px;
	font-size: var(--text-mini);
	font-weight: var(--bold);
	letter-spacing: .07em;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
	color: var(--pg-muted);
	border-bottom: 1px solid var(--border-color);
	cursor: pointer;
}

.pg-table thead th.sorted {
	color: var(--color);
}

.pg-table .sort-caret {
	width: 12px;
	height: 12px;
	margin-left: 4px;
	vertical-align: -1px;
}

.pg-table .sort-caret--asc {
	transform: rotate(180deg);
}

.pg-table td {
	padding: 0 12px;
}

.pg-table tbody tr {
	border-bottom: 1px solid var(--border-color);
}

.pg-table tbody tr:hover {
	background-color: var(--bg-2);
}

/* On a phone no table fits five columns, and its head is the only way to sort: the
   rows lay out over lines (each table says how) and the head becomes a strip of chips
   that scrolls, rather than disappearing with the rest of the table. */
@media (max-width: 1024px) {
	.pg-table,
	.pg-table thead,
	.pg-table tbody {
		display: block;
	}

	.pg-table thead tr {
		position: static;
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 8px 12px;
		overflow-x: auto;
		/* a chip strip scrolls without a bar of its own */
		scrollbar-width: none;
		background-color: transparent;
		border-bottom: 1px solid var(--border-color);
	}

	.pg-table thead tr::-webkit-scrollbar {
		height: 0;
	}

	/* a column with no heading - an action, a glyph - has nothing to sort by and
	   nothing to say, so it takes no chip of its own in the strip */
	.pg-table thead th:empty {
		display: none;
	}

	.pg-table thead th {
		display: flex;
		align-items: center;
		flex: none;
		width: auto;
		height: auto;
		min-height: 44px;
		padding: 0 12px;
		color: var(--pg-muted);
		background-color: var(--bg);
		border: 1px solid var(--border-color);
		border-radius: var(--radius-pill);
	}

	.pg-table thead th.sorted {
		color: var(--color);
		border-color: var(--pg-border-strong);
		background-color: var(--bg-2);
	}
}

@media (max-width: 1024px) {
	/* a finger needs more room than a pointer, whichever menu it lands on */
	.pg-menu li:not(.divider) {
		min-height: 44px;
	}
}

/* Menus. A list of actions on the dialog surface: the row menu in the drive and
   every AppDropdown wear this, so the two that open side by side in a toolbar
   cannot drift apart again. Each keeps its own positioning and its own way of
   opening - this is the look, nothing else. */
.pg-menu {
	/* the surface is sometimes the list itself rather than a box around one, and a
	   ul that is not reset carries markers and an indent of its own */
	list-style: none;
	margin: 0;
	padding: 6px;
	/* a folder with apps, a thumbnail and sharing runs to a dozen entries, and the
	   account menu is longer still: past the window it scrolls. Measured from the
	   window rather than as a share of it - these open below a toolbar, and 70vh
	   put a scrollbar on a menu with room to stand */
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	color: var(--color);
	background-color: var(--bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-container);
	box-shadow: var(--pg-shadow-dialog);
}

.pg-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pg-menu li {
	display: flex;
	align-items: center;
	min-height: 36px;
	margin: 0;
	padding: 9px 12px;
	font-size: var(--text-small);
	/* its own rhythm rather than the line-height of whatever it opens over: the same
	   list stood 50px tall in a toolbar and 38px in the drive's row menu */
	line-height: 20px;
	border-radius: var(--radius-control);
	cursor: pointer;
	transition: background-color .15s;
}

.pg-menu li:hover {
	background-color: var(--pg-surface-2);
}

/* the entry that cannot be undone reads as itself. --alert is 3.48:1 on the page;
   --pg-on-error is the same red at 6.54:1 */
.pg-menu li.is-danger {
	color: var(--pg-on-error);
}

.pg-menu li.is-danger:hover {
	background-color: var(--pg-tint-error);
}

.pg-menu li.divider {
	display: block;
	height: 1px;
	min-height: 0;
	margin: 6px 12px;
	padding: 0;
	background-color: var(--border-color);
	border: 0;
	border-radius: 0;
	cursor: default;
}

.pg-menu li.divider:hover {
	background-color: var(--border-color);
}

/* Dialogs. A card centred on both axes at every width, sharing the surface of the
   status cards. Used by every modal in the app so they all have the same shape. */
/* while a dialog is up, the page behind it stays put */
body.pg-dialog-open {
	overflow: hidden;
}

.pg-dialog__mask {
	position: fixed;
	overscroll-behavior: contain;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background-color: var(--pg-scrim);
}
.pg-dialog {
	display: flex;
	flex-direction: column;
	max-width: 100%;
	max-height: 92vh;
	background-color: var(--bg);
	color: var(--color);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-container);
	box-shadow: var(--pg-shadow-dialog);
	overflow: hidden;
}
.pg-dialog:focus {
	outline: none;
}
/* over the dialog rather than inside its scrolling body, so it stays put while the tree
   loads; clicks fall through to whatever is underneath */
.pg-dialog__loading {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.pg-dialog__head {
	display: flex;
	align-items: start;
	gap: 12px;
	flex: 0 0 auto;
	padding: 18px 16px 14px 20px;
}
.pg-dialog__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	border: 0;
	/* a name with no spaces has nowhere to break, and a title is the one place a dialog
	   cannot scroll */
	overflow-wrap: anywhere;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}
/* one line, whatever the name is: the fixed words keep their width and the name takes
   what is left */
.pg-dialog__title--inline {
	display: flex;
	align-items: baseline;
	white-space: nowrap;
}
.pg-dialog__title-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pg-dialog__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	/* the head aligns to the first line of the title, and this control is taller than that
	   line: lift it so it reads as centred on the words rather than hanging below them */
	margin-top: -6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--pg-muted);
	cursor: pointer;
}

/* a finger needs more than a mouse: 44px is the smallest target apple and material
   both accept, and these are the same controls the phone shows */
@media (pointer: coarse) {
	.pg-btn {
		min-height: 44px;
	}

	.pg-dialog__close {
		width: 44px;
		height: 44px;
	}
}

.pg-dialog__close:focus-visible {
	outline: 2px solid var(--green-500);
	outline-offset: 2px;
}
.pg-dialog__close:hover {
	background-color: var(--pg-surface-2);
	color: var(--color);
}
.pg-dialog__close svg {
	width: 18px;
	height: 18px;
}
.pg-dialog__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 20px;
}
.pg-dialog__foot {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 0 0 auto;
	padding: 14px 20px 16px;
}
.pg-dialog__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pg-dialog__spacer {
	flex: 1 1 auto;
}
/* matches input[type=text] in 1_styles.css, and wins on file order */
input.pg-input {
	width: 100%;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--pg-track);
	border-radius: var(--radius-field);
	background-color: var(--pg-surface-2);
	color: var(--color);
	font-family: inherit;
	font-size: 15px;
}
/* a field that cannot be typed in is not a field: it keeps the surface so the value still
   reads as data, and gives up the border and the caret so it does not offer a box to type
   in. .pg-input[readonly] set the same fill as an editable one, which is no difference */
input.pg-input[readonly] {
	border-color: transparent;
	color: var(--pg-muted);
	cursor: default;
}

/* shown rather than asked for: no caret, no tab stop, nothing to click. Read-only fields
   that exist to be copied - the webdav address and its credentials - keep all three */
input.pg-input--static {
	pointer-events: none;
	user-select: none;
}

input.pg-input:focus {
	outline: none;
	border-color: var(--green-500);
	box-shadow: 0 0 0 3px var(--pg-tint-ok);
}
.pg-dialog--prompt {
	width: 420px;
}
.pg-dialog__body p {
	margin: 0 0 4px;
	overflow-wrap: anywhere;
}

/* shaded while there is more tree beyond that edge: a deep tree pans sideways, and
   without this nothing says so */
.fp-scroll--left {
	box-shadow: inset 14px 0 10px -12px var(--pg-muted);
}
.fp-scroll--right {
	box-shadow: inset -14px 0 10px -12px var(--pg-muted);
}
.fp-scroll--left.fp-scroll--right {
	box-shadow: inset 14px 0 10px -12px var(--pg-muted), inset -14px 0 10px -12px var(--pg-muted);
}

@media (max-width: 600px) {
	/* still centred, just narrower: a sheet stuck to one edge reads differently per platform */
	.pg-dialog {
		width: 100%;
		max-height: 88vh;
	}
}
@media (max-width: 420px) {
	.pg-dialog__actions {
		flex-wrap: wrap;
	}
	.pg-dialog__spacer {
		display: none;
	}
	.pg-dialog__actions .pg-btn {
		flex: 1 1 0;
	}
}
html {
    height: 100%;
}
body {
    background-color: #FFFFFF;
    height: 100%;
    display: flex;
    flex-direction: column;

	color: var(--color);
	background-color: var(--bg);
	transition: background-color 0.3s;
}

.token-input {
    width:100% !important;
}

.btn-success {
    background-color: #26b99a !important;
    border-color: #16a98a !important;
}

.btn-success:hover {
    background-color: #26a69a !important;
}

.tour-carousel {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: black;
  opacity: 0.2;
  cursor: pointer;
  position: relative;
  display: inline-block;
  margin: 0 6px;
}

.dot-selected {
  opacity: 0.7;
  cursor: default;
}

.indicator-btn {
  position: absolute;
  left: 0px;
  padding: 0px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: transparent;
  border: none;
}

.bottom-message {
    position:absolute;
    bottom:10%;
    left:10%;
    width:80%;
    font-size:2em;
}

.flex-row {
    display: flex;
}

/* .password-eye {
    font-size: 1.5em;
    align-self: center;
}

.password-eye-slash {
    font-size: 1.5em;
    align-self: center;
}

.password {
    position: inherit;
}
*/
.close {
    color: #000;
    float: right;
    font-size: 28px;
    font-weight: bold;
    opacity: 1;
    font-family: 'Cambria Math';
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 980px) {

}
.picon{
  font-size: 2.5em;
  word-wrap: break-word;
  max-width: 5em;
}
.picon:hover {
  color: #26b99a;
}
.pnavbar {
  font-size: 1.7em;
  margin-top: 0.1em;
  margin-bottom: 0.1em;
}

.btn_pnavbar {
    /* font-family: 'Montserrat', Sans-Serif; */
    color:#333;
    font-size: 1.7em;
    padding: 2px 6px;
    margin-bottom:0.4em;
}
.pnavbar_top_right {
  font-size: 1.7em;
  margin-top:0.2em;
  margin-left:0.4em;
  margin-right:0.4em;
  position:absolute;
  float:right;
  top:0;
  right:0;
}
.top_right_icon {
    font-size: 1em;
    padding: 3px 12px;
}

.grid_icon_wrapper {
  margin: 1em;
}
.nopad {
    margin-top: -0.2em;
    padding:0;
}
 /*
table {
  font-size: 1.5em;
}
.table-responsive {
  padding: 2em;
} */
.navbar-nav {
  margin: 0em;
}
.navbar {
    flex-shrink: 0;
    margin-bottom: 0em;
}
@media (min-width: 768px) {
   .navbar-collapse.collapse {
       display: inline-block !important;
   }
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}

.instruction {
    font-size: 2em;
    color: #999;
    text-align: center;
    width: 100%;
    padding-top: 5%;
    padding-right:5%;
}

.feedback-button{
    height:40px;
    border:solid 3px #CCCCCC;
    background:#333;
    width:120px;
    line-height:32px;
    -webkit-transform:rotate(-90deg);
    font-weight:600;
    color:white;
    transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    text-align:center;
    font-size:17px;
    position:fixed;
    right:-40px;
    top:45%;
    z-index:999;
}



.messagecontainer {
  padding: 2px;
}

.qrcode-container {
    position: relative;
    width: 400px;
    height: 400px;
}
.qrcode {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 600px) {
    .qrcode-container {
	padding-bottom: 100%;
	width: 100%;
	height: unset;
    }
}

.modal-mask {
  position: fixed;
  z-index: 2500;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  transition: opacity .3s ease;
}

.modal-mask-app {
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  transition: opacity .3s ease;
}

.full-height {
    height:100%;
}

.modal-container {
    width: 90%;
    margin: 0px auto;
    padding: 20px 30px;
	color: var(--color);
    background-color: var(--bg);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    /* font-family: Helvetica, Arial, sans-serif; */
}

@media (max-width: 600px) {
    .modal-container {
	width: 100%;
	padding: 10px 10px;
    }

    .modal-body {
	margin: 0 0;
	padding: 10px;
    }
}

.modal-header-app {
    min-height:16px;
    padding:15px;
}

.modal-header h3 {
  margin-top: 0;
  color: #26b99a;
}

.modal-header-app {
    min-height:16px;
    padding:15px;
}

.modal-body {
  margin: 20px 0;
}

.modal-default-button {
  float: right;
  color: #fff;
  background-color: #5cb85c;
  border-color: 34cae4c;
  padding: 6px 12px;
  border:1px solid transparent;
  border-radius:4px
}


.fillspace {
    display: flex;
    position: relative;
    flex-direction: column;
    flex-grow: 1;
    left: 0;
    right: 0;
}


@media (max-width: 600px) {
    .not-mobile {
	display: none;
    }
}

.column {
    display: inline-block;
    vertical-align: top;
}

.spinner-text {
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
    background-color: lightblue;
    color: black;
    position: fixed;
    top: 63%;
    left: 45%;
    /* width: 12%; */
    text-align: center;
    font-size: 18px;
    z-index: 999;
}

@media (max-width: 700px) {
  .spinner-text {
      width: 80%;
      left: 10%;
  }
}

.modal-prominent {
  font-size: 1.2em;
}

.btn-shared-with {
  padding: 0px 0px 0px 0px;
}

.checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: 100;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
} */

.checkbox-container:hover input ~ .checkmark {
  background-color: #ccc;
}

.checkbox-container input:checked ~ .checkmark {
  background-color: #2196F3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

h3 {word-wrap:break-word; white-space:normal;}


@media (max-width: 640px) {
  .app-grid-item {
    flex: 1 0 45%;
  }
  .app-grid-filler-2 {
      display: block;
  }
  .app-grid-filler-3 {
      display: none;
  }
  .app-grid-filler-4 {
      display: none;
  }
}

@media (min-width: 640px) {
  .app-grid-item {
    flex: 1 0 32%;
  }
  .app-grid-filler-2 {
      display: none;
  }
  .app-grid-filler-3 {
      display: block;
  }
  .app-grid-filler-4 {
      display: none;
  }
}

@media (min-width: 750px) {
  .app-grid-item {
    flex: 1 0 21%;
  }
  .app-grid-filler-2 {
      display: none;
  }
  .app-grid-filler-3 {
      display: none;
  }
  .app-grid-filler-4 {
      display: block;
  }
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 8px;
  text-decoration: none;
  font-size: 40px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.hspace-5 {
    margin-left: 5px;
    margin-right: 5px;
}

.hspace-15 {
    margin-left: 15px;
    margin-right: 15px;
}

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

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.flex-grow {
    flex-grow: 1;
}

.flex-item-left {
  padding: 10px;
  flex: 50%;
  display: flex;
  flex-wrap: wrap;
}

.flex-item-right {
  padding: 10px;
  flex: 50%;
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  display: flex;
}

.flex-item > div {
  padding: 10px;
  text-align: left;
  font-size: 20px;
}

.flex-line-item > div {
  width: 100%;
  padding: 10px;
  text-align: center;
  font-size: 20px;
}

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


/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 700px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

@media (max-width: 900px) {
  .form-control-profile {
      max-width:70%;
  }
}

.choice-row {
  width: 100%;
  text-align: center; // center the content of the container
}

.choice-block {
  margin: 5px;
  display: inline-block; // display inline with ability to provide width/height
}

.hidden-context-menu-item {
  display: none;
}
svg.icon {
	display: inline-block;
	fill: currentColor;
	vertical-align: middle;
}

svg.icon .icon--flip {
	transform: scaleX(-1);
}
.app-button {
	display: inline-block;

	margin: 0;
	padding: 8px;

	font-size: var(--text);
	font-family: var(--font-stack);
	font-weight: var(--bold);
	text-align: left;

	color: currentColor;
	background-color: transparent;
	border: 2px solid transparent;
	border-radius: 2px;

	cursor: pointer;

	transition: all 0.3s;
}


.app-button.round {
	border-radius: 64px;
}

.app-button.block {
	width: 100%;
	display: block;
	text-align: center;
}

.app-button.outline {
	background-color: transparent;
	color: currentColor;
	border: 2px solid currentColor;
}

.app-button.icon {
	padding: 4px;
}

.app-button svg {
	width: 24px;
	height: 24px;
}

/* Sizes */

.app-button.small {
	height: 32px;
	padding: 4px;
	font-size: var(--text-small);
}

.app-button.small.icon {
	padding: 0;
}

.app-button:hover {
	color: var(--color-hover) !important;
}
.app-button.accent{
	color: var(--pg-on-primary) !important;
	background-color: var(--pg-primary) !important;
}
.app-button.accent:hover {
	color: var(--pg-on-primary) !important;
	background-color: var(--pg-primary-hover) !important;
}
.app-button.accent:focus{
	outline:none;
	background-color: var(--color-hover);
}

/* Types */

.app-button.primary {
	line-height: 32px;
	padding: 6px 16px;
	text-align: center;

}

@media (max-width: 1024px) {
	.app-button {
		transition: none;
	}
}
.menu-item {
	position: relative;
	height: 64px;
	padding: 0;
	list-style: none;
	line-height: 64px;
	margin: 0;
	color: var(--color-2);
	display: flex;
	align-items: center;
}

.menu-item.active {
	color: var(--color);
}


.menu-item button {
	width: 100%;
	height: 100%;
	white-space: nowrap;
	padding: 0 16px;
	line-height: 32px;
	text-align: left;
}

.menu-item button svg {
	width: 32px;
	height: 32px;
}


.app-navigation .menu__name {
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s ease;
}

.app-navigation.expanded .menu__name {
	transition: 0s;
	opacity: 1;
	pointer-events: auto;
	margin-left: 4px;
}

.app-navigation .menu__tooltip {
	display: block;
	border-radius: 4px;
	padding: 8px 8px;
	font-size:16px;
	line-height: 14px;
	background: var(--bg-2);
	pointer-events: none;
	transition: 0s;
	opacity: 0;
	color: var(--color-hover);

}

.app-navigation.expanded .menu__tooltip {
	display: none;
}

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

.app-navigation .menu-item:hover .menu__tooltip {
	transition: all 0.5s ease;
	opacity: 1;
	transform: translateX(16px);
}

@media (max-width: 1024px) {
	.app-navigation .menu__name {
		transition: none;
	}
}
/* the storage as a line about the account: figure and action on one row, the bar across
   the full width under them, one gap above, between and below */
.app-navigation .navigation-storage {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px solid var(--border-color);
}

/* the figure gives up width as the sidebar narrows rather than wrapping the row mid
   animation: what is left of it is clipped, and it is fading out anyway */
.app-navigation .navigation-storage .storage {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.2;
	color: var(--pg-muted);
}

.app-navigation .navigation-storage .upgrade {
	flex: none;
	width: auto;
	max-width: none;
	/* the row lays out around the label, so the three gaps read as one measure; the
	   padding keeps a finger sized target and the margin keeps it out of the layout */
	height: auto;
	padding: 7px 0;
	margin: -7px 0;
	border: 0;
	line-height: 1.2;
	font-size: 13px !important;
	text-transform: none;
	background-color: transparent;
	color: var(--pg-on-ok);
}

/* the bar takes the row under the other two */
.app-navigation .navigation-storage__bar {
	order: 3;
	flex: 1 0 100%;
}

/* .pg-bar's own 4px, track and pill, filled with the tone the level has earned: the
   browser's green to amber, in the palette's colours rather than the engine's */
.app-navigation .navigation-storage meter {
	width: 100%;
	/* block, or its wrapper keeps a text line box under the row above */
	display: block;
	height: 4px;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--pg-track);
}

.app-navigation .navigation-storage meter::-webkit-meter-bar {
	height: 4px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--pg-track);
}

.app-navigation .navigation-storage meter::-webkit-meter-optimum-value {
	border-radius: var(--radius-pill);
	background: var(--pg-on-ok);
}

.app-navigation .navigation-storage meter::-webkit-meter-suboptimum-value {
	border-radius: var(--radius-pill);
	background: var(--pg-pause);
}

.app-navigation .navigation-storage meter::-webkit-meter-even-less-good-value {
	border-radius: var(--radius-pill);
	background: var(--pg-on-error);
}

/* the same three, for the engine that spells them the other way */
.app-navigation .navigation-storage meter::-moz-meter-bar {
	border-radius: var(--radius-pill);
	background: var(--pg-on-ok);
}

.app-navigation .navigation-storage meter:-moz-meter-sub-optimum::-moz-meter-bar {
	background: var(--pg-pause);
}

.app-navigation .navigation-storage meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
	background: var(--pg-on-error);
}

/* a 72px rail cannot take the sidebar's gutter and the link, so it keeps a narrow gutter
   and drops the column gap. Both are lengths, so collapsing tweens rather than jumps */
@media (min-width: 1025px) {
	.app-navigation:not(.expanded) .navigation-storage {
		column-gap: 0;
		padding-left: 4px;
		padding-right: 4px;
	}

	.app-navigation:not(.expanded) .navigation-storage .storage {
		flex-grow: 0;
	}

	/* the rail leaves 64px, which "Upgrade" fits and a longer label ("Αναβάθμιση", "Mettre à
	   niveau", "Zmień subskrypcję") did not: it spilled past both edges and lost its first
	   letters. At 10.5px the longest word of each is under 63px, so labels wrap between words;
	   breaking inside one is only for a word no translation has yet */
	.app-navigation:not(.expanded) .navigation-storage .upgrade {
		max-width: 100%;
		white-space: normal;
		overflow-wrap: anywhere;
		text-align: center;
		font-size: 10.5px !important;
	}
}

.navigation-storage {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0;
	margin-top: auto;
	/* margin-bottom: 16px; */
	transition: all 0.3s;
}

.navigation-storage .upgrade {
	font-size: var(--text-mini) !important;
	text-transform: uppercase;
	background-color: var(--green-500);
	color: white;
	width:100%;
	max-width: 72px;
	text-align: center;

}

.upgrade:hover {
	color: white !important;
}

.navigation-storage .storage {
	margin-bottom: 8px;
	transition: all 0.3s;
}

.app-navigation.expanded .storage {
	opacity: 1;
}

.app-navigation.expanded .navigation-storage {
	padding: 10px 16px;
}

.app-navigation .storage {
	white-space: nowrap;
	opacity: 0;
}



@media (max-width: 1024px) {
	.navigation-storage {
		transition: none;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		margin-top: 0;

		border-top: 1px solid var(--border-color);

		padding: 10px 16px;
	}

	.navigation-storage .storage {
		font-size: var(--text-small);
		font-weight: var(--bold);
		margin: 0;
	}
}
.app-navigation {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 300;

	display: flex;
	flex-direction: column;
	height: 100%;
	width: 72px;
	padding-top:16px;
	background: var(--bg-2);
	transition: all 0.5s ease;
}
.app-navigation.expanded {
	width: 240px;
}

.app-navigation .logo {
	width: 100%;
	height: 32px;
	margin:  0;
	padding: 0 16px;
	cursor: pointer;
	flex-shrink: 0;
}

.app-navigation .nav-list {
	margin-top: var(--app-margin);
	margin-bottom: auto;
	padding: 0;
}



.app-navigation .toggle-theme svg {
	width: 24px;
	height: 24px;
}

/* nothing to dismiss beside a sidebar that is always there */
.nav-dismiss {
	display: none;
}

/* in the sidebar's own corner, not the screen's: at the screen's it would land on the
   header buttons of the view showing beside the panel */
.app-navigation .toggle-theme {
	position: absolute;
	top: 16px;
	right: 16px;
	opacity: 1;
}

@media (min-width: 1025px) {
	/* the rail has no room beside the crest, so the theme arrives with the labels */
	.app-navigation .toggle-theme {
		display: none;
	}

	.app-navigation.expanded .toggle-theme {
		display: block;
	}
}

@media (max-width: 1024px) {
	/* a panel beside the view, not a sheet in place of it: as wide as its own content,
	   and the same shape open or closed, so closing is a fade with nothing moving */
	.app-navigation,
	.app-navigation.expanded {
		width: max-content;
		max-width: 85vw;
	}

	.app-navigation {
		border-right: 1px solid var(--border-color);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s, padding 0s 0.3s;
	}

	.app-navigation.expanded {
		visibility: visible;
		opacity: 1;
		transition: opacity 0.3s;
		pointer-events: all;
	}

	/* labels and figure stay visible while the panel fades; a tooltip only earns its
	   place beside a rail of bare icons */
	.app-navigation .menu-item .menu__name,
	.app-navigation .navigation-storage .storage {
		opacity: 1;
	}

	.app-navigation .menu-item .menu__name {
		margin-left: 4px;
	}

	.app-navigation .menu-item .menu__tooltip {
		display: none;
	}

	/* a tap on the view dismisses the panel, without dimming what is under it: the
	   layer starts at the panel's own edge, so a tap on the panel itself is not one */
	.app-navigation.expanded .nav-dismiss {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 100%;
		width: 100vw;
		z-index: -1;
		background-color: transparent;
	}
}
.app-modal__overlay{
	position: fixed;
	/* TODO: fix global z-index strategy */
 	z-index: 400;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	background-color: rgba(0, 0, 0, .4);
	overflow-y: auto;
	overflow-x: hidden;

	display: flex;
	align-items: center;
	justify-content: center;
}

.app-modal__container{

	display:flex;
	flex-direction: column;

	padding: var(--app-margin);
	color: var(--color);
	background-color: var(--bg);
}
.app-modal__container:focus{
	outline: none;
}

.app-modal__container.modal--right{
	position: absolute;
	top:0;
	right:0;
	width:50%;
	min-height:100vh;
}

.app-modal__container.modal--center{
	position: relative;
	/* width:50%; */
}

.app-modal__container .close{
	position:absolute;
	right:var(--app-margin);
	top:var(--app-margin);
}

.app-modal__container header{
	padding-right: 50px;
}

.app-modal__container header > *{
	margin-top: 0;
}

.app-modal__container section{
	flex: 1 0 auto;
}

.app-modal__container footer{
	min-height: auto;
}

/* overlay transition */
.modal-enter-active{
  transition: opacity 0.5s ease-out;
}
.modal-leave-active{
	transition: opacity 0.2s ease-in;
}
.modal-enter,
.modal-leave-to {
  opacity: 0;
}

/* RIGHT content transtion */
.modal-content--right-enter-active{
	transition: transform 0.5s ease-out,
				opacity 0.2s ease-out;
	transform: translateX(0);
}
.modal-content--right-enter,
.modal-content--right-leave-to {
	opacity: 0;
	transform: translateX(100px);
}

/* CENTER content transtion */
.modal-content--center-enter-active{
	transition: opacity 0.2s ease-out;
}
.modal-content--center-enter,
.modal-content--center-leave-to {
	opacity: 0;
}

@media (max-width: 1024px) {
	.app-modal__container.modal--right{
		width: 100%
	}
}

/* above every overlay the app can raise: a spinner that says the view is busy is no use
   behind the thing it is describing */
.spinner-absolute-position,
.spinner-fixed-position {
    z-index: 10000;
}

.spinner-absolute-position {
  height:100%;
  position:absolute;
}
/* anchored, not just fixed: a fixed box with no offset starts at wherever it
   flowed, so the spinner drew below the middle of the page - or off it */
.spinner-fixed-position {
    top:0;
    left:0;
    width:100%;
    height:100vh;
    position:fixed;
}
.auth-qrcode-container {
    position: relative;
    width: 300px;
    height: 300px;
}
.auth-qrcode {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}
.backup-codes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
}
.backup-code {
    font-family: monospace;
    font-size: 1.1em;
    padding: 5px 15px;
    width: 50%;
    text-align: center;
}
.app-slider {
	position: relative;
}
.slider__container {
	min-width: 420px;
	min-height: 420px;
}
.app-slider .slide {
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: column;

}

.app-slider .slide__image {
	width: 100%;
	height: auto;
}


.slider__button {
	transition: transform 0.3s ease-in-out;
	user-select: none;
}

.slider__button.button--next {
	position: absolute;
	right:0;
}

.slider__button--prev svg{
	transform: rotate(180deg);
}


.slider__pagination{
	line-height: 36px;
}

/* Next Slide */
.slide-next-enter-active,
.slide-next-leave-active {
	transition: transform 0.5s ease-in-out;
}
.slide-next-enter {
	transform: translate(100%);
}
.slide-next-leave-to {
	transform: translate(-100%);
}

/* Prev slide */
.slide-prev-enter-active,
.slide-prev-leave-active {
	transition: transform 0.5s ease-in-out;
}
.slide-prev-enter {
	transform: translate(-100%);
}
.slide-prev-leave-to {
	transform: translate(100%);
}

@media (max-width: 540px) {

	.slider__container {
		min-width: 320px;
		min-height: 420px;
	}
}


.help-link:link {
    text-decoration: underline;
}
.collapsible-help-item {
  background-color: #26b99a;
  color: white;
  cursor: pointer;
  padding: 20px;
  margin: 10px;
  width: 95%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
.active-help-item, .collapsible-help-item:hover {
  background-color: #5cb85c;
}
.help-item-content {
  padding: 0 20px;
  display: none;
  overflow: hidden;
  background-color: var(--bg);
  color: var(--color);
}

.modal-space-form{
	display:flex;
	margin: var(--app-margin) 0;

}


.button-group-container {
	margin-block: 24px;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.priceslider {
	display: flex;
	align-items: center;
	height: 36px;

	border-radius: 36px;
	background-color: #efefef;
}

.priceslider .entry {
	display: flex;
	align-items: center;
	padding: 0 16px;
	border-radius: 36px;
	height: 36px;
	font-weight: var(--bold);
	color: var(--gray-3);
	cursor: pointer;
}

.entry:has(input:checked),
.entry.active {
	background-color: var(--green-500);
	color: white;
}

input[type="radio"] {
	height: 0;
	width: 0;
	visibility: hidden;
	display: none;
}

.app-modal__container h2{
	font-size: var(--title);
	font-weight: var(--bold);
}
.app-modal__container .card__meta{
	background-color: var(--bg-2);
	border-radius: 4px;
	padding: 16px;
	margin-top:var(--app-margin);
	text-align: center;
}
.app-modal__container .card__meta > *{
	margin-top: 0;
}
.app-modal__container .card__meta ul{
	list-style:none;
	padding: 0px;
	text-align: left;
	margin:16px 0;
}
.app-modal__container .card__meta li{
	color: var(--color);
	line-height: 32px;
	background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.5224 6.16169L9.17909 16.505L4.4776 11.8035" stroke="mediumaquamarine" stroke-width="2"/></svg>') left center no-repeat;
	background-size: 24px auto;
    padding-left: 32px;
}
.app-modal__container h2.card__meta{
	font-size: var(--text);
}
.app-modal__container .options_container{
	display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
}
.app-modal__container .options{
	
}
.app-modal__container button:disabled{
	background-color: gray;
}
.app-modal__container button:disabled:hover{
	background-color: gray;
}
.app-modal__container .app-button.alert{
	background-color: var(--alert);
	color:var(--bg);
	margin-top:8px;
}
.app-modal__container .app-button.alert:hover{
	background-color: var(--alert-hover);
}

.app-modal__container h2{
	font-size: var(--title);
	font-weight: var(--bold);
}
.app-modal__container .card__meta{
	background-color: var(--bg-2);
	border-radius: 4px;
	padding: 16px;
	margin-top:var(--app-margin);
	text-align: center;
}
.app-modal__container .card__meta > *{
	margin-top: 0;
}
.app-modal__container .card__meta ul{
	list-style:none;
	padding: 0px;
	text-align: left;
	margin:16px 0;
}
.app-modal__container .card__meta li{
	color: var(--color);
	line-height: 32px;
	background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.5224 6.16169L9.17909 16.505L4.4776 11.8035" stroke="mediumaquamarine" stroke-width="2"/></svg>') left center no-repeat;
	background-size: 24px auto;
    padding-left: 32px;
}
.app-modal__container h2.card__meta{
	font-size: var(--text);
}
.app-modal__container .options_container{
	display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
}
.app-modal__container .options{
	
}
.app-modal__container .app-button.alert:disabled{
	background-color: gray;
}
.app-modal__container .app-button.alert:disabled:hover{
	background-color: gray;
}
.app-modal__container .app-button.alert{
	background-color: var(--alert);
	color:var(--bg);
	margin-top:8px;
}
.app-modal__container .app-button.alert:hover{
	background-color: var(--alert-hover);
}
.password__wrapper {
	margin: 8px 0;
	position: relative;
}
.password__wrapper input{
	padding-right: 50px;
}
.password__wrapper .eye{
	position: absolute;
	right:4px;
	top:14px;
	background-color: var(--bg);
}
.password__wrapper .eye:focus{
	outline:none;
	background-color: var(--bg-2);
}
.mfa_login {
   display: flex;
   justify-content: center;
}

.mfa_buttons {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
}

.mfa_button {
  width:60%
}

.modal__warning {
	background-color: var(--bg-2);
	border-radius: 4px;
	padding: 16px;
}
.modal__warning.account p {
	margin-bottom: var(--app-margin);
}
.fp-branch, .fp-children {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fp-children {
    margin-inline-start: 13px;
    padding-inline-start: 13px;
    border-inline-start: 1px solid var(--pg-track, rgba(127, 137, 147, 0.25));
}
.fp-row {
    /* every level indents, so without a floor the name ellipsises away a few levels
       down on a phone; the tree pans sideways instead */
    min-width: 240px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 10px;
    border-radius: var(--radius-field);
    color: var(--color);
    cursor: pointer;
    font-size: 15px;
    font-weight: normal;
    margin: 0;
    -webkit-user-select: none;
    user-select: none;
}
.fp-row > * {
    position: relative;
}
.fp-row__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}
.fp-row__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-field);
    pointer-events: none;
    transition: background-color 0.12s ease;
}
.fp-row:hover .fp-row__bg {
    background-color: var(--pg-surface-2);
}
.fp-row:focus-visible {
    outline: 2px solid var(--green-500);
    /* inside the row: an outline outside it is clipped by the scrolling tree */
    outline-offset: -2px;
}
.fp-row__input:checked ~ .fp-row__bg {
    background-color: var(--pg-tint-ok, rgba(38, 185, 154, 0.14));
}
.fp-row__input:checked ~ .fp-row__name {
    color: var(--pg-on-ok, var(--green-500));
    font-weight: 600;
}
.fp-row__input:checked ~ .fp-row__icon {
    color: var(--green-500);
}
.fp-row__input:checked ~ .fp-row__mark {
    border-color: var(--green-500);
    background-color: var(--green-500);
    color: #fff;
}
.fp-row__input:checked ~ .fp-row__mark svg {
    opacity: 1;
}
.fp-row__twisty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-control);
    color: var(--pg-muted);
    transition: transform 0.15s ease, background-color 0.12s ease;
}
.fp-row__twisty:hover {
    background-color: var(--pg-track, rgba(127, 137, 147, 0.25));
    color: var(--color);
}
.fp-row__twisty--open {
    transform: rotate(90deg);
}
.fp-row__twisty--leaf {
    visibility: hidden;
}
.fp-row__busy {
    animation: fp-spin 0.9s linear infinite;
}
@keyframes fp-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .fp-row__busy {
        animation: none;
    }
}
.fp-row__twisty svg {
    width: 16px;
    height: 16px;
}
.fp-row__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--pg-muted);
}
.fp-row__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fp-row__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 2px solid var(--pg-track, rgba(127, 137, 147, 0.4));
    border-radius: 50%;
    color: transparent;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.fp-row__mark--multi {
    border-radius: 6px;
}
.fp-row__mark svg {
    width: 14px;
    height: 14px;
    opacity: 0;
    transition: opacity 0.12s ease;
}
/* the same head and tail split the sync view uses, where it stacks under its label
   rather than sitting beside one */
.fp-selection__value {
    margin-top: 0;
}
.fp-picker {
    width: 560px;
}
.fp-picker__drive {
    flex: 0 0 auto;
    padding: 0 20px 14px;
}
.fp-select {
    width: 100%;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--pg-track);
    border-radius: var(--radius-field);
    background-color: var(--pg-surface-2);
    color: var(--color);
    font-size: 14px;
    line-height: 38px;
    cursor: pointer;
}
.fp-picker__toolbar {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
    padding: 0 12px 8px;
}

.fp-picker__tree {
    min-height: 220px;
    overflow-x: auto;
    padding: 8px 12px;
    border-top: 1px solid var(--pg-track);
    border-bottom: 1px solid var(--pg-track);
}

.fp-picker__choices {
    display: flex;
    flex-direction: column;
    /* the switch is an inline pill, as used in the sync and mount views: let each one size
       to its label instead of stretching across the dialog */
    align-items: flex-start;
    gap: 8px;
}
.fp-selection {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
}
.fp-selection__label {
    flex: 0 0 auto;
    color: var(--pg-muted);
}
.fp-selection__empty {
    color: var(--pg-muted);
}
.fp-selection__chips {
    max-height: 72px;
    overflow-y: auto;
}

.form-autocomplete {
	position: relative;
	margin-bottom: var(--app-margin);
}


/* the results hang under the field on .pg-menu, the surface every other list opens on:
   in flow they were a row of bordered boxes that pushed the form down */
.form-autocomplete .options {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 40;
	width: 100%;
	margin: 0;
	padding: 6px;
	list-style: none;
}

.form-autocomplete .options > li.options__empty {
	color: var(--pg-muted);
	cursor: default;
}

.form-autocomplete .options > li.options__empty:hover {
	background-color: transparent;
}

.form-autocomplete .options > li.disabled,
.form-autocomplete .options > li.disabled:hover {
	display: none;
}

.form-autocomplete .items-selected {
	margin-top: 0px;
}
.form-autocomplete .item-selected {
	border-radius: 4px;
	display: inline-block;
	padding: 5px;
	background: var(--bg-2);
	color:var(--color);
	margin: 0 5px 10px 0;
}
.fp-row--selected .fp-row__bg {
    background-color: var(--pg-tint-ok);
}
.fp-row--selected .fp-row__name {
    color: var(--pg-on-ok);
    font-weight: 600;
}
.fp-row--selected .fp-row__icon {
    color: var(--green-500);
}
.fp-row__tick {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--pg-on-ok);
}
/* global, and other views depend on them: kept as they were */
select{
    min-width: 300px;
    border: 2px solid var(--green-500);
    margin: 8px 0;
	color:var(--color);
	background-color: transparent;
	border-radious: 4px;
	padding: 0 16px;
	font-family: inherit;
	font-size: inherit;
	cursor: inherit;
	line-height: 48px;
}
.item {
  cursor: pointer;
  line-height: 1.5;
}
.bold {
  font-weight: bold;
}
.file-thumbnail {
    display: flex;
    justify-content: center;
    padding: 4px;
    border-radius: var(--radius-field);
    background-color: var(--pg-surface-2);
}
.file-thumbnail .cover {
    display: block;
    max-width: 100%;
    max-height: 160px;
}
/* unscoped, and every other modal's body has come to rely on it: kept as it was */
.modal-body {
    margin: 0px 0;
}
.secret-link {
    position: relative;
    width: 560px;
}
.secret-link__body {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-bottom: 16px;
}
.secret-link__section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}
.secret-link__options {
    gap: 12px;
}
/* the same small caps the sync and mount cards label their endpoints with */
.secret-link__heading {
    margin: 0;
    font-size: 11px;
    font-weight: var(--bold);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pg-muted);
}
.secret-link__members {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.link-member {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px 10px 14px;
}
.link-member + .link-member {
    border-top: 1px solid var(--pg-track);
}
.link-member__path {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: 2px;
}
.link-member__name,
.link-member__dir {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.link-member__name {
    font-size: 15px;
    font-weight: var(--bold);
}
/* the start of a deep path is the least telling part, so that is where it gives way */
.link-member__dir {
    direction: rtl;
    text-align: left;
    font-size: 13px;
    color: var(--pg-muted);
}
.link-member__writable {
    flex: none;
}
.link-member__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--pg-muted);
    cursor: pointer;
}
.link-member__remove svg {
    width: 18px;
    height: 18px;
}
.link-member__remove:not(:disabled):hover {
    background-color: var(--pg-surface-2);
    color: var(--color);
}
.link-member__remove:focus-visible {
    outline: 2px solid var(--green-500);
    outline-offset: 2px;
}
.link-member__remove:disabled {
    opacity: .35;
    cursor: default;
}
.secret-link__add {
    display: flex;
    align-items: center;
    gap: 10px;
}
.secret-link .pg-callout {
    margin: 0;
}
/* what a switch turns on sits under it, indented so it reads as belonging to it */
.secret-link__reveal {
    display: flex;
    gap: 10px;
    padding-left: 12px;
}
.secret-link__field {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: 6px;
}
.secret-link__field--narrow {
    flex: 0 0 130px;
}
.secret-link__label {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--pg-muted);
}
.secret-link__copy {
    display: flex;
    gap: 8px;
}
.secret-link__copy .pg-btn {
    flex: none;
}
.secret-link__done {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    font-weight: var(--bold);
    color: var(--pg-on-ok);
    background-color: var(--pg-tint-ok);
    border-radius: 12px;
}
.secret-link__done-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #ffffff;
    background-color: var(--pg-disc-ok);
}
.secret-link__done-icon svg {
    width: 18px;
    height: 18px;
}
.secret-link__share {
    display: flex;
    align-items: center;
    gap: 16px;
}
/* the code is drawn dark on light, and a scanner needs that contrast in either theme */
.secret-link__qr {
    flex: none;
    width: 152px;
    height: 152px;
    padding: 6px;
    background-color: #ffffff;
    border-radius: 10px;
}
.secret-link__share-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}
@media (max-width: 600px) {
    .secret-link {
        width: 100%;
    }
    /* no room for the switch beside the name: it drops under it */
    .link-member {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .link-member__path {
        flex-basis: calc(100% - 56px);
    }
    .link-member__remove {
        order: 2;
    }
    .link-member__writable {
        order: 3;
    }
}
/* temporary reset */
.drive-share {
	color: var(--color);
	background-color: var(--bg);
}
.share-fields{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.modal-section{
	margin: 32px 0;
}
.flex-profile-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 20px;
  text-align: left;
}

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

.flex-image-button-container {
  display: flex;
  flex-direction: column;
}

.form-control-profile {
    flex-grow: 1;
    margin-right: 10px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}



.modal-space-form{
	display:flex;
	margin: var(--app-margin) 0;

}

.feedback textarea {
    color: var(--color);
    background-color: var(--bg);
}
.modal__warning {
	background-color: var(--bg-2);
	border-radius: 4px;
	padding: 16px;
}
.modal__warning.account p {
	margin-bottom: var(--app-margin);
}
.modal__warning {
	background-color: var(--bg-2);
	border-radius: 4px;
	padding: 16px;
}
.modal__warning.account p {
	margin-bottom: var(--app-margin);
}
.link-password-modal-container {
    width: 25%;
    margin: 0px auto;
    padding: 20px 30px;
	color: var(--color);
    background-color: var(--bg);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    min-width: 400px;
}

.app-tabs{
	max-width:500px;
	margin: 0 auto;
	color: var(--color);
	background-color: var(--bg);
}



.app-tabs .tabs__header {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.app-tabs .tabs__header > li {
	padding: 15px 30px;
	cursor: pointer;
	flex-grow: 1;
	font-weight: var(--bold);
	font-size: var(--text);
	text-align: center;
	background-color: var(--bg-2);
}

/* on a phone three labels in a longer language (Greek, German) outgrow 30px a side, and the
   last tab ran off the screen */
@media (max-width: 480px) {
	.app-tabs .tabs__header > li {
		padding: 15px 10px;
	}
}

@media (max-width: 360px) {
	.app-tabs .tabs__header > li {
		padding: 15px 6px;
		font-size: var(--text-small);
	}
}

.app-tabs .tabs__header > li.active {
	border-radius: 4px 4px 0 0;
	background-color: var(--bg);
}

.login-register .tab{
	padding: calc(var(--app-margin) / 2);
}

.login-register .login{
	margin-top: 8px;
}

.login-register input[name="username"]{
	text-transform:lowercase;
}

.app-login .demo--warning{
	text-align: left;
	margin-top: var(--app-margin);
}

.login__server-hint {
	color: #c0392b;
	font-size: var(--text-small);
	margin: 8px 0 0;
	text-align: center;
}
/* vue-toastification paints its default toast #1976d2 with white text, which is
   what the white-on-white bar in here assumed; on the app's own surface it was
   invisible. This is the same job as a sync pair's progress, so it takes the same
   parts: the 4px track, the --blue-accent fill, and the percentage. */
.Vue-Toastification__toast.progress-toast {
	min-height: 0;
	padding: 14px 16px;
	font-family: var(--font-stack);
	color: var(--color);
	background-color: var(--bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-container);
	box-shadow: var(--pg-shadow-dialog);
}

.progress-toast .Vue-Toastification__toast-body {
	width: 100%;
	min-width: 0;
}

/* the same control every dialog closes with: a round 36px target in the corner, not
   the library's bare cross */
.progress-toast .Vue-Toastification__close-button{
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	/* the title's line is shorter than this control: lift it so it reads as centred on
	   the first row rather than hanging below it, as .pg-dialog__close does */
	margin: -9px -8px 0 0;
	padding: 0;
	opacity: 1;
	font-size: 20px;
	font-weight: var(--regular);
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--pg-muted);
	transition: background-color .15s;
}

.progress-toast .Vue-Toastification__close-button:hover{
	background-color: var(--pg-surface-2);
	color: var(--color);
}

.progress-toast .Vue-Toastification__close-button:focus-visible{
	outline: 2px solid var(--green-500);
	outline-offset: 2px;
}

@media (pointer: coarse) {
	.progress-toast .Vue-Toastification__close-button{
		width: 44px;
		height: 44px;
	}
}

.app-progressbar{
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--color);
}

/* the glyph says which way the bytes are going before the words do */
.progress__head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.progress__text {
	min-width: 0;
}

.progress__icon {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
}

/* both take the tone the page uses for work in flight, which is what the bar beneath
   them is already saying; the arrow, not the colour, says which way the bytes go */
.progress__icon--upload,
.progress__icon--download {
	color: var(--pg-on-busy);
}

.progress__title {
	margin: 0;
	font-size: var(--text-small);
	font-weight: var(--bold);
	line-height: 1.3;
}

.progress__subtitle {
	margin: 0;
	font-size: 13px;
	line-height: 1.3;
	color: var(--pg-muted);
	overflow-wrap: anywhere;
}

.progress__row {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.app-progressbar__stats {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 13px;
	color: var(--pg-muted);
}

.progress__pct {
	flex: none;
	font-size: 13px;
	color: var(--pg-muted);
	font-variant-numeric: tabular-nums;
}

/* the bar is .pg-bar, the one the sync page shows; only its width is this toast's */
.app-progressbar .progress__bar{
	width: 100%;
}

.app-progressbar .pg-bar > span{
	width: 0;
}

.app-progressbar .progress__actions{
	display: flex;
	justify-content: flex-end;
	margin-top: 2px;
}

/* .pg-btn--quiet in the design system, at the size a toast has room for */
.app-progressbar .progress__cancel{
	min-height: 32px;
	padding: 6px 12px;
	font-size: 13px;
}
.button-group-container {
	margin-block: 24px;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.priceslider {
	display: flex;
	align-items: center;
	height: 36px;

	border-radius: 36px;
	background-color: #efefef;
}

.priceslider .entry {
	display: flex;
	align-items: center;
	padding: 0 16px;
	border-radius: 36px;
	height: 36px;
	font-weight: var(--bold);
	color: var(--gray-3);
	cursor: pointer;
}

.entry:has(input:checked),
.entry.active {
	background-color: var(--green-500);
	color: white;
}

input[type="radio"] {
	height: 0;
	width: 0;
	visibility: hidden;
	display: none;
}


.app-signup .generate-password,
.app-signup .signup,
.app-signup .waiting-list{
	margin: 8px 0;
}


/* Waiting list */
.app-signup h2{
	margin-bottom: 28px;
	font-size: var(--title);
	line-height: var(--title-height);
	font-weight: var(--bold);
	text-align: left;
}
.app-signup p{
	text-align: left;
}
.button-group-container {
	margin-block: 24px;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.priceslider {
	display: flex;
	align-items: center;
	height: 36px;

	border-radius: 36px;
	background-color: #efefef;
}

.priceslider .entry {
	display: flex;
	align-items: center;
	padding: 0 16px;
	border-radius: 36px;
	height: 36px;
	font-weight: var(--bold);
	color: var(--gray-3);
	cursor: pointer;
}

.entry:has(input:checked),
.entry.active {
	background-color: var(--green-500);
	color: white;
}

input[type="radio"] {
	height: 0;
	width: 0;
	visibility: hidden;
	display: none;
}


.app-signup .generate-password,
.app-signup .signup,
.app-signup .waiting-list{
	margin: 8px 0;
}


/* Waiting list */
.app-signup h2{
	margin-bottom: 28px;
	font-size: var(--title);
	line-height: var(--title-height);
	font-weight: var(--bold);
	text-align: left;
}
.app-signup p{
	text-align: left;
}
.app-dropdown {
	position: relative;
	z-index:100;
	line-height: 32px;
	border-radius: 4px;
}

/* the surface is .pg-menu in 2_status-cards.css; this is only where it opens */
.app-dropdown .dropdown__content {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 220px;
}
.app-dropdown li:hover a{
	color: var(--color);
	text-decoration: none;
}

.drop-enter-active, .drop-leave-active  {
  transition: all 0.2s ease-out;
}

.drop-enter, .drop-leave-to {
	opacity: 0;
	transform: translateY(-10px)
}
.user-settings {
	margin-left:auto;
	display: flex;
	align-items: center;
	padding: 0 32px;
}
.user-settings button{
	margin-left: 16px;
}
.drive-user {
	display: flex;
	align-items: center;
}
.user-settings .dropdown__content {
	right: 0;
	left: auto;
}
.drive-user .cover {
	display: inline-block;
	height: 42px;
	width: 42px;
	margin-left: 8px;
	background-color: var(--bg-2);
	border-radius: 50%;
	object-fit: cover;
	color: var(--color);
}
.app-header {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}


.app-header .primary{
	padding: 4px 32px;
	color: var(--color-2);
}


@media screen and (max-width: 1024px) {
	.app-header {
		flex-wrap: wrap;
		flex-direction: row;
	}
	.app-header > * {
		width:100%;
		min-height: 64px;
		padding: 0 16px;
	}

	/* the view's name reads the same here as on a desktop: at the head of the bar with
	   the account at the other end, rather than leaving a phone to guess where it is */
	.app-header .primary{
		display: flex;
		align-items: center;
		order: 1;
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
		padding: 0 16px;
	}

	/* a name longer than the bar is cut rather than pushing the account off it */
	.app-header .primary h1{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.app-header .user-settings{
		order: 3;
		flex: 0 0 auto;
		width: auto;
		justify-content: flex-end;
		margin-right: 0;
	}

}
.app-template-prompt.app-modal__overlay{
	display:flex;
	align-items: center;
	justify-content: center;
}
.app-template-prompt__container{
	width: 400px;
	padding: 16px;
	border-radius: 4px;
	color: var(--color);
	background-color:var(--bg);
	box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.template-prompt__header h3{
	border-top:0;
	font-weight: var(--regular);
}
.template-prompt__body{
	margin: var(--app-margin) 0;
}
.template-prompt__footer{
	display: flex;
	justify-content: flex-end;
}
.template-prompt__footer button{
	margin-left: 16px;
}
.flex-thumbnail-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-image-button-container {
  display: flex;
  flex-direction: column;
}
.app-install-container {
    height: 100%;
    overflow-y: auto;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 20px 30px;
    background-color: var(--bg);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,.33);
    transition: all .3s ease;
}

.app-install-view {
    font-size: 1.3em;
}
.app-install-text {
    font-size: 1.0em;
}
.app-install-span {
    font-weight: bold;
    padding-right: 10px;
}
    .warning-container {
    word-wrap:break-word;width:auto
    }
.hidden-info {
  display: none;
}
.gallery-mask {
  position: fixed;
  z-index: 2500;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  transition: opacity .3s ease;
}
.gallery-container {
    height:100%;
    margin: 0px auto;
	color: var(--color);
    background-color: var(--bg);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    /* font-family: Helvetica, Arial, sans-serif; */
}
.gallery {
    color: var(--color);
    background-color: var(--bg);
}

.slideshow-info {
  position: absolute;
  padding: 5px 10px;
  background: rgba(0,0,0,.8);
  color: #fff;
}

.slideshow-close {
  position: absolute;
  right: 10px;
  text-align: right;
  font-size: xx-large;
  cursor: pointer;
  z-index: 20;
}
.slideshow-close span {
  display: block;
}

.slideshow-wrapper {
  height:100vh;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.slideshow-wrapper video, audio {
  object-fit: contain;
  width:100%;
  height:100%;
  z-index: 20;
}
.image-display {
  object-fit: contain;
  width:100%;
  height:100%;
  z-index: 20;
}
.image-display-zoomed {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  z-index: 20;
}
#slideshow-next {
  position: absolute;
  background: rgba(0, 0, 0, 0);
  border: none;
  z-index: 10;
  border-radius: 50%;
  border-style: solid;
  top: calc(50vh);
  height: 40px;
  width: 40px;
  margin-right: 5px;
}
#slideshow-prev {
  position: absolute;
  background: rgba(0, 0, 0, 0);
  border: none;
  z-index: 10;
  border-radius: 50%;
  border-style: solid;
  top: calc(50vh);
  height: 40px;
  width: 40px;
  margin-left: 5px;
}
#slideshow-next.hidden, #slideshow-prev.hidden {
  display: none;
}
#slideshow-next {
  right: 0;
}
.error-modal-container {
    width: 25%;
    margin: 0px auto;
    padding: 20px 30px;
	color: var(--color);
    background-color: var(--bg);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    min-width: 400px;
}

.prompt-modal-container {
    width: 25%;
    margin: 0px auto;
    padding: 20px 30px;
	color: var(--color);
    background-color: var(--bg);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    min-width: 400px;
}


select{
    min-width: 300px;
    border: 2px solid var(--green-500);
    margin: 8px 0;
	color:var(--color);
	background-color: transparent;
	border-radious: 4px;
	padding: 0 16px;
	font-family: inherit;
	font-size: inherit;
	cursor: inherit;
	line-height: 48px;
}
.app-prompt.app-modal__overlay{
	display:flex;
	align-items: center;
	justify-content: center;
}
.app-prompt__container{
	width: 400px;
	padding: 16px;
	border-radius: 4px;
	color: var(--color);
	background-color:var(--bg);
	box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.prompt__header h3{
	border-top:0;
	font-weight: var(--regular);
}
.prompt__body_no_margin{
	margin: 0;
}
.prompt__footer{
	display: flex;
	justify-content: flex-end;
}
.prompt__footer button{
	margin-left: 16px;
}

.item {
  cursor: pointer;
  line-height: 1.5;
}
.bold {
  font-weight: bold;
}
.scroll-style {
    max-height: 250px;
    overflow-y: scroll;
    border: 2px solid var(--green-500);
    margin: 8px 0;
}
.note-modal-container {
    width: 90%;
    margin: 0px auto;
    padding: 20px 30px;
    color: var(--color);
    background-color: var(--bg);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    /* font-family: Helvetica, Arial, sans-serif; */
}
.message-container {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px;
    overflow-wrap: break-word;
    width: auto;
    font-size: 18px;
}
.prompt-modal-container {
    width: 25%;
    margin: 0px auto;
    padding: 20px 30px;
	color: var(--color);
    background-color: var(--bg);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    min-width: 400px;
}
.profile-page-container {
    height: 100%;
    width: 40%;
    overflow-y: auto;
    position: fixed;
    z-index: 2500;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    margin: 0 auto;
    padding: 20px 30px;
    background-color: var(--bg);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,.33);
    transition: all .3s ease;
    /* font-family: Helvetica,Arial,sans-serif; */
}

.profile-span {
    font-weight: bold;
    padding-right: 10px;
}

.profile-view {
    font-size: 1.3em;
}

.profile-image {
    margin: 20px;
}
    
#profile-container div {
  display: inline-block;
  margin: 6px 8px;
}

#profile-image img {
  display: block;
  width: 200px;
  height: 200px;
}


/* Opened from the right edge of its own button, like the upload menu beside it: these sit
   at the end of the toolbar, and a menu that opens rightwards from here runs off the window. */
.drive-header .sort .dropdown__content {
	right: 0;
	left: auto;
}

/* The menu says both halves of the order outright: a tick against the property in force,
   and a last entry that names the direction and is the only thing that turns it around.
   Both are pushed to the far edge - a menu row is wider than its label, so a mark 4px after
   the text would sit ragged down the list.

   18px, not the 12px a caret takes in a table heading: these glyphs are stroked 2 units wide
   in a 32 unit box, so 12px draws them 0.75px thick - under one pixel, which is what makes a
   small mark look faint rather than small. 18px puts the stroke back over a pixel. */
.drive-header .sort .pg-menu .sort-tick,
.drive-header .sort .pg-menu .sort-caret {
	color: var(--pg-on-ok);
	width: 18px;
	height: 18px;
	margin-left: auto;
	padding-left: 12px;
	box-sizing: content-box;
}

/* and the row says it too, so the mark is not the only thing carrying it */
.drive-header .sort .pg-menu li.sorted {
	color: var(--pg-on-ok);
}

.drive-header .sort .pg-menu .sort-caret--asc {
	transform: rotate(180deg);
}

/* The drive header on the surfaces the sync and mount pages use: one bordered
   bar that stays at the top of the view, with its controls on .pg-btn's 40px
   floor and a rule between them and the account. */
.drive-header {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 16px;
	height: 56px;
	flex: none;
	padding: 0 32px;
	background-color: var(--bg);
	/* transparent until the view is under it: a page too short to scroll has no timeline,
	   and a colour here would show on those pages and nowhere else */
	border-bottom: 1px solid transparent;
}

/* the trigger sits at the right end of its bar at every width, so its menu hangs from
   that edge: left aligned it opened past the window */
.drive-header .upload .dropdown__content {
	right: 0;
	left: auto;
}

/* the rule marks the moment the view passes under the bar, not the bar itself. Only where
   it pins: on a phone it wraps and scrolls away, and there the plain rule separates it */
@media (min-width: 1025px) {
	@supports (animation-timeline: scroll()) {
		.drive-header {
			animation: drive-header-stuck linear both;
			animation-timeline: scroll(nearest block);
			animation-range: 0 2px;
		}

		@keyframes drive-header-stuck {
			to {
				border-bottom-color: var(--border-color);
			}
		}
	}
}

.drive-header .drive-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	margin-left: auto;
	padding: 0;
}

/* The two glyph buttons hold their ink inside their own padding; the filled one's box is
   its ink. Without this the eye reads a wider gap between the two glyphs than between the
   last glyph and the box, though the boxes are evenly spaced. The margin is that padding. */
.drive-header .drive-tools .upload {
	margin-left: 10px;
}

/* The sort control is a dropdown, so its button sits a level deeper than the toggle and the
   search beside it. Named here as well, or it keeps the header's own colour and size and
   stands out white against two muted neighbours. */
.drive-header .drive-tools > .app-button,
.drive-header .drive-tools > .sort > .app-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--pg-muted);
	border: 0;
	border-radius: var(--radius-control);
}

.drive-header .drive-tools > .app-button:hover,
.drive-header .drive-tools > .sort > .app-button:hover {
	color: var(--color) !important;
	background-color: var(--bg-2);
}

.drive-header .drive-tools > .app-button:focus-visible,
.drive-header .drive-tools > .sort > .app-button:focus-visible {
	outline: 2px solid var(--green-500);
	outline-offset: 2px;
}

.drive-header .drive-tools > .app-button svg,
.drive-header .drive-tools > .sort > .app-button svg {
	width: 20px;
	height: 20px;
}

/* breadcrumb: the trail was --color-2, which is 1.92:1 on the page */
.drive-breadcrumb {
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
	padding: 0;
	color: var(--pg-muted);
	overflow: hidden;
}

.drive-breadcrumb .app-button {
	padding: 7px 10px;
	font-size: 15px;
	font-weight: var(--regular);
	color: var(--pg-muted);
	border-radius: var(--radius-control);
	white-space: nowrap;
}

/* a touch screen keeps :hover on whatever was tapped last, which left a name lit up */
@media (hover: hover) {
	.drive-breadcrumb .app-button:hover {
		color: var(--color) !important;
		background-color: var(--bg-2);
	}
}

/* and the button's own hover brightens the text, so a touch screen keeps each name its colour */
@media (hover: none) {
	.drive-breadcrumb .app-button:hover {
		color: var(--pg-muted) !important;
	}

	.drive-breadcrumb .breadcrumb__item--current:hover {
		color: var(--color) !important;
	}
}

.drive-breadcrumb .breadcrumb__root {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: none;
	padding: 0;
}

.drive-breadcrumb .breadcrumb__root svg {
	width: 22px;
	height: 22px;
}

/* at the top, the globe is where you are, so it takes the current folder's solid colour */
.drive-breadcrumb .breadcrumb__root--current,
.drive-breadcrumb .breadcrumb__root--current:hover {
	color: var(--color) !important;
}

/* A name squeezed below its padding drew over the next one, so each keeps to its own box */
.drive-breadcrumb .breadcrumb__crumb {
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
	flex-shrink: 10;
	overflow: hidden;
}

/* short of room, a name other than the current folder keeps enough to show a letter and its
   separator; a trail with room needs no floor, which would pad out a one letter name */
.drive-breadcrumb--tight .breadcrumb__crumb {
	min-width: 56px;
}

/* When the trail is short of room, the folder you are in is the last to give way. The others
   take ten times the share rather than it taking a tenth: once they are down to nothing, a
   shrink factor under one only ever gives up that fraction of the overflow, and a long name ran
   off the screen uncut. The ellipsis does not give way at all, or there is nothing to tap. */
.drive-breadcrumb .breadcrumb__crumb--current,
.drive-breadcrumb--tight .breadcrumb__crumb--current {
	min-width: 0;
	flex-shrink: 1;
}

.drive-breadcrumb .breadcrumb__crumb--more {
	flex: none;
}

.drive-breadcrumb .breadcrumb__more {
	flex: none;
	padding: 7px 10px;
	border: 0;
	border-radius: var(--radius-control);
	background-color: transparent;
	color: var(--pg-muted);
	font-family: inherit;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.drive-breadcrumb .breadcrumb__more:focus-visible {
	outline: 2px solid var(--green-500);
	outline-offset: 2px;
}

@media (hover: hover) {
	.drive-breadcrumb .breadcrumb__more:hover {
		color: var(--color);
		background-color: var(--bg-2);
	}
}

.drive-breadcrumb .breadcrumb__separator {
	width: 16px;
	flex: none;
	color: var(--color-2);
}

.drive-breadcrumb .breadcrumb__item {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.drive-breadcrumb .breadcrumb__item--current {
	color: var(--color);
	font-weight: var(--bold);
}

/* expanded, every name is shown whole and the trail wraps onto as many lines as it needs,
   the way a tile's name opens when tapped */
.drive-breadcrumb--expanded {
	flex-wrap: wrap;
	overflow: visible;
}

.drive-breadcrumb--expanded .breadcrumb__item {
	overflow: visible;
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: left;
}

/* The bar is one 56px row with everything centred in it, so a trail that wraps grew out of it
   both ways and its first line rose. Opened, the bar grows with the trail instead, everything
   held at the top where the centred row had it: (56 - 40) / 2. */
@media (min-width: 1025px) {
	.drive-header.drive-header--path-open {
		height: auto;
		min-height: 56px;
		align-items: flex-start;
		padding-top: 8px;
		padding-bottom: 8px;
	}
}

@media screen and (max-width: 1024px) {
	/* wrapped lines read as one trail when they sit close; the phone's full height tap target
	   spaced them 49px apart. Doubled class to outrank that rule, the more specific otherwise. */
	.drive-breadcrumb.drive-breadcrumb--expanded .breadcrumb__item {
		padding-top: 5px;
		padding-bottom: 5px;
	}

	/* the first line then sits where the centred single line did: half the 6px taken off each
	   name, plus the half pixel the row's centring had */
	.drive-header .drive-breadcrumb.drive-breadcrumb--expanded {
		padding-top: 3.5px;
		padding-bottom: 3.5px;
	}
}

/* .app-button carries a 2px transparent border, which leaves the fill 4px shorter
   than the outlined controls beside it even though both boxes are 40px. Colouring
   the border with the fill is what .pg-btn--primary does. */
.drive-header .upload .app-button {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	width: auto;
	height: 40px;
	padding: 0 8px 0 10px;
	line-height: 1;
	border: 1px solid var(--pg-primary);
	border-radius: var(--radius-control);
}

.drive-header .upload .app-button:hover {
	border-color: var(--pg-primary-hover);
}

.drive-header .upload svg {
	width: 20px;
	height: 20px;
}

/* the caret is the smaller of the two: the plus is the action, the caret only
   says there is a menu behind it */
.drive-header .upload .app-button > svg:last-child {
	width: 14px;
	height: 14px;
}

@media screen and (max-width: 1024px) {
	.drive-header {
		position: static;
		flex-wrap: wrap;
		flex-direction: row;
		height: auto;
		gap: 0;
		padding: 0;
	}

	/* no blanket width here: it becomes the flex basis and wraps the account onto
	   its own row. The breadcrumb asks for the full row itself. */
	.drive-header > * {
		min-height: 56px;
		padding: 0 16px;
	}

	/* at the end of their row, where the desktop keeps them and where a thumb reaches:
	   the account sits on the bar above, so this row is the tools' own */
	.drive-header .drive-tools {
		flex: 1 1 auto;
		order: 1;
		margin-left: auto;
		/* the same 16px the account keeps above it, so the two bars end on one line */
		padding: 0 16px;
		justify-content: flex-end;
	}

	.drive-header .drive-breadcrumb {
		order: 3;
		flex: 1 0 100%;
		min-height: 52px;
		/* its buttons carry 10px of their own, which lands the trail's first word on the
		   16px the title above it starts from */
		padding: 0 6px;
		border-top: 1px solid var(--border-color);
	}

	/* a finger needs more than a mouse, as .pg-btn already allows for */
	.drive-header .drive-tools > .app-button,
	.drive-header .drive-tools > .sort > .app-button {
		width: 48px;
		height: 48px;
	}

	/* the same allowance, against the larger padding a 48px target gives its glyph */
	.drive-header .drive-tools .upload {
		margin-left: 14px;
	}

	.drive-header .upload .app-button {
		height: 48px;
	}

	.drive-breadcrumb .app-button {
		padding: 11px 10px;
	}

	.drive-breadcrumb .breadcrumb__root {
		width: 44px;
		height: 44px;
	}
}
.drive-grid {
	display: grid;
	grid-gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));

	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	padding: 16px 32px 24px;
	margin-top: 0;
	align-content: start;
	/* each tile keeps its own height, so one with an opened name grows alone rather than
	   stretching everything beside it */
	align-items: start;
}

/* when the drop target stands in for the folder's contents there is no grid to draw */
.drive-grid--empty {
	display: none;
}

@media (max-width: 1024px) {
	.drive-grid {
		width: 100%;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		grid-gap: 10px;
		padding: 10px 16px 16px;
	}
}
.share-mark {
	display: flex;
	flex: none;
	align-items: center;
	gap: 4px;
	color: var(--pg-on-ok);
}

/* Each mark says what it means on hover, which needs an element that takes a title: the
   attribute is not how an svg carries one. A pointer is the only thing that asks for this,
   and a touch screen losing it costs nothing. */
.share-mark > span {
	display: flex;
}

/* The two glyphs are drawn to different scales in their own viewBoxes, so equal CSS sizes
   would not put equal ink on the row: the link fills its box edge to edge, while the people
   mark sits inset in its own. Measured, these two sizes paint 15.7px and 15.6px of ink and
   centre within 0.05px of each other and of the menu beside them. */
.share-mark__link {
	width: 16px;
	height: 16px;
}

.share-mark__people {
	width: 17.5px;
	height: 17.5px;
}
/* A contact sheet: the whole folder on one screen. Flat tiles on hairline
   borders, the preview in its own band and the name in a strip under it,
   rather than a caption floated over the picture. */
.grid-card {
	/* Named so the touch rules below can be derived from them rather than repeating a
	   pixel figure per width: the picture's shape, and the height of the row under it. */
	--tile-ratio: 4 / 3;
	--row-height: 36px;

	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-control);
	cursor: pointer;
	overflow: hidden;
}

.grid-card:hover,
.grid-card.menu-target {
	background-color: var(--bg-2);
	border-color: var(--pg-border-strong);
}

/* Picked: the outline goes round the whole tile, but the colour stays on the picture,
   which is the part that was picked. The row below keeps the tile's own background. */
.grid-card.selected {
	border-color: var(--green-500);
}

.grid-card.selected figure:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
	aspect-ratio: var(--tile-ratio);
	background-color: var(--pg-tint-ok);
	opacity: 0.55;
	/* the picture underneath is what a press and a tap are aimed at */
	pointer-events: none;
}

.grid-card figure {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.grid-card .cover,
.grid-card .card__icon {
	display: block;
	width: 100%;
	/* Sized from the column rather than pinned to a pixel height, so the picture is as big as
	   the tile allows at every width. A fixed height letterboxes it on a wide card and crops
	   it on a narrow one, and left the phone no way to show more of a thumbnail at all. */
	aspect-ratio: var(--tile-ratio);
	height: auto;
	flex: none;
	background-color: var(--pg-surface-2);
}

.grid-card .cover {
	object-fit: cover;
	object-position: center center;
}

/* The picture leans in under the pointer, as it did before the rebuild.
   Only where something can actually hover: on a touch screen :hover sticks after a tap, so
   an unguarded rule leaves a thumbnail zoomed until something else is tapped. */
@media (hover: hover) {
	.grid-card .cover {
		transform: scale(1);
		transition: transform 0.2s;
	}

	.grid-card:hover .cover {
		transform: scale(1.05);
	}

	@media (prefers-reduced-motion: reduce) {
		.grid-card .cover,
		.grid-card:hover .cover {
			transition: none;
			transform: none;
		}
	}
}

.grid-card .card__icon {
	padding: 40px 0;
	color: var(--pg-muted);
}

.grid-card figcaption {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	height: var(--row-height);
	padding: 0 34px 0 10px;
	font-size: 13px;
	font-weight: var(--regular);
	color: var(--color);
}

/* the name takes the squeeze, so the mark beside it is never the part that is cut */
.grid-card .card__name {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* both controls appear for the tile under the pointer, as they always have */
.grid-card .card__select {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	opacity: 0;
	color: var(--pg-muted);
	background-color: var(--bg);
	border: 1px solid var(--pg-muted);
}

.grid-card:hover .card__select,
.grid-card .card__select.selected {
	opacity: 1;
}

/* the selection bar's select-all circle is the same control, and wears this too */
.card__select.app-button.accent,
.card__select.app-button.accent:focus {
	border-color: var(--green-500);
}

.grid-card .card__select svg {
	width: 16px;
	height: 16px;
}

.grid-card .card__menu {
	position: absolute;
	right: 4px;
	bottom: 2px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	opacity: 0;
	color: var(--pg-muted);
	border-radius: var(--radius-control);
	background-color: transparent;
}

.grid-card .card__menu svg {
	width: 18px;
	height: 18px;
}

.grid-card:hover .card__menu,
.grid-card:focus-within .card__menu {
	opacity: 1;
}

/* Narrower tiles, so a taller row and a little more room around what sits in it. This is
   about width, and a wide tablet is right to keep the desktop's sizing. */
@media (max-width: 1024px) {
	.grid-card {
		--row-height: 40px;
	}
}

/* Touch, which is a different question from width: a tablet is wider than the breakpoint and
   still has no pointer to reveal anything. Everything here answers "can this device hover",
   and is sized from --row-height so it holds at either of them. */
@media (max-width: 1024px), (hover: none) {
	/* A phone has no circle standing by on every tile - the press and hold below is how a
	   selection starts there. Once one is running every tile carries one, empty or ticked, so
	   the mode and its targets are visible without a pointer to reveal them; the markup leaves
	   it out the rest of the time. Tapping one drops that tile again. */
	.grid-card .card__select {
		opacity: 1;
	}

	/* and the target around it reaches a thumb */
	.grid-card .card__select:after {
		content: "";
		position: absolute;
		top: -9px;
		right: -9px;
		bottom: -9px;
		left: -9px;
	}

	/* Press and hold selects, so the browser must not take the gesture for itself - no text
	   selection under the finger, no callout over the picture, and no drag. Dragging is a
	   pointer affordance: a touch cannot finish one, and the attempt is what a press and hold
	   looks like to the browser, so the two fight over the same gesture. The picture carries
	   its own drag behaviour whatever the figure around it says, so it is named too. */
	.grid-card {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;
	}

	.grid-card figure,
	.grid-card .cover {
		-webkit-user-drag: none;
	}

	/* The button stays a 44px thumb target although the row under it is shorter, so it reaches
	   up over the picture. Its glyph is dropped to the bottom rather than centred in the
	   button, which puts the dots back on the filename's line: the glyph's middle ends up
	   11px above the button's edge - 2px of transparent border and half of an 18px icon - so
	   the padding that puts it on the row's centre line is half the row less that. */
	.grid-card .card__menu {
		/* nothing reveals itself on a touch screen, so the menu stays put */
		opacity: 1;
		width: 44px;
		height: 44px;
		bottom: 0;
		align-items: flex-end;
		padding: 0 0 calc(var(--row-height) / 2 - 11px);
	}

	/* and the name gives the wider button its room */
	.grid-card figcaption {
		padding-right: 48px;
	}

	/* Opened, the name wraps and the row grows under it. Only this tile grows: the grid lets
	   every tile keep its own height, so the ones beside it stay as they were. The padding is
	   half of what is left of the row once a line of text has taken its 18px, so the opened
	   name starts on the line the closed one sat on. */
	.grid-card figcaption.name-open {
		height: auto;
		min-height: var(--row-height);
		padding-top: calc((var(--row-height) - 18px) / 2);
		padding-bottom: calc((var(--row-height) - 18px) / 2);
	}

	/* The menu is pinned to the bottom of the tile, so when an opened name pushes the row
	   taller the mark drops with it rather than floating up beside the first line. Closed, the
	   row centres both and this does not apply. */
	.grid-card figcaption.name-open .share-mark {
		align-self: flex-end;
	}

	.grid-card figcaption.name-open .card__name {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		overflow-wrap: anywhere;
	}

	.grid-card .card__name {
		cursor: pointer;
	}
}
/* An empty folder's drop target is the empty folder: it takes the space under
   either view, which is the area that accepts a drop (#dnd in Drive.vue). */
.grid-card.drop {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 220px;
	margin: 12px 32px 24px;
	padding: 24px;
	cursor: default;
	background-color: transparent;
	border: 2px dashed var(--border-color);
	border-radius: var(--radius-container);
}

.grid-card.drop .card__icon {
	width: 56px;
	height: 56px;
	padding: 0;
	color: var(--color-2);
	background-color: transparent;
}

.grid-card.drop figcaption {
	height: auto;
	padding: 0;
	font-size: var(--text-small);
	line-height: 1.4;
	color: var(--pg-muted);
	text-align: center;
}

@media screen and (max-width: 1024px) {
	.grid-card.drop {
		min-height: 180px;
		margin: 10px 16px 16px;
	}
}
/* The list keeps its shape and takes the flat side of the status cards. The
   shared parts - header strip, labels, hairlines, caret - are .pg-table; here are
   this table's own columns, row height and cells, with the thumbnail the drive
   has always shown. */
.drive-table {
	min-width: 1024px;
}

.drive-table thead tr {
	/* under the header, which pins at the top of the view */
	top: 56px;
}

/* with a selection there are two bars above it, not one */
.drive-view--selecting .drive-table thead tr {
	top: 112px;
}

.drive-table tbody tr {
	height: 48px;
	line-height: normal;
	transition: background-color 0.15s ease;
}

.drive-table tbody tr:focus,
.drive-table tbody tr.is-menu-target {
	background-color: var(--bg-2);
}

/* the tick says which rows are in the selection; the tint says how many at a
   glance, which is what the count at the top is for */
.drive-table tbody tr.is-selected,
.drive-table tbody tr.is-selected:hover {
	background-color: var(--pg-tint-ok);
}

.drive-table tbody tr:focus-visible {
	outline: 2px solid var(--green-500);
	outline-offset: -2px;
}

.drive-table th.select,
.drive-table td.select {
	width: 62px;
	padding: 0 10px 0 32px;
}

/* the app's checkbox keeps its face; the label around it stops being a 32px
   indent with a bottom margin inside a 48px row */
.drive-table .checkbox__group {
	display: block;
	width: 20px;
	height: 20px;
	padding: 0;
	margin: 0;
}

.drive-table th.glyph,
.drive-table td.glyph {
	width: 52px;
	padding: 0 8px 0 0;
}

.drive-table td.glyph .card__icon {
	display: block;
	width: 26px;
	height: 26px;
	margin: 0 auto;
	color: var(--pg-muted);
}

.tablethumb {
	display: block;
	width: 36px;
	height: 36px;
	margin: 0 auto;
	object-fit: cover;
	object-position: center center;
	border-radius: var(--radius-control);
}

.drive-table td.file {
	display: flex;
	align-items: center;
	height: 48px;
	min-width: 0;
	cursor: pointer;
}

.table__name {
	min-width: 0;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.table__shared {
	margin-left: 10px;
}

.drive-table .size,
.drive-table .type,
.drive-table .date {
	font-size: 13px;
	color: var(--pg-muted);
	white-space: nowrap;
}

.drive-table th.size,
.drive-table td.size {
	width: 110px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.drive-table th.type,
.drive-table td.type {
	width: 160px;
}

.drive-table th.date,
.drive-table td.date {
	width: 170px;
	font-variant-numeric: tabular-nums;
}

.drive-table th.menu,
.drive-table td.menu {
	width: 64px;
	padding: 0 32px 0 0;
	text-align: right;
}

.drive-table .table__menu {
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--pg-muted);
	border-radius: var(--radius-control);
	transition: opacity 0.15s ease;
	opacity: 0;
}

.drive-table .table__menu svg {
	width: 20px;
	height: 20px;
}

.drive-table tbody tr:hover .table__menu,
.drive-table tbody tr:focus .table__menu,
.drive-table tbody tr:focus-within .table__menu {
	opacity: 1;
}

/* A phone is narrower than any five columns: the row keeps its cells and lays
   them out in two lines instead of scrolling sideways at 1024px. */
@media (max-width: 1024px) {
	/* .pg-table lays the table out in blocks here; what follows is this list's own part
	   of that: the width it may take, and how a row lays out */
	.drive-table {
		width: 100%;
		min-width: 0;
	}

	/* .pg-table turns a head into a strip of chips at this width, which cost a phone a row
	   of its listing to say what the header's sort menu already says. The menu is in the
	   toolbar at every width, so this is the one that goes. */
	.drive-table thead {
		display: none;
	}

	.drive-table tbody tr {
		display: grid;
		grid-template-columns: 40px 44px auto minmax(0, 1fr) 48px;
		grid-template-areas:
			"sel glyph name name menu"
			"sel glyph size mod  menu";
		align-items: center;
		column-gap: 8px;
		height: auto;
		min-height: 64px;
		padding: 8px 12px;
	}

	.drive-table td {
		padding: 0;
	}

	.drive-table td.select {
		grid-area: sel;
		width: auto;
		padding: 0;
	}

	.drive-table td.glyph {
		grid-area: glyph;
		width: auto;
	}

	.drive-table td.file {
		grid-area: name;
		height: auto;
	}

	.drive-table td.size {
		grid-area: size;
		width: auto;
		text-align: left;
	}

	/* modified keeps its place beside the size; type and created are the two a
	   phone has no room for */
	.drive-table td.modified {
		grid-area: mod;
		width: auto;
	}

	.drive-table td.type,
	.drive-table td.created {
		display: none;
	}

	.drive-table td.menu {
		grid-area: menu;
		width: auto;
		padding: 0;
	}

	.drive-table .table__menu {
		width: 48px;
		height: 48px;
		opacity: 1;
	}

	/* the tick keeps its 20px face inside a target a thumb can hit, the way
	   .pg-switch reaches 44px without growing */
	.drive-table .checkbox__group {
		position: relative;
	}

	.drive-table .checkbox__group:after {
		content: "";
		position: absolute;
		top: -12px;
		right: -12px;
		bottom: -12px;
		left: -12px;
	}
}
/* Search on the dialog shell every other modal in the app uses, with its results
   wearing the drive list's table. Only the look changes: the query, the sorting
   and the results are the same ones the component always produced. */
.search-dialog {
	width: 1040px;
	max-height: 92vh;
}

.search-dialog .pg-dialog__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 8px 20px 20px;
}

/* ---------- the query ---------- */

.search-query {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.search-dialog select.pg-input {
	width: auto;
	min-width: 200px;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	line-height: normal;
	cursor: pointer;
}

/* input.pg-input in 2_status-cards.css is width:100% and outranks a bare class,
   so these qualify the element too - otherwise the value field takes the row and
   pushes the type select onto a line of its own */
.search-dialog input.search-query__value {
	width: 240px;
}

.search-dialog input.search-query__value--number {
	width: 120px;
}

.search-dialog select.search-query__unit {
	min-width: 100px;
}

/* the fields in this row stand 44px, and the button that submits them reads as one
   of the row rather than as something floating in it */
.search-query .pg-btn {
	min-height: 44px;
}

.search-dialog .pg-btn {
	flex: none;
}

/* the component sets bootstrap's alert classes on this from its own code, so the
   box is styled here rather than by renaming anything it sets */
.search-error:not(:empty) {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	font-size: var(--text-small);
	color: var(--pg-on-error);
	background-color: var(--pg-tint-error);
	border-radius: 9px;
	overflow-wrap: anywhere;
}

/* ---------- the results ---------- */

.search-results {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.search-results .pg-sectionhead {
	margin-top: 0;
}

.search-results .search-cancel {
	margin-left: auto;
}

/* the wrapper is bootstrap's and brings a hard-coded #ddd box at phone widths, which
   ignores the theme. The rows carry their own hairlines, so it goes - from these
   results alone, since other views still want their own */
.search-results .table-responsive {
	border: 0;
}

/* the shared parts are .pg-table; these are this table's own cells */
.search-table tbody tr {
	height: 44px;
}

.search-table td {
	color: var(--pg-muted);
	font-size: 13px;
	white-space: nowrap;
}

.search-table td.search-table__name {
	font-size: 15px;
	color: var(--color);
	cursor: pointer;
}

.search-table td.search-table__path {
	color: var(--pg-link);
	cursor: pointer;
	max-width: 320px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.search-table td.search-table__path:hover {
	text-decoration: underline;
}

.search-table .search-table__size {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.search-table .search-table__date {
	font-variant-numeric: tabular-nums;
}

/* ---------- phone ---------- */

/* the rows lay out over lines from the same width at which .pg-table turns its head
   into a chip strip: left to a narrower breakpoint of its own, the head was already a
   strip while the rows were still a table, and the table ran off the side of the dialog */
@media (max-width: 1024px) {
	/* five columns do not fit: the rows lay out over lines, and the head
	   becomes the chip strip .pg-table gives every table */
	.search-table tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name name"
			"path size"
			"mod  created";
		gap: 2px 10px;
		height: auto;
		padding: 10px 2px;
	}

	.search-table td {
		padding: 0;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.search-table td.search-table__name { grid-area: name; }
	.search-table td.search-table__path { grid-area: path; max-width: none; }
	.search-table td.search-table__size { grid-area: size; text-align: right; }
	.search-table td.search-table__modified { grid-area: mod; }
	.search-table td.search-table__created { grid-area: created; text-align: right; }
}

/* the query row has room for its field, its unit and its button side by side until a
   phone, where each takes a line of its own */
@media (max-width: 700px) {
	.search-dialog .pg-dialog__body {
		padding: 8px 12px 16px;
	}

	.search-dialog input.search-query__value,
	.search-dialog select.pg-input {
		width: 100%;
		flex: 1 1 100%;
	}

	.search-dialog .pg-btn {
		width: 100%;
	}
}
.hex-viewer {
    color: var(--color);
    background-color: var(--bg);
}
/* The surface is .pg-menu in 2_status-cards.css. What is particular to this menu
   is where it sits: placed against the button that opened it on a desktop, and a
   sheet across the bottom of the screen on a phone. */
.drive-menu {
	display: block;
	position: absolute;
	z-index: 100;
	width: 250px;
	max-height: calc(100vh - 16px);
	overflow-y: auto;
}

.drive-menu:focus-visible {
	outline: 2px solid var(--green-500);
	outline-offset: 2px;
}

.drive-menu.mobile {
	position: sticky;
	bottom: 0;
	width: 100%;
	max-height: 60vh;
	padding: 8px 8px 12px;
	border: 0;
	border-top: 1px solid var(--border-color);
	border-radius: var(--radius-container) var(--radius-container) 0 0;
	box-shadow: var(--pg-shadow-sheet);
}

/* a finger needs more than a mouse, as .pg-btn already allows for. The rule that
   draws a divider as a line is no taller than a line, so it stays out of this */
.drive-menu.mobile li:not(.divider) {
	min-height: 48px;
	padding: 12px 16px;
	font-size: 15px;
}
/* The count is the one thing you need while working through a long list, so it
   stays at the top of the view rather than scrolling away with the first rows. */
.drive-selected {
  position: sticky;
  /* under the header, which pins above it */
  top: 56px;
  z-index: 20;
  margin: 0;
  padding: 0 32px;
  background-color: var(--bg);
  border-bottom: 1px solid var(--border-color);
}

.drive-selected__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
}

.drive-selected .card__select {
  /* the same circle a tile carries, so the two read as one control in two places */
  width: 26px;
  height: 26px;
  flex: none;
  padding: 0;
  color: var(--green-500);
  /* AppButton's own ring is 2px, and with border-box that thicker ring eats the disc inside
     it - the tick then reads smaller than the identical one on a tile directly below. */
  border-width: 1px;
  /* and the tick has to be centred in it the way a tile centres its own. Left to the button's
     block layout the icon sits on the text baseline, low and hard against the left edge. */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* and the same tick in it. Without this the icon falls back to its own default, which is
   larger than the circle drawn around it. */
.drive-selected .card__select svg {
  width: 16px;
  height: 16px;
}

/* the count reads as a state, not as the page's main action: the pill and the
   ok tone the status cards use, rather than a filled accent button */
.drive-selected .app-dropdown .app-button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 14px;
  font-size: var(--text-small);
  font-weight: var(--bold);
  line-height: 1.2;
  color: var(--pg-on-ok);
  background-color: var(--pg-tint-ok);
  border-radius: var(--radius-pill);
}

/* the caret says the count opens the actions for the selection */
.drive-selected .app-dropdown .app-button svg {
  width: 14px;
  height: 14px;
  margin-left: 8px;
}

/* --pg-on-ok and --green-200 are the same #63e3bd in dark mode, so a tint-and-ink
   hover erased the label. The primary pair is contrast-checked in both themes, and
   going tinted-to-solid on hover is what .pg-btn--pause already does. */
.drive-selected .app-dropdown .app-button:hover {
  color: var(--pg-on-primary) !important;
  background-color: var(--pg-primary);
}

@media (max-width: 1024px) {
  .drive-selected {
    top: 0;
    padding: 0 16px;
  }

  .drive-selected .app-dropdown .app-button {
    min-height: 44px;
  }

  /* a 24px ring with a 44px target around it */
  .drive-selected .card__select {
    position: relative;
  }

  .drive-selected .card__select:after {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
  }
}
.app-prompt.app-modal__overlay{
	display:flex;
	align-items: center;
	justify-content: center;
}
.app-prompt__container{
	width: 400px;
	padding: 16px;
	border-radius: 4px;
	color: var(--color);
	background-color:var(--bg);
	box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.prompt__header h3{
	border-top:0;
	font-weight: var(--regular);
}
.prompt__body{
	margin: var(--app-margin) 0;
}
.prompt__footer{
	display: flex;
	justify-content: flex-end;
}
.prompt__footer button{
	margin-left: 16px;
}


.app-prompt.app-modal__overlay{
	display:flex;
	align-items: center;
	justify-content: center;
}
.app-prompt__container{
	width: 400px;
	padding: 16px;
	border-radius: 4px;
	color: var(--color);
	background-color:var(--bg);
	box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.prompt__header h3{
	border-top:0;
	font-weight: var(--regular);
}
.prompt__body{
	margin: var(--app-margin) 0;
}
.prompt__footer{
	display: flex;
	justify-content: flex-end;
}
.prompt__footer button{
	margin-left: 16px;
}
.help-link:link {
    text-decoration: underline;
}

.folder-properties-container {
    width: 40%;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 20px 20px;
    background-color: var(--bg);
}

.folder-properties-span {
    font-weight: bold;
    padding-right: 10px;
}

.folder-properties-view {
}

.file-details-container {
    width: 40%;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 20px 20px;
    background-color: var(--bg);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,.33);
}

@media (max-width: 600px) {
    .file-details-container {
        width: 100%;
        left: 0;
        transform: none;
    }
}

.file-details-label {
    font-weight: bold;
    padding-right: 10px;
    display: inline-block;
    min-width: 90px;
}

.file-details-view p {
    margin: 6px 0;
    word-break: break-all;
}
.replace-container {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px;
    overflow-wrap: break-word;
    width: auto;
    font-size: 18px;
}
.replace-modal-container {
    width: 40%;
    margin: 0px auto;
    padding: 20px 30px;
	color: var(--color);
    background-color: var(--bg);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    min-width: 400px;
}
.drive-view {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* the view and an empty folder's drop target cross-fade as one: outside the transition
   the target held its old place through the fade, then jumped when the view swapped */
.drive-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* quick enough that the two fades read as one change: the shared half second each way
   left the area blank for a second */
.drive-swap-enter-active,
.drive-swap-leave-active {
  transition: opacity .18s ease;
}

.drive-swap-enter,
.drive-swap-leave-to {
  opacity: 0;
}

/* a column of its own, so the view below the header can take the height it is
   given: an empty folder's drop target fills it */
.dnd {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

@media (max-width: 1024px) {
  #dnd {
    /* enable table scroll */
    overflow-x: auto;
  }
}
.social-post.post-modal__overlay{
	display:flex;
	align-items: center;
	justify-content: center;
    margin-left: -200px;
    left: 50%;
}

.modal-mask {
  position: fixed;
  z-index: 2500;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  transition: opacity .3s ease;
}

.social-post__container{
	width: 400px;
	padding: 16px;
	border-radius: 4px;
	color: var(--color);
	background-color:var(--bg);
	box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

@media (max-width: 400px) {
    .social-post.post-modal__overlay{
        margin-left: -175px;
    }
    .social-post__container{
        width: 350px;
    }
}

.social-post__header h3{
	border-top:0;
	font-weight: var(--regular);
}
.social-post__body{
	margin: var(--app-margin) 0;
}
.social-post__footer{
	display: flex;
	justify-content: flex-end;
}
.social-post__footer button{
	margin-left: 16px;
}


textarea {
	width:100%;

	font-size: var(--text);
	border-radius: 4px;

	-webkit-appearance:none;
    -moz-appearance:none;
    appearance: none;

	outline: none;
	box-shadow: none;

	border: 2px solid var(--green-500);
	color: var(--color);
    background-color: var(--bg);
}
textarea:focus,
textarea:active,
textarea:focus-visible{
	outline:none;
	border: 2px solid var(--green-500)!important;
}
/* TODO: quick reset, we shopuld properly remove other styles */
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
textarea:focus,
textarea:active,
textarea:focus-visible{
	color:var(--color);
	font-size: var(--text);
	box-shadow:none;
	-webkit-text-fill-color: var(--color);
	-webkit-box-shadow:0 0 0 30px var(--bg-2) inset;
	border-color: var(--bg-2);
}

.newsfeed-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex: none;
	height: 56px;
	padding: 0 32px;
}

@media screen and (max-width: 1024px) {
	.newsfeed-bar {
		padding: 0 16px;
	}
}




.newsfeed-view {
    min-height: 100vh;
}
.newsfeed__container{
	width:100%;
	/* the view around it is already a screenful; asking for another one here put the
	   header, the bar and this margin past the bottom and left the page scrolling
	   with nothing under the fold */
	padding: 0 32px;
	margin-top: 32px;
}


.newsfeed-view .card__icon {
	width:72px;
	height: 72px;
	color: var(--color-2);
	transform: scale(1);
	transition: transform 0.2s;
        font-size: 5em;
        word-wrap: break-word;
        max-width: 5em;
        cursor: pointer;
}
.newsfeed-view .entry-no-bg{
	border-radius: 12px;
	margin-top:5px;
	padding: 16px;
}

.newsfeed-view .entry{
	color:var(--color);
    background-color:var(--bg-2);
	border-radius: 12px;
	margin-top:5px;
	padding: 16px;


}
.post-content {
    white-space:pre-wrap;
    margin-bottom:0;
    margin-right: 10px;

    border-radius: 4px;
    padding: 5px;
    font-size: 1.2em;
    overflow-wrap: break-word;
}

@media (max-width: 1024px) {
	.newsfeed__container{
		padding: 0 16px;
	}
}

/* https://stackoverflow.com/a/20217870 */
.imageRotate{
    -moz-animation: spinVertical 1.5s infinite linear;
    -o-animation: spinVertical 1.5s infinite linear;
    -webkit-animation: spinVertical 1.5s infinite linear;
    animation: spinVertical 1.5s infinite linear;
}

@-moz-keyframes spinVertical {
    0% {
        -moz-transform: rotateZ(0deg);
    }

    100% {
        -moz-transform: rotateZ(360deg);
    }
}

@keyframes spinVertical {
	0% {
        transform: rotateZ(0deg);
	}
    100% {
        transform: rotateZ(360deg);
    }
}


@-ms-keyframes spinVertical {
	0% {
        -ms-transform: rotateZ(0deg);
	}
    100% {
        -ms-transform: rotateZ(360deg);
    }
}

@-o-keyframes spinVertical {
	0% {
        -o-transform: rotateZ(0deg);
	}
	100% {
        -o-transform: rotateZ(360deg);
	}
}

@-webkit-keyframes spinVertical {
	0% {
        -webkit-transform: rotateZ(0deg);
	}
	100% {
        -webkit-transform: rotateZ(360deg);
	}
}

.refresh-icon {
    height: 20px;
    width: 20px;
}

.inline-svg {
    margin-bottom: -6px;
    height: 24px;
    width: 24px;
}

.sharer-name {
    margin-left: 10px;
    margin-right: 5px;
}

.profile-thumbnail {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    color: darkgray;
    max-width: 100%;
    line-height: 1.42857143;
    background-color: #fff;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.picon-profile {
    font-size: 3em;
}

/* the field and the action that sends it belong on one line, with the field taking the
   room: stacked, with the component's own bottom margin between them, they read as two
   unrelated controls */
.social-invite {
	display: flex;
	/* the action takes the field's height, whatever the field's own line height makes it */
	align-items: stretch;
	gap: 10px;
	max-width: 560px;
	margin-bottom: var(--app-margin);
}

.social-invite__field {
	flex: 1 1 auto;
	min-width: 0;
	margin-bottom: 0;
}


/* the view is the screenful and its main fills what the header leaves, as the drive
   and the status card views do: asking for 100vh here as well put the header's height
   past the bottom and left the page scrolling over nothing */
.social-view {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.social-view main{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    /* the sides take the gutter the title keeps rather than the wider page margin,
       so the view's first word sits under its name */
    padding: var(--app-margin) 32px;
}

@media (max-width: 1024px) {
    .social-view main{
        padding: var(--app-margin) 16px;
    }
}

.calendar-view {
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100vh;
	overflow: hidden;
}
.calendar-view main{
	overflow: hidden;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.app-details-container {
    overflow-y: auto;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 20px 30px;
    background-color: var(--bg);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,.33);
    transition: all .3s ease;
}

.app-details-view {
    font-size: 1.3em;
}
.app-details-text {
    font-size: 1.0em;
}
.app-details-span {
    font-weight: bold;
    padding-right: 10px;
}
/* the apps share the width they are given, as the drive's cards do: fixed cells packed
   from the left left a ragged gap down the right of every screen wider than their sum */
.app-grid-flex-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}

.app-grid-flex-container > div {
    text-align: center;
}

.pending-badge {
    margin-left: 2px;
    display: inline-block;
    padding: 5px;
    font-size: 1px;
    background-color: #26b99a;
    color: #26b99a;
    border-radius: 30px;
}

.app-icon {
    margin: .25em;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-size: xxx-large;
}

.app-icon-title {
    font-size: .3em;
    text-align: center;
}

/* the view's own column, on the gutter the title above it keeps: the container is a
   modal body left over from this view's past and brings a 10px inset of its own */
.launcher-view .modal-body {
	padding-left: 32px;
	padding-right: 32px;
}

/* the two actions were inline in a heading with no words of its own, where a button with
   a glyph and one without sat on different baselines */
.launcher-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0;
}

.launcher-bar__message {
	color: var(--pg-muted);
}

/* a name or a folder longer than its column is cut with a tooltip carrying the whole of
   it, as the drive's and the shared view's rows do */
.shortcut-table td.shortcut-table__name,
.shortcut-table td.shortcut-table__path {
	max-width: 320px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
}

.shortcut-table td.shortcut-table__path {
	color: var(--pg-link);
}

.shortcut-table td.shortcut-table__path:hover,
.shortcut-table td.shortcut-table__name:hover {
	text-decoration: underline;
}

/* the list runs the width of the view, as the drive's and the shared view's lists do: it
   steps back out of the column's gutter, and its outermost cells carry that gutter instead */
.launcher-view .shortcut-list {
	margin-left: -32px;
	margin-right: -32px;
	/* the wrapper is bootstrap's and brings a hard-coded #ddd box at phone widths, which
	   ignores the theme; the rows carry their own hairlines, as in the other two lists */
	border: 0;
}

.shortcut-table th:first-child,
.shortcut-table td:first-child {
	padding-left: 32px;
}

.shortcut-table th:last-child,
.shortcut-table td:last-child {
	padding-right: 32px;
}

/* the three dates are what a phone has no room for, as the drive drops type and
   created: what is left is the name, where it lives, and how to remove it */
@media (max-width: 1024px) {
	.launcher-view .modal-body {
		padding-left: 16px;
		padding-right: 16px;
	}

	.launcher-view .shortcut-list {
		/* the wrapper is bootstrap's, and it takes width:100% at this size: left at that
		   the negative margins slide it sideways instead of widening it */
		width: auto;
		margin-left: -16px;
		margin-right: -16px;
	}

	/* the row carries the inset here, so the outer cells give theirs up: kept, the name
	   sat a cell's padding further in than the folder under it */
	.shortcut-table td:first-child {
		padding-left: 0;
	}

	.shortcut-table td:last-child {
		padding-right: 0;
	}

	/* the row lays out over lines, as the shared view's and the search results' do: left
	   as table rows in a block table they shrank to their contents instead of filling
	   the width the list was given */
	.shortcut-table tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name   action"
			"folder action";
		align-items: center;
		gap: 2px 10px;
		padding: 10px 12px;
	}

	.shortcut-table tbody td {
		padding: 0;
		max-width: none;
	}

	.shortcut-table td.shortcut-table__name { grid-area: name; }
	.shortcut-table td.shortcut-table__path { grid-area: folder; }
	.shortcut-table td.shortcut-table__action { grid-area: action; text-align: right; }

	.shortcut-table thead th.shortcut-table__date,
	.shortcut-table td.shortcut-table__date {
		display: none;
	}

	/* the 320px each the two text columns take on a desktop is wider than a phone,
	   so they take a share of it instead and go on truncating at whatever that is */
	.shortcut-table td.shortcut-table__name,
	.shortcut-table td.shortcut-table__path {
		max-width: 34vw;
	}
}

/* the row's action at the end of the row, the way the drive and shared tables place
   theirs, rather than as another column of text */
.shortcut-table__action {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}

.deleted-entry {
    text-decoration: line-through;
}
/* What has been shared out, on the surfaces the drive and the status cards use: the
   list wears .pg-table, the menu .pg-menu, and the row's action .pg-btn. Only the
   look changes - the walk that fills the list, the sorting and the share dialog are
   the ones this view always had. */
/* the page shell centres a 1040px column, which suits a page of cards; a list reads
   better the way the drive's does, across the whole window */
.shared-view main {
	max-width: none;
	padding: 0;
	gap: 0;
}

.shared-list {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* what a row is - a folder or a file - said with the glyph the drive uses */
.shared-table th.shared-table__glyph,
.shared-table td.shared-table__glyph {
	width: 52px;
	padding: 0 8px 0 32px;
	cursor: default;
}

.shared-table td.shared-table__glyph .card__icon {
	display: block;
	width: 26px;
	height: 26px;
	color: var(--pg-muted);
}

/* the outermost cells carry the page's margin, so the header strip and the rules
   between rows run the full width, as the drive's list does */
.shared-table th:first-child,
.shared-table td:first-child {
	padding-left: 32px;
}

.shared-table th:last-child,
.shared-table td:last-child {
	padding-right: 32px;
}

/* the wrapper is bootstrap's and brings a hard-coded #ddd box at phone widths, which
   ignores the theme. The rows carry their own hairlines, so it goes - from this list
   alone: the share dialog opens inside this view and keeps everything of its own */
.shared-list .table-responsive {
	border: 0;
}

/* the shared parts are .pg-table; these are this table's own cells */
.shared-table tbody tr {
	height: 48px;
}

.shared-table td {
	color: var(--pg-muted);
	font-size: 13px;
	white-space: nowrap;
}

.shared-table td.shared-table__name {
	font-size: 15px;
	color: var(--color);
	cursor: pointer;
	max-width: 420px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.shared-table td.shared-table__path {
	color: var(--pg-link);
	cursor: pointer;
	max-width: 280px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.shared-table td.shared-table__path:hover {
	text-decoration: underline;
}

.shared-table .shared-table__date {
	width: 180px;
	font-variant-numeric: tabular-nums;
}

.shared-table .shared-table__access {
	width: 110px;
}

/* read or write, said the way the status cards say a state rather than as bare
   letters in a column */
.access-mark {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	font-size: var(--text-mini);
	font-weight: var(--bold);
	letter-spacing: .04em;
	color: var(--pg-muted);
	background-color: var(--pg-surface-2);
	border-radius: var(--radius-pill);
}

.access-mark--write {
	color: var(--pg-on-ok);
	background-color: var(--pg-tint-ok);
}

.shared-table th.shared-table__action,
.shared-table td.shared-table__action {
	width: 110px;
	text-align: right;
	cursor: default;
}

/* .pg-btn--onTone borders itself in the current colour, as the sync summary's own
   button does; here that colour is the tone the drive marks a share with */
.shared-table .shared-table__share {
	min-height: 32px;
	padding: 6px 14px;
	font-size: 13px;
	color: var(--pg-on-ok);
}

.shared-table .shared-table__share:hover {
	color: var(--pg-on-ok);
	background-color: var(--pg-tint-ok);
}

/* ---------- phone ---------- */

@media (max-width: 1024px) {

	/* a chip is as wide as its label; the widths above are the columns', and they
	   outrank the shared rule that would have freed them */
	.shared-table thead th.shared-table__name,
	.shared-table thead th.shared-table__path,
	.shared-table thead th.shared-table__date,
	.shared-table thead th.shared-table__access {
		width: auto;
	}

	.shared-table tbody tr {
		display: grid;
		grid-template-columns: 34px auto 1fr auto auto;
		grid-template-areas:
			"glyph name name acc share"
			"glyph path mod  acc share";
		align-items: center;
		column-gap: 8px;
		row-gap: 2px;
		height: auto;
		padding: 10px 12px;
	}

	/* the row carries the margin on a phone, so its own cells sit flush inside it */
	.shared-table tbody td:first-child {
		padding-left: 0;
	}

	.shared-table tbody td:last-child {
		padding-right: 0;
	}

	/* a chip keeps the padding that makes it a chip: the margin belongs to the strip
	   around them, not to the first one's label */
	.shared-table thead th:first-child {
		padding-left: 12px;
	}

	.shared-table thead th:last-child {
		padding-right: 12px;
	}

	.shared-table td {
		padding: 0;
		max-width: none;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	/* the folder, the date and the access read as one line about this file, with the
	   button that acts on it standing clear of them */
	.shared-table td.shared-table__glyph {
		grid-area: glyph;
		width: auto;
		padding: 0;
		align-self: center;
	}

	/* one line with an ellipsis, as the drive list and the sync rows do: the whole
	   name is in the title, and a row that wraps pushes the next one down the page */
	.shared-table td.shared-table__name {
		grid-area: name;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.shared-table td.shared-table__path { grid-area: path; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	/* width: 180px above is the column's, and a line is not a column */
	.shared-table td.shared-table__modified { grid-area: mod; width: auto; white-space: nowrap; }
	.shared-table td.shared-table__created { display: none; }

	/* a column of its own across both lines, so it stands level with the button
	   rather than hanging off the end of the detail line */
	.shared-table td.shared-table__access {
		grid-area: acc;
		width: auto;
		justify-self: center;
		align-self: center;
	}

	/* it spans both lines, so it says where it sits in them rather than being
	   stretched to their full height */
	.shared-table td.shared-table__action {
		grid-area: share;
		width: auto;
		align-self: center;
	}

	/* a finger needs more than a mouse, as .pg-btn already allows for. The cells above
	   may break a long path anywhere; a button's label is not a path, and breaking it
	   would squeeze the column to one letter per line */
	.shared-table .shared-table__share {
		min-height: 44px;
		padding: 6px 16px;
		white-space: nowrap;
		overflow-wrap: normal;
	}
}
/* the form and the row that heads it share one narrow column: the pending tone carries no
   fill, so a full width row above a narrow card marked nothing and the card read as adrift.
   Only while not mounted - capping the mounted row squeezed its own buttons */
.mount-view .pg-tone--pending.pg-summary,
.mount-setup {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
}

.mount-setup .pg-switch {
	/* hugs its label, rather than stretching to the width of the card */
	align-self: flex-start;
}

.mount-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mount-field label {
	margin: 0;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pg-muted);
}

/* the credentials a caldav client needs, each on its own row with its copy button */
.mount-dav {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 12px;
}

.mount-copy {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mount-copy input {
	/* the value is the point, so it takes the room and the buttons keep their size */
	flex: 1 1 auto;
	min-width: 0;
}

.mount-copy .pg-btn {
	flex: 0 0 auto;
}

.mount-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background-color: rgba(0, 0, 0, .45);
	z-index: 1050;
}

.mount-modal__panel {
	max-width: 520px;
}

.mount-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}
.messagebar {
    color: var(--color);
    background-color: var(--bg);
    padding: 10px;
    background-color: #fff;
    transition: opacity .3s ease;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33) inset;
}

.server-message-reply textarea {
    color: var(--color);
    background-color: var(--bg);
}
.messageholder {
    position: absolute;
    right:var(--app-margin);
    bottom:var(--app-margin);
    min-width:200px;
    z-index: 200;
    display: inline-block;
    float: right;
    overflow-y: auto;
    color: var(--color);
    background-color: var(--bg);
}

.messageholder div {
    color: var(--color);
    background-color: var(--bg);
}
#app {
	position: relative;
	top: 0;
	min-height: 100vh;
}

.icon.sprite-test {
	display: block;
	width: 200px;
	height: 48px;
	margin: var(--app-margin) auto;
}

/* ── desktop server compact bar ── */
.desktop-server-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	max-width: 500px;
	margin: 0 auto 12px;
	padding: 6px 10px;
	background-color: rgba(53, 190, 163, 0.05);
	border: 1px solid rgba(53, 190, 163, 0.16);
	border-radius: 4px;
	font-size: var(--text-small);
}

.desktop-server-bar__url {
	font-family: monospace;
	word-break: break-all;
	flex: 1;
	text-align: center;
	color: var(--color);
}

.desktop-server-bar__gear {
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 2px;
	cursor: pointer;
	color: var(--color);
	line-height: 0;
	border-radius: 2px;
}

.desktop-server-bar__gear:hover {
	color: var(--color-hover);
}

.desktop-server-bar__gear svg {
	width: 18px;
	height: 18px;
}

/* ── desktop server modal ── */
.desktop-server-modal__overlay {
	position: fixed;
	z-index: 500;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
}

.desktop-server-modal__container {
	position: relative;
	background-color: var(--bg);
	color: var(--color);
	border-radius: 4px;
	padding: 24px 20px 20px;
	width: 420px;
	max-width: calc(100vw - 32px);
}

.desktop-server-modal__close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
	color: var(--color);
	line-height: 1;
}

.desktop-server-modal__close:hover {
	color: var(--color-hover);
}

.desktop-server__toggle {
	margin: 0;
}

.desktop-server__meta,
.desktop-server__error {
	margin: 8px 0 0;
	font-size: var(--text-small);
}

.desktop-server__value {
	font-family: monospace;
	word-break: break-all;
}

.desktop-server__controls {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	margin-top: 10px;
}

.desktop-server__controls input {
	min-width: 0;
}

.desktop-server__reset {
	margin-top: 10px;
}

.desktop-server__title {
	font-weight: 600;
	margin: 0 0 4px;
	font-size: var(--text-small);
}

.desktop-server__hint {
	margin: 8px 0 0;
	font-size: var(--text-small);
	color: #666;
}

.desktop-server__error {
	color: #c0392b;
}

.desktop-server__success {
	margin: 8px 0 0;
	font-size: var(--text-small);
	color: #27ae60;
	font-weight: 600;
}

section.login-register {
	min-height: 100vh;
	padding: var(--app-margin);
	background-color: var(--bg-2);
}

section.login-register .demo--warning {
	padding-top: var(--app-margin);
	max-width: 400px;
	margin: 0 auto;
	color: red;
	background-color: var(--bg);
	text-align: left;
}

section.login-register .demo--warning a {
	color: cornflowerblue;
}

section.content {
	position: relative;
	right: 0;
	top: 0;
	padding-left: 72px;
	/* width: calc(100% - 96px); */
	min-height: 100vh;
}

section.content.sidebar-margin {
	padding-left: 240px;
	/* width: calc(100% - 240px); */
}

@media screen and (max-width: 1024px) {
	/* the menu is a panel over the view here, so the view keeps its full width:
	   without the second selector .sidebar-margin's 240px wins and the header
	   behind the panel wraps */
	section.content,
	section.content.sidebar-margin {
		padding-left: 0;
	}

	.desktop-server {
		padding: 12px;
	}

	.desktop-server__controls {
		grid-template-columns: 1fr;
	}
}