/* common */

.text-deleted {
	color: #aaa !important;
}

.input-read-only, .input-read-only:focus, .input-read-only:disabled {
	background-color: #e3e3e3;
}

/* a small gap between buttons when they wrap or are stacked on narrow screens (below lg,
   where the rows of the pages turn into one column). Not !important, so mt-* / mb-* set on
   a button still take effect. */
@media (max-width: 991.98px) {
	.btn {
		margin-top: .25rem;
		margin-bottom: .25rem;
	}
}

/* layout components (see 'layout components' in bootstrap/components.html) */

/* layout-stack: stacks components vertically.
   The spacing is made by 'gap', and some kinds of components add extra margin on their own side.
   The extra margin depends only on the kind of the component itself, not on its neighbors
   (except the paragraph rule below), so elements which are not displayed (like <script> or <input type="hidden">)
   don't affect the spacing.
   Margins in a flex container never collapse: the gap and the extra margins are simply added up.
   '!important' is needed to override Bootstrap margin utilities (like 'mt-3'), which have '!important'.
   Only the components directly inside the stack are affected.
   The values follow the spacers of the bootstrap.min.css which ecuacion apps use
   ('mt-5' / 'mb-5' = 2rem. Standard Bootstrap has 3rem for them). */

.layout-stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* components inside it have no outer margin of their own (including the ones from Bootstrap like '.table') */
.layout-stack > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* title: 2rem below in total */
.layout-stack > .layout-item-title {
	margin-bottom: 1rem !important;
}

/* messages (page-base.html): 2rem below in total.
   Nothing is added above, because it usually comes just after the title, which has 2rem below. */
.layout-stack > .layout-item-messages {
	margin-bottom: 1rem !important;
}

/* heading (subtitle, paragraphWithSubtitle): 2rem above in total */
.layout-stack > .layout-item-heading {
	margin-top: 1rem !important;
}

/* subheading (subsubtitle, paragraphWithSubsubtitle): 1.5rem above in total */
.layout-stack > .layout-item-subheading {
	margin-top: .5rem !important;
}

/* paragraph followed by contents (inputs, tables, a form, etc.): 1.5rem below in total.
   This is the only rule which looks at the neighbor, so that consecutive paragraphs stay 1rem apart.
   Nothing is added when a paragraph is followed by a paragraph or by a component which has its own extra margin above
   (heading, subheading, buttons, divider). */
.layout-stack > .layout-item-paragraph:has(+ :not(.layout-item-paragraph, .layout-item-heading,
		.layout-item-subheading, .layout-item-buttons, .layout-item-divider)) {
	margin-bottom: .5rem !important;
}

/* input (or a row of inputs, rowAddableTable) and table: 1.5rem below in total.
   A table is treated as a block of contents like inputs, so that "table -> buttons" is 2.5rem like "inputs -> buttons". */
.layout-stack > :is(.layout-item-input, .row, .table, .table-responsive) {
	margin-bottom: .5rem !important;
}

/* the margin of Bootstrap's '.table' inside '.table-responsive' is replaced with the one above */
.layout-stack > .table-responsive > .table {
	margin-bottom: 0;
}

/* buttons: 2rem above in total (2.5rem after an input, which has .5rem below) */
.layout-stack > .layout-item-buttons {
	margin-top: 1rem !important;
}

/* divider (horizontalLine): 1.5rem above and below in total. The margins of the <hr> inside are replaced with it. */
.layout-stack > .layout-item-divider {
	margin-top: .5rem !important;
	margin-bottom: .5rem !important;
}

.layout-stack > .layout-item-divider > hr {
	margin: 0 !important;
}

/* continued: shown right after the previous component without any space, as a part of it.
   (e.g. the list form of page-search-list.html, which follows the paging part at the end of the search form) */
.layout-stack > .layout-item-continued {
	margin-top: -1rem !important;
}

/* a container of buttons which has nothing to show (e.g. the list buttons of page-search-list.html
   when the page doesn't add any) is not shown, so that it doesn't make a space. */
