/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

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

html {
	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
	line-height: 1.15; /* 1. Correct the line height in all browsers. */
	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
	tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/

body {
	margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}
:root {
    --asecla-messages-font-monospace: "Red Hat Mono",Consolas,Monaco,SFMono-Regular,Menlo,"DejaVu Sans Mono","Ubuntu Mono","Courier New","Anonymous Pro","Droid Sans Mono","Liberation Mono","Lucida Console",monospace;
    --asecla-messages-font-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;
    
    --asecla-messages-font-standard: 'Poppins';
    --asecla-messages-font-heading: 'Montserrat', 'Poppins', sans-serif;
    
    --asecla-messages-page-background-color: #F5F5F5;
    --asecla-messages-page-text-color: #050505;
    
    --asecla-messages-brand-color: #0086FF;
    --asecla-messages-brand-color-contrast: white;
    --asecla-messages-link-color: #1976d2;

    --asecla-messages-table-line-color: #DDDDDD;
    --asecla-messages-table-line: 1px solid var(--asecla-messages-table-line-color);

    --asecla-success: #22c55e;
    --asecla-error: #ff4242;
    #dc2626
}
html {
	box-sizing: border-box;
    scroll-behavior: smooth;
    /* Mobile Safari/Firefox auto-inflate text in narrow columns based on
       surrounding layout, which can make same-sized text render at visibly
       different sizes depending on context. Disable that so font-size is
       always exactly what's specified. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
html, body {
    height: 100%;
    margin: 0;
	padding: 0;
}
body.asecla-messages-page {
    font-size: 12pt;
    line-height: 1.75;
    background-color: var(--asecla-messages-page-background-color);
    color: var(--asecla-messages-page-text-color);

	min-height: 100%;
    width: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
}
body.asecla-messages-page main, body.asecla-messages-page #main {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    min-width: 0;
}
body.asecla-messages-page * {
    font-family: var(--asecla-messages-font-standard),var(--asecla-messages-font-sans-serif);
}
body.asecla-messages-page pre, body.asecla-messages-page .monospaced {
    font-family: var(--asecla-messages-font-monospace);
}
body.asecla-messages-page #main {
    margin: 0 auto;
    padding-top: 3em;
    padding-bottom: 3em;
    padding-left: 5%;
    padding-right: 5%;
}
body.asecla-messages-page #main, body.asecla-messages-page .asecla-commons-header, body.asecla-messages-page .asecla-common-footer {
    max-width: 1200px;
    margin: 0 auto;
}

.asecla-messages-button, a.asecla-messages-button {
    appearance: none;
    background-color: var(--asecla-messages-brand-color);
    border: 1.5px solid rgb(55, 78, 243);
    color: var(--asecla-messages-brand-color-contrast);
    cursor: pointer;
    display: inline-block;
	font-size: 1em;
    padding: 1em;
    text-align: center;
    text-decoration: none;
    text-shadow: 2px 2px 2px #00000055;
    white-space: nowrap;
    width: auto;
    max-width: 100%;
}
.asecla-messages-button:hover, a.asecla-messages-button:hover {
    font-weight: bold;
    background-color: rgb(55, 78, 243);
    color: white;
    text-decoration: none;
}

a.asecla-link, a.asecla-link:visited {
    color: var(--asecla-messages-brand-color);
    font-weight: bold;
    text-decoration: none;
}
a.asecla-link:hover {
    text-decoration: underline;
}

.asecla-full-width {
    width: 100%;
}
.asecla-half-width {
    width: 50%;
}

.asecla-icon {
    width: 1em;
    height: 1em;
}

.asecla-horizontal-line {
    background-color: gray;
    color: gray;
    border: 1px solid gray;
}

input[type="text"].asecla-input, input[type="email"].asecla-input, input[type="password"].asecla-input, input[type="url"].asecla-input, input[type="tel"].asecla-input,
textarea.asecla-input {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 2px solid black;
}
input.asecla-input::placeholder, textarea.asecla-input::placeholder {
    font-style: italic;
}

.asecla-flex, .asecla-flex-row {
    display: flex;
}
.asecla-flex-column-25 {
    flex: 25%;
}
.asecla-flex-column-33 {
    flex: 33.3%;
}
.asecla-flex-column-50 {
    flex: 50%;
}
.asecla-flex-column-66 {
    flex: 66.6%;
}
.asecla-flex-column-75 {
    flex: 75%;
}

.asecla-shadow-box {
    border-radius: 10px;
    box-shadow: rgba(100, 100, 111, 0.6) 0px 2px 4px 0px;
    padding: 1em;
    text-align: center;
    margin: 1em auto;
}
.asecla-fullwidth {
    width: 100%;
}
.asecla-halfwidth {
    width: 50%;
}
.asecla-halfwidth-on-desktop {
    width: 100%;
}
@media (min-width: 720px) {
    .asecla-halfwidth-on-desktop {
        width: 50%;
    }
}

.asecla-align-left {
    text-align: left;
}
.asecla-align-right {
    text-align: right;
}
.asecla-align-center {
    text-align: center;
}
.asecla-align-justify {
    text-align: justify;
}

.asecla-heading {
    color: var(--asecla-messages-brand-color);
	font-weight: bold;
    text-align: center;
    font-family: var(--asecla-messages-font-heading);
}
h1.asecla-heading {
	font-size: 175%;
	margin: 0.75em 0;
}
h2.asecla-heading {
	font-size: 150%;
	margin: 0.5em 0;
}
h3.asecla-heading {
	font-size: 135%;
	margin: 0.35em 0;
}
h4.asecla-heading {
	font-size: 122%;
	margin: 0.22em 0;
}
h5.asecla-heading {
	font-size: 115%;
	margin: 0.15em 0;
}
h6.asecla-heading {
	font-size: 110%;
	margin: 0.1em 0;
}

table.asecla-messages-table {
    border-collapse: collapse;
    text-align: center;
    margin: 0 auto;
    padding: 0.5em;
    border-top: var(--asecla-messages-table-line);
    border-bottom: var(--asecla-messages-table-line);
}
table.asecla-messages-table thead {
    border-bottom: var(--asecla-messages-table-line);
}
table.asecla-messages-table td, table.asecla-messages-table th { 
    font-weight: 600;
    width: auto;
}
table.asecla-messages-table th {
    font-size: 105%;
    padding: 0.5em;
}
table.asecla-messages-table td {
    font-size: 95%;
    padding: 0.4em;
}
table.asecla-messages-table td.asecla-tight, table.asecla-messages-table th.asecla-tight {
    width: 0.01%;
    white-space: nowrap;
}
@font-face {
    font-family: 'dotsfont';
    src: url('/assets/dotsfont-BLhjP1lJ.woff') format('woff');
}

:root {
	--asecla-font-text-input: var(--asecla-messages-font-standard);
	--asecla-color-title-background: #0061B7;
	--asecla-border-standard: 1px solid #F4F4F4;
	--asecla-color-text-hint: #A9A9A9;
	--asecla-color-list-background: #F4F4F4;
	--asecla-color-list-hover-background: #0086FF;
	--asecla-color-list-hover-text: white;

	--notification-error-bg:      #dc3545;
	--notification-success-bg:    #28a745;
	--notification-warning-bg:    #ffc107;
	--notification-info-bg:       #17a2b8;

	--notification-error-text:    #fff;
	--notification-success-text:  #fff;
	--notification-warning-text:  #212529;
	--notification-info-text:     #fff;
}

body, html {
	height: 100%;
	padding: 0;
	margin: 0;
	color: var(--asecla-color-text);
}

.footer-branding {
	color: white;
	background-color: grey;
	text-align: center;
}

#main {
	width: 100%;
}

.hidden {
	display: none !important;
}

.transparent {
	visibility: hidden;
}

.section {
	padding: 1em;
}

.section-outer {
	margin: 2em auto;
}

@media (min-width:641px) {
	.section-outer {
		max-width: 800px;
	}
}

.section-inner {
	margin: 0 2em;
	background-color: white;
}

.section-row {
	border-left: var(--asecla-border-standard);
	border-right: var(--asecla-border-standard);
	border-top: var(--asecla-border-standard);
	border-bottom: var(--asecla-border-standard);
	clear: both;
}

.section-spacer {
	padding: 0.25em 2em;
}

input, textarea {
	padding: 1em 1.25em;
	font-family: var(--asecla-font-text-input);
}

textarea {
	resize: none;
}

.secured-text {
	-webkit-text-security: square;
	font-family: 'dotsfont';
}

.secured-text::placeholder {
	font-family: var(--asecla-font-text-input);
	-webkit-text-security: none;
}

input[type="text"], input[type="email"], input[type="password"], textarea, .advanced-password-component {
	width: 100%;
}

input[type="number"] {
	color: var(--asecla-messages-brand-color);
	font-weight: bold;
	width: 6.15em;
}

input, textarea, select {
	border: 1px solid transparent;
	background-color: white;
	color: black;
}

input:hover, textarea:hover, input:focus, textarea:focus, select:hover, select:focus {
	border: 1px solid var(--asecla-messages-brand-color) !important;
}

input:focus, textarea:focus, select:focus {
	outline: 2px solid var(--asecla-messages-brand-color);
	outline-offset: -1px;
}

input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"] {
	border-bottom: 1px solid #DDDDDD;
    color: black;
}

select {
	background-color: var(--asecla-color-background);
	color: var(--asecla-messages-brand-color);
	border: 1px solid transparent;
	font-weight: bold;
	padding: 0.25em 0 0.25em 0;
}

input::placeholder, textarea::placeholder {
	color: var(--asecla-color-text-hint);
	font-weight: normal;
	opacity: 1;
	font-size: 1rem;
}

.section-inner .titlebar {
	padding: 0.5em 1em 0.5em 1em;
	background-color: var(--asecla-color-title-background);
	color: white;
	text-align: left;
	font-size: 105%;
	font-weight: bold;
	letter-spacing: 0.1em;
	font-family: var(--asecla-messages-font-heading);
}

button {
	background-color: grey;
	color: var(--asecla-messages-brand-color-contrast);
	text-shadow: 2px 2px 2px #00000055;
}

button, .asecla-messages-button, a.asecla-messages-button {
	text-shadow: none !important;
	box-shadow: none !important;
}

button img, .asecla-messages-button img, a.asecla-messages-button img {
	box-shadow: none !important;
}

.asecla-messages-button, a.asecla-messages-button {
	border: 1.5px solid var(--asecla-messages-brand-color);
	border-radius: 6px;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.asecla-messages-button:hover, a.asecla-messages-button:hover {
	font-weight: inherit;
	background-color: white;
	color: var(--asecla-messages-brand-color);
	border-color: var(--asecla-messages-brand-color);
}

.asecla-messages-button:hover .icon,
a.asecla-messages-button:hover .icon {
	filter: invert(38%) sepia(97%) saturate(1050%) hue-rotate(196deg) brightness(104%) contrast(104%);
}

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

.column-50 {
	width: 50%;
}

.columns .column-full {
	flex-grow: 1;
}

.hint {
	color: var(--asecla-color-text-hint);
}

.hint2 {
	color: #777777;
}

.icon {
	width: 1em;
	height: 1em;
	margin-top: 0.35em; /* TODO!! */
}

button .icon, .btn .icon, .titlebar .icon {
	filter: invert(1);
}

.labelled-field {
	padding: 0.5em;
	display: flex;
	align-items: center;
}

.labelled-field label {
	padding: 1em 1.25em;
	white-space: nowrap;
	min-width: 25%;
}

.labelled-field .field-value {
	padding: 0.1em;
	display: flex;
	align-items: center;
	flex-grow: 1;
}

.labelled-field-checkbox input[type="checkbox"] {
	margin-left: 1.25em;
	margin-right: 0.5em;
}

.labelled-field-checkbox label {
	padding: 1em 1.25em 1em 0.5em;
}

.labelled-field-checkbox .field-value {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.fullwidth {
	width: 100% !important;
}

.btn-with-hint {
	display: flex;
	align-items: center;
	gap: 8px;
}

.btn-with-hint > .fullwidth,
.btn-with-hint > .asecla-fullwidth {
	flex: 1;
	width: auto !important;
	min-width: 0;
}

input::-ms-reveal {
	display: none;
}

.advanced-password-component {
	position: relative;
	display: inline-block;
}

.advanced-password-component input {
	padding-right: 2.4em;
}

.advanced-password-component .reveal-password-toggle {
	position: absolute;
	right: 0.3em;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	display: block;
	width: 1.3em;
	height: 1.3em;
}

/* Tooltips */

.tooltip-outer {
	position: relative;
	display: inline-block;
	cursor: help;
	/* Opt out of double-tap-to-zoom on the trigger: touch browsers otherwise
	   hold the tap back to see whether a second one follows, which reads as
	   the tooltip needing a long press. Also suppress the long-press callout
	   and text selection, both of which fire before the bubble appears. */
	touch-action: manipulation;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

/* The trigger is a real <button> (for keyboard/screen-reader access) —
   strip the default button chrome back to how the plain icon used to look,
   and pad it out so the tappable area clears the WCAG 2.2 SC 2.5.8 24x24px
   minimum target size with margin to spare. */

button.tooltip-outer {
	appearance: none;
	background: none;
	border: none;
	padding: 0.25em;
	margin: -0.25em 0.25em;
	font: inherit;
	color: inherit;
	line-height: normal;
	-webkit-tap-highlight-color: transparent;
}

.tooltip-outer:focus-visible {
	outline: 2px solid var(--asecla-messages-brand-color);
	outline-offset: 2px;
	border-radius: 4px;
}

/* The bubble is positioned in viewport coordinates by installTooltipFlip()
   rather than relative to its trigger. Triggers sit inside scroll containers
   — the message list's .asecla-messages-table wrapper, the reader's modal —
   and `overflow` on such an ancestor clips an absolutely positioned bubble,
   which no amount of shifting along the viewport can pull back into view.
   A fixed bubble is not clipped by ancestor overflow at all. */

.tooltip-outer .tooltip-inner {
	text-align: justify;
	/* Fixed rem value (not a % of the trigger's inherited font-size) so every
	   tooltip renders at the same size regardless of where its trigger sits —
	   ambient font-size varies across the composer (14px vs 1rem contexts). */
	font-size: 0.875rem;
	width: max-content;
	/* Never wider than the viewport minus the padding the JS keeps on both
	   sides, so a clamped bubble can always be placed fully on screen. */
	min-width: min(34em, calc(100vw - 16px));
	max-width: min(34em, calc(100vw - 16px));
	background-color: black;
	color: #fff;
	border-radius: 6px;
	padding: 1em;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	transform: translate(var(--tooltip-x, 0px), var(--tooltip-y, 0px));
	text-transform: none;
	max-height: var(--tooltip-max-height, none);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* The trigger suppresses selection so a long press cannot start one
	   instead of opening the bubble; the bubble's own text stays selectable. */
	-webkit-user-select: text;
	user-select: text;

	opacity: 0;
	/* Not visibility/display: the description must stay in the
	   accessibility tree at all times so aria-describedby is announced on
	   focus regardless of the visual open/closed state. pointer-events
	   keeps the invisible box from intercepting clicks/taps while closed. */
	pointer-events: none;
	transition: opacity 0.2s;
}

/* Shown on real mouse hover, keyboard focus, or tap (see installTooltipFlip
   in tooltip-flip.ts, which toggles this explicitly on click/tap since iOS
   Safari does not move focus to a button on tap). Not driven by :hover
   directly: touch browsers can replay hover as a "stuck" compatibility
   event after a tap, which is what previously made tooltips flash or get
   stuck open. */

.tooltip-outer.tooltip-open .tooltip-inner {
	opacity: 1;
	pointer-events: auto;
}

/* Visible dismiss affordance in the longer hint bubbles. It carries no
   handler: the bubble is a child of its trigger, so a tap on it toggles the
   trigger shut (see installTooltipFlip). Floated rather than absolutely
   positioned so it scrolls with the text of a bubble tall enough to be
   clamped, instead of hovering over it. */

.tooltip-inner .tooltip-close {
	float: right;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75em;
	height: 1.75em;
	margin: -0.4em -0.4em 0.25em 0.6em;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.14);
	font-size: 1.05em;
	line-height: 1;
	opacity: 0.8;
	cursor: pointer;
	transition: opacity 0.15s, background-color 0.15s;
}

.tooltip-inner .tooltip-close:hover {
	background-color: rgba(255, 255, 255, 0.26);
	opacity: 1;
}

@media (max-width: 640px) {
	.tooltip-outer .tooltip-inner {
		font-size: 1rem;
		text-align: left;
		/* Shrink to the text instead of filling a fixed box: on a narrow
		   screen a wide bubble has nowhere to go but off the edge. */
		min-width: 0;
	}
}

.hint-icon {
	margin-left: 0.5em;
	margin-right: 0.5em;
}

.hint-icon img {
	display: none;
}

.hint-icon::before {
	content: '';
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: url(/img/icons/reshot-icon-pin-question-3VGD2PC68B.svg) no-repeat center / contain;
	mask: url(/img/icons/reshot-icon-pin-question-3VGD2PC68B.svg) no-repeat center / contain;
	transition: background-color 0.2s;
}

.hint-icon:hover::before {
	background-color: var(--asecla-messages-brand-color);
}

/* Icon-only buttons */

.icon-button {
	background: none;
	border: none;
	padding: 0.25em;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s;
}

.icon-button:hover {
	opacity: 0.7;
}

.icon-button img {
	width: 2em;
	height: 2em;
}

#newmsg-password-hint {
	margin-top: 1em;
}

.reveal-toogle {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	cursor: pointer;
	margin-right: 0.5em;
}

.reveal-toogle img {
	width: 100%;
}

.reveal-toogle-show img {
	content:url(/img/icons/reshot-icon-eye-A89QNHVPK2.svg);
}

.reveal-toogle-hide img {
	content:url(/img/icons/reshot-icon-eye-disabled-6XEUWLV4TQ.svg);
}

.titlebar a.close, .titlebar a.close:hover, .titlebar a.close:visited {
	float: right;
	cursor: pointer;
	color: white;
	text-decoration: none;
}

.important {
	font-weight: bold;
}

.inwards {
	padding: 1.5em;
}

/* DESKTOP */

@media (min-width:961px) {
	.column-50-desktop {
		width: 50%;
	}
	.inlineblock-on-desktop {
		display: inline-block;
	}
}

/* TABLET */

@media (min-width:641px) {
	.column-50-tablet {
		width: 50%;
	}
	.inlineblock-on-tablet {
		display: inline-block;
	}
}

/* MOBILE */

@media (max-width:640px) {
	/* Screen space is scarce on phones: let the content box span the full
	   viewport width instead of leaving side gutters around it. */
	body.asecla-messages-page #main {
		padding-left: 0;
		padding-right: 0;
	}
	.section-outer {
		margin-left: 0;
		margin-right: 0;
	}
	.section-inner {
		margin-left: 0;
		margin-right: 0;
	}
	.column-50-desktop, .column-50-tablet {
		width: 100%;
	}
	.border-bottom-on-mobile {
		border-bottom: var(--asecla-border-standard);
	}
}

