/* ============================================================================================================================
	rm-components.css - the site's own components (Step 4, 5 Oct 2026; rm-components.css before): the dark dialogs, cards
	and media entries, the workspace's file entries, buttons, sliders and status boxes, the sign-in buttons, the cookie box,
	tooltips, the drag-and-drop areas, the animations of the site's own elements, and the phone layouts of the Mask dialog and of
	Administrator Tools. Loaded after the UI components (assets/css/ui/rm-*.css) and the switches, before rm-brand-states.css.

	The rules were moved here from site.css (the theme's style.css/dark.css, 3 Oct 2026), site-after-icons.css (its animate.css,
	responsive.css, colors.css, radio-checkbox.css) and rm-components.css; each section heading names the file and section a rule
	comes from, the declarations are unchanged. A rule only changed its place where no other rule that could decide the same
	property of the same element (same specificity and importance, overlapping @media) sits between its old and its new place -
	checked rule by rule (Docs\Architecture\Step 4 rm- Restructure (5 Oct 2026).md, "The CSS layers"), so the cascade is the one
	the site had; the computed styles of every element of every page and dialog at 8 sizes are unchanged.
	Load order (helperfunctions.php PageStylesheets()): rm-brand-tokens.css, rm-layout-tokens.css, Bootstrap, rm-adapter-bootstrap.css,
	rm-base.css, rm-layout.css, the icon font, rm-components-theme.css, Tom Select's stylesheet + ui/rm-*.css, rm-switch.css,
	rm-components.css, rm-brand-states.css (last), then the page's own (rm-page-*.css, rm-dialog-*.css).
============================================================================================================================ */
/* ---- rm-components.css ---- */

/* CSS NOTES
* style.css must be in root
* Theme colors in css/colors.css has been replaced by var(--theme-color)
* .btn-link:focus (bootstrap focus ring) in style.css has been replaced by var(--theme-color) */
/* The theme colour for site-wide usage (--theme-color, our orange by default; the workspace sets a company's own): defined with the
   accent rule in assets/tokens/rm-brand-tokens.css (Step 4, 5 Oct 2026; from the website's brands\recuro-brand.json) */
.my_background_image { background: url('../images/binding_dark_2.png') repeat; }
/* Light and dark grey color for text on dark or bright background */
.my-light-grey { color: var(--rm-light); }
.my-light-grey a:hover, .my-light-grey a:active { color: var(--rm-white); }
/* Colors representing our three states */
.my-warning-color { color: var(--rm-warning) !important; }
/* ... as text on a dark dialog (Owner Tools' rows of a server whose host did not resolve): the warning red made lighter, 5.8:1 on #222
   (the red itself was 2.79:1 - J-37); a browser without color-mix keeps the red */
.dark .my-warning-color, .modal-content .my-warning-color { color: color-mix(in srgb, var(--rm-warning) 60%, var(--rm-white)) !important; }
.my-flex-row { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%; }
/* Style our cookies accept box - J-25 (13 Oct 2026): at the bottom edge (it was moved up by half its height, translate(-50%, -50%), and
   floated over the page's middle on phones: taps landed on it); a full-width bar below 576 px */
.cookies-accept {
	z-index: var(--rm-z-popup);
	position: fixed;
	left: 50%;
	bottom: var(--rm-space-3);
	max-width: calc(100% - 2 * var(--rm-space-3));
	margin: 0;
	transform: translateX(-50%);
	background-color: var(--rm-dark);
	color: var(--rm-white);
	border-color: var(--theme-color);
}
@media (max-width: 575.98px) {
	.cookies-accept {
		left: 0;
		right: 0;
		bottom: 0;
		max-width: none;
		border-radius: 0;
		transform: none;
	}
}
/* Grid frame for our workspace file entries and job settings */
.grid-frame {
	background-color: var(--rm-dark);
	border: var(--rm-border-width) solid var(--rm-light) !important;
	border-radius: var(--rm-radius) var(--rm-radius) var(--rm-radius) var(--rm-radius);
	padding: var(--rm-space-2);
}
/* Extra small devices (portrait phones, less than 544px)
 No media query since this is the default in Bootstrap */
.body-text {
	font-size: var(--rm-font-size-body);
	font-family: var(--rm-font-family);
}
/* Extra small devices (portrait phones, less than 544px)
 No media query since this is the default in Bootstrap */
.body-text-small, .modal {
	font-size: var(--rm-font-size-small);
	font-family: var(--rm-font-family);
}
/* Make modal background a little darker */
.modal-backdrop.show { opacity: 0.75; }
/* Extra small devices (portrait phones, less than 544px)
 No media query since this is the default in Bootstrap */
.very-small-body-text {
	font-size: var(--rm-font-size-xsmall);
	font-family: var(--rm-font-family);
}
/* Overlay text such as 'Before' and 'After' */
.overlay-text {
	font-size: var(--rm-font-size-title);
	font-family: var(--rm-font-family);
	font-weight: 500;
	color: var(--rm-white);
	padding-top: 7px;
	padding-left: 12px;
	text-shadow: 0px 0px 4px var(--rm-black);
	/*-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #000000;*/
}
/* Help with key commands */
.overlay-help {
	font-size: var(--rm-font-size-title);
	font-family: var(--rm-font-family);
	font-weight: 500;
	color: var(--rm-white);
	padding: var(--rm-space-4);
	text-shadow: 0px 0px 4px var(--rm-black);
	background-color: var(--rm-black-50);
	border-radius: var(--rm-radius) var(--rm-radius) var(--rm-radius) var(--rm-radius);
	/*-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #000000;*/
}
/* The players' standing tip (owner, 19 Oct 2026: "a tip that play/pause is done through the space bar"): the media player's footer and
   Job Settings' scene buttons (dialog.mediaeditor.php, dialog.jobsettings.php); not on touch screens, which have no space bar */
.rm-player-tip {
	align-self: center;
	font-size: 0.875rem;
	opacity: 0.75;
}
@media (hover: none) and (pointer: coarse) {
	.rm-player-tip { display: none; }
}
.icon-play-sample {
	/*transition: none !important;*/
	margin-top: -7px;
	margin-right: 0px;
	margin-left: -5px;
	font-size: large;
	color: var(--rm-light) !important;
	/*color: var(--theme-color) !important;*/
}
.content-wrap { padding-top: var(--rm-space-5); }
/* Setup font for modal and file entry headers */
/* Extra small devices (portrait phones, less than 544px)
 No media query since this is the default in Bootstrap */
.modal-title, .file-entry-header {
	font-size: var(--rm-font-size-title);
	font-weight: var(--rm-font-weight-bold);
	font-family: var(--rm-font-family);
}
/* Setup properties for modal and file entry headers */
.modal-header, .file-entry-header {
	cursor: pointer;		/* http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=default */
	--rm-title-bar-end: rgba(150, 150, 150, 1);		/* the grey at the bottom of the title bars' gradient */
	background: var(--rm-white);
	background: linear-gradient(to bottom, var(--rm-grey-c8) 0%, var(--rm-title-bar-end) 100%);
	color: var(--rm-darker);
	text-shadow: 1px 1px var(--rm-light);
	height: 45px;
	border-bottom: 0;
	border-radius: var(--rm-radius) var(--rm-radius) 0px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: var(--rm-space-3);
	padding-right: var(--rm-space-3);
}
/* A media entry's title bar on a narrow screen (owner, 3 Oct 2026): the file name stays on one line and is cut with an ellipsis, the
   "59 days left" countdown and the trash icon never wrap or shrink - before, both wrapped onto two or three lines inside the 45-px bar
   and were cut off */