.layout-stack > .layout-item-buttons:not(:has(:not(:empty))) {
	display: none;
}

/* empty elements (like a layout:fragment which is not overridden by the page) and <br> are not shown,
   so that they don't make a space with 'gap'. (A <br> becomes a flex item in a flex container.) */
.layout-stack > :is(div, span):empty,
.layout-stack > br {
	display: none;
}

/* a button put directly in a stack is not stretched to the full width.
   (Buttons are supposed to be put in a layout-cluster, though.) */
.layout-stack > .btn {
	align-self: flex-start;
}

/* no extra margin outside the first and the last displayed component */
.layout-stack > :nth-child(1 of :not(script, input[type="hidden"])) {
	margin-top: 0 !important;
}

.layout-stack > :nth-last-child(1 of :not(script, input[type="hidden"])) {
	margin-bottom: 0 !important;
}

/* a row (Bootstrap grid) of inputs inside a layout-stack: the gap between the lines of the row.
   The margins of the inputs are replaced with it. Don't add 'gy-*' to the row. */
.layout-stack > .row {
	row-gap: 1.5rem;
}

.layout-stack > .row > .layout-item-input {
	margin-bottom: 0 !important;
}

/* layout-cluster: lines up small components like buttons horizontally, wrapping when the width is not enough. */

.layout-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

/* oauth2 login buttons (default values following Apple/Google official brand guidelines.
   Colors are exposed as CSS variables, so each app can override the design by
   redefining --btn-google-signin-* / --btn-apple-signin-* in its own app.css) */

:root {
	--btn-google-signin-bg: #fff;
	--btn-google-signin-border: #747775;
	--btn-google-signin-color: #1f1f1f;
	--btn-google-signin-bg-hover: #f8f9fa;

	--btn-apple-signin-bg: #000;
	--btn-apple-signin-border: #000;
	--btn-apple-signin-color: #fff;
	--btn-apple-signin-bg-hover: #1a1a1a;
}

.btn-google-signin {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background-color: var(--btn-google-signin-bg);
	border: 1px solid var(--btn-google-signin-border);
	color: var(--btn-google-signin-color);
	font-family: 'Google Sans', Roboto, arial, sans-serif;
	font-weight: 500;
}

.btn-google-signin:hover, .btn-google-signin:focus {
	background-color: var(--btn-google-signin-bg-hover);
	color: var(--btn-google-signin-color);
}

.btn-apple-signin {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: var(--btn-apple-signin-bg);
	border: 1px solid var(--btn-apple-signin-border);
	color: var(--btn-apple-signin-color);
	font-family: -apple-system, "SF Pro Text", sans-serif;
}

.btn-apple-signin:hover, .btn-apple-signin:focus {
	background-color: var(--btn-apple-signin-bg-hover);
	color: var(--btn-apple-signin-color);
}

/* footer */

.content-wrapper{
	min-height: 100vh;
	position: relative;/*←relative position*/
	padding-bottom: 100px;/*←footer height*/
	box-sizing: border-box;/*←include everything in min-height:100vh*/
}

footer{
	width: 100%;
	text-align: center;
	padding: 10px 0;

 	position: absolute;/*←absolute position*/
	bottom: 0; /*fix to bottom*/
}

/* wrapper for all error messages shown at the top of the screen */

.all-error-messages-list-wrapper {
	margin-left:  0px;
	margin-right:  0px;
	margin-top:  0px; 		/*20 */
	margin-bottom: 0px;		/*30 */
	padding: 0;
}

.all-error-messages-list-ul {
	list-style:  none;
	margin-top:  0px;
	margin-bottom: 0px;
	padding: 0px;
}