@media (max-width: 768px) {
    .hide-on-small-screen {
        display: none;
        visibility: hidden;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .hide-on-medium-screen {
        display: none;
        visibility: hidden;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .hide-on-large-screen {
        display: none;
        visibility: hidden;
    }
}

@media (min-width: 1200px) {
    .hide-on-xlarge-screen {
        display: none;
        visibility: hidden;
    }
}

.center {
	text-align: center;
	margin: 0 auto;
}

.align-center {
	text-align: center;
}

footer a, footer a:hover {
	color: white;
}

.tabula-clickable {
    cursor: pointer;
}

.indent {
	margin: 1em;
}

/* ASECLA TABLE */

div.asecla-messages-table {
    max-width: 100%;
    overflow: auto;
}

.asecla-messages-table table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    color: black;
}

.asecla-messages-table table th {
    background-color: #333333;
    color: white;
}

.asecla-messages-table table th, .asecla-messages-table table td {
    padding: 0.45em;
    border: 1px solid #333333;
	font-size: 95%;
    font-weight: normal;
}

.asecla-messages-table tbody tr:hover {
    background-color: lightyellow;
}

/* Usage Statistics Styles */

.stat-group {
    margin: 1.5em 0;
}

.stat-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5em;
}

.stat-title {
    font-weight: bold;
    color: var(--asecla-color-text);
}