.file-entry-header .my-media-name {
	flex: 1 1 auto;
	min-width: 0;
	margin-right: var(--rm-space-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.file-entry-header .delete-countdown, .file-entry-header .my-file-delete {
	flex: 0 0 auto;
	white-space: nowrap;
}
/* The trash icon's touch target (J-07: 14x21 px on phones, next to the title bar that folds the entry): a 44x44 box in the 45-px bar,
   the glyph in its middle; the box reaches into the bar's right padding, so the glyph stays where it was */
.file-entry-header .my-file-delete {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin-right: -15px;
}
/* Make our buttons use same font as menus */
.btn-primary, .btn-secondary {
	font-size: 13px;
	font-family: var(--rm-font-family);
	letter-spacing: var(--rm-letter-spacing);
	font-weight: bold;
	border-radius: 0.25rem;
}
/* Setup fonts for our status buttons */
.btn-sm {
	font-size: 8px;
}
/* Labels and menus should all use Lato */
label, #primary-menu ul li > a {
	font-family: var(--rm-font-family);
}
/* No hand when hovering progressbars */
.progress, .progress-bar {
	cursor: default !important;
}
/* Our notifications: assets/css/ui/rm-notify.css (Step 3a); the info alert keeps the theme colour */
.alert-info { background-color: var(--theme-color) !important; }
/* Setup our disabled button style */
.btn-primary.disabled, .btn-primary:disabled { background-color: var(--theme-color); border-color: var(--rm-white); }
/* Set our theme color for buttons */
.btn-primary { background-color: var(--theme-color); border-color: var(--rm-white); transition: var(--rm-duration-xfast); }
.btn-secondary { background-color: var(--rm-grey); border-color: var(--rm-white); }
/* Set our theme color for buttons when hovering */
.btn-primary:hover { background-color: var(--theme-color); border-color: var(--rm-white); filter: brightness(110%); }
.btn-secondary:hover { background-color: var(--rm-grey-hover); border-color: var(--rm-white); }
/* Use theme-color for radio and check buttons */
.radio-style:checked + .radio-style-2-label:before { background: var(--theme-color); border-color: var(--rm-white); }
.radio-style + .radio-style-2-label:before { background: none; border-color: initial; }
.switch input + label::before { background-color: var(--rm-mid-grey); }
.switch { overflow: -webkit-paged-y; }
/* Make switch fit when text is wrapped */
/* Style our bootstrap tooltips */
/* (Bootstrap 5: .tooltip-arrow, start/end, data-popper-placement; 5 Oct 2026) */
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: var(--rm-light); display: none; }
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: var(--rm-light); display: none; }
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: var(--rm-light); display: none; }
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: var(--rm-light); display: none; }
.tooltip.show { opacity: 1; }
.tooltip-inner {
	background-color: var(--rm-dark);
	border: var(--rm-border-width) solid var(--rm-light);
	border-radius: var(--rm-radius) var(--rm-radius) var(--rm-radius) var(--rm-radius);
	padding: var(--rm-space-2);
	margin: var(--rm-space-2);
	/*box-shadow: 0px 10px 50px 5px rgba(0,0,0,0.75);*/
	box-shadow: var(--rm-shadow-tooltip);
}
.progress-bar {
	padding-left: var(--rm-space-1);
	color: var(--rm-white);
	background-color: var(--theme-color);
	text-shadow: initial;
	font-weight: normal;
}
/* EVERY progress bar moves smoothly, never in sudden jumps (owner, 18 Oct 2026: "ALL of them should be smoothly moved. No sudden
   jumps"). The page polls about every second and an answer can take a little longer, so the polled bars (media, job, comparison
   render, upload, disk use) glide linearly for 1.5 s: each new value takes over from where the bar is, so it never stands still or
   jumps between updates. The scene indicators (luminance, saturation, quality) follow the slider in 0.25 s. Also when the system
   asks for reduced motion (Bootstrap then switches its own 0.6 s transition off). .notransition / .rm-u-no-transition still drop
   a bar at once (a new run back to 0) */
.progress-bar:not(.notransition, .rm-u-no-transition) { transition: width 1.5s linear; }
:is(.luminance-progressbar, .saturation-progressbar, .sharpness-progressbar).progress-bar:not(.notransition, .rm-u-no-transition) { transition: width 0.25s ease-out; }
/* Style our warning sign for media (low resolution, low bitrate, etc) */
.my-warning-sign {
	margin-top: var(--rm-space-7);
	margin-left: var(--rm-space-5);
	position: absolute;
	font-size: 2.0rem;
	color: var(--rm-warning);
	z-index: var(--rm-z-badge);

	-webkit-text-fill-color: var(--rm-warning); /* Will override color (regardless of order) */
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: var(--rm-white);
}
/* Set background color for modals, cards and file entries */
.card-body, .file-entry-body {
	border-top: 0 !important;
	border-radius: 0px 0px var(--rm-radius) var(--rm-radius);
	border-color: var(--rm-light);
	background-color: var(--rm-darker);
}
/* Setup dark theme for our modals */
.modal-content {
	min-width: 280px;
	border-color: var(--rm-light);
	background-color: var(--rm-darker);
	box-shadow: var(--rm-shadow-dialog);
	/*width: fit-content;
	margin: auto;*/
}
/* Grid never use padding so make sure we have a decent padding for modals (also remove top border in footer) */
.modal-body { padding: var(--rm-space-4); }
.modal-footer { padding: var(--rm-space-4); border-top: 0; }
.modal { padding: 0 !important; }
/* the old theme added 30px */
/* Small bootstrap modal */
.modal-sm {
	max-width: 800px;
	top: 10%;
}
/* Very small bootstrap modal */
.modal-vsm {
	max-width: 500px;
	top: 10%;
}
input[type=number] {									/* Firefox */
	-moz-appearance: textfield;
}
.card-header {
	color: var(--rm-white);
	padding: 4px 4px 4px var(--rm-space-2);
	background-color: var(--rm-darker);
	cursor: pointer;
}
/* Appearance of closed card */
.card-closed {
	opacity: 0.75;
	margin: initial;
	transition: all var(--rm-duration-normal);
}
/* Appearance of opened card */
.card-opened {
	opacity: 1.0;
	margin: 0px var(--rm-space-2) 0px var(--rm-space-2);
	transition: all var(--rm-duration-normal);
}
/* Speed up animations a bit */
/*div {
	animation-duration: 0.5s !important;
}*/
/* Make sure our lightbox popup is shown above a bootstrap 4 modal
$zindex-dropdown: 1000, $zindex-sticky: 1020, $zindex-fixed: 1030, $zindex-modal-backdrop: 1040, $zindex-modal: 1050, $zindex-popover: 1060, $zindex-tooltip: 1070 */
/* Sign in with Google / Apple / Microsoft (Step 3c, 5 Oct 2026; dialog.login.php). Each provider's own button rules: its logo unchanged
   (assets/images/signin-*), the allowed text "Sign in with ...". The colours: Google's DARK button for all three (owner, 6 Oct 2026:
   "perfect for our theme" - one dark set instead of the white variants Step 3c took for Apple's rule on dark backgrounds): #131314,
   a 1 px border #8E918F, text #E3E3E3 (15:1); Google's dark-theme G, Microsoft's four squares, Apple's white apple on a transparent
   background (signin-apple-white.svg, cropped to the glyph). The providers' brand values, named here (not our brand: not in
   brands\recuro-brand.json). The text uses the system font (Segoe UI, San Francisco, Roboto) - each provider asks for its own, none is
   ours to serve */