.all-error-messages-list-li {
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

/* multi-level dropdown */

.dropdown-menu li {
	position: relative;
}

.dropdown-menu .dropdown-submenu {
	display: none;
	position: absolute;
	left: 100%;
	top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
	right: 100%;
	left: auto;
}

.dropdown-menu > li:hover > .dropdown-submenu {
	display: block;
}

/* On narrow screens there's no room to the right for the submenu to fly
   out into (it renders off-screen, unreadable). Lay it out below the
   toggle instead, like the top-level dropdown, keeping the same
   :hover-driven show/hide above. */
@media (max-width: 767.98px) {
	.dropdown-menu .dropdown-submenu,
	.dropdown-menu .dropdown-submenu-left {
		position: static;
		left: auto;
		right: auto;
		top: auto;
		width: 100%;
	}
}

/* inputDocumentViewer */

.input-document-viewer-design {
    border: 1px solid #666;  /* border */
    border-radius: 0.67em;   /* corner radius */
    padding: 0.5em;          /* inner padding */
    background-color: snow;  /* background color */
    width: 20em;             /* width */
    font-size: 1em;          /* font size */
    line-height: 1.2;        /* line height */
}

/* tooltip */

.bs-tooltip {
	--bs-tooltip-bg: var(--bs-primary);
}

.tooltip-icon {
	fill: var(--bs-primary);
}

/************************************/
/***** speech balloons for comments *****/
/************************************/
/* special thanks to: https://stand-4u.com/css/fukidashi.html */

.balloon_l {
  display:flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-right: 50px;
}

.balloon_r {
  display:flex;
  justify-content:flex-end;
  align-items: flex-start;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-right: 20px;
  margin-left: 50px;
}

/* speechBalloon options "continuesToNext" / "continuesFromPrevious":
   balloons of the same post (e.g. a message and its attached files) are shown close together. */
.balloon_l.balloon-continues-to-next,
.balloon_r.balloon-continues-to-next {
  margin-bottom: 8px;
}

.balloon_l.balloon-continues-from-previous,
.balloon_r.balloon-continues-from-previous {
  margin-top: 8px;
}

.faceicon img {
  width: 80px;
  height: auto;
}

.balloon_l .faceicon {
  margin-right:25px;
}

.name {
  font-size: 90%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.balloon_l .name {
	justify-content: left;
}

.balloon_r .name {
	justify-content: right;
}

.says,.says-selectable {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding: 17px 13px 15px 18px;
  border-radius: 12px;
  box-sizing:border-box;
  margin:0 !important;
  line-height:1.5;
}

.balloon_l .says,.balloon_l .says-selectable {
  background: #ddd;
}

.balloon_l .says-selectable:hover {
  background: #ccc;
}

.balloon_r .says,.balloon_r .says-selectable {
  background: #99dddd;
}

.balloon_r .says-selectable:hover {
  background: #77cccc;
}

.says p,.says-selectable p {
  margin:8px 0 0 !important;
}

.says p:first-child,.says-selectable p:first-child {
  margin-top:0 !important;
}

.says:after,.says-selectable:after {
  content: "";
  position: absolute;
  border: 10px solid transparent;
}

.balloon_l .says:after,.balloon_l .says-selectable:after {
  left: -26px;
  border-right: 22px solid #ddd;
}

.balloon_r .says:after,.balloon_r .says-selectable:after {
  right: -26px;
  border-left: 22px solid #99dddd;
}

/* responsive navbar (navbarRoot) fixes */

/* Bootstrap's ".container" utility class (used here only as a plain flex
   wrapper around the toggler/menu, never as an actual centered content
   container) forces width:100% with a breakpoint-based max-width
   (540/720/960/...) plus auto left/right margins.
   - width:100% makes this flex item claim the whole row on its own
     (the navbar-brand can't share a line with it), forcing the toggler
     onto its own wrapped line below the brand even on mobile. Dropping
     width to the content's natural size (and the max-width cap, which
     would otherwise wrap the menu's content at some desktop widths
     between 768–991px, visibly jumping the navbar's height while
     resizing through that range) keeps the toggler inline with the
     brand and the height stable.
   - The auto left/right margins then center this now content-sized
     block between the brand and the right-hand menu, which is never the
     intended "centered content container" use of ".container" here —
     pin it flush left instead. Below the mobile breakpoint this is
     overridden again to sit flush right next to the brand, matching
     Bootstrap's standard mobile navbar layout. */
.navbar.navbar-expand-md > .container-fluid > .container {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: auto;
}

/* The nav-item lists carry Bootstrap's "mb-2 mb-lg-0" utility classes —
   a bottom margin meant to space out stacked rows on mobile, removed
   once the navbar goes horizontal. But the navbar itself expands at the
   "md" breakpoint (768px, "navbar-expand-md") while that removal is
   keyed to "lg" (992px), so between 768–991px the navbar is already
   horizontal yet still carries the margin — the same height jump as
   above, from a mismatched breakpoint rather than the container's
   max-width. Drop it from "md" instead, matching navbar-expand-md. */
@media (min-width: 768px) {
	.navbar.navbar-expand-md .navbar-nav.mb-2 {
		margin-bottom: 0 !important;
	}
}

/* On narrow (mobile) screens, keep the navbar-toggler button on the
   brand's row, flush to the right, matching Bootstrap's standard mobile
   navbar layout. */
@media (max-width: 767.98px) {
	.navbar.navbar-expand-md {
		position: relative;
	}
	.navbar.navbar-expand-md > .container-fluid {
		justify-content: flex-start;
	}
	.navbar.navbar-expand-md > .container-fluid > .container {
		margin-left: auto;
		margin-right: 0;
	}
	/* Once opened, detach the menu from the toggler's shrink-wrapped
	   wrapper and lay it out edge-to-edge under the whole navbar, like
	   Bootstrap's own collapsible-navbar example, instead of shrinking
	   into a narrow column next to the toggler. Also applied to
	   ".collapsing" (Bootstrap's transient class while the open/close
	   animation runs) — without it, the animation plays out in the old
	   narrow layout and only snaps to the full-width one once ".show" is
	   added at the very end, producing a visible jump mid-animation. */
	.navbar.navbar-expand-md #navbarText.show,
	.navbar.navbar-expand-md #navbarText.collapsing {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		z-index: 1050;
		padding: 0 0.75rem 0.5rem;
		background-color: rgba(var(--bs-color-navbar-rgb), 1);
	}
	/* The version/language switch doesn't fit next to the toggler, so
	   give it its own full-width row below, right-aligned. */
	.navbar.navbar-expand-md > .container-fluid > .container + div {
		flex-basis: 100%;
		margin-left: auto;
		margin-top: 0.5rem;
	}
	/* When the caller passes no right-hand contents (e.g. public pages
	   before login), that row would still be laid out empty, its
	   margin-top plus the list's "mb-2" leaving a blank band under the
	   brand so the title looks pushed up. Drop the row in that case. */
	.navbar.navbar-expand-md > .container-fluid > .container + div:not(:has(.navbar-nav > *)) {
		display: none;
	}
	/* ".navbar-nav" sets "--bs-nav-link-padding-x: 0", and the horizontal
	   padding dropdown items rely on for their left indent is only ever
	   restored by the "navbar-expand-md .navbar-nav .nav-link" rule,
	   which is scoped to "@media (min-width: 768px)". Below that, dropdown
	   items lose all left indent — unlike the top-level items, which get
	   an inline "margin-left: 20px" of their own. Restore the same
	   indent dropdown items already have on desktop. */
	.navbar.navbar-expand-md .navbar-nav .dropdown-menu .nav-link {
		padding-left: var(--bs-navbar-nav-link-padding-x, 0.5rem);
		padding-right: var(--bs-navbar-nav-link-padding-x, 0.5rem);
	}
	/* The version badge and language switch are separate <li> items in a
	   ".navbar-nav", which stacks them vertically ("flex-direction: column")
	   on mobile like the rest of the collapsed menu. Lay this particular
	   list out as a row instead, right-aligned. */
	.navbar.navbar-expand-md > .container-fluid > .container + div .navbar-nav {
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
}