.stat-value {
    color: var(--asecla-color-title-background);
    font-weight: bold;
}

.progress-bar {
    position: relative;
    width: 100%;
    height: 30px;
    background-color: var(--asecla-color-list-background);
    border: var(--asecla-border-standard);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: var(--asecla-color-title-background);
    transition: width 0.3s ease, background-color 0.3s ease;
    min-width: 1px; /* Ensure visibility even at 0% */
    display: block;  /* Ensure it's always displayed */
}

.progress-fill.warning {
    background-color: #FFA500;
}

.progress-fill.critical {
    background-color: #FF4444;
}

.stat-group-warning .stat-title,
.stat-group-warning .stat-value {
    color: #FFA500;
}

.stat-group-critical .stat-title,
.stat-group-critical .stat-value {
    color: #FF4444;
}

.progress-percentage {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    color: #333333;
    z-index: 1;
}

.stats-titlebar {
    text-align: center;
}

.stats-title-date {
    font-size: 0.72em;
    font-weight: bold;
    letter-spacing: 0.05em;
    vertical-align: middle;
    opacity: 0.85;
}

.stats-subtitle {
    font-size: 0.9em;
    color: var(--asecla-color-text-hint);
    margin-bottom: 1em;
}

.stats-plan-name {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--asecla-color-title-background);
}