.rm-signin-providers {
	--rm-signin-bg: #131314;
	--rm-signin-border: #8E918F;
	--rm-signin-text: #E3E3E3;
	display: flex;
	flex-direction: column;
	gap: var(--rm-space-2);
	margin: var(--rm-space-3);
}
.rm-signin-providers > .rm-signin-wrap { display: block; }
.rm-signin-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--rm-space-2);
	width: 100%;
	min-height: 40px;
	padding: 0 12px;
	border: var(--rm-border-width) solid var(--rm-signin-border);
	border-radius: var(--rm-radius);
	background-color: var(--rm-signin-bg);
	color: var(--rm-signin-text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.25px;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	transition: background-color var(--rm-duration-xfast) ease, box-shadow var(--rm-duration-xfast) ease;
}
.rm-signin-btn .rm-signin-logo { flex: none; width: 20px; height: 20px; }
/* Apple: the white apple, cropped to the glyph - 20 px high like the other logos (its width follows: about 16 px) */
.rm-signin-btn.rm-signin-apple .rm-signin-logo { width: auto; height: 20px; }
/* under the pointer the whole button lightens a little (Google's dark button) */
a.rm-signin-btn:hover { filter: brightness(1.25); }
a.rm-signin-btn:hover, a.rm-signin-btn:focus { color: var(--rm-signin-text); }
/* the keyboard focus ring: the site takes outlines away (rm-base.css :focus), its rings are box-shadows in the orange */
a.rm-signin-btn:focus-visible, .rm-signin-wrap:focus-visible { box-shadow: 0 0 0 2px var(--rm-darker), 0 0 0 4px var(--rm-orange-hover); }
#signin-resend-btn:focus-visible { box-shadow: 0 0 0 2px var(--rm-orange-hover); border-radius: var(--rm-radius-sm); }
/* A provider without its secrets (development site only): full colour since 6 Oct 2026 (owner) - a click shows "not configured yet"
   in the dialog's message line (rm-dialog-login.js, data-signin-why on the wrapper) */
.rm-signin-btn.rm-signin-unconfigured { pointer-events: none; }
.rm-signin-wrap { cursor: pointer; border-radius: var(--rm-radius); }
.rm-signin-wrap:hover .rm-signin-btn { filter: brightness(1.25); }
/* The "or" between the buttons and the form */
.rm-signin-or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: var(--rm-space-1) var(--rm-space-3) 0;
	color: var(--rm-text-light);
	font-size: var(--rm-font-size-small);
	text-transform: uppercase;
	letter-spacing: var(--rm-letter-spacing);
}
.rm-signin-or::before, .rm-signin-or::after { content: ""; flex: 1; border-top: var(--rm-border-width) solid var(--rm-mid-grey); }
/* "E-mail me a sign-in link" / "Sign in with your password instead" under the field */
.rm-signin-link-row { margin-top: 8px; text-align: right; font-size: var(--rm-font-size-small); }
/* The e-mail code's label line (owner, 7 Oct 2026: the label sat right on the field and the paste icon floated above the label): the label
   keeps the usual gap of a label to its field (as E-mail above it), the icon is centred on the label's line and adds no height (W-65) */
.rm-signin-code > .rm-clip-row {
	min-height: 0;
	align-items: center;
	margin-bottom: var(--rm-space-2);
}
.rm-signin-code > .rm-clip-row > .rm-clip-btn { margin: calc(-1 * var(--rm-space-1)) 0; }
/* How to sign in: two tabs (owner, 6 Oct 2026 - the faint "E-mail me a sign-in link" was easy to miss). The chosen tab: light text
   and the accent underline; the other: readable grey (#BBBBBB on the dialog's dark grey, 8:1) that lightens under the pointer */
.rm-signin-tabs {
	display: flex;
	margin: var(--rm-space-3) var(--rm-space-3) 0;
	border-bottom: var(--rm-border-width) solid var(--rm-grey-55);
}
.rm-signin-tabs > * { flex: 1 1 0; min-width: 0; }
.rm-signin-tab {
	display: block;
	width: 100%;
	margin-bottom: calc(-1 * var(--rm-border-width));
	padding: var(--rm-space-2) var(--rm-space-1);
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: var(--rm-radius-sm) var(--rm-radius-sm) 0 0;
	color: var(--rm-grey-bb);
	font-size: var(--rm-font-size-button);
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	white-space: normal;
	cursor: pointer;
	transition: color var(--rm-duration-xfast) ease, border-color var(--rm-duration-xfast) ease, background-color var(--rm-duration-xfast) ease;
}
.rm-signin-tab:hover { color: var(--rm-text-on-dark); border-bottom-color: var(--rm-grey-77); }
.rm-signin-tab.is-active { color: var(--rm-white); border-bottom-color: var(--rm-accent, var(--rm-orange)); --rm-signin-tab-active-bg: rgba(255, 255, 255, 0.04); background-color: var(--rm-signin-tab-active-bg); }
.rm-signin-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--rm-orange-hover); }
.rm-signin-tab-wrap { display: block; }
.rm-signin-tab-off { color: var(--rm-grey-77); pointer-events: none; }
.rm-signin-tab-intro { margin-bottom: 0; color: var(--rm-grey-cc); font-size: var(--rm-font-size-small); }
.rm-signin-link-disabled { color: var(--rm-mid-grey); cursor: not-allowed; }
/* The dialog's message line, the "signing you in" line and the opened-link question */
.rm-signin-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rm-space-2);
	margin: var(--rm-space-3) var(--rm-space-3) 0;
	padding: var(--rm-space-2) 12px;
	border: var(--rm-border-width) solid var(--rm-grey-49);
	border-radius: var(--rm-radius);
	background-color: var(--rm-dark);
	color: var(--rm-text-on-dark);
	overflow-wrap: anywhere;
}
.rm-signin-notice > span { flex: 1 1 220px; }
/* no colour bar per kind of message any more (owner, 6 Oct 2026: the green/orange/red bar left of the box went) - the classes stay
   for the code that sets them */
.rm-signin-status { display: flex; align-items: center; gap: var(--rm-space-2); margin: var(--rm-space-4) var(--rm-space-3); color: var(--rm-text-on-dark); }
.rm-signin-status .spinner-border { color: var(--rm-accent, var(--rm-orange)); }
.rm-signin-confirm { margin: var(--rm-space-3); color: var(--rm-text-on-dark); overflow-wrap: anywhere; }
.rm-signin-confirm-title { font-size: 1.05rem; margin-bottom: 8px; }
.rm-signin-intro { margin: var(--rm-space-3); color: var(--rm-text-on-dark); overflow-wrap: anywhere; }
/* the footer's terms line (social sign-up): always its own full-width line above the buttons - the footer does not wrap otherwise
   (rm-adapter-bootstrap.css), so on a phone it was squeezed into a narrow column beside them (7 Oct 2026) */
.modal-footer:has(> .rm-signin-terms) { flex-wrap: wrap; }
.modal-footer > .rm-signin-terms { flex: 1 0 100%; margin: 0 0 var(--rm-space-3) !important; }
/* The Create Account dialog (dialog.createaccount.php, one dialog for the e-mail sign-up and the step after a provider since 7 Oct 2026).
   Required and optional fields look different (owner, 7 Oct 2026): a required field's label ends in an accent "*" (aria-hidden: the field
   itself says required - required + aria-required), explained by the "* Required" line; an optional one says "(optional)". A refused field:
   the error red border (--rm-field-error, red only for errors) and its message under it in light text with a red bar (the red as text on
   the dark dialog would be 3.6:1) */
.rm-req { margin-left: 2px; color: var(--rm-link-on-dark); font-size: 1.15em; line-height: 1; }		/* (on the dark dialog: 6.2:1; the orange was 3.62:1 - J-36) */
.rm-opt { margin-left: 4px; color: var(--rm-text-light); font-weight: 400; text-transform: none; letter-spacing: normal; }
.rm-signup-note { margin: 0 var(--rm-space-3); color: var(--rm-text-light); font-size: var(--rm-font-size-small); }
.rm-signup-as { margin: var(--rm-space-3); color: var(--rm-text-on-dark); overflow-wrap: anywhere; }
.rm-field-hint { margin-top: var(--rm-space-1); color: var(--rm-text-light); font-size: var(--rm-font-size-small); }
.rm-field-msg {
	margin-top: var(--rm-space-1);
	padding-left: var(--rm-space-2);
	border-left: 3px solid var(--rm-field-error);
	color: var(--rm-text-on-dark);
	font-size: var(--rm-font-size-small);
	overflow-wrap: anywhere;
}
.rm-signup .rm-field-invalid .form-control:not(#rm-inline),
.rm-signup .rm-field-invalid .rm-select > .rm-select__control:not(#rm-inline) { border-color: var(--rm-field-error) !important; }
/* Show X to reset search field for supported browser, see https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-search-cancel-button */
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: searchfield-cancel-button;
}
/* Bootstrap selectpicker UI-bug fix - disables scrolling so don't use for now */
/*div .dropdown-menu .inner {
	overflow-y: initial !important;
}*/
/* Background color for card header and show pointer when hovering an accordion header */
.card {
  margin-bottom: var(--rm-space-1) !important;
}
/* Help displayed centered in mask dialog */
.crop-mask-help {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: var(--rm-space-4);
	background-color: var(--rm-black-50);
	text-shadow: 0px 0px 4px var(--rm-black);
}
/* Animation for emphasizing element */
.button-emphasize-anim {
	border-radius: var(--rm-radius);
	animation: button-emphasize var(--rm-duration-slow) linear infinite alternate;
}
/* Animation for a one-time emphasizing element */
.onetime-emphasize-anim {
	border-radius: var(--rm-radius);
	animation: button-emphasize 2.0s linear 2 alternate;
}
@keyframes button-emphasize {
	from {
		box-shadow: 0px 0px 10px 0px var(--rm-white);
	}
	to {
		box-shadow: 0px 0px 20px 20px var(--theme-color);
	}
}
/* A workspace entry scrolled out of view pauses its endless animations (rm-page-workspace.js entry_visibility_observer): nobody sees them
   there, and a box-shadow animation repaints at the frame rate */
.entry-offscreen .button-emphasize-anim, .entry-offscreen .progress-bar-animated {
	animation-play-state: paused;
}
/* Our cool animated data center backdrop when logging into our cloud servers */
.data-center-1 { animation: dc-1-carousel 20s linear 0s infinite; }
@keyframes dc-1-carousel {
	0% { opacity: 0; transform: scale(1.0);	}
	20% { opacity: 0.2; }
	30% { opacity: 0; transform: scale(1.1); }
}
.data-center-2 { animation: dc-2-carousel 20s linear 5s infinite; }
@keyframes dc-2-carousel {
	0% { opacity: 0; transform: scale(1.0);	}
	20% { opacity: 0.2; }
	30% { opacity: 0; transform: scale(1.1); }
}
.data-center-3 { animation: dc-3-carousel 20s linear 10s infinite; }
@keyframes dc-3-carousel {
	0% { opacity: 0; transform: scale(1.0);	}
	20% { opacity: 0.2; }
	30% { opacity: 0; transform: scale(1.1); }
}
.data-center-4 { animation: dc-4-carousel 20s linear 15s infinite; }
@keyframes dc-4-carousel {
	0% { opacity: 0; transform: scale(1.0);	}
	20% { opacity: 0.2; }
	30% { opacity: 0; transform: scale(1.1); }
}
/* Make headers marked 'dark' transparent */
.dark .fancy-title h1, .dark .fancy-title h2, .dark .fancy-title h3, .dark .fancy-title h4, .dark .fancy-title h5, .dark .fancy-title h6 {
	background-color: transparent !important;
}
/* Create a highly responsive drag-n-drop area (part 1) */
.drag-n-drop-frame {
	transition: All var(--rm-duration-xfast) ease;
	/*transform: scale(0.95);*/
	font-size: 1.25rem;
	/*width: 80%;*/
	border: 4px dashed var(--rm-light);
	background: var(--rm-white-10);
	border-radius: var(--rm-radius) var(--rm-radius) var(--rm-radius) var(--rm-radius);
	padding: var(--rm-space-4);
}
/* Create a highly responsive drag-n-drop area (part 2) */
.drag-n-drop-frame-hover {
	/*transform: scale(1);*/
	color: var(--rm-white);
	border: 4px dashed var(--rm-white);
	background: var(--rm-white-05);
}
/* Setup enabled element appearance */
.enabled {
	pointer-events: auto;
	opacity: 1;
	transition: all var(--rm-duration-normal);
}
/* Setup disabled element appearance */
.disabled {
	pointer-events: none !important;
	opacity: 0.25 !important;
	transition: all var(--rm-duration-normal) !important;
}
/* Rows of the preset/server dropdowns (rm-dialog-jobsettings.js BuildListOption): assets/css/ui/rm-select.css since Step 3a */
/* float: right is what the closed button uses; flex items ignore it and use order in the list */
.icon-align-pencil {
	float: right;
	flex: 0 0 auto;
	order: 1;
	margin-left: 6px;
}
.icon-align-trash {
	float: right;
	flex: 0 0 auto;
	order: 2;
	margin-left: 6px;
}
/* Disable selecting text for buttons and other information sections (allow double-clicking in manage users/companies datatable) */
.block-selection, .button, .progress-bar, #datatable-manage-users, #datatable-manage-companies, #datatable-cloud-servers tbody {
	cursor: pointer;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.remove-upload-template {
	transition: all var(--rm-duration-fast);
	cursor: initial;
}
.remove-upload-template:hover {
	color: var(--rm-white);
	cursor: pointer;
}
.help-icon-tooltip:hover {
	background-color: var(--rm-mid-grey) !important;
	cursor: initial;
}
.zoom-out-effect {
	transition: all var(--rm-duration-fast);
}
/* Increase size by 15% when hovering above icon */
.zoom-out-effect:hover {
	/*text-shadow: initial !important;*/
	transform: scale(1.15);
}
.media-editor-btn {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	filter: invert(1);
	width: 50px;
	cursor: pointer;
}
#media-editor-help {
	position: absolute;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	cursor: pointer;
}
/* The position line's "Bad: xx%" while the frame shown is itself a bad frame (owner, 19 Oct 2026: "in our orange color"; rm-common.js
   SetPositionLine): the brand orange, at once (no transition) - in the workspace entry, Job Settings and the media player */
:is(.media-thumbnail-bad, #cmp-thumbnail-bad, #editor-thumbnail-bad).rm-position-bad {
	color: var(--rm-orange);
	transition: none;
}

/* Change cursor to pointer for thumbnail slider and remove blue focus border */
/* ... the keyboard's focus on them shows the accent ring (J-38: with the outline removed and no ring of their own it was invisible -
   the C-16 ring of rm-brand-states.css leaves inputs out) */
/* (the Select Keyframes saturation sliders left these on 20 Oct 2026: they look like the comparison's, .rm-saturation-bar below) */
:is(input.media-thumbnail-slider, input#cmp-thumbnail-slider, input#cmp-scene-slider, input#editor-thumbnail-slider, input#keyframes-thumbnail-slider):focus-visible {
	outline: 2px solid var(--rm-accent) !important;
	outline-offset: 3px;
}
input.media-thumbnail-slider, input#cmp-thumbnail-slider, input#cmp-scene-slider, input#editor-thumbnail-slider, input#keyframes-thumbnail-slider {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	outline: none !important;
	background: var(--rm-light);
	height: 7px;
	border-radius: var(--rm-radius);
	border-width: 0px;
}
/* The saturation bar over a picture (owner, 20 Oct 2026): the comparison's saturation preview (dialog.jobsettings.php #cmp-saturation) and
   the Select Keyframes saturation sliders (dialog.selectkeyframes.php) - label, slider, percentage and RESET on the grey of the drop-down
   lists and the filter sections (owner: "the little lighter grey like our dropdown or filter sections use"; .rm-select and .grid-frame:
   --rm-dark, a --rm-light border, --rm-radius, white text). Where it sits: each dialog's own stylesheet */