.stats-limit-warning {
    margin-top: 1.5em;
    padding: 1em 1.2em;
    border-left: 4px solid;
    font-size: 0.95em;
}

.stats-limit-warning--warning {
    border-color: #FFA500;
    background-color: #fffbf0;
}

.stats-limit-warning--critical {
    border-color: #FF4444;
    background-color: #fff5f5;
}

.stats-limit-warning p {
    margin: 0.4em 0;
}

.stats-limit-warning-label {
    font-weight: bold;
    margin-bottom: 0.5em;
    color: #FF4444;
}

.stats-limit-warning-notice {
    font-weight: bold;
}

.stats-footnote {
    margin-top: 1.5em;
    font-size: 0.8em;
    color: var(--asecla-color-text-hint);
    line-height: 1.5;
}
/* Shared attachment list styles — used by both Box (creator) and Reader */

.attachment-list-section {
	margin: 2em 0 2em;
}
.attachment-list-header {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 600;
	font-size: 0.95em;
	color: #555;
	margin-bottom: 0.5em;
	letter-spacing: 0.04em;
	flex-wrap: wrap;
}
.attachment-list-title {
	order: 1;
	display: flex;
	align-items: center;
	gap: 0.5em;
	text-transform: uppercase;
}
.attachment-list-count {
	background: #e0e0e0;
	color: #444;
	border-radius: 999px;
	padding: 0 0.5em;
	font-size: 0.85em;
	font-weight: normal;
	letter-spacing: 0;
	text-transform: none;
}
.attachment-list-total-size {
	order: 3;
	flex-basis: 100%;
	margin-top: 0.35em;
	font-size: 0.85em;
	font-weight: normal;
	letter-spacing: 0;
	text-transform: none;
	color: #777;
}
.attachment-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}
ol.attachment-list {
	list-style: none;
}
ol.attachment-list > li {
	display: flex;
	align-items: center;
	gap: 0.5em;
}
.attachment-index {
	flex-shrink: 0;
	min-width: 1.5em;
	text-align: right;
	color: #111;
	font-size: 0.85em;
	font-weight: 600;
}
.attachment-item {
	display: flex;
	align-items: center;
	gap: 0.65em;
	padding: 0.55em 0.75em;
	background: #f8f8f8;
	border: 1px solid #e4e4e4;
	border-radius: 5px;
	transition: background 0.12s, border-color 0.12s;
	min-width: 0;
}
.attachment-item:hover {
	background: #f0f4ff;
	border-color: #b3c9f0;
}
.attachment-item--unsafe {
	border-color: #ffc107;
	background: #fffdf0;
}
.attachment-item--unsafe:hover {
	background: #fff8d6;
	border-color: #e0a800;
}
.attachment-ext-badge {
	flex-shrink: 0;
	box-sizing: border-box;
	background: #495057;
	color: white;
	font-size: 0.68em;
	font-weight: 700;
	padding: 2px 4px;
	border-radius: 3px;
	font-family: var(--asecla-messages-font-monospace);
	min-width: 4.2em;
	text-align: center;
	letter-spacing: 0.04em;
	print-color-adjust: exact;
	-webkit-print-color-adjust: exact;
}
.attachment-ext-badge--unsafe {
	background: #dc3545;
}
.attachment-name {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.05em;
	font-family: var(--asecla-messages-font-monospace);
	font-size: 0.95em;
	overflow: hidden;
}
.attachment-filename {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.attachment-hash {
	font-size: 0.6em;
	font-weight: bold;
	color: #b7bbc1;
	letter-spacing: 0;
	font-family: "Courier New", Courier, monospace !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: default;
}
.attachment-hash-algo {
	font-style: italic;
	font-weight: normal;
	margin-right: 0.3em;
}
.attachment-hash-full {
	display: none;
}
/* JS-driven toggle — works on all devices */
.attachment-hash.is-expanded .attachment-hash-short {
	display: none;
}
.attachment-hash.is-expanded .attachment-hash-full {
	display: inline;
}
.attachment-hash.is-expanded {
	white-space: normal;
	word-break: break-all;
}
/* Desktop hover enhancement — pure CSS, no click needed */
@media (hover: hover) {
	.attachment-hash:hover .attachment-hash-short {
		display: none;
	}
	.attachment-hash:hover .attachment-hash-full {
		display: inline;
	}
	.attachment-hash:hover {
		white-space: normal;
		word-break: break-all;
	}
}
/* On touch devices signal tap-to-expand */
@media (hover: none) {
	.attachment-hash {
		cursor: pointer;
	}
}
@media print {
	.attachment-hash-short {
		display: none !important;
	}
	.attachment-hash-full {
		display: inline !important;
	}
	.attachment-hash {
		white-space: normal !important;
		word-break: break-all !important;
		overflow: visible !important;
	}
}
.attachment-unsafe-badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	color: #c0392b;
	font-size: 0.82em;
	font-weight: 600;
	white-space: nowrap;
}
.attachment-warning-icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
	flex-shrink: 0;
}
.attachment-unsafe-label {
	display: none;
}
@media (min-width: 500px) {
	.attachment-unsafe-label {
		display: inline;
	}
}
.attachment-size {
	flex-shrink: 0;
	color: #888;
	font-size: 0.85em;
	white-space: nowrap;
}
.attachment-actions {
	flex-shrink: 0;
	display: flex;
	gap: 0.25em;
}
.attachment-btn {
	appearance: none;
	background: white;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	cursor: pointer;
	padding: 0.3em 0.45em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	transition: background 0.12s, border-color 0.12s;
}
.attachment-btn:hover:not(:disabled) {
	background: #f0f4ff;
	border-color: #0086FF;
}
.attachment-btn:disabled,
.attachment-btn:hover:disabled {
	opacity: 0.45;
	cursor: default;
	background: white;
}
.attachment-btn .icon {
	width: 1.15em;
	height: 1.15em;
	filter: brightness(0);
}
.attachment-btn--remove {
	line-height: 1;
	font-size: 1.1em;
	color: #666;
}
.attachment-btn--remove:hover:not(:disabled) {
	color: #c0392b;
	border-color: #c0392b;
	background: #fff5f5;
}
.attachment-spinner {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	border: 2px solid #ccc;
	border-top-color: var(--asecla-messages-brand-color, #0086FF);
	border-radius: 50%;
	animation: attachment-spin 0.65s linear infinite;
}
@keyframes attachment-spin {
	to { transform: rotate(360deg); }
}

/* Bulk download actions (Download all / Download as ZIP) */
.attachment-bulk-actions {
	order: 2;
	display: flex;
	gap: 0.5em;
	margin-left: auto;
	flex-wrap: wrap;
}
.attachment-bulk-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: white;
	border: 1px solid #d0d0d0;
	border-radius: 5px;
	padding: 0.45em 0.85em;
	font-size: 0.88em;
	line-height: 1;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s;
	color: #333;
	text-shadow: none;
}
.attachment-bulk-btn:hover:not(:disabled) {
	background: #f0f4ff;
	border-color: #0086FF;
	color: #0066cc;
}
.attachment-bulk-btn:disabled {
	opacity: 0.45;
	cursor: default;
}
.attachment-bulk-btn .icon {
	display: block;
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
	margin-top: 0;
	filter: brightness(0);
}

@media (max-width: 560px) {
	/* Badge + name + size no longer fit alongside the action buttons on one
	   line — drop the actions to their own row instead of overflowing the
	   bordered card. */
	.attachment-item {
		flex-wrap: wrap;
		row-gap: 0.4em;
	}
	.attachment-actions {
		flex-basis: 100%;
		justify-content: flex-end;
	}
	/* SHA hash is unreadably small on mobile — enlarge it, capped just below
	   the filename's size (0.95em ancestor context) so it stays secondary. */
	.attachment-hash {
		font-size: 0.9em;
	}
	/* Show attachment total size right below the title, ahead of the
	   download buttons, instead of after them. */
	.attachment-list-total-size {
		order: 2;
		text-align: center;
	}
	.attachment-bulk-actions {
		order: 3;
	}
}