.rm-saturation-bar:not(#rm-inline) { min-width: 0; display: flex; align-items: center; gap: var(--rm-space-2); padding: var(--rm-space-1) var(--rm-space-2); border: var(--rm-border-width) solid var(--rm-light); border-radius: var(--rm-radius); background: var(--rm-dark); color: var(--rm-white); font-size: var(--rm-font-size-small); pointer-events: auto; }
.rm-saturation-bar__label:not(#rm-inline) { margin: 0; white-space: nowrap; color: inherit; }
.rm-saturation-bar__slider:not(#rm-inline) { flex: 1 1 auto; min-width: 60px; width: auto; margin: 0; }
/* no focus ring on the saturation sliders (owner, 20 Oct 2026: "remove the focus ring from all saturation slider. Don't show it" - over
   rm-base.css's input:focus outline) */
.rm-saturation-bar__slider:not(#rm-inline):focus, .rm-saturation-bar__slider:not(#rm-inline):focus-visible { outline: none !important; box-shadow: none !important; }
.rm-saturation-bar__value:not(#rm-inline) { min-width: 3.2em; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* (a portrait phone: the slider gets the label's room - the label stays for screen readers) */
@media (max-width: 543.98px) {
	.rm-saturation-bar__label:not(#rm-inline) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
/* Shadow for text on images */
.bold-shadow {
	text-shadow: 0px 0px 4px var(--rm-black), 0px 0px 4px var(--rm-black)
}
/* Shadow for non-text on images */
.bold-box-shadow {
	box-shadow: 0px 0px 8px var(--rm-black)
}
/* The 'updating' icon over a video (media player, Settings' comparison videos): progress-static.svg turned by a CSS animation,
   which the compositor runs - the SVG's own rotation (progress-transparent.svg) stood still inside Settings in Chrome on Android */
.updating-spin {
	animation: updating-spin 720ms linear infinite;
}
@keyframes updating-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
/* COLLAPSE ALL / EXPAND ALL on the left right under the header's orange line, Top Up / UPGRADE ACCOUNT PLAN on the right of
   the same row (owner, 3 Oct 2026; the header's bottom margin is the gap to the first entry) */
/* COLLAPSE ALL and EXPAND ALL share one grid cell and the hidden one keeps its width: the button never changes size */
#collapse-all-btn {
	display: inline-grid;
}
#collapse-all-btn > span {
	grid-area: 1 / 1;
}
#collapse-all-btn > span:last-child,
#collapse-all-btn.all-collapsed > span:first-child {
	visibility: hidden;
}
#collapse-all-btn.all-collapsed > span:last-child {
	visibility: visible;
}
#collapse-all-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rm-space-2);
	padding-top: var(--rm-space-3);
}
/* The plan's button stays on the right, also when a narrow window wraps it onto a line of its own */
#top-up-prepaid-section, #upgrade-account-plan-section {
	margin-left: auto;
}
@media (max-width: 767.98px) {
	/* Phones and small windows (below Bootstrap's md, where the drag-and-drop area goes too): the plan's button first, on the left right
   under the orange line, COLLAPSE ALL under it (owner, 3 Oct 2026) */
	#collapse-all-row {
		flex-direction: column;
		align-items: flex-start;
	}
	#top-up-prepaid-section, #upgrade-account-plan-section {
		order: -1;
		margin-left: 0;
	}
}
/* Temporarily disable transitions */
.notransition {
	transition: none !important;
}
/* For our inactive tab navigators */
.nav-tabs .nav-link {
	color: var(--rm-grey-99);
	background-color: var(--rm-darker);
	margin: var(--rm-space-1) var(--rm-space-1) 1px var(--rm-space-1);
	border: var(--rm-dark) solid var(--rm-border-width);
	border-bottom: transparent solid 0px;
}
/* For our active tab navigators */
.nav-tabs .nav-link.active {
	color: var(--rm-lighter);
	background-color: var(--rm-dark);
	margin: var(--rm-space-1) var(--rm-space-1) 0px var(--rm-space-1);
	border-bottom: transparent solid var(--rm-border-width);
}
/* Style our popup */
.popover {
	border: var(--rm-border-width) solid var(--rm-light);
	box-shadow: 10px 10px 50px 0px var(--rm-black-75);
	border-radius: var(--rm-radius) var(--rm-radius) var(--rm-radius) var(--rm-radius);
	margin: var(--rm-space-4);
	max-width: none;
}
.popover-body {
	color: var(--rm-lighter);
	background-color: var(--rm-dark);
	border-radius: var(--rm-radius) var(--rm-radius) var(--rm-radius) var(--rm-radius);
}
/* For our price calculator and debug trace backgrounds */
.round-container-bg {
	background-color: var(--rm-darker);
	border: var(--rm-border-width) solid var(--rm-light);
	padding: var(--rm-space-4) var(--rm-space-4) var(--rm-space-4) var(--rm-space-4);
	border-radius: var(--rm-radius) var(--rm-radius) var(--rm-radius) var(--rm-radius);
}
/* Adds soft shadow for images and videos boxes */
.box-shadow {
	border: var(--rm-border-width) solid var(--rm-light) !important;
	box-shadow: 10px 10px 50px 0px var(--rm-black-75) !important;
	border-radius: var(--rm-radius) var(--rm-radius) var(--rm-radius) var(--rm-radius) !important;
}
/* Creates a nice and smooth frame for images and video boxes */
.box-frame {
	border-radius: var(--rm-radius) var(--rm-radius) var(--rm-radius) var(--rm-radius) !important;
	border: var(--rm-border-width) solid var(--rm-light) !important;
}
.lightgallery-container {
	position: relative;
	width: fit-content;
	display: inline-block;
}
.lightgallery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: All var(--rm-duration-fast) ease;
	background-color: var(--rm-black);
	border-radius: var(--rm-radius);
}
.lightgallery-container > img { border-radius: var(--rm-radius); height: auto; }	/* (height: the width/height attributes reserve the space only - SEO review #8) */
.lightgallery-container > .lightgallery-image {
	position: absolute;
	left: 50%;
	top: 50%;
	opacity: 0;
	font-size: 2rem;
	color: var(--rm-white);
	transition: All var(--rm-duration-fast) ease;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.lightgallery-video {
	position: absolute;
	left: 50%;
	top: 50%;
	font-size: 2rem;
	color: var(--rm-white);
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.lightgallery-overlay:hover { opacity: 0.8; }
.lightgallery-container:hover > .lightgallery-image { opacity: 1.0; }
/* CSS to get footer correctly placed */
.footer {
	position: absolute !important;
	bottom: 0 !important;
	width: 100% !important;
	--rm-footer-bg: var(--rm-grey-28);		/* (the literal #292929 until J-42) */
	background: var(--rm-footer-bg) !important;
	font-family: var(--rm-font-family);
	line-height: 1.8;
	font-weight: normal;
	font-size: var(--rm-font-size-xsmall);
	padding-top: var(--rm-space-2) !important;
	padding-bottom: var(--rm-space-4) !important;
}
/* Extra small devices (portrait phones, less than 544px)
 No media query since this is the default in Bootstrap */
h1, .h1-size { font-size: 1.25rem; font-family: var(--rm-font-family); line-height: 1.75rem; letter-spacing: var(--rm-letter-spacing); }
/* (SEO review #4, 15 Oct 2026) a lower heading level that keeps the H1 look - the Services page's filter groups became H3 under the page's
   one H1: the weight and the space below of h1/h2 (h3 is bold with 15 px below, rm-base.css) */
h3.h1-size { font-weight: 600; }
h3.h1-size:not(.fancy-title *) { margin-bottom: var(--rm-space-5); }
/* (owner, 15 Oct 2026) the Services page's filter samples line up: each filter card is a column with its sample at the foot, so the
   samples of a row share one line whatever the length of the list above them (the cards of a row are as tall as the tallest; every
   sample is 90% of a card as wide as the others). Stacked on a phone, a card is as tall as its content: nothing moves there */
.rm-filter-card { display: flex; flex-direction: column; }
.rm-filter-card > .lightgallery { margin-top: auto; }
/* Set file entry to 100% of container size */
.file-entry-class { width: 100%; }
/* A folded entry (COLLAPSE ALL, or a click on its title bar: Bootstrap gives the title bar .collapsed) has a third of the space to the
   next entry (owner, 18 Oct 2026). Below 1200 px the space is the entry's bottom margin: 30 px (.bottommargin-sm) -> 10 px. From 1200 px
   it is the entry's 25 px bottom padding + 30 px margin + the next entry's 25 px top padding = 80 px -> 8.33 + 10 + 8.33 = 26.67 px
   between two folded entries (the next one's top padding only shrinks when it is folded too). An open entry keeps its spacing */
.file-entry-class:has(> .file-entry-header.collapsed) { margin-bottom: calc(var(--rm-space-5) / 3) !important; }
@media (min-width: 1200px) {
	.file-entry-class:has(> .file-entry-header.collapsed) { padding-bottom: calc(25px / 3); }
	.file-entry-class:has(> .file-entry-header.collapsed) + .file-entry-class:has(> .file-entry-header.collapsed) { padding-top: calc(25px / 3); }
}
#myModalMask > .modal-dialog {
	max-width: 95%;
}
@media (min-width: 544px) {
	/* Small devices (landscape phones, 544px and up) */
	.modal-title, .file-entry-header { font-size: 1.2rem;	}
	.body-text {
		font-size: 1.25rem;
		font-family: var(--rm-font-family);
	}
	.body-text-small, .modal {
		font-size: var(--rm-font-size-title);
		font-family: var(--rm-font-family);
	}
	.very-small-body-text {
		font-size: var(--rm-font-size-xsmall);
		font-family: var(--rm-font-family);
	}
	.my-warning-sign {
		font-size: 2.5rem;
	}
	h1, .h1-size { font-size: 1.5rem; font-family: var(--rm-font-family); line-height: 2.5rem; }
}
@media (min-width: 768px) {
	/* Medium devices (tablets, 768px and up) */
	.content-wrap { padding-top: var(--rm-space-8); }
	h1, .h1-size { font-size: 2rem; font-family: var(--rm-font-family); line-height: 2.5rem; }
	.overlay-text {
		font-size: 1.2rem;
		padding-top: var(--rm-space-1);
		padding-left: var(--rm-space-3);
	}
	.overlay-help {
		font-size: 1.2rem;
	}
}
/* All elements of our workspace file entries */
.my-thumbnail { grid-area: thumbnail; }
.my-media { grid-area: media; }
.my-buttons { grid-area: buttons; }
.my-scene { grid-area: scene; }
.my-status { grid-area: status; }
.my-settings { grid-area: settings; }
.my-slider { grid-area: slider; }
/* Extra small devices (portrait phones, less than 544px)
 No media query since this is the default in Bootstrap */
.grid-container-workspace {
	display: grid;
	overflow: visible;
	grid-template-areas:
		'thumbnail'
		'slider'
		'scene'
		'media'
		'status'
		'settings'
		'buttons';
	grid-template-columns: 100%;
	grid-template-rows: auto;
	grid-gap: 10px;
	padding: 0;
}
@media (min-width: 992px) {
	/* Large devices (desktops, 992px and up) */
	.grid-container-workspace {
		display: grid;
		overflow: visible;
		grid-template-areas:
			'thumbnail spacer-1 media media'
			'thumbnail spacer-1 scene scene'
			'thumbnail spacer-1 settings settings'
			'spacer-2 spacer-2 spacer-2 spacer-2'
			'buttons spacer-4 status status'
			'spacer-3 spacer-3 spacer-3 spacer-3'
			'slider slider slider slider';
		grid-template-columns: 510px 0px 174px 174px;
		grid-template-rows: 125px 143px 95px 0px auto auto auto;
		grid-gap: 10px;
		padding: 0;
	}
	.container {
		width: 100%;
	}
}
@media (min-width: 1200px) {
	/* Extra large devices (large desktops, 1200px and up) */
	.grid-container-workspace {
		display: grid;
		overflow: visible;
		grid-template-areas:
			'thumbnail spacer-1 media buttons'
			'thumbnail spacer-1 scene status'
			'thumbnail spacer-1 settings settings'
			'spacer-2 spacer-2 spacer-2 spacer-2'
			'slider slider slider slider';
		grid-template-columns: 500px 0px 318px 190px;
		/*grid-template-rows: 135px 142px 78px 0px auto;*/
		grid-template-rows: auto 142px 78px 0px auto;
		grid-gap: 10px;
		padding: 0;
	}
	.file-entry-class {
		min-width: 1130px;
		width: 1130px;
		margin: auto;
		display: inline-block;
		padding: 25px;
	}
	#my-upload-new-file {
		padding-left: 25px;
		padding-right: 25px;
	}
	#myModalMask > .modal-dialog {
		width: 1100px;
	}
	.overlay-text {
		font-size: 1.5rem;
		padding-top: var(--rm-space-1);
		padding-left: var(--rm-space-3);
	}
	.overlay-help {
		font-size: 1.5rem;
	}
}
@media (min-width: 1720px) {
	/* Extra large devices (large desktops, 1720px and up) */
	#myModalMask > .modal-dialog {
		width: 75%;
	}
	.my-account-menu {
		margin-left: 10vw;
	}
}
/* >>> fix-phone-layout */
/* Phones (5 Oct 2026, owner's phone check) */
/* Mask dialog: the controls of the crop rectangle, moved below the picture by rm-dialog-mask.js (MaskControlsPlace), stacked in this
   order (owner, 5 Oct 2026): the selection size right below the picture, the letterboxing switch under it (both left-aligned with
   the controls below), then the two drop-downs (full width) and RESET AUTO CROP */
#mask-controls-below {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: var(--rm-space-3) 0 0;
}
#mask-controls-below.hidden { display: none; }
#mask-controls-below > .my-flex-row { display: contents; }
#mask-controls-below .my-stretch-squeeze { order: 3; }
#mask-controls-below .my-crop-ratio { order: 4; }
#mask-controls-below .my-stretch-squeeze,
#mask-controls-below .my-crop-ratio {
	margin: 0 !important;
}
#mask-controls-below .rm-select {
	width: 100% !important;
}
#mask-controls-below .overlay-text {
	order: 1;
	align-self: flex-start;
	margin: 0 0 var(--rm-space-2) !important;
	padding: 0 !important;
	text-align: left;
	white-space: normal !important;
}
#mask-controls-below .checkbox-inline {
	order: 2;
	align-self: flex-start;
	margin: 0 0 var(--rm-space-3);
}
#mask-controls-below #reset-auto-crop-btn {
	order: 5;
	align-self: flex-start !important;
	margin: 0 0 var(--rm-space-3) !important;
}
#mask-controls-below .checkbox-inline label {
	margin-top: 0 !important;
	margin-left: 0 !important;
}
@media (max-width: 767.98px) {
	/* Administrator Tools, the users of the company: on phones one compact block per user, the switch on the left, the full name on one
   line, e-mail and country below it (each field had its own 200-300 px wide line before); all in the dialog's normal text size
   (owner, 5 Oct 2026: the e-mail and country were .85em, smaller than the rest of the site) */
	#my-user-listing-dom .my-business-user {
		display: grid;
		grid-template-columns: auto auto 1fr;
		column-gap: .3em;
		align-items: baseline;
		margin: var(--rm-space-2) var(--rm-space-3) var(--rm-space-3);
	}
	#my-user-listing-dom .my-business-user > div {
		margin: 0 !important;
		width: auto !important;
		min-width: 0;
	}
	#my-user-listing-dom .my-business-user > div:nth-child(1) { display: contents; }
	#my-user-listing-dom .my-business-user .switch { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
	#my-user-listing-dom .my-business-user .switch label { margin-right: 6px !important; }
	#my-user-listing-dom .my-business-user .user-first-name { grid-column: 2; grid-row: 1; }
	#my-user-listing-dom .my-business-user > div:nth-child(2) { grid-column: 3; grid-row: 1; }
	#my-user-listing-dom .my-business-user > div:nth-child(3),
	#my-user-listing-dom .my-business-user > div:nth-child(4) {
		grid-column: 2 / span 2;
		overflow-wrap: anywhere;
	}
	#my-user-listing-dom .my-business-user > div:nth-child(3) { grid-row: 2; }
	#my-user-listing-dom .my-business-user > div:nth-child(4) { grid-row: 3; }
	#my-user-listing-dom .my-business-user > div:nth-child(5) { display: none; }
}
@media (max-width: 575.98px) {
	/* Create Account on phones (owner, 5 Oct 2026): the buttons sat beside the terms text and squeezed it; now the text has the full
   width and CANCEL / CREATE ACCOUNT are full width below it, one under the other (both modes since 7 Oct 2026) */
	#myModalCreateAccount .modal-footer { flex-direction: column; align-items: stretch; }
	#myModalCreateAccount .modal-footer > * { width: 100%; margin: 0 0 var(--rm-space-2) !important; }
	#myModalCreateAccount .modal-footer > :last-child { margin-bottom: 0 !important; }
	/* Edit User (owner) on phones: DELETE ACCOUNT... stuck out of the dialog on the left (at 320 px from -68 px, J-20); it takes the
	   footer's first line, CANCEL / SAVE USER the line below it */
	#myModalAddEditUser .modal-footer { flex-wrap: wrap; row-gap: var(--rm-space-2); }
	#myModalAddEditUser .modal-footer > #delete-account-btn { flex: 1 0 100%; margin: 0 !important; }
}

/* My Account > Connected Apps (dialog.connectedapps.php, Step 5, 6 Oct 2026): the apps signed in to the account */
#myModalConnectedApps .modal-body > p, #myModalConnectedApps .modal-body > div { margin-bottom: var(--rm-space-3); }
#myModalConnectedApps .connected-apps-table { color: var(--rm-text-on-dark); }
#myModalConnectedApps .connected-apps-table td { vertical-align: top; }
#myModalConnectedApps .connected-apps-detail { color: var(--rm-text-light); font-size: var(--rm-font-size-small); }
#myModalConnectedApps .connected-apps-name { min-width: calc(15rem - 15px); margin-bottom: var(--rm-space-1); }	/* "Premiere Pro on Windows" fits (owner, 10 Oct 2026) */
/* the owner's widths (10 Oct 2026): App and Last used twice their natural 107 / 116 px - the dialog grows to fit (up to 96 % of the
   window; a narrower window scrolls the table sideways inside the dialog, phones stack the rows as below) */
#myModalConnectedApps .modal-dialog { max-width: min(1070px, 96vw); }
@media (min-width: 1100px) {
	#myModalConnectedApps .connected-apps-table thead th:nth-child(1) { min-width: 240px; width: 240px; }
	#myModalConnectedApps .connected-apps-table thead th:nth-child(4) { min-width: 232px; }
}
#myModalConnectedApps .connected-apps-actions { white-space: nowrap; }
#myModalConnectedApps .connected-apps-actions .btn { margin: 0 0 var(--rm-space-1) var(--rm-space-1); }
/* phones: one block per app (no sideways scrolling table) */
@media (max-width: 767.98px) {
	#myModalConnectedApps .connected-apps-table thead { display: none; }
	#myModalConnectedApps .connected-apps-table tr, #myModalConnectedApps .connected-apps-table td { display: block; width: 100%; }
	#myModalConnectedApps .connected-apps-table td { border: 0; padding: var(--rm-space-1) 0; }
	#myModalConnectedApps .connected-apps-table tr { border-bottom: var(--rm-border-width) solid var(--rm-dark); padding: var(--rm-space-2) 0; }
	#myModalConnectedApps .connected-apps-actions .btn { margin: 0 var(--rm-space-1) 0 0; }
}

/* connect.php: an app's browser sign-in (Step 5) */
.connect-card { max-width: 40rem; }
.connect-details { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--rm-space-3); row-gap: var(--rm-space-1); margin-bottom: var(--rm-space-3); }
.connect-details dt { font-weight: var(--rm-font-weight-bold); }
.connect-details dd { margin: 0; overflow-wrap: anywhere; }
.connect-code { max-width: 12rem; margin-bottom: var(--rm-space-3); text-transform: uppercase; letter-spacing: 0.1em; }
.connect-buttons { display: flex; gap: var(--rm-space-2); flex-wrap: wrap; }


/* ---- Step 7 (6 Oct 2026): the classes of the former style="..." attributes (dialogs, the workspace, the public pages; rm-u-* utilities are in rm-utilities.css) ---- */
.rm-aboutus__column:not(#rm-inline) { flex: 1 1 200px; display: flex; flex-direction: column; justify-content: flex-end; }	/* the fields at the columns' bottom: the Website label's row with its paste button put its field ~9 px higher (W-372) */
.rm-aboutus__photo:not(#rm-inline) { border: var(--rm-border-width) solid var(--rm-light); border-radius: 0.3rem; margin-top: 8px; height: auto; }
.rm-anchor-offset:not(#rm-inline) { padding-top: 70px; margin-top: -70px; }
.rm-center-translate:not(#rm-inline) { transform: translate(-50%, -50%); }
.rm-datacenter__countdown:not(#rm-inline) { right: 3%; font-size: 4rem; }
.rm-datacenter__logo:not(#rm-inline) { left: 3%; width: 10em; }
.rm-datacenter__message:not(#rm-inline) { bottom: 3%; font-size: 4vw; }
.rm-divider:not(#rm-inline) { border-style: solid; border-color: var(--rm-dark); border-width: var(--rm-border-width); }
.rm-form__field:not(#rm-inline) { width: 200px; margin: var(--rm-space-3); flex-grow: 1; }
.rm-form__field--narrow:not(#rm-inline) { width: 180px; }
.rm-mask__label:not(#rm-inline) { color: var(--rm-white); text-shadow: 0px 0px 4px var(--rm-black); }
.rm-mask__rectangle:not(#rm-inline) { left: 25%; top: 25%; border: 2px solid var(--theme-color); border-radius: var(--rm-radius-sm); }
.rm-mask__shade--bottom:not(#rm-inline) { border-bottom-left-radius: var(--rm-radius); border-bottom-right-radius: var(--rm-radius); }
.rm-mask__shade--left:not(#rm-inline) { border-top-left-radius: var(--rm-radius); border-bottom-left-radius: var(--rm-radius); }
.rm-mask__shade--right:not(#rm-inline) { border-top-right-radius: var(--rm-radius); border-bottom-right-radius: var(--rm-radius); }
.rm-mask__shade--top:not(#rm-inline) { border-top-left-radius: var(--rm-radius); border-top-right-radius: var(--rm-radius); }
.rm-modal--raised:not(#rm-inline) { z-index: var(--rm-z-stacked); }
.rm-modal--stacked:not(#rm-inline) { backdrop-filter: brightness(0.5); }
.rm-modal--top:not(#rm-inline) { z-index: var(--rm-z-top); }
.rm-server__field--host:not(#rm-inline) { flex-basis: 30%; flex-grow: 3; }
.rm-server__field--port:not(#rm-inline) { flex-basis: 10%; }
.rm-server__key-label:not(#rm-inline) { font-size: var(--rm-font-size-xsmall); letter-spacing: var(--rm-letter-spacing); text-transform: uppercase; color: var(--rm-link-on-dark); }	/* (12 px on the dark dialog: the orange was 3.62:1 - J-36) */
.rm-server__key-value:not(#rm-inline) { font-family: Consolas, Menlo, monospace; font-size: var(--rm-font-size-small); color: var(--rm-white); word-break: break-all; margin-top: var(--rm-space-1); }
.rm-server__key-note:not(#rm-inline) { font-size: 0.8rem; margin-top: var(--rm-space-1); }
.rm-shadow-text:not(#rm-inline) { text-shadow: 0px 0px 4px var(--rm-black); }
.rm-shadow-text--soft:not(#rm-inline) { text-shadow: 0px 0px 2px var(--rm-black); }
.rm-thumbnail--empty:not(#rm-inline) { background: var(--rm-light) center no-repeat; }
.rm-thumbnail--error:not(#rm-inline) { background: var(--rm-light) url('/assets/images/error.png') center no-repeat; }
.rm-thumbnail--loading:not(#rm-inline) { background: var(--rm-light) url('/assets/images/loading.gif') center no-repeat; }
.rm-twofactor__qr-code:not(#rm-inline) { background: var(--rm-light) url('/assets/images/loading.gif') center no-repeat; padding-top: 50%; }
.rm-users__company-name:not(#rm-inline) { border-bottom: 2px solid var(--theme-color); }
.rm-workspace__alert:not(#rm-inline) { font-size: xx-large; }
.rm-workspace__disk-bar:not(#rm-inline) { margin-top: 3px !important; margin-right: var(--rm-space-2) !important; }
.rm-workspace__drop-area:not(#rm-inline) { line-height: 3.2rem; }
.rm-workspace__entry-body:not(#rm-inline) { border: var(--rm-border-width) solid var(--rm-light); }
.rm-workspace__entry-btn:not(#rm-inline) { margin-bottom: 14px; }
.rm-workspace__entry-btn--wide:not(#rm-inline) { margin-bottom: 12px; }
.job-start-btn.rm-test-job-used:not(#rm-inline) { opacity: 0.65; cursor: not-allowed; white-space: normal; }	/* START TRIAL JOB used up this month, Ctrl held (rm-page-workspace.js TestJobArm) */
.rm-workspace__template-entry:not(#rm-inline) { flex: 40%; }

/* ---- The payment dialog (dialog.payment.php; 7 Oct 2026: Braintree's Hosted Fields, 3-D Secure 2 and PayPal's button instead of the
   deprecated Drop-in). The card's fields are Braintree's frames inside boxes of ours that look like the dialog's other fields; inside the
   frames only the text is styled (rm-dialog-payment.js PaymentCreateHostedFields) -------------------------------------------------- */
.rm-pay-card { display: flex; flex-wrap: wrap; }
.rm-pay-card__number { flex: 2 1 15rem; min-width: 0; }
.rm-pay-card__expiry,
.rm-pay-card__cvv { flex: 1 1 7rem; min-width: 0; }
.rm-pay-card label { cursor: text; }
.rm-pay-field { padding-top: 0; padding-bottom: 0; overflow: hidden; }			/* (the frame fills the box) */
#myModalPayment .rm-pay-field.braintree-hosted-fields-focused { background-color: var(--rm-black-30); border-color: var(--rm-grey-99) !important; }
#myModalPayment .rm-pay-field.rm-pay-field--error,
#myModalPayment .rm-pay-field.braintree-hosted-fields-invalid { border-color: var(--rm-field-error) !important; }
.rm-pay-error { color: var(--rm-field-error); }

/* "or pay by card" between PayPal's button and the card, with a line on either side */
.rm-pay-or {
	display: flex;
	align-items: center;
	gap: var(--rm-space-2);
	color: var(--rm-light);
	font-size: var(--rm-font-size-small);
}
.rm-pay-or::before,
.rm-pay-or::after {
	content: '';
	flex: 1;
	border-top: var(--rm-border-width) solid var(--rm-dark);
}
.rm-pay-paypal { min-height: 40px; }
.rm-pay-paypal--busy { pointer-events: none; opacity: 0.5; }		/* (while a payment is on its way, as PURCHASE) */

/* The bank's 3-D Secure challenge: its page on white, as wide as the dialog */
.rm-pay-3ds__text { margin-bottom: var(--rm-space-2); color: var(--rm-lighter); }
.rm-pay-3ds__frame { background-color: var(--rm-white); border-radius: var(--rm-radius); overflow: hidden; }
.rm-pay-3ds__frame iframe { display: block; width: 100% !important; max-width: 100%; min-height: 400px; border: 0; }

/* ---- Copy and paste buttons (owner, 6 Oct 2026; helperfunctions.php ClipboardButton(), rm-common.js) ------------------------------
   The icon of the original site just above the field it acts on, at the right end of the label's line (or of a code block's head) */
.rm-clip-row {
	display: flex;
	min-height: calc(1.75rem + 2px);			/* the same height with the button hidden (sweep round 4, W-65) */
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--rm-space-2);
}

.rm-clip-row--end { justify-content: flex-end; }

.connect-card .rm-clip-row { max-width: 12rem; }			/* just above connect.php's 12rem code field (W-64) */

.rm-clip-row label { margin-bottom: 0; }

.rm-clip-btn {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	margin: 0 0 2px;
	padding: 0;
	border: var(--rm-border-width) solid transparent;
	border-radius: var(--rm-radius);
	background: transparent;
	color: var(--rm-light);
	font-size: var(--rm-font-size-small);
	line-height: 1;
	cursor: pointer;
	transition: color var(--rm-duration-fast), border-color var(--rm-duration-fast);
}

.rm-clip-btn:hover {
	border-color: var(--rm-white-20);
	color: var(--rm-link-on-dark);		/* (the orange was 3.62:1 on the dark dialogs - J-36) */
}

.rm-clip-btn:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 2px var(--rm-accent);		/* (the accent at full strength: the orange at 50 % was 1.6-1.9:1 - JS plugins sweep, C-33) */
}

.rm-clip-btn--done,
.rm-clip-btn--done:hover { color: var(--rm-orange); }

.rm-clip-btn i { margin: 0; }

.rm-clip-btn--on-light { color: var(--rm-mid-grey); }			/* on a light page (the partner application form) */

.rm-no-clipboard-read .rm-clip-btn[data-rm-paste] { display: none; }

/* ---- Administrator Tools: the sections' one-line explanations and the Connected Apps list (owner, 6 Oct 2026) -------------------- */
.rm-admin-section__intro {
	margin: 0 var(--rm-space-3) var(--rm-space-2);
	color: var(--rm-light);
}

/* API Key and Secret, Webhook Signing Key: fields and buttons from the left, under their own titles (owner, 6 Oct 2026) */
.rm-admin-group > .my-flex-row { justify-content: flex-start; align-items: flex-end; }
/* (the fixed-width field columns never wider than the dialog: on a phone the API secret's field and copy button were cut off - sweep
   round 6, W-81; the id outweighs the width utilities' :not(#rm-inline)) */
#myModalAdministratorTools .my-flex-row > [class*="rm-u-w-"] { max-width: calc(100% - 2 * var(--rm-space-3)); }	/* (every column: W-101) */
/* the try-our-service receipt fields on a small phone (300 px + margins was wider than the dialog: W-102) */
#myModalPayment #try-service-info > .rm-u-minw-300px { min-width: min(300px, calc(100% - 2 * var(--rm-space-3))); }

.rm-admin-apps { margin: 0 var(--rm-space-3); }

.rm-admin-apps__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rm-space-1) var(--rm-space-3);
	padding: var(--rm-space-2) 0;
	border-bottom: var(--rm-border-width) solid var(--rm-dark);
}

.rm-admin-apps__name { min-width: 10rem; }

.rm-admin-apps__email {
	flex: 1 1 14rem;
	min-width: 0;
	overflow-wrap: anywhere;
}

.rm-admin-apps__count { color: var(--rm-light); }

/* Job Settings' title ("Displaying 262x147 (26% of original) name") on a phone: cut with an ellipsis, not mid-letter (JS plugins sweep
   round 6, C-37) */
#modal-title-normal-size { text-overflow: ellipsis; }

/* the start page's ticked lines: on phones their column takes the frame's full width (it kept its 250 px minimum, and at 320 px the
   longest line ran over its edge; C-38) */
@media (max-width: 575.98px) {
	.grid-frame .rm-u-flex > .rm-u-minw-250px.rm-u-w-50:not(#rm-inline) { width: 100%; min-width: 0; }
}