/**
 * 1. Prevent adjustments of font size after orientation changes in iOS.
 * 2. Softer tap flash on touch screens.
 */

html {
  -webkit-text-size-adjust: 100%; /* 1 */
  text-size-adjust: 100%; /* 1 */
  -webkit-tap-highlight-color: var(--ui-hover); /* 2 */
}

/**
 * Long words and URLs wrap instead of overflowing their box.
 */

body {
  margin: 0;
  overflow-wrap: break-word;
}

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

/**
 * `list-item` keeps the disclosure triangle of `summary` in modern browsers.
 */

summary {
  display: list-item;
  cursor: pointer;
}

/**
 * Hidden elements stay hidden.
 */

template,
[hidden] {
  display: none;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}


/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Dotted underline for abbreviations with a title.
 */

abbr[title] {
  border-bottom: none;
  text-decoration: underline dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Monospace for code and an odd `em` font sizing fix in all browsers.
 */

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 1em;
}

/**
 * Prevent `sub` and `sup` from affecting the line height.
 */

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

/**
 * Videos never overflow their container.
 */

video {
  max-width: 100%;
}


/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}


/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}


/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}


/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}



/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}


/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Controls that are clicked get the pointer cursor.
 */

label[for],
select,
[role="button"],
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="range"],
input[type="color"] {
  cursor: pointer;
}


/**
 * Disabled controls show that they can't be used.
 */

button[disabled],
html input[disabled],
select[disabled],
textarea[disabled] {
  cursor: not-allowed;
}

/**
 * Native checkboxes, radios, ranges and progress bars use the site accent.
 */

input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: var(--ui-accent);
}


/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}


/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

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

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 * 3. Remove the inner padding in Chrome and Safari on macOS.
 */

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

/**
 * File input buttons inherit the font.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
::file-selector-button {
  font: inherit;
  cursor: pointer;
}

/**
 * The same placeholder colour in every browser (Firefox fades it by default).
 */

::placeholder {
  color: var(--ui-placeholder);
  opacity: 1;
}


/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
  vertical-align: middle;
}


/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid var(--ui-border);
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}


/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}


/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
  resize: vertical;
}


/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}


/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}







form{
	padding:0px;
}

a:hover {
	text-decoration: none;
}


html, body {
  height: 100%; 
}
body.mce-content-body {
  height: auto; 
}

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

html,
body {
  font-size: 13px; 
}
/**
 * Focus ring for keyboard users only: a mouse click shows no outline, as before.
 */

:focus:not(:focus-visible) {
    outline: 0;
}
:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-offset: 0;
}
html:focus-visible,
body:focus-visible {
    outline: 0;
}

h1, h2, h3, h4, h5, h6
{
	margin: 0.4em 0px;
	font-weight: normal;
    line-height: 1.3;
}
h1
{
	font-size: 3rem;
}
h2
{
	font-size: 2.5rem;
}
h3
{
	font-size: 2rem;
}
h4
{
	font-size: 1.7rem;
}
h5
{
	font-size: 1.5rem;
}
h6
{
	font-size: 1.2rem;
}

/**
 * Users who ask for less motion get (almost) none.
 */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}/*
	Design tokens shared by the core styles and the features. Themes may override any of them.
	The rule for a feature's CSS: no colour of its own. It uses var(--ui-…) as it is, and a variable of its own only as an
	alias of one (--be-accent: var(--ui-accent)), as box_editor.css does. admin/dev/lint.php reports an undefined
	--ui-… token and a raw colour in the CSS a branch changes.

	Breakpoints (a media query cannot read a variable, so they are written as numbers): the admin's CSS uses
		max-width: 480px    small phones
		max-width: 675px    phones (basic/responsive.css: one column, a button a line)
		max-width: 850px    tablets
		max-width: 1100px   small desktops and tablets on their side: a side column goes above or below its content
		min-width: 1280px   a wide screen (as wide as kPreview()'s desktop)
	and min-width one pixel above the first four (481, 676, 851, 1101). A feature that needs another width rounds it up
	to the next of these: its narrow layout then covers a few more widths and nothing is squeezed. The website's themes
	and templates, the full screen builders (the slider's) and the site's menus (basic/menu.css, with core/menu.js) keep
	theirs. A part that sits in panels of any width answers to its own width with a
	container query instead: the stat tiles (.uiStats), a card of a grid (uiCard), the page head (uiPageHead):
	components.css, page_header.css. admin/dev/lint.php lists the other widths in the CSS a branch changes.
*/
:root
{
	--ui-accent: #006dcc;
	--ui-accent-hover: #0059a8;
	--ui-accent-soft: #e8f1fb;
	--ui-text: #1f2937;
	/* headings and the values of stat tiles */
	--ui-text-strong: #111827;
	--ui-muted: #5b6472;
	--ui-border: #d9dde3;
	/* the lines inside a box (between rows, under a card's head) */
	--ui-border-soft: #e7eaee;
	--ui-border-strong: #b8bec7;
	/* the border of a field a hand uses (a select, an input, on hover) */
	--ui-border-input: #9aa1ab;
	--ui-soft: #f3f4f6;
	--ui-surface: #ffffff;
	/* text and icons on a coloured fill: the accent, a tone, a solid badge (a dark theme keeps it light) */
	--ui-on-accent: #ffffff;
	/* a surface a little darker than the page's: a box's head, a quiet panel, a code line */
	--ui-surface-muted: #f6f7f9;
	/* a hover over any surface (a row, a close button), and what is behind a dialog or a panel */
	--ui-hover: rgba(15, 23, 42, 0.06);
	--ui-backdrop: rgba(15, 23, 42, 0.45);
	/* a dark band over a photo, and the text on it */
	--ui-scrim: rgba(0, 0, 0, 0.7);
	--ui-on-scrim: #ffffff;
	/* a rating's stars */
	--ui-star: #f5a623;
	--ui-danger: #c02a2a;
	--ui-danger-soft: #fdeeee;
	--ui-success: #157347;
	--ui-success-soft: #e8f6ee;
	--ui-warning: #b54708;
	--ui-warning-soft: #fef0e2;
	--ui-info: #0b5cad;
	--ui-info-soft: #e3effc;
	/* hues for categories with no meaning of their own (a group, a type): badges */
	--ui-purple: #6b3fb5;
	--ui-purple-soft: #f1ebfc;
	--ui-cyan: #0e7490;
	--ui-cyan-soft: #e0f6fa;
	--ui-yellow: #8a6100;
	--ui-yellow-soft: #fff6d6;
	--ui-radius: 6px;
	--ui-radius-lg: 10px;
	/* the height of one-line inputs, selects and the controls that sit beside them (themes may change it) */
	--ui-control-height: 2.6rem;
	--ui-focus: #3b8eea;
	--ui-placeholder: #8a9099;
	--ui-switch-off: #c5cad3;
	/* the switch's size wherever it is (a form, a list, a bar); -sm in a dense toolbar */
	--ui-switch-w: 3rem;
	--ui-switch-h: 1.7rem;
	--ui-switch-w-sm: 2.3rem;
	--ui-switch-h-sm: 1.3rem;
	--ui-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.3);
	--ui-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
	--ui-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.18);
}
.nfloat, .nPostImage
{
	float:left;
}
.float, .postImage, .FirstChar, .column
{
	float:right;
}
.postImage
{
	margin: 0px 0px 10px;
	margin-left: 20px;
}
.postImageLeft
{
	float: left;
	margin: 0px 20px 10px 0px;
}
.postImageRight
{
	float: right;
	margin: 0px 0px 10px 20px;
}
.nPostImage
{
	margin: 0px 0px 10px;
	margin-left: 20px;
}

/*
	Class Of the wrapper div
*/
.videoContainer {
    position: relative;
    padding-top: 60.8%; 
	height: 0; 
    padding-bottom: 4px; 
	overflow: hidden;
}
/*
	Class Of the wrapper div
*/
.videoContainer iframe,
.videoContainer object,
.videoContainer embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.defaultPlaceholder
{
	position: relative;
	background: #FDFCE9;
	display: inline-block;
	vertical-align: top;

}
.inlineBlock
{
	display: inline-block;
	vertical-align: top;
}
.inlineBlockMiddle
{
	display: inline-block;
	vertical-align: middle;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
	width: 100%;
}
 
html[xmlns] .clearfix {
	display: block;
}
p
{
	margin: 0px;
}



.map-canvas
{
	background: #e5e3df;
	min-height: 20px;
}
.map-canvas img
{
	max-width: none;
}

/** 
	To load images (On page load)
*/

.imageContainer
{
	background: #eeeeee;
	font-size: 0px;
}
.imageContainer.transparentImageContainer
{
	background: none;
	border: 0px none;
}
img.toLoad
{
	position: relative;
}
img.croppedImage
{
	width: 100%;
}
.imageContainer img.toLoad
{
	border: none !important;
}
.imageContainer img
{
	position:absolute;
    left:0; 
    right:0;
    top:0; 
    bottom:0;
    margin:auto;
    max-width:100%;
    max-height:100%;
    overflow:auto;
}
/* Native image loading (IMAGES_NATIVE_LOADING): the image fits its container as convertToLoadImages() fits a toPosition one */
.imageContainer img.toPosition:not(.toLoad)
{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.keepRatioWrapper, .imageContainer {
    display: inline-block;
	vertical-align: top;
    position: relative;
	width: 100%;
}
.squareImage.keepRatioWrapper:after, .squareImage.imageContainer:after {
	padding-top: 100%; /* Square */
}
._34Image.keepRatioWrapper:after, ._34Image.imageContainer:after, .youtubeImageContainer.keepRatioWrapper:after, .youtubeImageContainer.imageContainer:after {
	padding-top: 75%; /* 75% */
}
.keepRatioWrapper:after, .imageContainer:after {
    padding-top: 60.80%; /* Golden Ratio*/
    display: block;
    content: '';
}
.keepRatio, .imageContainer img {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
}


.FirstChar
{
	margin-left: 3px;
	font-size: 30px;
}

.noty_bar.noty_layout_topLeft .noty_message, 
.noty_bar.noty_layout_topRight .noty_message,
.noty_bar.noty_layout_bottomLeft .noty_message,
.noty_bar.noty_layout_bottomRight .noty_message {
	text-align: right;
}

.elementsButton
{
	float: left;
	margin-right: 5px;
	cursor: pointer;
}
.elementsButtonsArea
{
	float: left;
	width: 100%;
}
/* the page's main action ('primary'): first, on the side the page starts from */
.elementsButtonsArea .elementsButtonPrimary
{
	float: right;
	margin-right: 0;
	margin-left: 5px;
}
.aspectRatioLabel
{
	display: block;
	margin-top: 2px;
	color: var(--ui-muted);
	font-size: 0.75rem;
	text-align: center;
}
/* phones: the shapes four on a line (a grid column is the full width there: each shape was as wide as the screen) */
@media (max-width: 480px)
{
	.radioDiv.aspectRatioOption.col1
	{
		width: calc(25% - 10px);
	}
}



.lightShadow
{
	box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
}
.shadow{
	box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
	border: 1px solid #CCCCCC;
}
fieldset legend
{
	font-size: 18px;
	top: -13px;
	position: absolute;
	font-weight: bold;
}
fieldset
{
	padding: 1.25rem;
	margin: 1.5rem 0 0.5rem;
	border-width: 0px;
	box-shadow: 1px 1px 3px rgba(34, 25, 25, 0.4);
	position: relative;
	display: table-cell;
	min-width: 0;
	width: 100%;
}

.bold{
	font-weight:bold;
}
.italic{
	font-style:italic;
}
.hidden{
	display:none;
}
/* Hidden on screen, still read by screen readers */
.srOnly
{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.positionAway
{
	position: absolute;
	right: -9999px;
}
.pointer{
	cursor:pointer;
}
.clear{
	clear:both;
	line-height: 0px;
	height: 0px;
	display: block;
}

.ltr{
	direction:ltr;
}
.rtl{
	direction:rtl;
}

.right{
	float:right;
}
.left{
	float:left;
}
.float
{
	float: right;
}
.nfloat
{
	float: left;
}
ul{
	margin:5px 0px;
}




div.mce-tinymce {
	width: 100% !important;
	box-sizing: border-box;
}
div.mce-tinymce.mce-tinymce-inline {
    width: auto !important;
}


.inputOk, .inputWarning, span.attention, span.notice, span.alert, span.download, span.approved, span.note, span.camera, span.doc {
	display: block;
	padding: 1em;
	clear: both;
	margin: 5px 0;
	line-height: 1.5em;
}
/* the old notice classes (articles' content, form statements): the tones of a callout (basic/components.css) */
.attention, .note, .doc {color: var(--ui-warning);border: 1px solid color-mix(in srgb, var(--ui-warning) 30%, transparent);background: var(--ui-warning-soft);border-radius: var(--ui-radius);}
.notice, .inputOk {color: var(--ui-success);border: 1px solid color-mix(in srgb, var(--ui-success) 30%, transparent);background: var(--ui-success-soft);border-radius: var(--ui-radius);}
.alert, .inputWarning {color: var(--ui-danger);border: 1px solid color-mix(in srgb, var(--ui-danger) 30%, transparent);background: var(--ui-danger-soft);border-radius: var(--ui-radius);}
.download {color: var(--ui-info);border: 1px solid color-mix(in srgb, var(--ui-info) 30%, transparent);background: var(--ui-info-soft);border-radius: var(--ui-radius);}
.approved, .camera {color: var(--ui-muted);border: 1px solid var(--ui-border);background: var(--ui-soft);border-radius: var(--ui-radius);}

  
  
.menu_body{
	list-style:none;
	margin:0;
	padding:0;
	position: absolute;
	border: 1px solid #f1d14d;
	z-index: 1;
}
.menu_body div{
	margin: 0px;
	padding: 5px;
	line-height: 17px;
}
.menu_head{border: 0px; cursor: pointer; color: #777;}
.menu_head:hover{color: #999}
.menu_body {display:none; min-width:150px;}
.menu_body div{background:#FFF;}
.menu_body div a{color:#111; text-decoration:none; display:block;}
.menu_body div.alt{background:#fef8e9;}
.menu_body div.active{background:#F1D14D;}
.menu_body div.hovered{background: #ffeec2}
.menu_body div a:hover{color:#111; text-decoration: none; border: 0px; }
.listElement .listBody .menu_head {font-size: 1.3rem; }
.rowsPerPage
{
	font-size: 0.8rem;
}
.rowsPerPageClick
{
	font-weight: bold;
	cursor: pointer;
}


.fieldsetSubText
{
	margin-bottom: 10px;
}

.centerAlign
{
	text-align: center;
}
.normalWeight, .normalWeight a
{
	font-weight: normal;
}

.successAdd{
	background: #BFB;
	border-radius: 10px;
	padding: 15px 0px;
	margin: 5px 0px;
}
label.waterMark { 
	position:absolute; 
	line-height: var(--ui-control-height);
	cursor: text; 
	color: var(--fld-placeholder, #777);
	right: var(--fld-padding-x, 6px);
}

img {
	max-width: 100%;
	height: auto; 
	display: inline-block;
	vertical-align: middle;
}



.forceLTR, .forceLTR *
{
	text-align: left;
	direction: ltr;
}
.forceLTR .column, 
html .forceLTR .ui_tabs.ui-tabs .ui-tabs-nav li, 
html .forceLTR .ui_tabs li,
.forceLTR .fieldsBesideEachOther,
.forceLTR .widget-title > h4
{
	float: left;
}
.forceLTR .rtl
{
	direction: rtl;
	text-align: right;
}
.forceLTR .fieldsBesideEachOther.fieldsBesideEachOtherComesFirst
{
	padding-left: 0px;
}
.forceLTR .fieldsBesideEachOther
{
	padding-left: 2px;
}
.forceLTR .elementsButton
{
	margin-right: 0px;
	margin-left: 5px;
	float: right;
}
.forceLTR .widget-title .tools, 
.forceLTR .informationAboveList
{
	float: right;
}
.forceLTR .paddingAfter2
{
	padding-right: 2px;
	padding-left: 0px;
}




.forceRTL, .forceRTL *
{
	text-align: right;
	direction: rtl;
}
.forceRTL .column
{
	float: right;
}
.forceRTL .widget-title .tools
{
	float: left;
}
.forceRTL .widget-title > h4
{
	float: right;
}
.adminWidgetWrapper
{
	display: inline-block;
	vertical-align: top;
}
.printStatisticsAbsloluteScaleWrapper .button
{
	height: 2.4rem;
	width: 100%;
	line-height: 2.2rem;
}
.printStatisticsAbsloluteScaleWrapper
{
	left: 32px;
	top: 2px; 
	position: absolute; 
	width: 30%;
}
.printStatisticsScaleWrapper
{
	float: left;
}
.max16x16
{
	max-width: 16px;
	max-height: 16px;
}
.max64x64
{
	max-width: 64px;
	max-height: 64px;
}
.fullWidth
{
	width: 100%;
	height: auto;
}
.column.autoWidth, .autoWidth, .fieldsBesideEachOther.autoWidth
{
	width: auto;
}
.font0 
{
	font-size: 0rem;
}
.font05
{
	font-size: 0.5rem;
}
.font08
{
	font-size: 0.8rem;
}
.font09
{
	font-size: 0.9rem;
}
.font1
{
	font-size: 1rem;
}
.font13
{
	font-size: 1.3rem;
}
.font14
{
	font-size: 1.4rem;
}
.font15
{
	font-size: 1.5rem;
}
.font2
{
	font-size: 2rem;
}
.font3
{
	font-size: 3rem;
}
.absolute
{
	position: absolute;
}
.relative
{
	position: relative;
}
.weightHandler
{
	text-align: center;
}
.weightHandler span
{
	cursor: pointer;
	font-size: 1.2rem;
	line-height: 1.6rem;
}
.exportToExcel
{
	font-size: 1.2rem;
	color: green;
}
.exportToWord
{
	font-size: 1.2rem;
	color: blue;
}
.mce-container .mce-flow-layout
{
	text-align: center;
}
div.mce-fullscreen.mce-tinymce
{
	z-index: 200;
}


code
{
	background:url('../images/defaultImages/other/code.png'); 
	border: solid 1px #F0F0F0;
	padding-left: 50px; 
	text-align: left; 
	font-size: 12px;
	direction: ltr; 
	display: block;
	line-height: 25px;
	padding-top: 5px;
	margin: 10px 0px;
}
blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px;
  padding-left: 45px;
  margin: 0 0 20px;
  position: relative;
  
  /*Font*/
  
  color: #666;
  text-align: justify;
  
  /*Borders - (Optional)*/
  border-right: 15px solid #c76c0c;
  border-left: 2px solid #c76c0c;
  
  /*Box Shadow - (Optional)*/
  box-shadow: 2px 2px 15px #ccc;
}

blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
  line-height: 60px;
  /*Positioning*/
  position: absolute;
  left: 10px;
  top:5px;
}

blockquote::after{
  /*Reset to make sure*/
  content: "";
}

blockquote em {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote em:before {
content: "\2014 \2009";
}
.absoluteFullDiv
{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index: 2;
}
.bordered
{
	border: 1px solid #444;
}
.bordered-dashed
{
	border-style: dashed;
}
.map-canvas .kMapSearchBox
{
	margin-top: 10px;
	padding: 5px 10px;
	display: block;
	max-width: 250px;
	line-height: 20px;
	height: 32px;
	transition: all 0.3s;
}
.kMapSearchBox
{
	display: none;
}
.kMapSearchBox:focus
{
	max-width: 400px;
}

.breadCrumbElems
{
	list-style-type: none;
	margin: 0px;
}
.breadCrumbElems .breadCrumbElem .breadCrumbSeparator
{
	margin-right: 5px;
	margin-left: 10px;
}
.breadCrumbElems .breadCrumbElem
{
	display: inline-block;
	vertical-align: middle;
	
}
.rowTemplate .rowTemplateTitle h1,
.rowTemplate .rowTemplateTitle h2,
.rowTemplate .rowTemplateTitle h3,
.rowTemplate .rowTemplateTitle h4,
.rowTemplate .rowTemplateTitle h5,
.rowTemplate .rowTemplateTitle h6
{
	margin: 0px;
	font-size: inherit;
	color: inherit;
	line-height: inherit;
}
#fb-root {
    display: none;
}

.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] {
    width: 100% !important;
}
.fb_iframe_widget
{
	text-align: left;
	direction: ltr;
}
.highcharts-subtitle
{
	direction: rtl;
}
.mce-branding-powered-by
{
    display: none;
}
.hiddenByLingualControl
{
	display: none !important;
}
.middleAlign
{
	vertical-align: middle;
}/* Site logs (printLogs) and noty toasts. Logical properties (inline-start/end) follow the page or wrapper direction */

/* Palette: one set of variables per type, shared by the cards and the toasts: aliases of the --ui-* tokens (basic/ui.css) */
.siteLog, .siteNoty {
	--siteLogAccent: var(--ui-muted);
	--siteLogBg: var(--ui-surface-muted);
	--siteLogBorder: var(--ui-border);
	--siteLogText: var(--ui-text-strong);
}
.siteLog.successLog, .siteNoty_success {
	--siteLogAccent: var(--ui-success);
	--siteLogBg: var(--ui-success-soft);
	--siteLogBorder: color-mix(in srgb, var(--ui-success) 30%, transparent);
}
.siteLog.infoLog, .siteNoty_information {
	--siteLogAccent: var(--ui-info);
	--siteLogBg: var(--ui-info-soft);
	--siteLogBorder: color-mix(in srgb, var(--ui-info) 30%, transparent);
}
.siteLog.warningLog, .siteNoty_warning,
.siteLog.validationLog {
	--siteLogAccent: var(--ui-warning);
	--siteLogBg: var(--ui-warning-soft);
	--siteLogBorder: color-mix(in srgb, var(--ui-warning) 30%, transparent);
}
.siteLog.errorLog, .siteNoty_error {
	--siteLogAccent: var(--ui-danger);
	--siteLogBg: var(--ui-danger-soft);
	--siteLogBorder: color-mix(in srgb, var(--ui-danger) 30%, transparent);
}

/* Cards */
.siteLogs {
	margin-bottom: 16px;
}
.siteLog {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	box-sizing: border-box;
	margin-bottom: 10px;
	padding: 12px 14px;
	padding-inline-start: 18px;
	overflow: hidden;
	border: 1px solid var(--siteLogBorder);
	border-radius: 10px;
	background: var(--siteLogBg);
	color: var(--siteLogText);
	box-shadow: var(--ui-shadow);
	font-size: 14px;
	line-height: 1.6;
	text-align: start;
	animation: siteLogIn .18s ease-out;
}
.siteLogs .siteLog:last-child {
	margin-bottom: 0;
}
/* The accent edge on the start side */
.siteLog::before, .siteNoty::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-start: 0;
	width: 4px;
	background: var(--siteLogAccent);
}
.siteLogIcon {
	flex: none;
	width: 20px;
	color: var(--siteLogAccent);
	font-size: 18px;
	line-height: 22px;
	text-align: center;
}
.siteLogBody {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}
.siteLog .siteLogBody ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.siteLog .siteLogBody li {
	margin: 0;
	padding: 0;
}
.siteLog .siteLogListMulti > li {
	position: relative;
	padding-inline-start: 14px;
}
.siteLog .siteLogListMulti > li + li {
	margin-top: 4px;
}
.siteLog .siteLogListMulti > li::before {
	content: '';
	position: absolute;
	top: .7em;
	inset-inline-start: 2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--siteLogAccent);
	opacity: .7;
}
.siteLogBody a, .siteNoty .noty_text a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}
.siteLogNested {
	padding-inline-start: 14px;
}
.siteLogClose {
	flex: none;
	width: 28px;
	height: 28px;
	margin: -3px;
	margin-inline-end: -6px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--siteLogText);
	font-size: 11px;
	line-height: 28px;
	text-align: center;
	opacity: .55;
	cursor: pointer;
	transition: opacity .15s, background-color .15s;
}
.siteLogClose:hover {
	opacity: 1;
	background: var(--ui-hover);
}
.siteLogClose:focus {
	outline: none;
}
.siteLogClose:focus-visible {
	opacity: 1;
	outline: 2px solid var(--siteLogAccent);
	outline-offset: 1px;
}
.siteLogHiding {
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .18s ease, transform .18s ease;
}
@keyframes siteLogIn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@media (max-width: 675px) {
	.siteLog {
		gap: 10px;
		padding: 10px 12px;
		padding-inline-start: 16px;
	}
}
@media print {
	.siteLogClose {
		display: none;
	}
}

/* noty toasts (theme "siteNoty", scripts/core/logs.js): a white card with the type's accent and icon */
.siteNoty {
	position: relative;
	box-sizing: border-box;
	margin: 8px 0;
	overflow: hidden;
	border: 1px solid var(--ui-border);
	border-radius: 10px;
	background: var(--ui-surface);
	color: var(--ui-text-strong);
	box-shadow: var(--ui-shadow-lg);
	font-size: 14px;
	line-height: 1.6;
	text-align: start;
}
.siteNoty .noty_message {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	padding-inline-end: 38px;
	text-align: start;
}
.siteNoty .noty_text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}
.siteNoty .noty_close {
	position: absolute;
	top: 9px;
	inset-inline-end: 8px;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	color: var(--ui-muted);
	font-size: 10px;
	line-height: 24px;
	text-align: center;
	opacity: .45;
	transition: opacity .15s, background-color .15s;
}
.siteNoty:hover .noty_close {
	opacity: .9;
	background: var(--ui-hover);
}
/* a notice's actions (uiNotify() actions: Undo, Retry, Open…) */
.siteNoty .noty_buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	padding: 0 16px 12px;
	text-align: end;
}
.siteNoty .uiNotifyAction {
	min-height: 2rem;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	color: var(--siteLogAccent);
	font: inherit;
	font-size: 13px;
	font-weight: bold;
	cursor: pointer;
}
.siteNoty .uiNotifyAction:hover,
.siteNoty .uiNotifyAction:focus-visible {
	border-color: var(--siteLogAccent);
	background: var(--siteLogBg);
}
.siteNoty .uiNotifyAction.is-primary {
	border-color: var(--siteLogAccent);
	background: var(--siteLogAccent);
	color: var(--ui-on-accent);
}
/* a notice in progress (uiNotify() progress): its bar under the text */
.siteNoty .noty_text .loadingBar {
	width: 250px;
	margin-top: 10px;
}

/* Loading bar (the "please wait" toasts, fast lists): an indeterminate progress bar */
.loadingBar {
	position: relative;
	max-width: 100%;
	height: 4px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--ui-border);
}
.loadingBar::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-start: -40%;
	width: 40%;
	border-radius: 2px;
	background: var(--ui-accent);
	animation: loadingBarSlide 1.1s ease-in-out infinite;
}
@keyframes loadingBarSlide {
	from {
		inset-inline-start: -40%;
	}
	to {
		inset-inline-start: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.siteLog {
		animation: none;
	}
	.siteLogHiding, .siteLogClose, .siteNoty .noty_close {
		transition: none;
	}
}

.grayNumber, .redNumber, .greenNumber
{
	color: #FFF;
	padding: 3px;
	font-size: 12px;
	border-radius: 2px 3px;
}
.redNumber
{
	background: #F00;
}
.greenNumber
{
	background: #5E5;
}
.grayNumber
{
	background: #CCC;
}

.white{
	color:white;
}
.black{
	color:black;
}
.gray{
	color:#777777;
}
.green{
	color:#74A824;
}
.red{
	color:#D12E2E;
}
.blue{
	color:#0D507A;
}
.golden{
	color:#ceba02;
}/* a button's icon (<span class="icon-…"> or printElementButtons()' <span class="button-…">): a 16px box beside the
   caption. Another span (a caption, a count) stays text */
.button span:where([class^="icon-"], [class*=" icon-"], [class^="button-"], [class*=" button-"])
{
	float: right;
	margin-left: 3px;
}
.listElement .button span:where([class^="icon-"], [class*=" icon-"], [class^="button-"], [class*=" button-"])
{
	margin-left: 1px;
}
.button.onlyImage span{
	margin-left: 0px;
}
.button a
{
	font-weight: normal;
	color: inherit;
}
a.button
{
	display: inline-block;
}
.button.onlyImage span{
	margin: 0px auto;
	float: none;
	width: 100%;
}
.listElement .button{
	width: 100%;
	min-width: 100%;
}
button.button
{
	line-height: var(--btn-height);
}
/* ---- a button: flat, drawn from the --btn-* properties. :where(.button) gives every button the theme's look (the
   Theme Studio's "Manage buttons" writes --theme-btn-* on the site: classes/core/theme_buttons.php) or the core's (the
   --ui-* tokens); a colour class (.blueButton, .redButton…) or a theme's own style (.btn-<name>) sets its own. A hover
   colour left unset is the fill a little darker (towards --ui-text-strong), the text and the border as they are. A
   theme's stylesheets do not style .button; a place that shows its buttons its own way sets --btn-* at no
   specificity, so a button's colour or style still wins: :where(.footer) :where(.button) { --btn-bg: …; } ---- */
:where(.button)
{
	--btn-bg: var(--theme-btn-bg, var(--ui-surface));
	--btn-fg: var(--theme-btn-fg, var(--ui-text));
	--btn-border: var(--theme-btn-border, var(--ui-border));
	--btn-hover-bg: var(--theme-btn-hover-bg);
	--btn-hover-fg: var(--theme-btn-hover-fg);
	--btn-hover-border: var(--theme-btn-hover-border);
	--btn-border-width: var(--theme-btn-border-width, 1px);
	--btn-border-style: var(--theme-btn-border-style, solid);
	--btn-radius: var(--theme-btn-radius, var(--ui-radius));
	--btn-height: var(--theme-btn-height, 2.6rem);
	--btn-padding-x: var(--theme-btn-padding-x, 11px);
	/* depth and effects a style picks (classes/core/theme_buttons.php sets --btn-shadow, --btn-glow, --btn-image and
	   their hover ones to these): drawn from the button's own colours, so one choice suits every colour. A button that
	   picks none has none of them */
	--btn-fx-press: inset 0 2px 5px color-mix(in srgb, var(--ui-text-strong) 30%, transparent);
	--btn-fx-glow: 0 0 14px color-mix(in srgb, var(--btn-bg) 55%, transparent);
	--btn-fx-glow-hover: 0 0 22px color-mix(in srgb, var(--btn-hover-bg, var(--btn-bg)) 70%, transparent);
	/* shine: a light that crosses the button on hover */
	--btn-fx-sheen: linear-gradient(110deg, transparent 35%, color-mix(in srgb, var(--ui-on-accent) 45%, transparent) 50%, transparent 65%);
	/* gradient: the fill brightening across the button; a hover slides it to its deeper end */
	--btn-fx-gradient: linear-gradient(110deg, color-mix(in srgb, var(--btn-bg) 78%, var(--ui-text-strong)) 0%, var(--btn-bg) 40%, var(--btn-bg) 60%, color-mix(in srgb, var(--btn-bg) 70%, var(--ui-on-accent)) 100%);
	/* pop: a crisp offset shadow in a deeper shade of the fill; a hover presses the button into it */
	--btn-fx-pop: 4px 4px 0 color-mix(in srgb, var(--btn-bg) 55%, var(--ui-text-strong));
	--btn-fx-pop-hover: 1px 1px 0 color-mix(in srgb, var(--btn-bg) 55%, var(--ui-text-strong));
}
.button
{
	display: inline-block;
	min-width: 40px;
	height: var(--btn-height);
	margin-bottom: 0;
	padding: 0 var(--btn-padding-x);
	/* longhands: the width may be four (top, right, bottom, left) */
	border-width: var(--btn-border-width);
	border-style: var(--btn-border-style);
	border-color: var(--btn-border);
	border-radius: var(--btn-radius);
	/* longhands: an effect's image (shine, gradient) is wider than the button and slides across it on hover */
	background-color: var(--btn-bg);
	background-image: var(--btn-image, none);
	background-repeat: no-repeat;
	background-size: 250% 100%;
	background-position: 100% 0;
	box-shadow: var(--btn-shadow, 0 0 transparent), var(--btn-glow, 0 0 transparent);
	color: var(--btn-fg);
	font-size: 1rem;
	font-weight: normal;
	line-height: calc(var(--btn-height) - 0.2rem);
	text-align: center;
	text-shadow: none;
	white-space: nowrap;
	vertical-align: middle;
	overflow: hidden;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.2s, translate 0.2s, background-position 0.6s;
}
.button:hover,
.button:focus
{
	background-color: var(--btn-hover-bg, color-mix(in srgb, var(--btn-bg) 90%, var(--ui-text-strong)));
	background-position: 0 0;
	border-color: var(--btn-hover-border, var(--btn-border));
	box-shadow: var(--btn-hover-shadow, var(--btn-shadow, 0 0 transparent)), var(--btn-hover-glow, var(--btn-glow, 0 0 transparent));
	/* a pop's slide, else the hover's lift or press */
	translate: var(--btn-effect-translate, var(--btn-hover-translate, none));
	color: var(--btn-hover-fg, var(--btn-fg));
	text-decoration: none;
}
/* no movement for who asked for less: the lift, the pop and the effects' images stay still */
@media (prefers-reduced-motion: reduce)
{
	.button { transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
	.button:hover, .button:focus { translate: none; }
}
.button:focus-visible
{
	outline: 2px solid var(--ui-focus);
	outline-offset: 2px;
}
.button:active,
.button.active
{
	background-color: color-mix(in srgb, var(--btn-bg) 80%, var(--ui-text-strong));
	translate: none;
}
.button.disabled,
.button[disabled]
{
	background-color: var(--btn-bg);
	translate: none;
	opacity: 0.55;
	cursor: default;
}
/* the colours: white text on each tone (4.5:1 at least). Each unsets the hover colours, so its hover is its own fill
   darker, not the theme default's; the theme repaints them in its bundle (.blueButton { --btn-bg: …; }) */
.blueButton, .redButton, .greenButton, .cyanButton, .orangeButton, .purpleButton, .yellowButton, .blackButton
{
	--btn-hover-bg: initial;
	--btn-hover-fg: initial;
	--btn-hover-border: initial;
}
.blueButton
{
	--btn-bg: var(--ui-accent);
	--btn-fg: var(--ui-on-accent);
	--btn-border: transparent;
}
.redButton
{
	--btn-bg: var(--ui-danger);
	--btn-fg: var(--ui-on-accent);
	--btn-border: transparent;
}
.greenButton
{
	--btn-bg: var(--ui-success);
	--btn-fg: var(--ui-on-accent);
	--btn-border: transparent;
}
.cyanButton
{
	--btn-bg: var(--ui-cyan);
	--btn-fg: var(--ui-on-accent);
	--btn-border: transparent;
}
.orangeButton
{
	--btn-bg: var(--ui-warning);
	--btn-fg: var(--ui-on-accent);
	--btn-border: transparent;
}
.purpleButton
{
	--btn-bg: var(--ui-purple);
	--btn-fg: var(--ui-on-accent);
	--btn-border: transparent;
}
.yellowButton
{
	--btn-bg: var(--ui-yellow);
	--btn-fg: var(--ui-on-accent);
	--btn-border: transparent;
}
.blackButton
{
	--btn-bg: var(--ui-text-strong);
	--btn-fg: var(--ui-on-accent);
	--btn-border: transparent;
}

.button.smallerHeight, .button.smallerHeight span:where([class^="icon-"], [class*=" icon-"], [class^="button-"], [class*=" button-"])
{
	height: 2rem;
	line-height: 1.8rem;
}
.listBody .button
{
	padding: 0 6px;
}
.button span:where([class^="icon-"], [class*=" icon-"], [class^="button-"], [class*=" button-"])
{
	background-repeat: no-repeat;
	background-position: center 45%;
	background-size: auto 16px;
	width: 16px;
	height: 2.5rem;
	line-height: 2.3rem;
	display: block;
	font-size: 1.1rem;
}

.ui-tabs-nav li
{
	display: block;
}
.ui-tabs.borderless, .ui-accordion .borderless
{
	border: 0px none;
}
.ui-tabs .ui-tabs-panel.noPadding, .ui-accordion.ui_accordion .ui_accordion_pane.noPadding
{
	padding: 13px 0px;
}
.ui_accordion.ui-accordion .ui-accordion-content
{
	padding: 15px;
}
.ui-spinner input
{
	padding: 0px;
	border: 0px;
}
.ui-autocomplete {
	max-height: 125px;
	overflow-y: auto;
	overflow-x: hidden;
}
.ui-slider a.ui-slider-handle
{
	cursor: pointer;
}
.inputClass .ui-slider
{
	display: inline-block;
	vertical-align: top;
	margin-left: 0.5rem;
}
html .ui-widget input,html .ui-widget select,html .ui-widget textarea,html .ui-widget button
{
	font-size: 1rem;
}



html .ui_accordion.ui-accordion .ui-accordion-content
{
	background: none;
}
html .ui-tabs
{
	background: none;
	padding: 0px;
	border-radius: 0px;
}
html .ui-tabs .ui-tabs-panel, html .ui_accordion.ui-accordion .ui-accordion-content
{
	padding: 10px;
}
/* the tab bar itself: basic/tabs.css */
html .ui-state-disabled.ui-tabs-active
{
	opacity: 1;
}
html .ui-widget-content
{
	background-image: none;
}
.ui-widget-content.ui-spinner .ui-spinner-button
{
	border-radius: 0px;
}
.ui-widget-content.ui-spinner
{
	border: 0px none;
	border-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	overflow: visible;
}
html .ui-datepicker select
{
	padding: 0.1em;
}
input[type=text].ui-spinner-input
{
	padding-left: 20px;
}
html .ui-selectmenu-button > i
{
	position: absolute;
	width: 18px;
	height: 18px;
	margin: auto;
	left: 10px;
	top: 0px;
	bottom: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
}
html .ui-selectmenu-button span.ui-selectmenu-text
{
	padding-left: 2.5em;
	padding-right: 1em;
}
html .ui-icon
{
	max-height: 16px;
	height: 16px;
}
.ui-selectmenu-menu .ui-menu
{
	max-height: 300px;
}
.ui-selectmenu-menu
{
	z-index: 200;
	min-width: 200px;
}

/*
	Modern look for the jQuery UI widgets used by the core form / list / view classes
	(tabs, accordion, dialogs, datepicker). Colours come from the tokens in basic/ui.css.
*/
html .ui-tabs.ui-widget-content
{
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	background: var(--ui-surface);
}
/* the tab bar (.ui-tabs-nav): basic/tabs.css, shared with uiTabs() and search::tabs() */
html .ui-tabs .ui-tabs-panel
{
	padding: 1rem;
	border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
}

html .ui-accordion .ui-accordion-header
{
	margin-top: 0.4rem;
	border-radius: var(--ui-radius);
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	font-weight: 500;
}
html .ui-accordion .ui-accordion-header.ui-state-default
{
	background: var(--ui-soft);
	border: 1px solid var(--ui-border);
	color: var(--ui-text);
}
html .ui-accordion .ui-accordion-header.ui-state-active
{
	background: var(--ui-accent-soft);
	border-color: var(--ui-accent);
	border-radius: var(--ui-radius) var(--ui-radius) 0 0;
	color: var(--ui-accent);
}
html .ui-accordion .ui-accordion-content.ui-widget-content
{
	border-color: var(--ui-border);
	border-radius: 0 0 var(--ui-radius) var(--ui-radius);
}

/* dialogs: basic/dialog.css (kQuery/kDialog) */
html .ui-datepicker.ui-widget-content
{
	padding: 0.4em;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	box-shadow: var(--ui-shadow-lg);
}
html .ui-datepicker .ui-datepicker-header.ui-widget-header
{
	background: transparent;
	border: 0;
	color: var(--ui-text);
}
html .ui-datepicker td .ui-state-default
{
	border: 0;
	border-radius: var(--ui-radius);
	background: transparent;
	text-align: center;
}
html .ui-datepicker td .ui-state-default.ui-state-hover
{
	background: var(--ui-soft);
}
html .ui-datepicker td .ui-state-default.ui-state-highlight
{
	color: var(--ui-accent);
	font-weight: bold;
}
html .ui-datepicker td .ui-state-default.ui-state-active
{
	background: var(--ui-accent);
	color: #fff;
}
.suggestElem.suggest_even
{
	background: var(--ui-soft);
}
.suggestElem.suggest_odd
{
	background: var(--ui-surface);
}
.suggestElem:hover
{
	background: var(--ui-accent);
	color: var(--ui-on-accent);
}
.suggestElem{
	cursor:pointer;
	padding: 5px 3px;
}

#suggestionDiv
{
	max-height:150px;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 75%;
	border: 1px solid var(--ui-border-strong);
	border-top: 0px;
	z-index: 10;
	border-radius:  0px 0px 5px 5px ;
}


.userSuggestPhoto
{
	float: right;
	margin-left: 10px;
}
.userSuggestName
{
	float: right;
}
.userSuggestUsername
{
	font-weight: bold;
}.featuredRowClass, .listRow.featuredRowClass
{
	background: var(--ui-success-soft);
}
.informationAboveList
{
	float: left;
}
.listSelectRowsHeader, .listSelectRowsHeaderHolder
{
	float: right;
}
.listSelectRowsHeaderHolder
{
	margin-left: 25px;
}

.listPages
{
	float: right;
}
.listPages span
{
	margin-left: 7px;
	display: inline-block;
}

.listHeaderClass{
	background:var(--ui-surface);
	border-top:1px solid var(--ui-border);
	border-bottom:1px solid var(--ui-border);
}

.aboveListExtras
{
	white-space: nowrap;
}

.listElement .row
{
	padding-right: 5px;
}
.listElement .fRow
{
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 5px;
}
.listHeaderClass .column,
.listHeaderClass .fColumn
{
	white-space: nowrap;
	overflow: hidden;
}

.weightHandler img
{
	cursor: pointer;
}
.fastChangeController
{
	float: right;
}








.row.rowTemplate
{
	border: 0px;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	background: none;
	transition: all 0.6s;
	-webkit-transition: all 0.6s;
	padding: 5px;
}
.rowTemplateTitle a
{
	display: block;
	width: 100%;
}
.rowTemplateTitle
{
	font-size: 1.3rem;
	line-height: 1.9rem;
}
/* the extra slot of a row ([extra], the site's own pieces: templateLookPieces()), one short line */
.rowTemplateExtra .rowTemplateExtraPiece + .rowTemplateExtraPiece
{
	margin-inline-start: 0.6em;
}
/* the date as a badge on the photo's corner (the row templates' option date_style: badge; [date_day], [date_month]):
   its day over its month in the accent colour. A row prints both its dates; the option's class shows one */
.rowTemplate.look-date_style-badge .rowTemplatePhoto
{
	position: relative;
}
.rowTemplate .rowTemplateDateBadge
{
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 58px;
	padding: 8px 6px;
	line-height: 1.1em;
	text-align: center;
	color: var(--skin-accent-text, #FFF);
	background: var(--skin-accent, var(--ui-accent, #2C5282));
	border-radius: var(--card-radius, 10px);
	box-shadow: var(--ui-shadow-sm, none);
	pointer-events: none;
}
.rowTemplate .rowTemplateDateBadge b
{
	font-size: 1.5rem;
	line-height: 1.1em;
}
.rowTemplate .rowTemplateDateBadge span
{
	font-size: 0.8rem;
}
.rowTemplate:not(.look-date_style-badge) .rowTemplateDateBadge,
.rowTemplate.look-date_style-badge [data-piece="date"]:not(.rowTemplateDateBadge)
{
	/* over a template's own display of its date (a state, like the picker's hidden pieces) */
	display: none !important;
}
/* a photo beside the text smaller or bigger than its template's own (photo_scale): each template multiplies its photo's
   width by --row-photo-scale */
.rowTemplate.look-photo_scale-small
{
	--row-photo-scale: 0.75;
}
.rowTemplate.look-photo_scale-big
{
	--row-photo-scale: 1.3;
}
/* the photo's corners (photo_radius): --row-photo-radius, over its template's own; auto sets none. A photo to a card's
   edges keeps the card's corners (card_photo edge), a round photo stays round; a template whose photo is the whole row
   (title_over_photo) reads the property for its frame */
.rowTemplate.look-photo_radius-none
{
	--row-photo-radius: 0px;
}
.rowTemplate.look-photo_radius-small
{
	--row-photo-radius: 8px;
}
.rowTemplate.look-photo_radius-medium
{
	--row-photo-radius: 16px;
}
.rowTemplate.look-photo_radius-big
{
	--row-photo-radius: 30px;
}
body .rowTemplate[class*="look-photo_radius-"]:not(.look-photo_radius-auto):not(.look-card_photo-edge):not(.look-photo-round) .rowTemplatePhoto .imageContainer,
body .rowTemplate[class*="look-photo_radius-"]:not(.look-photo_radius-auto):not(.look-card_photo-edge):not(.look-photo-round) .rowTemplatePhoto .imageContainer img
{
	border-radius: var(--row-photo-radius);
}
/* the writer's name only (author_photo without) */
.rowTemplate.look-author_photo-without .authorImage
{
	display: none;
}
/* the line of the date and the views above the title (meta_position top): the texts' block becomes a column and the
   line goes up after the category, so the markup keeps one order; each template sets its spacing */
.rowTemplate.look-meta_position-top :is(.rowTemplateInfo, .rowTemplateData, .rowTemplateHead):has(> .rowTemplateDate)
{
	display: flex;
	flex-direction: column;
}
.rowTemplate.look-meta_position-top :is(.rowTemplateInfo, .rowTemplateData, .rowTemplateHead) > .rowTemplateCategory
{
	order: -2;
}
.rowTemplate.look-meta_position-top :is(.rowTemplateInfo, .rowTemplateData, .rowTemplateHead) > .rowTemplateDate
{
	order: -1;
}
/* the title's lines each on a bar of the accent colour with its text colour (title_style highlight): the bars follow the
   text (box-decoration-break), so the title must be an inline run; the photo under them needs no gradient */
.row.listRow.rowTemplate.look-title_style-highlight .rowTemplateTitle
{
	line-height: 1.65em;
	padding-inline: 0.35em;
	text-shadow: none;
}
.row.listRow.rowTemplate.look-title_style-highlight .rowTemplateTitle a,
.row.listRow.rowTemplate.look-title_style-highlight .rowTemplateTitle a:hover
{
	display: inline;
	width: auto;
	padding: 0.12em 0.35em;
	color: var(--skin-accent-text, var(--ui-on-accent, #FFF));
	background: var(--skin-accent, var(--ui-accent, #2C5282));
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
/* a play badge in the middle of the photo of a row whose article has a video (the tick video: [has_video]); a hero's
   at its top start corner, clear of its texts */
.rowTemplate .rowTemplatePhoto:has(> .rowTemplatePlay)
{
	position: relative;
}
.rowTemplate .rowTemplatePlay
{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(30px, 24%, 60px);
	aspect-ratio: 1;
	font-size: clamp(0.8rem, 2vw, 1.3rem);
	color: #FFF;
	background: rgba(0, 0, 0, 0.55);
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	translate: -50% -50%;
	pointer-events: none;
}
.rowTemplate .rowTemplatePlay .icon-play
{
	/* the triangle's weight is on its left: a little to the right looks centred */
	margin-left: 0.15em;
}
.rowTemplate.hero_slide .rowTemplatePlay
{
	top: 24px;
	left: auto;
	inset-inline-start: 24px;
	width: 56px;
	translate: none;
}
/* the status chips (the tick chips: [chips], articlesListChips()): small pills at the photo's bottom start corner, or in
   the flow before the title where the texts lie over the photo */
.rowTemplate .rowTemplatePhoto:has(> .rowTemplateChips, > .rowTemplateRibbon)
{
	position: relative;
}
.rowTemplate .rowTemplateChips
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
	pointer-events: none;
}
.rowTemplate .rowTemplatePhoto > .rowTemplateChips
{
	position: absolute;
	bottom: 10px;
	inset-inline-start: 10px;
	z-index: 3;
	margin: 0px;
}
.rowTemplate .rowTemplateChip
{
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.2;
	color: #FFF;
	background: rgba(15, 23, 42, 0.78);
	box-shadow: var(--ui-shadow-sm, none);
}
/* a kind's tone (its 'tone', features.php templateChipsHTML()): dark by default, success, accent, its category's colour,
   or a palette colour (--chip-color) */
.rowTemplate .rowTemplateChip-tone-success
{
	background: var(--ui-success, #157347);
}
.rowTemplate .rowTemplateChip-tone-accent
{
	color: var(--skin-accent-text, #FFF);
	background: var(--skin-accent, var(--ui-accent, #2C5282));
}
.rowTemplate .rowTemplateChip-tone-category
{
	color: var(--skin-accent-text, #FFF);
	background: var(--category-color, var(--skin-accent, var(--ui-accent, #2C5282)));
}
.rowTemplate .rowTemplateChip-tone-palette
{
	background: var(--chip-color, rgba(15, 23, 42, 0.78));
}
/* the ribbon (the tick ribbon: the article's field ribbon, [ribbon]): a word on the photo's end edge near its top, in its
   row's colour ([ribbon_style]: --ribbon-color, else the accent); the date badge moves under it */
.rowTemplate .rowTemplateRibbon
{
	position: absolute;
	top: 12px;
	inset-inline-end: 0px;
	z-index: 3;
	max-width: 70%;
	padding: 5px 12px 5px 14px;
	border-start-start-radius: 999px;
	border-end-start-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--skin-accent-text, #FFF);
	background: var(--ribbon-color, var(--skin-accent, var(--ui-accent, #2C5282)));
	box-shadow: var(--ui-shadow-sm, none);
	pointer-events: none;
}
.rowTemplate .rowTemplatePhoto:has(> .rowTemplateRibbon) > .rowTemplateDateBadge
{
	top: 48px;
}
/* the date line as the card's footer (the option meta_footer: yes): at the bottom of the texts under a hairline, its first
   piece at the start and its last at the end; the texts' block a column that fills the card */
.rowTemplate.look-meta_footer-yes > .rowTemplateInner
{
	display: flex;
	flex-direction: column;
}
.rowTemplate.look-meta_footer-yes :is(.rowTemplateInfo, .rowTemplateData, .rowTemplateBox):has(> .rowTemplateDate)
{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.rowTemplate.look-meta_footer-yes :is(.rowTemplateInfo, .rowTemplateData, .rowTemplateBox) > .rowTemplateDate
{
	order: 10;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
/* the views of a row (the tick hits): beside the date on its line */
.rowTemplateHits
{
	white-space: nowrap;
}
.rowTemplateDate > [data-piece="date"] ~ .rowTemplateHits
{
	margin-inline-start: 0.8em;
}
/* a photo an old template name showed round (its photo shape is Round now: listPhotoRatioCSS()) */
.rowTemplate.look-photo-round .rowTemplatePhoto .imageContainer
{
	border-radius: 50%;
	overflow: hidden;
}
.rowTemplate.look-photo-round .rowTemplatePhoto .imageContainer:after
{
	padding-top: 100% !important;
}
.rowTemplate.look-photo-round .rowTemplatePhoto img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oneColumn >.row.rowTemplate, .oneColumn > .column
{
	width: 100%;
}
.twoColumns > .row.rowTemplate, .twoColumns > .column
{
	width: 50%;
}
.threeColumns > .row.rowTemplate, .threeColumns > .column
{
	width: 33.33%;
}
.threeColumns > .column.merge2
{
	width: 66.66%;
}
.fourColumns > .row.rowTemplate, .fourColumns > .column
{
	width: 25%;
}
.fourColumns > .column.merge2
{
	width: 50%;
}
.fourColumns > .column.merge3
{
	width: 75%;
}

.fiveColumns > .row.rowTemplate, .fiveColumns > .column
{
	width: 20%;
}
.fiveColumns > .column.merge2
{
	width: 40%;
}
.fiveColumns > .column.merge3
{
	width: 60%;
}
.fiveColumns > .column.merge4
{
	width: 80%;
}
.sixColumns > .row.rowTemplate, .sixColumns > .column
{
	width: 16.66%;
}
.sevenColumns > .row.rowTemplate, .sevenColumns > .column
{
	width: 14.28%;
}
.eightColumns > .row.rowTemplate, .eightColumns > .column
{
	width: 12.5%;
}





/* the row families' own rules are in their stylesheets: styles/templates/rows/<family>.css */
/* ==========================================================================
	Skins (classes/core/theme_skins.php): a box's skin dresses its frame, a list's rows skin (class skin-<name> on its
	body: a box's template picker, a pattern's list) each row alone. The skin's surface is painted once behind its
	headings and texts: whatever paints it leaves a note for what is inside (--skin-painted: transparent: the frames,
	styles/templates/blocks); a skin with a surface of its own clears it (its CSS rule), so the rows of a rows skin paint
	theirs, each a tile, and the rows in a skinned frame paint nothing
   ========================================================================== */
[class^="skin-"] .rowTemplate.listRow:not(:where(.rowCard)) > .rowTemplateInner,
[class*=" skin-"] .rowTemplate.listRow:not(:where(.rowCard)) > .rowTemplateInner
{
	background-color: var(--skin-painted, var(--skin-surface, transparent));
}
/* rows in the theme's colours ('none', class skinNone) inside a skinned frame: the skin around is cleared, each row a
   tile of the theme's surface */
.skinNone
{
	--skin-accent: initial;
	--skin-accent-text: initial;
	--skin-surface: initial;
	--skin-heading: initial;
	--skin-extra: initial;
	--skin-accent-hover: initial;
	--skin-heading-hover: initial;
	--skin-painted: initial;
}
[class^="skin-"] .skinNone .rowTemplate.listRow:not(:where(.rowCard)) > .rowTemplateInner,
[class*=" skin-"] .skinNone .rowTemplate.listRow:not(:where(.rowCard)) > .rowTemplateInner
{
	background-color: var(--ui-surface, #FFF);
}
.listBody .elementsButtonsArea .button
{
	width: auto;
	min-width: 40px;
	padding: 0px 11px;
}
/* from here fewer cards per row: imagesResponsive() (classes/functions/Utils.php) sizes the list photos on it */
@media  (max-width:850px){
    .threeColumns > .column.merge2
       {
        width: 100%;
        padding: 0px;
    }
	.threeColumns > .row.rowTemplate, .threeColumns > .column
	{
		width: 50%;
	}
	.fourColumns > .row.rowTemplate, .fourColumns > .column
	{
		width: 33.33%;
	}

	.fiveColumns > .row.rowTemplate, .fiveColumns > .column
	{
		width: 25%;
	}
	.sixColumns > .row.rowTemplate, .sixColumns > .column
	{
		width: 20%;
	}
	.sevenColumns > .row.rowTemplate, .sevenColumns > .column
	{
		width: 20%;
	}
	.eightColumns > .row.rowTemplate, .eightColumns > .column
	{
		width: 16.66%;
	}
}
@media  (max-width:675px){
	.twoColumns > .row.rowTemplate, .threeColumns > .row.rowTemplate, .threeColumns > .column, .twoColumns > .column, .fiveColumns > .column.merge3, .fiveColumns > .column.merge4, .fiveColumns > .column.merge2, .fourColumns > .column.merge2
	{
		width: 100%;
        padding: 0px !important;
	}
	.fourColumns > .row.rowTemplate, .fourColumns  > .column
	{
		width: 50%;
	}

	.fiveColumns > .row.rowTemplate, .fiveColumns  > .column
	{
		width: 33.33%;
	}
	.sixColumns > .row.rowTemplate, .sixColumns  > .column
	{
		width: 25%;
	}
	.sevenColumns > .row.rowTemplate, .sevenColumns > .column
	{
		width: 25%;
	}
	.eightColumns > .row.rowTemplate, .eightColumns > .column
	{
		width: 25%;
	}
	
}
@media  (max-width:480px){
	.fiveColumns > .row.rowTemplate, .fiveColumns  > .column
	{
		width: 50%;
	}
	.sixColumns > .row.rowTemplate, .sixColumns  > .column
	{
		width: 50%;
	}
	.sevenColumns > .row.rowTemplate, .sevenColumns  > .column
	{
		width: 50%;
	}
	.eightColumns > .row.rowTemplate, .eightColumns  > .column
	{
		width: 50%;
	}
}

/* ==========================================================================
	Modern layout of the core list class (classes/core/list.php)
	Colours come from the tokens in basic/ui.css. Only rows and cells printed by the class (.listRow.fRow > .fColumn)
	get it: row templates written with .row / .column keep their float layout.
   ========================================================================== */

/* the strip above the rows: bulk actions, pages, totals, export */
.listElement .aboveListExtras
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem 1rem;
	padding: 0.25rem 0 0.75rem;
	white-space: normal;
}
/* whatever is shown: bulk select then pages at the start side, the information strip at the end side */
.listElement .aboveListExtras > .listSelectRowsHeaderHolder,
.listElement .aboveListExtras > .listPages
{
	float: none;
	margin-inline-end: 0;
}
.listElement .aboveListExtras > .listSelectRowsHeaderHolder
{
	order: 1;
}
.listElement .aboveListExtras > .listPages
{
	order: 2;
}
.listElement .aboveListExtras > .informationAboveList
{
	order: 3;
	float: none;
}
.listElement .aboveListExtras > .listSelectRowsHeaderHolder
{
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
}
.listElement .listSelectRowsHeader .menu_head
{
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	color: var(--ui-text);
}
.listElement .menu_body
{
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	box-shadow: var(--ui-shadow);
	overflow: hidden;
}
.listElement .menu_body div
{
	padding: 0.45rem 0.75rem;
}
.listElement .menu_body div.alt
{
	background: var(--ui-surface);
}
.listElement .menu_body div.hovered,
.listElement .menu_body div.active
{
	background: var(--ui-accent-soft);
}
.listPages
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}
.listPages span
{
	margin: 0;
}
.listPages .listPages_caption
{
	color: var(--ui-muted);
	margin-inline-end: 4px;
}
.listPages .listPages_number a,
.listPages .listPages_activeNumber,
.listPages .listPages_PP a,
.listPages .listPages_P a,
.listPages .listPages_N a,
.listPages .listPages_NN a,
.listPages .listPagesLastPage a
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 2.1rem;
	height: 2.1rem;
	padding: 0 0.55rem;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	color: var(--ui-text);
	text-decoration: none;
	line-height: 1;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.listPages a:hover
{
	border-color: var(--ui-accent);
	color: var(--ui-accent);
}
.listPages .listPages_activeNumber
{
	border-color: var(--ui-accent);
	background: var(--ui-accent);
	color: var(--ui-on-accent);
	font-weight: bold;
}
/* first / previous / next / last without a link (printPagesControlsAlwaysView) */
@supports selector(:has(*))
{
	.listPages span.listPages_PP:not(:has(a)),
	.listPages span.listPages_P:not(:has(a)),
	.listPages span.listPages_N:not(:has(a)),
	.listPages span.listPages_NN:not(:has(a))
	{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		min-width: 2.1rem;
		height: 2.1rem;
		padding: 0 0.55rem;
		border: 1px solid var(--ui-border);
		border-radius: var(--ui-radius);
		opacity: 0.45;
	}
}
.listPages .listPagesLastPagePreDots
{
	color: var(--ui-muted);
}
.listElement .informationAboveList
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-inline-start: auto;
	color: var(--ui-muted);
}
.listElement .informationAboveList a.pointer
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
}
.listElement .informationAboveList a.pointer:hover
{
	border-color: var(--ui-accent);
}
.listElement .listTotalRowsCount
{
	display: inline-block;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: var(--ui-soft);
	color: var(--ui-text);
	font-weight: bold;
}
.listElement .rowsPerPage .rowsPerPageClick
{
	color: var(--ui-accent);
}

/* header and rows */
.listElement .listHeaderClass
{
	border: 0;
	border-bottom: 1px solid var(--ui-border);
	border-radius: var(--ui-radius) var(--ui-radius) 0 0;
	background: var(--ui-soft);
	color: var(--ui-muted);
	font-weight: bold;
	font-size: 0.93em;
}
.listElement .listHeaderClass .fColumn
{
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
}
.listElement .listHeaderClass a
{
	color: inherit;
}
.listElement .listHeaderClass a:hover,
.listElement .listHeaderClass .listOrderActive,
.listElement .listHeaderClass .listOrderActive a
{
	color: var(--ui-accent);
}
.listElement .listHeaderClass .listOrderActive a::after
{
	content: '';
	display: inline-block;
	margin-inline-start: 0.35em;
	border: 4px solid transparent;
	vertical-align: middle;
}
.listElement .listHeaderClass .listOrderAsc a::after
{
	border-bottom-color: currentColor;
	margin-top: -4px;
}
.listElement .listHeaderClass .listOrderDesc a::after
{
	border-top-color: currentColor;
	margin-top: 4px;
}
.listElement .listRow.fRow
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--ui-border);
	transition: background-color 0.12s ease;
}
.listElement .listRow.fRow > .fColumn
{
	float: none;
	box-sizing: border-box;
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
}
/* anything else in a row (nested lists, row templates written with fRow) takes the full width */
.listElement .listRow.fRow > :not(.fColumn)
{
	flex: 0 0 100%;
}
/* table-like columns: the same geometry in the header and every row, whatever the cells hold.
   A fixed column keeps its width (all shrink by the same ratio when they add up to more than the row),
   the auto-width ones share what is left; a row wraps only for its nested list. */
.listElement .listRow.fRow,
.listElement .listHeaderClass.fRow
{
	flex-wrap: nowrap;
}
.listElement .listRow.fRow.listRowHasExtra
{
	flex-wrap: wrap;
}
.listElement .listRow.fRow > .fColumn,
.listElement .listHeaderClass.fRow > .fColumn
{
	flex: 0 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}
.listElement .listRow.fRow > .fColumnAuto,
.listElement .listHeaderClass.fRow > .fColumnAuto
{
	flex: 1 1 0;
	min-width: 6rem;
}
.listElement .listRow.fRow.listHoverClass
{
	background: var(--ui-surface-muted);
}
.listElement .listRow .button
{
	width: auto;
	min-width: 0;
	height: 2.2rem;
	padding: 0 0.7rem;
	line-height: 2.1rem;
}
/* the only button of a cell fills it: the buttons of a column all have the width of the column (the icon-only edit / delete
   buttons, several buttons in one cell, the row actions menu and rows written with a template keep their own size) */
.listElement .listRow.fRow > .fColumn > .button:only-child:not(.onlyImage):not(:has(> .listButtonText))
{
	width: 100%;
}
.listElement .listRow .button.onlyImage
{
	width: 2.2rem;
	padding: 0;
}
.listElement .weightHandler span
{
	color: var(--ui-muted);
	cursor: grab;
}
.listElement .fastChangeController .menu_head
{
	color: var(--ui-muted);
}
/* the empty row: a soft box around the core's empty state (uiEmptyState()) */
.listElement .noResultsText
{
	float: none;
	width: 100%;
	padding: 0;
	border-radius: var(--ui-radius-lg);
	background: var(--ui-soft);
	color: var(--ui-muted);
	text-align: center;
}
.listElement .listLoading
{
	padding: 1rem;
	text-align: center;
}
.listElement .button.listMoreButton
{
	display: block;
	width: auto;
	min-width: 12rem;
	margin: 0.9rem auto 0.25rem;
	border-radius: 999px;
}
.listElement .underListExtras
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1rem;
	padding-top: 0.75rem;
}
/* with the total and the page size ('infoOnBottom'): the pages at the start side, they at the end side */
.listElement .underListExtras:has(> .informationAboveList)
{
	justify-content: space-between;
}
.listElement .underListExtras > .informationAboveList
{
	float: none;
	margin-inline-start: auto;
}

/* phones: every row becomes a card, each value with its column caption */
@media (max-width: 675px)
{
	.listElement .listHeaderClass
	{
		display: none;
	}
	.listElement .listRow.fRow
	{
		display: block;
		margin: 0 0 0.6rem;
		padding: 0.6rem 0.8rem;
		border: 1px solid var(--ui-border);
		border-radius: var(--ui-radius-lg);
		background: var(--ui-surface);
	}
	.listElement .listRow.fRow > .fColumn[data-caption]
	{
		display: flex;
		align-items: baseline;
		gap: 0.75rem;
		width: 100% !important;
		padding: 0.3rem 0;
		float: none;
	}
	.listElement .listRow.fRow > .fColumn[data-caption]::before
	{
		content: attr(data-caption);
		flex: 0 0 38%;
		color: var(--ui-muted);
		font-size: 0.9em;
	}
	.listElement .listRow.fRow > .fColumn:not([data-caption])
	{
		display: inline-block;
		width: auto !important;
		margin: 0.35rem 0 0;
		margin-inline-end: 0.35rem;
		padding: 0;
		float: none;
		clear: none;
	}
	.listElement .listRow.fRow > .fColumn:not([data-caption]) .button
	{
		width: auto !important;
		min-width: 2.4rem !important;
		float: none;
	}
	.listElement .listRow.fRow .imageContainer,
	.listElement .listRow.fRow .fColumn > img
	{
		max-width: 96px;
	}
}

/* ---- fast editing: feedback, switches in cells (fastToggle), in place editing (inlineEdit) ---- */
@keyframes fastRowFlash
{
	from { background-color: var(--ui-yellow-soft); }
	to { background-color: transparent; }
}
.listElement .listRow.fastRowFlash
{
	animation: fastRowFlash 1.6s ease-out;
}
form.fastBusy
{
	opacity: 0.7;
	cursor: progress;
}
/* a switch in a cell: uiSwitch (basic/controls.css), .is-sm; disabled while it saves */
.listElement .listFastToggle > input[type="checkbox"]:disabled
{
	cursor: progress;
}
.listInlineCell
{
	position: relative;
}
.listInlineCell .listInlineEditButton
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8em;
	height: 1.8em;
	margin: 0;
	margin-right: 0.35em;
	margin-inline-start: 0.35em;
	padding: 0;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	color: var(--ui-muted);
	font-size: 0.85em;
	vertical-align: middle;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.listInlineCell:hover .listInlineEditButton,
.listInlineCell .listInlineEditButton:focus-visible,
.listInlineCell.listInlineEditing .listInlineEditButton
{
	opacity: 1;
}
.listInlineCell .listInlineEditButton:hover
{
	border-color: var(--ui-accent);
	color: var(--ui-accent);
}
@media (hover: none)
{
	.listInlineCell .listInlineEditButton
	{
		opacity: 1;
	}
}
/* the in place editor is appended to <body> and placed under its cell by scripts/core/fast.js */
.listInlineEditor
{
	position: absolute;
	z-index: 90;
	box-sizing: border-box;
	min-width: 280px;
	max-width: min(440px, 92vw);
	padding: 0.75rem;
	padding-inline-end: 2.2rem;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	background: var(--ui-surface);
	box-shadow: var(--ui-shadow-lg);
	color: var(--ui-text);
	text-align: start;
	white-space: normal;
}
/* an add more field (fast.js fastInlineWidth sets the width from its columns) */
.listInlineEditor.listInlineWide
{
	max-width: calc(100vw - 16px);
}
.listInlineEditor .loadingBar
{
	min-width: 200px;
}
.listInlineEditor .formElement .row,
.listInlineEditor .formElement .formRow
{
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}
.listInlineEditor .formElement .captionClass
{
	display: none;
}
.listInlineEditor .formElement .inputClass
{
	float: none;
	width: 100% !important;
}
/* (not the hidden value input of a kFields control: it stays 1px) */
.listInlineEditor .formElement input[type="text"]:not(.kFieldValue),
.listInlineEditor .formElement input[type="password"],
.listInlineEditor .formElement input[type="email"],
.listInlineEditor .formElement input[type="tel"],
.listInlineEditor .formElement input[type="url"],
.listInlineEditor .formElement input[type="number"],
.listInlineEditor .formElement input[type="search"],
.listInlineEditor .formElement input[type="time"],
.listInlineEditor .formElement select,
.listInlineEditor .formElement textarea,
.listInlineEditor .formElement .kSelect
{
	width: 100% !important;
}
.listInlineEditor .formElement .submit-row
{
	margin-top: 0.5rem;
}
.listInlineEditor form > br.clear
{
	display: none;
}
.listInlineEditor .button
{
	width: auto !important;
}
.listInlineCancel
{
	position: absolute;
	top: 0.45rem;
	left: 0.45rem;
	inset-inline-end: 0.45rem;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ui-muted);
	cursor: pointer;
}
.listInlineCancel:hover
{
	background: var(--ui-soft);
	color: var(--ui-text);
}
.listInlineCancel::before,
.listInlineCancel::after
{
	content: '';
	position: absolute;
	top: 50%;
	left: 25%;
	width: 50%;
	height: 1.6px;
	background: currentColor;
	transform: rotate(45deg);
}
.listInlineCancel::after
{
	transform: rotate(-45deg);
}

/* ---- list features: column toggle, sticky header, badges, row actions menu, empty state, bulk bar ---- */
.listElement .listToolButton
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2.1rem;
	height: 2.1rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	color: var(--ui-muted);
	cursor: pointer;
}
.listElement .listToolButton:hover,
.listElement .listColumnToggle.isOpen .listToolButton
{
	border-color: var(--ui-accent);
	color: var(--ui-accent);
}
.listElement .listColumnToggle
{
	position: relative;
	display: inline-flex;
}
.listElement .listColumnsMenu
{
	position: absolute;
	z-index: 90;
	top: calc(100% + 4px);
	left: 0;
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 12rem;
	max-height: 20rem;
	overflow: auto;
	padding: 0.4rem;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	background: var(--ui-surface);
	box-shadow: var(--ui-shadow-lg);
	white-space: nowrap;
}
.listElement .listColumnsMenu[hidden]
{
	display: none;
}
.listElement .listColumnsOption
{
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0.35rem 0.5rem;
	border-radius: var(--ui-radius);
	cursor: pointer;
}
.listElement .listColumnsOption:hover
{
	background: var(--ui-soft);
}

/* sticky header (the offset follows a fixed top bar through --ui-sticky-top) */
.listElement.listStickyHeader .listHeaderClass
{
	position: -webkit-sticky;
	position: sticky;
	top: var(--ui-sticky-top, 0px);
	z-index: 20;
	box-shadow: 0 1px 0 var(--ui-border);
}

/* badges: 'badges'=>array(value=>colour) */
.listTruncated
{
	cursor: help;
}

/* row actions menu */
.listElement .listRowActionsCell
{
	overflow: visible;
}
/* a page button with a menu (printElementButtons(): 'menu'): the same dropdown as the rows' */
/* in the page's row of buttons: in their order, like the other buttons (.elementsButton) */
.elementsButtonMenu
{
	float: left;
	margin-right: 5px;
	vertical-align: top;
}
.elementsButtonMenu > .listRowActionsToggle.button
{
	margin: 0;
}
.elementsButtonMenu > .listRowActionsToggle.button
{
	width: auto;
	height: auto;
	gap: 0.35rem;
	padding: 0 11px;
	color: inherit;
}
.elementsButtonMenu .listRowActionsMenu
{
	min-width: 14rem;
}
/* the page sizes (list 'rowsPerPageOptions') */
.rowsPerPageOptions select
{
	width: auto;
	min-width: 0;
	padding: 0.15rem 0.4rem;
}
.listRowActions
{
	position: relative;
	display: inline-flex;
}
.listRowActionsToggle
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	color: var(--ui-muted);
	cursor: pointer;
}
.listRowActions.isOpen .listRowActionsToggle,
.listRowActionsToggle:hover
{
	border-color: var(--ui-accent);
	color: var(--ui-accent);
}
.listRowActionsMenu
{
	position: absolute;
	z-index: 80;
	top: calc(100% + 4px);
	left: 0;
	inset-inline-end: 0;
	display: none;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 10rem;
	padding: 0.4rem;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	background: var(--ui-surface);
	box-shadow: var(--ui-shadow-lg);
}
.listRowActions.isOpen .listRowActionsMenu
{
	display: flex;
}
.listRowActions.isUp .listRowActionsMenu
{
	top: auto;
	bottom: calc(100% + 4px);
}
.listRowActionsMenu .listRowAction .button,
.listElement .listRow .listRowActionsMenu .button
{
	display: flex;
	align-items: center;
	gap: 0.35rem;
	width: 100%;
	justify-content: flex-start;
}
/* a dropdown (not the 'auto' row of buttons on wide screens): its items are menu rows, a delete is red text after a line */
.listRowActions:not(.listRowActions-auto) .listRowActionsMenu,
.listRowActions-auto.isOpen .listRowActionsMenu
{
	gap: 0;
	padding: 0.3rem;
}
.listRowActions:not(.listRowActions-auto) .listRowActionsMenu .button,
.listElement .listRow .listRowActions:not(.listRowActions-auto) .listRowActionsMenu .button
{
	height: auto;
	min-height: 2.1rem;
	margin: 0;
	padding: 0.35rem 0.6rem;
	border: 0;
	border-radius: var(--ui-radius);
	background: none;
	box-shadow: none;
	color: var(--ui-text);
	line-height: 1.4;
	text-align: start;
	white-space: nowrap;
}
.listRowActions:not(.listRowActions-auto) .listRowActionsMenu .button:hover,
.listRowActions:not(.listRowActions-auto) .listRowActionsMenu .button:focus-visible
{
	background: var(--ui-surface-muted);
}
.listRowActions:not(.listRowActions-auto) .listRowActionsMenu .button [class^="icon-"]
{
	width: 1.1rem;
	color: var(--ui-muted);
	text-align: center;
}
.listRowActions:not(.listRowActions-auto) .listRowActionsMenu .button.isCurrent,
.listRowActions:not(.listRowActions-auto) .listRowActionsMenu .button.isCurrent [class^="icon-"]
{
	color: var(--ui-accent);
	font-weight: bold;
}
.listRowActions:not(.listRowActions-auto) .listRowActionsMenu .redButton,
.listElement .listRow .listRowActions:not(.listRowActions-auto) .listRowActionsMenu .redButton
{
	margin-top: 0.3rem;
	border-top: 1px solid var(--ui-border);
	border-radius: 0 0 var(--ui-radius) var(--ui-radius);
	color: var(--ui-danger);
}
.listRowActions:not(.listRowActions-auto) .listRowActionsMenu .redButton [class^="icon-"]
{
	color: inherit;
}
@media (min-width: 676px)
{
	/* 'auto': the buttons stay in the row on wide screens */
	.listRowActions-auto .listRowActionsToggle
	{
		display: none;
	}
	.listRowActions-auto .listRowActionsMenu
	{
		position: static;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		min-width: 0;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}
	.listRowActions-auto .listRowActionsMenu .listRowAction .button,
	.listElement .listRow .listRowActions-auto .listRowActionsMenu .button
	{
		width: auto;
	}
}

/* bulk bar: follows the bottom of the screen while rows are checked */
.listElement .listBulkBar
{
	position: -webkit-sticky;
	position: sticky;
	bottom: 12px;
	z-index: 30;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	margin-top: 0.75rem;
	padding: 0.55rem 0.9rem;
	border-radius: var(--ui-radius-lg);
	background: var(--ui-text);
	box-shadow: var(--ui-shadow-lg);
	color: var(--ui-on-accent);
}
.listElement .listBulkBar[hidden]
{
	display: none;
}
.listElement .listBulkBar .listBulkCount b
{
	font-size: 1.1em;
}
.listElement .listBulkBar .listSelectRowsHeader
{
	position: relative;
	float: none;
}
.listElement .listBulkBar .listSelectRowsHeader .menu_head
{
	border-color: color-mix(in srgb, var(--ui-on-accent) 35%, transparent);
	background: color-mix(in srgb, var(--ui-on-accent) 12%, transparent);
	color: var(--ui-on-accent);
}
.listElement .listBulkBar .listSelectRowsHeader .menu_head img
{
	filter: invert(1);
}
.listElement .listBulkBar .menu_body
{
	top: auto;
	bottom: calc(100% + 6px);
	color: var(--ui-text);
}
.listElement .listBulkBar .listBulkClear
{
	margin: 0;
	margin-inline-start: auto;
	padding: 0.4rem 0.9rem;
	border: 1px solid color-mix(in srgb, var(--ui-on-accent) 35%, transparent);
	border-radius: var(--ui-radius);
	background: transparent;
	color: var(--ui-on-accent);
	font: inherit;
	cursor: pointer;
}
.listElement .listBulkBar .listBulkClear:hover
{
	background: color-mix(in srgb, var(--ui-on-accent) 12%, transparent);
}

/* phones: the toolbar above lists is a wrapping row of compact buttons, and every tap target is at least 36px
   (checkboxes 24px) */
@media (max-width: 675px)
{
	.elementsButtonsArea
	{
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		float: none;
		margin-bottom: 0.6rem;
	}
	.elementsButtonsArea .elementsButton,
	.elementsButtonsArea .button
	{
		flex: 1 1 auto;
		float: none;
		margin: 0;
		min-height: 36px;
		justify-content: center;
	}
	.listPages .listPages_number a,
	.listPages .listPages_activeNumber,
	.listPages .listPages_PP a,
	.listPages .listPages_P a,
	.listPages .listPages_N a,
	.listPages .listPages_NN a,
	.listPages .listPagesLastPage a
	{
		min-width: 36px;
		height: 36px;
	}
	.listElement .rowsPerPageClick
	{
		display: inline-flex;
		align-items: center;
		min-width: 36px;
		min-height: 36px;
		justify-content: center;
	}
	.listElement .listRow input[type="checkbox"]:not([role="switch"]),
	.listElement .listSelectRowsHeaderHolder input[type="checkbox"]
	{
		width: 24px;
		height: 24px;
	}
	.listElement .listRow .button
	{
		height: 36px;
		min-height: 36px;
		line-height: 34px;
	}
	.listElement .listRow .button.onlyImage
	{
		width: 36px !important;
	}
}

/* edit / delete in the rows (list.php editButton / deleteButton): icons with the caption as tooltip on wide screens;
   the caption shows on phones and inside a real row actions menu, and stays for screen readers */
@media (min-width: 676px)
{
	.listElement .listRow .button > .listButtonText
	{
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
	.listElement .listRow .button:has(> .listButtonText)
	{
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.4rem;
		min-width: 2.4rem;
		padding: 0;
	}
	.listElement .listRow .button:has(> .listButtonText) > [class^="icon-"]
	{
		margin: 0;
	}
	/* a real menu ('rowActionsMenu'=>true) keeps the words */
	.listElement .listRow .listRowActions:not(.listRowActions-auto) .button > .listButtonText
	{
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
	}
	.listElement .listRow .listRowActions:not(.listRowActions-auto) .button:has(> .listButtonText)
	{
		width: 100%;
		justify-content: flex-start;
		gap: 0.4rem;
		padding: 0 0.7rem;
	}
}
/* ==========================================================================
	Cards: the items of a list whose row template is a card ("cards": true in its metadata, or its variation's; its rows
	say rowCard: templates/rows .rowTemplate.rowCard > .rowTemplateInner; the other rows are list rows, which no card
	style reaches), drawn from the theme's card style (classes/core/theme_cards.php): --card-* set on an ancestor, the
	default on :root, a box's or a list's own on it. A card style shapes the card itself, never what is inside it (the
	photo, the text). Every rule is at no specificity and every property falls back to what an element draws without
	them, so nothing changes until a style sets it, and a row family's own look (its stylesheet in styles/templates/rows)
	still wins; a family whose card is its own reads the properties with its own values as fallbacks.
   ========================================================================== */
:where(.rowTemplate.rowCard) > :where(.rowTemplateInner)
{
	background-color: var(--card-bg, transparent);
	border-width: var(--card-border-width, 0px);
	border-style: var(--card-border-style, none);
	border-color: var(--card-border, currentColor);
	border-radius: var(--card-radius, 0px);
	box-shadow: var(--card-shadow, none);
	padding: var(--card-padding, 0px);
	overflow: var(--card-overflow, visible);
	backdrop-filter: var(--card-backdrop, none);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, translate 0.2s ease, background-color 0.25s ease, color 0.25s ease;
	/* the tone a style's effect and accent line paint in: the item's own colour, the row's, its category's, the style's
	   accent, the skin's accent; its text colour on it the skin's accent text */
	--card-tone: var(--item-color, var(--row-color, var(--category-color, var(--card-accent, var(--skin-accent, #1d5fbf)))));
	--card-tone-text: var(--skin-accent-text, #ffffff);
}
:where(.rowTemplate.rowCard:hover) > :where(.rowTemplateInner)
{
	border-color: var(--card-hover-border, var(--card-border, currentColor));
	box-shadow: var(--card-hover-shadow, var(--card-shadow, none));
	translate: var(--card-hover-translate, none);
}
@media (prefers-reduced-motion: reduce)
{
	:where(.rowTemplate.rowCard:hover) > :where(.rowTemplateInner) { translate: none; }
}
/* the room a card's shadow needs beside it (half its reach, at rest or under the mouse: two cards side by side share the
   gap): a family's row keeps at least this much on its sides (max(its own, var(--card-room, 0px))), so a shadow does not
   fall on the next card; a slider gives the shadow its room around them (styles/lib/swiper/kcarousel.css). Their list
   has it too, for its gutters and its slider's frame (set on each, from the card style it is under) */
:where(.listBody, .rowTemplate.rowCard)
{
	--card-room: calc(max(var(--card-reach, 0px), var(--card-hover-reach, 0px)) / 2);
}
/* the card's fill in a skinned box or list (class skin-<name>): the skin's surface, over any card style (the theme's
   default or the box's own), so the fill and the skin's text colours (heading on surface) always come from the same
   skin; the card style still shapes the card (border, corners, shadow, padding, hover). Above the families' own rules
   (their card rule reads --card-bg), under a row's own background rules (a dark row) */
[class^="skin-"] .rowTemplate.rowCard > .rowTemplateInner,
[class*=" skin-"] .rowTemplate.rowCard > .rowTemplateInner
{
	background: var(--skin-surface, var(--card-bg, transparent));
}
/* the whole card opens its article: the title's link covers the card (a layer of its ::after), the card's other links
   (its category, its author, a read more) stay above it */
:where(.rowTemplate.rowCard) > :where(.rowTemplateInner)
{
	position: relative;
}
:where(.rowTemplate.rowCard .rowTemplateTitle) a::after
{
	content: "";
	position: absolute;
	inset: 0px;
	z-index: 1;
}
:where(.rowTemplate.rowCard) :where(.rowTemplateBadge, .rowTemplateCategory, .rowTemplateAuthor, .rowTemplatePath, .rowTemplateMoreLink, .rowTemplateMoreButton, .rowTemplateFooter a)
{
	position: relative;
	z-index: 2;
}
/* ==========================================================================
	The title markup (classes/functions/features.php titleMarkup()): `word` an accent word (.titleAccent), "lead | rest"
	a title in two weights (.titleLead, .titleRest), {one|two|three} a word that turns (.titleRotate, scripts/core/
	motion.js), [icon:name] and [img:path] a small pill in the line (.titleIcon, .titlePicture). These are the defaults:
	the theme's title styles (Theme Studio → Manage headings → Title styles: themePainter_headings) are written after
	them, its accent colour as --title-accent.
   ========================================================================== */
.titleAccent
{
	color: var(--title-accent, var(--skin-accent, var(--ui-accent, currentColor)));
}
.titleRest
{
	font-weight: 300;
}
.titleRotate
{
	display: inline-block;
	color: var(--title-accent, var(--skin-accent, var(--ui-accent, currentColor)));
	transition: opacity 0.35s ease, transform 0.35s ease;
}
.titleRotate.is-out
{
	opacity: 0;
	transform: translateY(0.3em);
}
.titleIcon,
.titlePicture
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 1.1em;
	margin: 0 0.15em;
	vertical-align: -0.12em;
	border-radius: 999px;
	overflow: hidden;
}
.titleIcon
{
	width: 1.8em;
	color: var(--title-accent, var(--skin-accent, var(--ui-accent, currentColor)));
	background: color-mix(in srgb, var(--title-accent, var(--skin-accent, var(--ui-accent, #1d5fbf))) 14%, transparent);
}
.titleIcon > span
{
	font-size: 0.6em;
}
.titlePicture
{
	width: 2.2em;
}
.titlePicture img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (prefers-reduced-motion: reduce)
{
	.titleRotate { transition: none; }
}
/*
	The components every page builds from (classes/functions/components.php; core/Utils.js builds the same markup):
		.uiBadge     a status or a count            uiBadge()       tones and hues below, .is-sm, .is-count, .is-outline
		.uiChip      a label with an icon, a link   uiChip()        .is-accent, .is-muted, .is-mono, .is-sm
		.uiStats     tiles of numbers               uiStats(), uiStat()
		.uiCard      a box with a head and a foot   uiCard()        .uiCards (a grid), .is-flat, .is-link
		.uiCallout   a notice in the page           uiCallout()     .is-info, .is-success, .is-warning, .is-danger
		.uiEmpty     nothing to show yet            uiEmptyState()  .is-compact
	Tones (the meaning): accent, info, success, warning, danger, muted. Hues (categories with no meaning: a group, a type):
	blue, green, red, orange, yellow, purple, cyan, and custom (--badge-color). Colours come from the --ui-* tokens
	(basic/ui.css), so a theme changes them all. Logical properties: the same rules serve RTL and LTR.
*/

/* a component a script hides (the hidden attribute) is hidden, whatever its display */
.uiBadge[hidden],
.uiChip[hidden],
.uiStats[hidden],
.uiStat[hidden],
.uiCard[hidden],
.uiEmpty[hidden]
{
	display: none !important;
}

/* ---- badge ---- */
/* .listBadge / .listBadge-<hue>: the old names of a badge, kept for the code of the projects not synced yet */
.uiBadge,
.listBadge
{
	--badge-fg: var(--ui-muted);
	--badge-bg: var(--ui-soft);
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	max-width: 100%;
	padding: 0.1rem 0.6rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--badge-bg);
	color: var(--badge-fg);
	font-size: 0.85em;
	font-weight: bold;
	line-height: 1.55;
	white-space: nowrap;
	vertical-align: middle;
	text-decoration: none;
	box-sizing: border-box;
}
.uiBadge [class^="icon-"],
.uiBadge [class*=" icon-"],
.listBadge [class^="icon-"]
{
	float: none;
	margin: 0;
	font-size: 0.95em;
}
.uiBadge a,
.listBadge a
{
	color: inherit;
}
a.uiBadge:hover,
a.uiBadge:focus-visible,
a.listBadge:hover
{
	border-color: currentColor;
	color: var(--badge-fg);
	text-decoration: none;
}
.uiBadge.is-accent { --badge-fg: var(--ui-accent); --badge-bg: var(--ui-accent-soft); }
.uiBadge.is-info { --badge-fg: var(--ui-info); --badge-bg: var(--ui-info-soft); }
.uiBadge.is-success { --badge-fg: var(--ui-success); --badge-bg: var(--ui-success-soft); }
.uiBadge.is-warning { --badge-fg: var(--ui-warning); --badge-bg: var(--ui-warning-soft); }
.uiBadge.is-danger { --badge-fg: var(--ui-danger); --badge-bg: var(--ui-danger-soft); }
.uiBadge.is-muted { --badge-fg: var(--ui-muted); --badge-bg: transparent; border-color: var(--ui-border); font-weight: normal; }
.uiBadge.is-blue, .listBadge-blue { --badge-fg: var(--ui-info); --badge-bg: var(--ui-info-soft); }
.uiBadge.is-green, .listBadge-green { --badge-fg: var(--ui-success); --badge-bg: var(--ui-success-soft); }
.uiBadge.is-red, .listBadge-red { --badge-fg: var(--ui-danger); --badge-bg: var(--ui-danger-soft); }
.uiBadge.is-orange, .listBadge-orange { --badge-fg: var(--ui-warning); --badge-bg: var(--ui-warning-soft); }
.uiBadge.is-yellow, .listBadge-yellow { --badge-fg: var(--ui-yellow); --badge-bg: var(--ui-yellow-soft); }
.uiBadge.is-purple, .listBadge-purple { --badge-fg: var(--ui-purple); --badge-bg: var(--ui-purple-soft); }
.uiBadge.is-cyan, .listBadge-cyan { --badge-fg: var(--ui-cyan); --badge-bg: var(--ui-cyan-soft); }
.uiBadge.is-custom, .listBadge-custom { --badge-fg: var(--badge-color); --badge-bg: color-mix(in srgb, var(--badge-color) 14%, transparent); }
/* a solid badge: the tone or the hue as its fill, the text on it (a site menu's "New", a strong status) */
.uiBadge.is-solid
{
	--badge-bg: var(--badge-fg);
	color: var(--ui-on-accent);
}
.uiBadge.is-solid.is-custom
{
	--badge-bg: var(--badge-color);
}
a.uiBadge.is-solid:hover,
a.uiBadge.is-solid:focus-visible
{
	border-color: transparent;
	color: var(--ui-on-accent);
	filter: brightness(1.08);
}
/* a tone drawn as a line only (a quiet status beside others) */
.uiBadge.is-outline
{
	border-color: currentColor;
	background: transparent;
}
.uiBadge.is-sm
{
	padding: 0 0.45rem;
	font-size: 0.76em;
}
/* a number beside a name (side lists, menus, headings) */
.uiBadge.is-count
{
	justify-content: center;
	min-width: 1.6em;
	padding: 0 0.4rem;
	font-size: 0.76em;
	font-weight: normal;
	line-height: 1.7;
}
.uiBadges
{
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

/* ---- chip: a label with an icon, a link; several in .uiChips ---- */
.uiChips
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.uiChip
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	padding: 2px 10px;
	border: 1px solid var(--ui-border);
	border-radius: 999px;
	background: var(--ui-soft);
	color: var(--ui-text);
	font-size: 0.82em;
	line-height: 1.7;
	white-space: nowrap;
	text-decoration: none;
	box-sizing: border-box;
}
/* a long text shortens; its icon and its count keep their size */
.uiChip > span:not([class^="icon-"]):not(.uiBadge)
{
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
a.uiChip:hover,
a.uiChip:focus-visible,
button.uiChip:hover,
button.uiChip:focus-visible
{
	border-color: var(--ui-accent);
	color: var(--ui-accent);
	text-decoration: none;
}
button.uiChip
{
	font: inherit;
	font-size: 0.82em;
	cursor: pointer;
}
.uiChip.is-accent,
.uiChip[aria-pressed="true"]
{
	border-color: transparent;
	background: var(--ui-accent-soft);
	color: var(--ui-accent);
}
.uiChip.is-muted
{
	border-style: dashed;
	background: transparent;
	color: var(--ui-muted);
}
.uiChip.is-mono
{
	font-family: Consolas, "SFMono-Regular", Menlo, "Liberation Mono", monospace;
}
.uiChip.is-sm
{
	padding: 0 8px;
	font-size: 0.76em;
}
.uiChip .uiBadge
{
	flex: 0 0 auto;
	margin-inline-end: -4px;
}

/* ---- stat tiles: they follow the width of their panel (a container), not the window's ---- */
.uiStats
{
	container-type: inline-size;
	margin-block: 0 1rem;
}
.uiStatsGrid
{
	display: grid;
	/* a short row stretches over the width */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: 0.75rem;
}
.uiStat
{
	--stat-edge: transparent;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	min-width: 0;
	padding: 0.85rem 1rem;
	border: 1px solid var(--ui-border);
	border-inline-start: 3px solid var(--stat-edge);
	border-radius: var(--ui-radius-lg);
	background: var(--ui-surface);
	color: var(--ui-text);
	text-align: start;
	text-decoration: none;
	box-sizing: border-box;
}
.uiStat:not(.is-accent):not(.is-success):not(.is-warning):not(.is-danger):not(.is-info)
{
	border-inline-start-width: 1px;
}
a.uiStat:hover,
a.uiStat:focus-visible,
button.uiStat:hover,
button.uiStat:focus-visible
{
	border-color: var(--ui-accent);
	box-shadow: var(--ui-shadow);
	color: var(--ui-text);
	text-decoration: none;
}
button.uiStat
{
	font: inherit;
	cursor: pointer;
}
.uiStat.is-accent { --stat-edge: var(--ui-accent); }
.uiStat.is-info { --stat-edge: var(--ui-info); }
.uiStat.is-success { --stat-edge: var(--ui-success); }
.uiStat.is-warning { --stat-edge: var(--ui-warning); }
.uiStat.is-danger { --stat-edge: var(--ui-danger); }
.uiStatTop
{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
}
.uiStatIcon
{
	flex: 0 0 auto;
	color: var(--ui-accent);
	font-size: 1.15em;
}
.uiStat.is-warning .uiStatIcon { color: var(--ui-warning); }
.uiStat.is-danger .uiStatIcon { color: var(--ui-danger); }
.uiStat.is-success .uiStatIcon { color: var(--ui-success); }
.uiStatValue
{
	color: var(--ui-text-strong);
	font-size: 1.6em;
	font-weight: bold;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.uiStatLabel
{
	color: var(--ui-muted);
	font-size: 0.92em;
	line-height: 1.4;
}
.uiStatHint
{
	color: var(--ui-muted);
	font-size: 0.82em;
	line-height: 1.4;
}
.uiStatDelta
{
	display: inline-flex;
	align-items: center;
	gap: 0.2em;
	padding: 0 0.45rem;
	border-radius: 999px;
	background: var(--ui-soft);
	color: var(--ui-muted);
	font-size: 0.8em;
	font-weight: bold;
	line-height: 1.6;
	white-space: nowrap;
}
.uiStatDelta.is-up { background: var(--ui-success-soft); color: var(--ui-success); }
.uiStatDelta.is-down { background: var(--ui-danger-soft); color: var(--ui-danger); }
/* compact tiles: the dense developer tools, a strip of small numbers */
.uiStats.is-compact .uiStatsGrid
{
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
	gap: 0.5rem;
}
.uiStats.is-compact .uiStat
{
	padding: 0.55rem 0.75rem;
	border-radius: var(--ui-radius);
}
.uiStats.is-compact .uiStatValue
{
	font-size: 1.25em;
}
/* a narrow panel: two tiles a line, smaller numbers */
@container (max-width: 26rem)
{
	.uiStatsGrid,
	.uiStats.is-compact .uiStatsGrid
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
	}
	.uiStat
	{
		padding: 0.6rem 0.75rem;
	}
	.uiStatValue
	{
		font-size: 1.3em;
	}
}

/* ---- card ---- */
.uiCards
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: 0.9rem;
}
/* a card of a grid answers to its own width (its column's), not the window's: the container query below */
.uiCards > .uiCard
{
	container: uiCard / inline-size;
}
.uiCard
{
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	background: var(--ui-surface);
	color: var(--ui-text);
	text-align: start;
	box-sizing: border-box;
}
.uiCard.is-flat
{
	border-color: transparent;
	background: var(--ui-surface-muted);
}
a.uiCard,
button.uiCard
{
	font: inherit;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
a.uiCard:hover,
a.uiCard:focus-visible,
button.uiCard:hover,
button.uiCard:focus-visible,
.uiCard.is-link:hover
{
	border-color: var(--ui-accent);
	box-shadow: var(--ui-shadow);
	color: inherit;
	text-decoration: none;
}
.uiCard.is-current
{
	border-color: var(--ui-accent);
	box-shadow: 0 0 0 1px var(--ui-accent);
}
.uiCardHead
{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.5rem 0.6rem;
	padding: 0.8rem 1rem;
	border-bottom: 1px solid var(--ui-border-soft);
}
.uiCard > .uiCardHead:last-child
{
	border-bottom: 0;
}
/* a card that folds (uiCard 'tag'=>'details'): its head opens it */
details.uiCard > summary.uiCardHead
{
	cursor: pointer;
	list-style: none;
}
details.uiCard > summary.uiCardHead::-webkit-details-marker
{
	display: none;
}
/* (its own chevron, at the end: not the one controls.css gives every summary) */
details.uiCard > summary.uiCardHead
{
	color: inherit;
}
details.uiCard > summary.uiCardHead::before
{
	content: none;
}
details.uiCard > summary.uiCardHead::after
{
	content: "";
	flex: 0 0 auto;
	align-self: center;
	width: 0.45em;
	height: 0.45em;
	margin-inline: 0.25rem;
	border-inline-end: 2px solid var(--ui-muted);
	border-bottom: 2px solid var(--ui-muted);
	transform: rotate(45deg);
	transition: transform 0.15s;
}
details.uiCard:not([open]) > summary.uiCardHead
{
	border-bottom: 0;
}
details.uiCard:not([open]) > summary.uiCardHead::after
{
	transform: rotate(-45deg);
}
[dir="rtl"] details.uiCard:not([open]) > summary.uiCardHead::after
{
	transform: rotate(135deg);
}
.uiCardHead .uiCardIcon
{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: var(--ui-radius);
	background: var(--ui-accent-soft);
	color: var(--ui-accent);
	font-size: 1.05em;
}
.uiCardTitles
{
	flex: 1 1 9rem;
	min-width: 0;
}
/* a title that is a link: the card's colour, the accent on hover */
.uiCard .uiCardTitle a
{
	color: inherit;
	text-decoration: none;
}
.uiCard .uiCardTitle a:hover,
.uiCard .uiCardTitle a:focus-visible
{
	color: var(--ui-accent);
}
/* the theme styles the page's headings: here the title is plain */
.uiCard .uiCardTitle
{
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ui-text-strong);
	font-size: 1em;
	font-weight: bold;
	line-height: 1.45;
	overflow-wrap: anywhere;
}
.uiCardSub
{
	margin: 0.15rem 0 0;
	color: var(--ui-muted);
	font-size: 0.9em;
	line-height: 1.45;
}
.uiCardActions
{
	flex: 0 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}
/* the theme's buttons are made for a form's foot: smaller in a card's head and foot */
.uiCardActions .button,
.uiCardActions .elementsButton,
.uiCardFoot .button,
.uiCardFoot .elementsButton
{
	height: 2.1rem;
	padding: 0 0.7rem;
	font-size: 0.88em;
}
/* the theme floats a button's icon on a fixed line height: in a component the icon and the text are a centred row */
.uiCardActions .button,
.uiCardFoot .button,
.uiCalloutActions .button,
.uiEmptyActions .button
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	width: auto;
	margin: 0;
	line-height: 1.3;
}
.uiCardActions .button > [class^="icon-"],
.uiCardFoot .button > [class^="icon-"],
.uiCalloutActions .button > [class^="icon-"],
.uiEmptyActions .button > [class^="icon-"]
{
	float: none;
	margin: 0;
}
.uiCardBody
{
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.85rem 1rem;
}
.uiCardBody > :first-child
{
	margin-top: 0;
}
.uiCardBody > :last-child
{
	margin-bottom: 0;
}
.uiCardFoot
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	border-top: 1px solid var(--ui-border-soft);
	color: var(--ui-muted);
	font-size: 0.9em;
}
.uiCard.is-flat .uiCardHead,
.uiCard.is-flat .uiCardFoot
{
	border-color: var(--ui-border);
}

/* ---- callout: a notice that stays in the page ---- */
.uiCallout
{
	--callout-fg: var(--ui-info);
	--callout-bg: var(--ui-info-soft);
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-block: 0 1rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid color-mix(in srgb, var(--callout-fg) 28%, transparent);
	border-radius: var(--ui-radius-lg);
	background: var(--callout-bg);
	color: var(--ui-text);
	text-align: start;
	line-height: 1.55;
}
.uiCallout.is-success { --callout-fg: var(--ui-success); --callout-bg: var(--ui-success-soft); }
.uiCallout.is-warning { --callout-fg: var(--ui-warning); --callout-bg: var(--ui-warning-soft); }
.uiCallout.is-danger { --callout-fg: var(--ui-danger); --callout-bg: var(--ui-danger-soft); }
.uiCallout.is-muted { --callout-fg: var(--ui-muted); --callout-bg: var(--ui-soft); }
.uiCalloutIcon
{
	flex: 0 0 auto;
	margin-top: 0.15em;
	color: var(--callout-fg);
	font-size: 1.1em;
}
.uiCalloutText
{
	flex: 1 1 auto;
	min-width: 0;
}
.uiCalloutTitle
{
	display: block;
	color: var(--callout-fg);
}
.uiCalloutText > p
{
	margin: 0.15rem 0 0;
}
.uiCalloutText > p:first-child
{
	margin-top: 0;
}
/* more than a line (body): paragraphs, a list */
.uiCalloutBody
{
	margin-top: 0.35rem;
}
.uiCalloutBody > :first-child
{
	margin-top: 0;
}
.uiCalloutBody > :last-child
{
	margin-bottom: 0;
}
.uiCalloutActions
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.5rem;
}
.uiCalloutClose
{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	margin: -0.25rem;
	padding: 0;
	border: 0;
	border-radius: var(--ui-radius);
	background: transparent;
	color: var(--callout-fg);
	cursor: pointer;
}
.uiCalloutClose:hover,
.uiCalloutClose:focus-visible
{
	background: color-mix(in srgb, var(--callout-fg) 12%, transparent);
}
.uiCallout[hidden]
{
	display: none;
}

/* ---- empty state: nothing to show yet, and what to do about it ---- */
.uiEmpty
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 2rem 1rem;
	color: var(--ui-muted);
	text-align: center;
}
.uiEmptyIcon
{
	color: var(--ui-border-strong);
	font-size: 2.6rem;
	line-height: 1;
}
/* the default picture: an empty tray, drawn in the icon's colour (the icon font has none) */
.uiEmptyIcon.is-tray
{
	display: block;
	width: 1.25em;
	height: 1.25em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13.5 6 6h12l2.5 7.5'/%3E%3Cpath d='M3.5 13.5V18a1.5 1.5 0 0 0 1.5 1.5h14a1.5 1.5 0 0 0 1.5-1.5v-4.5h-5l-1.5 2h-4l-1.5-2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13.5 6 6h12l2.5 7.5'/%3E%3Cpath d='M3.5 13.5V18a1.5 1.5 0 0 0 1.5 1.5h14a1.5 1.5 0 0 0 1.5-1.5v-4.5h-5l-1.5 2h-4l-1.5-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.uiEmptyTitle
{
	color: var(--ui-text);
	font-weight: bold;
}
.uiEmptyText
{
	max-width: 32rem;
	margin: 0;
}
.uiEmptyBody
{
	max-width: 36rem;
	text-align: start;
}
.uiEmptyActions
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.25rem;
}
.uiEmpty.is-compact
{
	flex-direction: row;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.9rem 0.75rem;
}
.uiEmpty.is-compact .uiEmptyIcon
{
	font-size: 1.1em;
}
.uiEmpty.is-compact .uiEmptyIcon.is-tray
{
	font-size: 1.1em;
}
.uiEmpty.is-compact .uiEmptyActions
{
	margin: 0;
}

/* ---- a wide table or grid that scrolls sideways inside its box, not the page: min-width: 0 lets it shrink in a grid or
	flex parent, position: relative keeps its absolutely placed children (hidden texts) inside the scroll ---- */
.uiScrollX
{
	position: relative;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
}

/* ---- phones: the buttons of a card's head, a callout and an empty state side by side (not the theme's one a line) ---- */
@media (max-width: 675px)
{
	.uiCardActions .button,
	.uiCardFoot .button,
	.uiCalloutActions .button,
	.uiEmptyActions .button
	{
		flex: 1 1 auto;
		width: auto !important;
	}
}
/* a narrow card of a grid (a phone, a side panel, many columns): its foot's buttons share the line */
@container uiCard (max-width: 20rem)
{
	.uiCardFoot .button
	{
		flex: 1 1 auto;
	}
}
.hiddenRadioInput input[type="radio"]
{
	display: none;
}
.hiddenRadioInput:hover
{
	background: var(--ui-soft);
}
.radioDivs
{
	width: 100%;
}
.radioDiv.hiddenRadioInput.activeRadioInput
{
	background: var(--ui-border-soft);
}
.radioDiv.hiddenRadioInput
{
	padding: 5px;
}
.radioDiv.hiddenRadioInput.hiddenRadioInputBigPadding
{
	padding: 10px;
}
/* a choice whose radio is hidden is reached with Tab (scripts/core/Utils.js): where the focus is */
.radioDiv.hiddenRadioInput:focus-visible
{
	outline: 2px solid var(--ui-accent);
	outline-offset: 2px;
}
.addMoreFilePreview
{
	float: right;
}
.addMoreMinusImage
{
	cursor: pointer;
	position: absolute;
	top: 0px;
	left: 0px;
}
.addMoreCell
{
	padding-left: 5px;
}
.addMoreHeaderClass
{
	background:var(--ui-surface-muted);
	border-top:1px solid var(--ui-border);
	border-bottom:1px solid var(--ui-border);
	line-height: 21px;
}
.addMoreFormWrap .row
{
	padding-right: 5px;
}
.row.addMoreRow
{
	padding: 8px;
	position: relative;
	border: 1px solid var(--ui-border-soft);
	margin-bottom: 10px !important;
	box-shadow: 0px 0px 10px 1px var(--ui-border-soft);
}
.addMoreRow.hovered{
	background: var(--ui-soft);
}
input[type="text"].addMoreInput, .addMoreCell select,
.addMoreCell input.addMoreInput[type="email"], .addMoreCell input.addMoreInput[type="tel"], .addMoreCell input.addMoreInput[type="url"],
.addMoreCell input.addMoreInput[type="number"], .addMoreCell input.addMoreInput[type="search"], .addMoreCell .inputWarning, .formTransferFieldSelect .inputWarning,
.addMoreCell .kField-link
{
	width: 100%;
}
.addMoreCell
{
	display: inline-block;
	vertical-align: top;
}
form legend
{
	right: 3px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea {
  -webkit-appearance: none;
  /* the theme's field style (classes/core/theme_fields.php) sets --fld-*: the default on :root, a box's own on the box */
  background-color: var(--fld-bg, var(--ui-surface));
  font-family: inherit;
  border-width: var(--fld-border-width, 1px);
  border-style: var(--fld-border-style, solid);
  border-color: var(--fld-border, var(--ui-border-strong));
  border-radius: var(--fld-radius, var(--ui-radius));
  box-shadow: var(--fld-shadow, none);
  color: var(--fld-fg, var(--ui-text));
  font-size: 1.07rem;
  padding: 0.5rem var(--fld-padding-x, 0.5rem);
  height: var(--ui-control-height);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  transition: box-shadow 0.45s, border-color 0.45s ease-in-out; }
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="email"]:focus,
  input[type="tel"]:focus,
  input[type="url"]:focus,
  input[type="number"]:focus,
  input[type="search"]:focus,
  input[type="date"]:focus,
  input[type="time"]:focus,
  input[type="datetime-local"]:focus,
  input[type="month"]:focus,
  input[type="week"]:focus,
  textarea:focus {
    background: var(--fld-focus-bg, var(--fld-bg, var(--ui-surface)));
    border-color: var(--fld-focus-border, var(--ui-accent));
    box-shadow: var(--fld-ring, 0 0 0 3px var(--ui-accent-soft));
    outline: none; }
  input[type="text"][disabled], fieldset[disabled] input[type="text"],
  input[type="password"][disabled], fieldset[disabled]
  input[type="password"],
  textarea[disabled], fieldset[disabled]
  textarea {
    background-color: var(--ui-border); }
  input[type="text"].radius,
  input[type="password"].radius,
  textarea.radius {
    border-radius: 3px; }

input[type="submit"] {
  -webkit-appearance: none; }

textarea
{
	height: auto;
	min-height: 80px;
	width: 100%;
}
.table.captionsLong .captionClass
{
	width: 35%;
}
.formElement .captionClass
{
	padding: 0.5rem 0rem;
	line-height: 1.6rem;
}
.captionClass, .captionClass.column
{
	
	width: 25%;
}
.captionClass, .checkboxLabel
{
	font-size: 1.1rem;
}
.inputClass 
{
	position: relative;
}
.table.captionsLong .inputClass,
.table.captionsLong .column.inputClass, 
.row.hiddenCaption .table.captionsLong .row .inputClass
{
	width: 65%;
}
.inputClass, 
.column.inputClass, 
.row.hiddenCaption .row .inputClass,
.row .fieldsBesideEachOther .inputClass,
.row.hiddenCaption .fieldsBesideEachOther .inputClass,
.row .fieldsBesideEachOther.hiddenCaption .fieldsBesideEachOther .inputClass,
.row.hiddenCaption .fieldsBesideEachOther.hiddenCaption .fieldsBesideEachOther .inputClass
{
	width: 75%;
}
.table.captionsLong .column.twoInputsShouldFitAsOneInput
{
	width: 48.75%; /*75% * 65%*/
}
.column.twoInputsShouldFitAsOneInput
{
	width: 56.25%; /*75% * 75%*/
}
.table.captionsLong .inputClass.fieldWithoutCaption, 
.table.captionsLong .column.inputClass.fieldWithoutCaption, 
.row.hiddenCaption .inputClass.fieldWithoutCaption, 
.fieldsBesideEachOther.hiddenCaption .inputClass, 
.row.hiddenCaption .fieldsBesideEachOther.hiddenCaption .inputClass,
.row .fieldsBesideEachOther.hiddenCaption .fieldsBesideEachOther.hiddenCaption .inputClass,
.row.hiddenCaption .fieldsBesideEachOther.hiddenCaption .fieldsBesideEachOther.hiddenCaption .inputClass
{
	width: 100%;
}
.inputWarning{
	color: var(--ui-danger);
	font-size:12px;
}
.inputOk{
	color: var(--ui-success);
	font-size:12px;
}
input[type="text"],
input[type="password"],
.inputOk,
.inputWarning,
form .camera,
.passwordStrengthDiv .progressWrapper,
select,
.ui-spinner, 
.inputClass .ui-slider.ui-slider-horizontal
{
	width: 75%;
}
.checkboxLabel p
{
	display: inline;
}
.radioDiv
{
	padding: 2px 0px;
	display: block;
}
.radioDiv.inlineBlockMiddle, .radioDiv.inlineBlock
{
	display: inline-block;
}
select::-ms-expand {
	display: none; }
textarea[rows] {
	height: auto; }

select option{
	padding: 0.21rem;
}
/* (the chevron, the listboxes and the popup: basic/controls.css) */
select {
	-webkit-appearance: none;
	appearance: none;
	border-width: var(--fld-border-width, 1px);
	border-style: var(--fld-border-style, solid);
	border-color: var(--fld-border, var(--ui-border-strong));
	padding: 0.5rem var(--fld-padding-x, 0.5rem);
	font-size: 1rem;
	color: var(--fld-fg, var(--ui-text));
	background-color: var(--fld-bg, var(--ui-surface));
	box-shadow: var(--fld-shadow, none);
	line-height: normal;
	border-radius: var(--fld-radius, var(--ui-radius));
	height: var(--ui-control-height)}


label {
  cursor: pointer;
  font-weight: normal;
  line-height: 1.3;
  margin-bottom: 0;
  /* Styles for required inputs */ }

  
	/* Normalize file input width */
input[type="file"] {
  width: 100%; }

  
select.multiple
{
	height: auto;
}
.formFileDeleteAndInputDiv
{
	float: right;
	width: 55%;
}
.formFilePreview
{
	float: right;
	padding-left: 15px;
	width: 20%;
	line-height: 32px;
	min-height: 80px;
	overflow: hidden;
}
.formFileDelete
{
	float: right;
	padding-left: 15px;
	cursor: pointer;
	line-height: 32px;
	width: 25%;
}
.formFileInput
{
	float: right;
	width: 75%;
	line-height: 32px;
}
.fieldsBesideEachOther input[type="text"],
.fieldsBesideEachOther input[type="password"],
.fieldsBesideEachOther input[type="email"],
.fieldsBesideEachOther input[type="tel"],
.fieldsBesideEachOther input[type="url"],
.fieldsBesideEachOther input[type="number"],
.fieldsBesideEachOther input[type="search"],
.fieldsBesideEachOther input[type="time"],
.fieldsBesideEachOther .inputOk,
.fieldsBesideEachOther .inputWarning,
.fieldsBesideEachOther .camera,
.fieldsBesideEachOther .passwordStrengthDiv .progressWrapper,
.fieldsBesideEachOther #suggestionDiv,
.fieldsBesideEachOther select,
.fieldsBesideEachOther .kField-picker,
.fieldsBesideEachOther .kField-link,
.inputsFullWidth input[type="text"],
.inputsFullWidth input[type="password"],
.inputsFullWidth input[type="email"],
.inputsFullWidth input[type="tel"],
.inputsFullWidth input[type="url"],
.inputsFullWidth input[type="number"],
.inputsFullWidth input[type="search"],
.inputsFullWidth input[type="time"],
.inputsFullWidth .inputOk,
.inputsFullWidth .inputWarning,
.inputsFullWidth .camera,
.inputsFullWidth .passwordStrengthDiv .progressWrapper,
.inputsFullWidth #suggestionDiv,
.inputsFullWidth select,
.inputsFullWidth .kField-picker,
.inputsFullWidth .kField-link
{
	width: 100%;
}
.fieldsBesideEachOther
{
	float: right;
	width: 50%;
	padding-right: 2px;
}
.fieldsBesideEachOther.fieldsBesideEachOtherComesFirst
{
	padding-right: 0px;
}
.ui-spinner input
{
	width: 100%;
	margin: 0px;
}
.ui-datepicker  select
{
	height: 1.9rem;
	padding: 0.2rem;
}
.phoneFieldWrapper
{
	display: flex;
}
.phoneAreaField
{
	width: 85px;
}
.phoneCountryAndAreaField
{
	width: 120px;
}
.phoneMainField
{
	flex: 1;
}
.phoneMainWithCountryField
{
	flex: 1;
}
.formRow.caption-row .captionClass
{
	padding: 0px;
}
.formRow.textarea-row .camera
{
	width: 100%;
}
.formRow .camera:hover
{
	border-color: transparent;
}
.inputOverlay 
{
	width: 2rem;
	height: 2rem;
	position: absolute;
	top: 0.33rem;
	left: 0.33rem;
	border-radius: 3px;
}
.flippedInputOverlay.inputOverlay 
{
	left: auto;
	right: 0.33rem;
}
/* the value never runs under the overlay (icon or colour preview next to the input) */
.inputClass input:has(~ .inputOverlay:not(.flippedInputOverlay))
{
	padding-left: 2.8rem;
}
.inputClass input:has(~ .flippedInputOverlay)
{
	padding-right: 2.8rem;
}
.passwordGeneratorButton
{
	vertical-align: top;
}
/* 'transfer' selects: styles/kQuery/kTransfer/ui.css (appended with them by form.php transferWrap) */

.addMoreVerticalMode .addMoreCell
{
	width: 100%;
	padding: 3px 0px;
}
.addMoreVerticalMode .addMoreCellCaption
{
	padding: 0.5rem 0rem;
	line-height: 1.6rem;
}
.addMoreView.addMoreVerticalMode .addMoreCellCaption
{
	padding: 0.2rem 0rem;
}

.kMapExternalMarkers
{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10;
}
.kMapExternalMarker:hover
{
	background: var(--ui-soft);
}
.kMapExternalMarker img
{
	max-width: 32px;
	max-height: 32px;
}
.kMapExternalMarker
{
	padding: 8px;	
	background: var(--ui-surface);
	color: var(--ui-muted);
	font-size: 11px;
	box-shadow: var(--ui-shadow-sm);
	min-width: 37px;
	border-radius: 2px;
	text-align: center;
	cursor: pointer;
}
.uiSliderInputClass
{
	padding-top: 9px;
	line-height: 11px;
}
form .lingualControls
{
	display: flex;
	flex-direction: row;
	margin-bottom: 5px;
	justify-content: end;
	font-size: 1rem;
}
form .lingualControl
{
	padding: 5px 10px;
	background: var(--ui-soft);
	margin-right: 5px;
	cursor: pointer;
	border-radius: 2px;
	box-shadow: 0px 0px 3px 0px var(--ui-border-strong);
}
form .lingualControl.active
{
	background: var(--ui-success-soft);
}
form .informLingualControl
{
	cursor: pointer;
	position: relative;
	font-size: 0.85rem;
	z-index: 10;
}
form .informLingualControl .informLingualControls
{
	position: absolute;
	bottom: -36px;
	left: 0px;
	right: 0px;
	margin: auto;
	justify-content: center;
}

/* ==========================================================================
	Modern controls and layout of the core form / search / view classes
	(classes/core/form.php, search.php, view.php). Colours come from the tokens in basic/ui.css.
	Control looks are scoped to .formElement; widths use :where() so the theme files still win.
   ========================================================================== */

/* ---- inputs, textareas, selects: drawn from the theme's field style (--fld-*), the tokens when it sets none ---- */
.formElement input[type="text"],
.formElement input[type="password"],
.formElement input[type="email"],
.formElement input[type="tel"],
.formElement input[type="url"],
.formElement input[type="number"],
.formElement input[type="search"],
.formElement input[type="time"],
.formElement textarea,
.formElement select
{
	border-width: var(--fld-border-width, 1px);
	border-style: var(--fld-border-style, solid);
	border-color: var(--fld-border, var(--ui-border-strong));
	border-radius: var(--fld-radius, var(--ui-radius));
	background-color: var(--fld-bg, var(--ui-surface));
	box-shadow: var(--fld-shadow, none);
	color: var(--fld-fg, var(--ui-text));
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.formElement input[type="text"]:hover,
.formElement input[type="password"]:hover,
.formElement input[type="email"]:hover,
.formElement input[type="tel"]:hover,
.formElement input[type="url"]:hover,
.formElement input[type="number"]:hover,
.formElement input[type="search"]:hover,
.formElement input[type="time"]:hover,
.formElement textarea:hover,
.formElement select:hover
{
	border-color: var(--fld-hover-border, var(--ui-border-input));
}
.formElement input[type="text"]:focus,
.formElement input[type="password"]:focus,
.formElement input[type="email"]:focus,
.formElement input[type="tel"]:focus,
.formElement input[type="url"]:focus,
.formElement input[type="number"]:focus,
.formElement input[type="search"]:focus,
.formElement input[type="time"]:focus,
.formElement textarea:focus,
.formElement select:focus
{
	outline: 0;
	border-color: var(--fld-focus-border, var(--ui-accent));
	background-color: var(--fld-focus-bg, var(--fld-bg, var(--ui-surface)));
	box-shadow: var(--fld-ring, 0 0 0 3px var(--ui-accent-soft));
}
.formElement input[type="text"][disabled],
.formElement input[type="password"][disabled],
.formElement input[type="email"][disabled],
.formElement input[type="tel"][disabled],
.formElement input[type="url"][disabled],
.formElement input[type="number"][disabled],
.formElement input[type="search"][disabled],
.formElement input[type="time"][disabled],
.formElement textarea[disabled],
.formElement select[disabled]
{
	border-color: var(--ui-border);
	background-color: var(--ui-soft);
	color: var(--ui-muted);
}
/* selects lost their arrow to appearance: none; a chevron on the end side (single selects only) */
.formElement select:not([multiple]):not([size]),
.formElement select[size="1"]:not([multiple])
{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 0.8rem center;
	padding-left: 2rem;
	cursor: pointer;
}
.formElement select[multiple],
.formElement select[size]:not([size="1"])
{
	padding: 0.25rem;
}
.formElement input::placeholder,
.formElement textarea::placeholder
{
	color: var(--fld-placeholder, var(--ui-placeholder));
}
/* same width as the other inputs (themes that make them 100% still win) */
:where(.formElement) textarea
{
	width: 75%;
}
.formElement input[type="file"]::file-selector-button
{
	margin-left: 0.75rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--ui-border-strong);
	border-radius: var(--ui-radius);
	background: var(--ui-soft);
	color: var(--ui-text);
	cursor: pointer;
}
.formElement input[type="file"]::file-selector-button:hover
{
	background: var(--ui-border-soft);
}
.formElement .formFilePreview img
{
	border-radius: var(--ui-radius);
}

/* ---- captions, required star, notes, messages ---- */
.formElement .captionClass
{
	color: var(--fld-label, var(--ui-text));
}
.formElement .requiredStar
{
	color: var(--ui-danger);
	font-weight: bold;
}
.formElement span.camera
{
	display: block;
	margin: 0.3rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ui-muted);
	font-size: 0.92em;
	line-height: 1.5;
}
.formElement .inputWarning,
.formElement .inputOk
{
	display: block;
	box-sizing: border-box;
	margin: 0.4rem 0 0;
	padding: 0.45rem 0.75rem;
	border: 0;
	border-inline-start: 3px solid currentColor;
	border-radius: 4px;
	font-size: 0.95em;
	line-height: 1.5;
}
.formElement .inputWarning
{
	background: var(--ui-danger-soft);
	color: var(--ui-danger);
}
.formElement .inputOk
{
	background: var(--ui-success-soft);
	color: var(--ui-success);
}
/* the field next to an error (server or client side) is marked too */
.formElement .inputClass:has(> .inputWarning) > input[type="text"],
.formElement .inputClass:has(> .inputWarning) > input[type="password"],
.formElement .inputClass:has(> .inputWarning) > input[type="email"],
.formElement .inputClass:has(> .inputWarning) > input[type="tel"],
.formElement .inputClass:has(> .inputWarning) > input[type="url"],
.formElement .inputClass:has(> .inputWarning) > input[type="number"],
.formElement .inputClass:has(> .inputWarning) > input[type="search"],
.formElement .inputClass:has(> .inputWarning) > input[type="time"],
.formElement .inputClass:has(> .inputWarning) > textarea,
.formElement .inputClass:has(> .inputWarning) > select,
.formElement .inputClass:has(> .inputWarning) > span > select
{
	border-color: var(--ui-danger);
}

/* ---- switch (checkbox, checkboxes): the core switch .uiSwitch (basic/controls.css); here only its place in a form ---- */
.formElement .radioDiv.formSwitch
{
	padding: 3px 0;
}
.formElement [id$="CheckBoxes"]
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
}
/* styled check box: required (consent) boxes stay boxes */
.formElement .formCheck > input[type="checkbox"]
{
	width: 1.15em;
	height: 1.15em;
	margin: 0;
	margin-left: 0.45em;
	margin-inline-end: 0.45em;
	margin-inline-start: 0;
	vertical-align: -0.15em;
	cursor: pointer;
}

/* ---- segmented radios (a few short options): the core .uiSegmented (basic/controls.css) ---- */

/* ---- styled radio list (longer or more options) ---- */
.formElement .radioDivs.formRadios
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.4rem;
}
.formElement .formRadios > .radioDiv
{
	padding: 3px 0;
}
.formElement .formRadios > .radioDiv > input[type="radio"]
{
	-webkit-appearance: none;
	appearance: none;
	width: 1.15em;
	height: 1.15em;
	margin: 0;
	margin-left: 0.45em;
	margin-inline-end: 0.45em;
	margin-inline-start: 0;
	border: 1.5px solid var(--ui-border-strong);
	border-radius: 50%;
	background: var(--ui-surface);
	vertical-align: -0.2em;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.formElement .formRadios > .radioDiv > input[type="radio"]:hover
{
	border-color: var(--ui-accent);
}
.formElement .formRadios > .radioDiv > input[type="radio"]:checked
{
	border-color: var(--ui-accent);
	background: var(--ui-accent);
	box-shadow: inset 0 0 0 0.2em var(--ui-surface);
}
.formElement .formRadios > .radioDiv > input[type="radio"]:focus-visible
{
	outline: 2px solid var(--ui-focus);
	outline-offset: 2px;
}

/* ---- groups (fieldset; the workspaces' too) ---- */
.formElement fieldset,
.viewElement fieldset,
.uiWs fieldset
{
	display: block;
	width: 100%;
	margin: 1.25rem 0 0.75rem;
	padding: 0.75rem 1.25rem 1rem;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	background: var(--ui-surface);
	box-shadow: none;
}
.formElement fieldset > legend,
.viewElement fieldset > legend,
.uiWs fieldset > legend
{
	position: static;
	float: none;
	width: auto;
	margin: 0 -0.35rem;
	padding: 0 0.5rem;
	color: var(--ui-text);
	font-size: 1.1rem;
	font-weight: bold;
}

/* ---- search forms (classes/core/search.php): a compact grid of filters ---- */
.formElement.searchElement
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 0.85rem 1.25rem;
	align-items: end;
}
.formElement.searchElement > .row.formRow
{
	float: none;
	width: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
}
.formElement.searchElement > .row.formRow > .captionClass
{
	float: none;
	width: 100%;
	padding: 0 0 0.3rem;
	line-height: 1.4;
	font-size: 0.95rem;
}
.formElement.searchElement > .row.formRow > .inputClass
{
	float: none;
	width: 100%;
}
.formElement.searchElement > .row.formRow input[type="text"],
.formElement.searchElement > .row.formRow input[type="email"],
.formElement.searchElement > .row.formRow input[type="tel"],
.formElement.searchElement > .row.formRow input[type="url"],
.formElement.searchElement > .row.formRow input[type="number"],
.formElement.searchElement > .row.formRow input[type="search"],
.formElement.searchElement > .row.formRow input[type="time"],
.formElement.searchElement > .row.formRow select,
.formElement.searchElement > .row.formRow .kSelect,
.formElement.searchElement > .row.formRow .kField-picker,
.formElement.searchElement > .row.formRow .kField-link,
.formElement.searchElement > .row.formRow .inputWarning
{
	width: 100%;
}
.formElement.searchElement > .row.formRow.radio-row
{
	grid-column: span 2;
}
/* a segmented filter fills its cell, as tall as the inputs beside it */
.formElement.searchElement > .row.formRow .radioDivs.formSegmented
{
	display: flex;
	box-sizing: border-box;
	width: 100%;
}
.formElement.searchElement > .row.formRow .formSegmented > .radioDiv
{
	flex: 1 1 auto;
	text-align: center;
}
/* a checkbox filter has no caption: it sits in the middle of the inputs band */
.formElement.searchElement > .row.formRow.checkbox-row > .inputClass
{
	display: flex;
	align-items: center;
	min-height: var(--ui-control-height);
}
/* the search button: its own line under the filters */
.formElement.searchElement > .row.formRow.submit-row
{
	grid-column: 1 / -1;
	padding-top: 0.85rem;
	border-top: 1px solid var(--ui-border);
}
.formElement.searchElement > .row.formRow.submit-row > .captionClass
{
	display: none;
}
.formElement.searchElement > .row.formRow.submit-row > .inputClass
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.formElement.searchElement > .row.formRow.submit-row input[type="submit"]
{
	width: auto;
	min-width: 9rem;
	border-color: var(--ui-accent);
	background: var(--ui-accent);
	color: var(--ui-on-accent);
}

/* ---- view (classes/core/view.php) ---- */
.viewElement > .row,
.viewElement fieldset > .row
{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--ui-border);
}
.viewElement > .row:last-child,
.viewElement fieldset > .row:last-child
{
	border-bottom: 0;
}
.viewElement > .row > .captionClass,
.viewElement fieldset > .row > .captionClass
{
	float: none;
	flex: 0 0 25%;
	width: auto;
	color: var(--ui-muted);
	font-weight: normal;
}
.viewElement.captionsLong > .row > .captionClass,
.viewElement.captionsLong fieldset > .row > .captionClass
{
	flex-basis: 35%;
}
.viewElement > .row > .inputClass,
.viewElement fieldset > .row > .inputClass
{
	float: none;
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	color: var(--ui-text);
}
.viewElement > .row > .inputClass.fieldWithoutCaption,
.viewElement fieldset > .row > .inputClass.fieldWithoutCaption
{
	flex-basis: 100%;
}
.viewElement .inputClass .imageContainer,
.viewElement .inputClass > img,
.viewElement .inputClass > a > img
{
	max-width: min(100%, 420px);
	border-radius: var(--ui-radius);
}

@media (max-width: 675px)
{
	/* captions go above the fields on phones */
	.formElement .formRow > .captionClass
	{
		float: none;
		width: 100%;
		padding-bottom: 0.2rem;
	}
	.formElement .formRow > .inputClass,
	:where(.formElement) .formRow > .inputClass input[type="text"],
	:where(.formElement) .formRow > .inputClass input[type="password"],
	:where(.formElement) .formRow > .inputClass input[type="email"],
	:where(.formElement) .formRow > .inputClass input[type="tel"],
	:where(.formElement) .formRow > .inputClass input[type="url"],
	:where(.formElement) .formRow > .inputClass input[type="number"],
	:where(.formElement) .formRow > .inputClass input[type="search"],
	:where(.formElement) .formRow > .inputClass input[type="time"],
	:where(.formElement) .formRow > .inputClass select,
	:where(.formElement) .formRow > .inputClass textarea,
	:where(.formElement) .formRow > .inputClass .kSelect,
	:where(.formElement) .formRow > .inputClass .kField-picker,
	:where(.formElement) .formRow > .inputClass .kField-link
	{
		width: 100%;
	}
	.formElement.searchElement > .row.formRow.radio-row
	{
		grid-column: auto;
	}
	.viewElement > .row,
	.viewElement fieldset > .row
	{
		display: block;
	}
	.viewElement > .row > .captionClass,
	.viewElement fieldset > .row > .captionClass
	{
		padding-bottom: 0.15rem;
		font-size: 0.92em;
	}
}

/* ---- search tools (search.php 'quickSearch', 'filterChips') ---- */
/* the "Filters" button that shows / hides the search form, with the number of filters in use */
.searchToggler.button
{
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	width: auto;
	height: 2.6rem;
	padding: 0 1rem;
	border: 1px solid var(--ui-border-strong);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	background-image: none;
	box-shadow: none;
	text-shadow: none;
	color: var(--ui-text);
	font-size: 1rem;
	line-height: 1;
}
.searchToggler.button::before
{
	content: "\f1de";
	font-family: 'icomoon';
	font-size: 1.05rem;
	color: var(--ui-muted);
}
.searchToggler.button[data-count]:not([data-count="0"])::after
{
	content: attr(data-count);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--ui-accent);
	color: var(--ui-on-accent);
	font-size: 0.8rem;
	font-weight: 600;
}
.searchToggler.button:hover,
.searchToggler.button:focus-visible
{
	border-color: var(--ui-accent);
	color: var(--ui-accent);
}
/* the Filters button and the quick search on one line */
.searchBar
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.6rem;
}
.searchBar > .searchToggler
{
	float: none;
	margin: 0;
}
.searchBar > .searchQuick
{
	margin: 0;
}
.searchTools
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	margin: 0 0 0.9rem;
}
.searchQuick
{
	display: flex;
	flex: 1 1 18rem;
	max-width: 34rem;
	margin: 0;
}
.searchQuick .searchQuickInput
{
	-webkit-appearance: none;
	appearance: none;
	flex: 1 1 auto;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	height: 2.6rem;
	margin: 0;
	padding: 0 0.8rem;
	border: 1px solid var(--ui-border-strong);
	border-inline-end: 0;
	border-start-start-radius: var(--ui-radius);
	border-end-start-radius: var(--ui-radius);
	border-start-end-radius: 0;
	border-end-end-radius: 0;
	background: var(--ui-surface);
	color: var(--ui-text);
	font: inherit;
}
.searchQuick .searchQuickInput:focus
{
	outline: 0;
	border-color: var(--ui-accent);
	box-shadow: 0 0 0 3px var(--ui-accent-soft);
}
.searchQuick .searchQuickButton
{
	flex: 0 0 auto;
	width: 2.9rem;
	height: 2.6rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ui-accent);
	border-start-end-radius: var(--ui-radius);
	border-end-end-radius: var(--ui-radius);
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	background: var(--ui-accent);
	color: var(--ui-on-accent);
	font-size: 1.05rem;
	cursor: pointer;
}
.searchQuick .searchQuickButton:hover
{
	filter: brightness(0.95);
}
.searchChips
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	flex-basis: 100%;
}
.searchChip
{
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.35rem 0.2rem 0.7rem;
	padding-inline-start: 0.7rem;
	padding-inline-end: 0.35rem;
	border: 1px solid var(--ui-accent-soft);
	border-radius: 999px;
	background: var(--ui-accent-soft);
	color: var(--ui-accent);
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}
.searchChip:hover
{
	border-color: var(--ui-accent);
	text-decoration: none;
}
.searchChipCaption
{
	color: var(--ui-muted);
}
.searchChipRemove
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	font-size: 1rem;
	line-height: 1;
}
.searchChip:hover .searchChipRemove
{
	background: var(--ui-accent);
	color: var(--ui-on-accent);
}
.searchChipsClear
{
	padding: 0.2rem 0.5rem;
	color: var(--ui-muted);
	text-decoration: underline;
}

/* ---- view features: prev / next, columns, groups as tabs ---- */
.viewPrevNext
{
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 0.9rem;
}
.viewPrevNextLink
{
	display: inline-flex;
	flex-direction: column;
	max-width: 46%;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	color: var(--ui-text);
	text-decoration: none;
}
.viewPrevNextLink:hover
{
	border-color: var(--ui-accent);
	text-decoration: none;
}
.viewPrevNext-next
{
	align-items: flex-end;
	text-align: end;
}
.viewPrevNextWord
{
	color: var(--ui-muted);
	font-size: 0.85em;
}
.viewPrevNextTitle
{
	overflow: hidden;
	color: var(--ui-accent);
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (min-width: 1101px)
{
	.viewElement.viewColumns,
	.viewElement.viewColumns fieldset,
	.viewElement.viewColumns .viewTabRows
	{
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2rem;
		align-content: start;
	}
	.viewElement.viewColumns-3,
	.viewElement.viewColumns-3 fieldset,
	.viewElement.viewColumns-3 .viewTabRows
	{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.viewElement.viewColumns > fieldset,
	.viewElement.viewColumns > .ui_tabs,
	.viewElement.viewColumns > .ui-tabs,
	.viewElement.viewColumns > div[id^="tabs_"],
	.viewElement.viewColumns fieldset > legend,
	.viewElement.viewColumns fieldset > .fieldsetSubText,
	.viewElement.viewColumns > br
	{
		grid-column: 1 / -1;
	}
}

/* ---- the save row (form.php submit) ---- */
.formElement:not(.searchElement) .row.formRow.submit-row input[type="submit"].button
{
	min-width: 8rem;
	height: 2.6rem;
	padding: 0 1.4rem;
	font-size: 1.05rem;
}
/* 'stickySubmit': the last save row stays at the bottom of the screen while the form is taller than it */
.formElement.formStickySubmit .row.formRow.submit-row:not(:has(~ .submit-row))
{
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
	z-index: 20;
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
	border-top: 1px solid var(--ui-border);
	background: var(--ui-surface);
	box-shadow: 0 -6px 14px -10px color-mix(in srgb, var(--ui-text-strong) 35%, transparent);
}
/* the buttons of the sticky row side by side ("save", "save and continue"), not half the row each */
.formElement.formStickySubmit .row.formRow.submit-row:not(:has(~ .submit-row)) .fieldsBesideEachOther
{
	width: auto;
	margin-left: 10px;
}

/* fields scrolled to (focus, Tab, validation) stop above the pinned save row instead of under it */
html:has(.formStickySubmit)
{
	scroll-padding-bottom: 5.5rem;
}
/* the upload button (Fine Uploader): white text readable on it */
.formElement .qq-upload-button
{
	background-color: var(--ui-cyan);
}
.formElement .qq-upload-button.qq-upload-button-hover,
.formElement .qq-upload-button:hover
{
	background-color: color-mix(in srgb, var(--ui-cyan) 85%, var(--ui-text-strong));
}

/* ---- Form tools (classes/core/form.php settings, scripts/core/formTools.js) ---- */
.formTools {
	position: sticky;
	top: var(--ui-sticky-top, 0px);
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 8px;
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
}
/* phones: the bar scrolls away with the page (held at the top it covered the fields under it) */
@media (max-width: 675px) {
	.formTools {
		position: static;
	}
}
.formToolsSearch {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 260px;
	min-width: 0;
}
.formToolsSearch [class^="icon-"] {
	color: var(--ui-muted);
}
.formToolsSearch input[type=search] {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}
.formToolsCount {
	color: var(--ui-muted);
	font-size: 0.9em;
	white-space: nowrap;
}
.formToolsFold {
	display: flex;
	gap: 4px;
}
/* a permission field: the groups holding the chosen permission (features.php permissionHoldersScript()) */
.permissionHolders {
	margin-top: 4px;
	color: var(--ui-muted);
	font-size: 0.8rem;
}
/* the unsaved changes found in the browser (draft): restore / discard */
.formToolsDraft {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 12px;
	padding: 8px 12px;
	border: 1px solid color-mix(in srgb, var(--ui-warning) 30%, transparent);
	border-radius: var(--ui-radius);
	background: var(--ui-warning-soft);
}
.formToolsDraftButtons {
	display: flex;
	gap: 6px;
}
.formTools.formToolsCompact {
	position: static;
	justify-content: flex-end;
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	background: none;
}
.formToolsCompact .formToolsFold .button {
	height: auto;
	min-width: 0;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.8rem;
	line-height: 1.6;
}
.formToolsNav {
	display: flex;
	gap: 6px;
	flex: 1 1 100%;
	overflow-x: auto;
	padding-bottom: 2px;
	scrollbar-width: thin;
}
.formToolsNavLink {
	flex: 0 0 auto;
	padding: 3px 10px;
	border: 1px solid var(--ui-border);
	border-radius: 999px;
	color: var(--ui-text);
	text-decoration: none;
	font-size: 0.9em;
	white-space: nowrap;
}
.formToolsNavLink:hover,
.formToolsNavActive {
	border-color: var(--ui-accent);
	color: var(--ui-accent);
	background: var(--ui-accent-soft);
}
form[data-form-tools] fieldset {
	scroll-margin-top: 90px;
}
.formToolsGroupFlash {
	animation: formToolsGroupFlash 1.6s ease-out;
}
@keyframes formToolsGroupFlash {
	0%, 35% {
		box-shadow: 0 0 0 3px var(--ui-accent);
		background-color: var(--ui-accent-soft);
	}
	100% {
		box-shadow: 0 0 0 3px transparent;
	}
}
@media (prefers-reduced-motion: reduce) {
	.formToolsGroupFlash {
		animation-duration: 0.01s;
		outline: 3px solid var(--ui-accent);
	}
}
.formToolsLegend {
	cursor: pointer;
	user-select: none;
}
.formToolsFoldButton {
	border: 0;
	background: none;
	padding: 0 4px;
	cursor: pointer;
	color: inherit;
	vertical-align: middle;
}
.formToolsChevron {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-bottom: 3px;
	transition: transform 0.15s;
}
.formToolsCollapsed .formToolsChevron {
	transform: rotate(-45deg);
}
[dir=rtl] .formToolsCollapsed .formToolsChevron,
.rtl .formToolsCollapsed .formToolsChevron {
	transform: rotate(135deg);
}
.formToolsCollapsed:not(.formToolsSearchOpen) > :not(legend) {
	display: none !important;
}
.formToolsFilteredOut,
.formToolsLangHidden {
	display: none !important;
}
.formToolsSearching .formToolsMatch {
	background: var(--ui-accent-soft);
}
.formRow.formToolsChanged {
	box-shadow: inset 3px 0 0 var(--ui-accent);
}
[dir=rtl] .formRow.formToolsChanged,
.rtl .formRow.formToolsChanged {
	box-shadow: inset -3px 0 0 var(--ui-accent);
}
.formToolsRevert,
.formToolsReset {
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	color: var(--ui-muted);
	cursor: pointer;
	padding: 2px 6px;
	margin-inline-start: 6px;
	vertical-align: middle;
}
.formToolsRevert:hover,
.formToolsReset:hover {
	color: var(--ui-accent);
	border-color: var(--ui-accent);
}
.formToolsBar {
	position: sticky;
	bottom: 0;
	z-index: 6;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 12px;
	padding: 10px 12px;
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	box-shadow: var(--ui-shadow-lg);
}
.formToolsBar[hidden],
.formToolsBar [hidden] {
	display: none !important;
}
/* the save row whose buttons are in the bar ('stickySubmit' with the changes tracked) */
.formElement .row.formRow.submit-row.formToolsSubmitMoved {
	display: none;
}
.formToolsBarSubmit .formToolsBarButtons input[type=submit] {
	width: auto;
	margin: 0;
}
.formToolsBarButtons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
/* a button keeps its whole caption (on phones "save and continue" was cut): the buttons go to another line instead */
.formToolsBarButtons > input[type=submit],
.formToolsBarButtons > button {
	flex: 0 0 auto;
}
/* phones: the bar's buttons share their line (the core makes every .button full width there) */
@media (max-width: 480px) {
	.formToolsBarSubmit .formToolsBarButtons {
		flex: 1 1 100%;
	}
	.formToolsBarButtons > input[type=submit],
	.formToolsBarButtons > button {
		flex: 1 1 auto;
		width: auto !important;
	}
}
/* the languages as tabs (multilingualLayout 'tabs'): a uiTabs bar (basic/tabs.css) */

/* ---- addMore rows (classes/functions/addmore.php, scripts/core/addMore.js) ----
   a row: [drag handle + number] [the fields] [move up / down, duplicate, remove]; vertical mode and phones: a card
   with that bar on top. The header has the same three parts so its captions sit over their fields. */
.addMoreFormWrap
{
	width: 100%;
}
.addMoreFormWrap .addMoreForm
{
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.addMoreFormWrap .row.addMoreRow,
.addMoreFormWrap .row.addMoreHeaderClass
{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 0.5rem;
	float: none;
	box-sizing: border-box;
	width: 100%;
	margin: 0 !important;
	padding: 0.45rem 0.5rem;
}
.addMoreFormWrap .row.addMoreRow
{
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.addMoreFormWrap .row.addMoreRow:hover,
.addMoreFormWrap .row.addMoreRow:focus-within
{
	border-color: var(--ui-border-strong);
}
.addMoreFormWrap .row.addMoreHeaderClass
{
	padding-top: 0;
	padding-bottom: 0.15rem;
	border: 0;
	background: none;
	color: var(--ui-muted);
	font-size: 0.92em;
	font-weight: bold;
	line-height: 1.4;
}
.addMoreFormWrap .addMoreRowBar
{
	display: contents;
}
.addMoreFormWrap .addMoreRowStart,
.addMoreFormWrap .addMoreRowTools
{
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--ui-control-height);
}
.addMoreFormWrap .addMoreRowStart
{
	order: 0;
	gap: 0.2rem;
	width: 3.4rem;
}
.addMoreFormWrap .addMoreRowTools
{
	order: 2;
	justify-content: flex-end;
	gap: 2px;
	width: calc(4 * 2rem + 6px);
}
.addMoreFormWrap .row.addMoreHeaderClass .addMoreRowStart,
.addMoreFormWrap .row.addMoreHeaderClass .addMoreRowTools
{
	min-height: 0;
}
.addMoreFormWrap .addMoreCells
{
	display: flex;
	flex: 1 1 0;
	flex-wrap: nowrap;
	align-items: flex-start;
	order: 1;
	min-width: 0;
}
.addMoreFormWrap .addMoreCells > .addMoreCell
{
	box-sizing: border-box;
	min-width: 0;
	padding: 0;
	padding-left: 0.5rem;
	padding-inline-end: 0.5rem;
	padding-inline-start: 0;
}
.addMoreFormWrap .addMoreCells > .addMoreCell:last-child
{
	padding-left: 0;
	padding-inline-end: 0;
}
.addMoreFormWrap .addMoreCells > .addMoreCellType_checkbox
{
	display: flex;
	align-items: center;
	min-height: var(--ui-control-height);
}
.addMoreFormWrap .addMoreCell textarea,
.addMoreFormWrap .addMoreCell input[type="file"]
{
	box-sizing: border-box;
	width: 100%;
}
.addMoreFormWrap .addMoreCell .radioDivs.formRadios
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1rem;
	min-height: var(--ui-control-height);
	align-items: center;
}
.addMoreFormWrap .addMoreCell .radioDivs.formRadios > .radioDiv
{
	float: none;
	margin: 0;
}
.addMoreFormWrap .addMoreRowError
{
	flex: 0 0 100%;
	order: 3;
}
.addMoreFormWrap .addMoreRowError:empty
{
	display: none;
}
.addMoreFormWrap .addMoreSeparator
{
	flex: 0 0 100%;
	order: -1;
}

/* the drag handle, the row number and the row tools */
.addMoreFormWrap .addMoreHandle
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 2rem;
	border-radius: 4px;
	color: var(--ui-muted);
	cursor: grab;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}
.addMoreFormWrap .addMoreHandle:hover
{
	background: var(--ui-soft);
	color: var(--ui-text);
}
.addMoreFormWrap .addMoreHandle:focus-visible,
.addMoreFormWrap .addMoreTool:focus-visible,
.addMoreFormWrap .addMoreAdd:focus-visible
{
	outline: 2px solid var(--ui-focus);
	outline-offset: 1px;
}
.addMoreFormWrap .addMoreRowNumber
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 0.25rem;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--ui-soft);
	color: var(--ui-muted);
	font-size: 0.8em;
	line-height: 1;
}
.addMoreFormWrap .addMoreRowTools .addMoreTool,
.addMoreFormWrap .addMoreRowTools .addMoreTool.addMoreMinusImage
{
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 4px;
	background: transparent;
	color: var(--ui-muted);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}
.addMoreFormWrap .addMoreRowTools .addMoreTool:hover:not(:disabled)
{
	background: var(--ui-soft);
	color: var(--ui-text);
}
.addMoreFormWrap .addMoreRowTools .addMoreRemove:hover:not(:disabled)
{
	background: var(--ui-danger-soft);
	color: var(--ui-danger);
}
.addMoreFormWrap .addMoreRowTools .addMoreTool:disabled
{
	opacity: 0.35;
	cursor: default;
}
/* the row tools menu of phones: on wider screens the tools stay in the bar */
.addMoreFormWrap .addMoreToolsList
{
	display: contents;
}
.addMoreFormWrap .addMoreToolsMore,
.addMoreFormWrap .addMoreToolText
{
	display: none;
}
/* one row: nothing to move */
.addMoreFormWrap.addMoreSingleRow .addMoreHandle,
.addMoreFormWrap.addMoreSingleRow .addMoreMoveUp,
.addMoreFormWrap.addMoreSingleRow .addMoreMoveDown
{
	visibility: hidden;
}
.addMoreFormWrap .row.addMoreRow.addMoreDragging
{
	position: relative;
	z-index: 2;
	border-color: var(--ui-accent);
	box-shadow: var(--ui-shadow-lg);
}
.addMoreFormWrap.addMoreDragActive,
.addMoreFormWrap.addMoreDragActive *
{
	cursor: grabbing;
	-webkit-user-select: none;
	user-select: none;
}

/* under the rows: the add button, the count (with a maximum) and the min / max messages */
.addMoreFormWrap .addMoreFooter
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
}
.addMoreFormWrap .addMoreFooter .addMoreAdd
{
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	height: 2.4rem;
	margin: 0;
	padding: 0 1rem;
	border: 1px dashed var(--ui-border-strong);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	color: var(--ui-accent);
	font: inherit;
	cursor: pointer;
}
.addMoreFormWrap .addMoreFooter .addMoreAdd:hover:not(:disabled)
{
	border-style: solid;
	border-color: var(--ui-accent);
	background: var(--ui-accent-soft);
}
.addMoreFormWrap .addMoreFooter .addMoreAdd:disabled
{
	opacity: 0.45;
	cursor: not-allowed;
}
.addMoreFormWrap .addMoreCount
{
	color: var(--ui-muted);
	font-size: 0.9em;
}
.addMoreFormWrap .addMoreMsg .alert
{
	display: inline-block;
	margin-top: 0.4rem;
	color: var(--ui-danger);
}

/* vertical mode (and every row on a phone): a card with its bar on top */
.addMoreFormWrap.addMoreVerticalMode .row.addMoreRow,
.addMoreFormWrap.addMoreTemplateMode .row.addMoreRow
{
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
}
.addMoreFormWrap.addMoreVerticalMode .addMoreRowBar,
.addMoreFormWrap.addMoreTemplateMode .addMoreRowBar
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.2rem 0.4rem;
	border-bottom: 1px solid var(--ui-border);
	border-radius: var(--ui-radius) var(--ui-radius) 0 0;
	background: var(--ui-soft);
}
.addMoreFormWrap.addMoreVerticalMode .addMoreRowStart,
.addMoreFormWrap.addMoreVerticalMode .addMoreRowTools,
.addMoreFormWrap.addMoreTemplateMode .addMoreRowStart,
.addMoreFormWrap.addMoreTemplateMode .addMoreRowTools
{
	width: auto;
	min-height: 0;
}
.addMoreFormWrap.addMoreVerticalMode .addMoreCells,
.addMoreFormWrap.addMoreTemplateMode .addMoreCells
{
	display: block;
	padding: 0.5rem 0.75rem;
}
.addMoreFormWrap.addMoreVerticalMode .addMoreRowError,
.addMoreFormWrap.addMoreTemplateMode .addMoreRowError
{
	padding: 0 0.75rem 0.5rem;
}

@media (max-width: 675px)
{
	.addMoreFormWrap .row.addMoreHeaderClass
	{
		display: none;
	}
	.addMoreFormWrap .row.addMoreRow
	{
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0;
	}
	.addMoreFormWrap .addMoreRowBar
	{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.2rem 0.4rem;
		border-bottom: 1px solid var(--ui-border);
		border-radius: var(--ui-radius) var(--ui-radius) 0 0;
		background: var(--ui-soft);
	}
	.addMoreFormWrap .addMoreRowStart,
	.addMoreFormWrap .addMoreRowTools
	{
		width: auto;
		min-height: 0;
	}
	.addMoreFormWrap .addMoreCells
	{
		display: block;
		padding: 0.5rem 0.75rem;
	}
	.addMoreFormWrap:not(.addMoreVerticalMode):not(.addMoreTemplateMode) .addMoreCells > .addMoreCell
	{
		display: block;
		width: 100% !important;
		padding: 0.25rem 0;
	}
	.addMoreFormWrap:not(.addMoreVerticalMode):not(.addMoreTemplateMode) .addMoreCells > .addMoreCell[data-caption]:not([data-caption=""]):not([data-caption=" "])::before
	{
		content: attr(data-caption);
		display: block;
		margin-bottom: 0.2rem;
		color: var(--ui-muted);
		font-size: 0.85em;
	}
	.addMoreFormWrap .addMoreRowError
	{
		padding: 0 0.75rem 0.5rem;
	}
	.addMoreFormWrap .addMoreHandle,
	.addMoreFormWrap .addMoreRowTools .addMoreTool,
	.addMoreFormWrap .addMoreRowTools .addMoreTool.addMoreMinusImage
	{
		width: 36px;
		height: 36px;
	}
	/* the tools fold into one "more" menu, so the bar keeps room for the row number and summary */
	.addMoreFormWrap .addMoreRowTools
	{
		position: relative;
	}
	.addMoreFormWrap .addMoreToolsMore
	{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		margin: 0;
		padding: 0;
		border: 1px solid transparent;
		border-radius: 4px;
		background: transparent;
		color: var(--ui-muted);
		font-size: 1rem;
		line-height: 1;
		cursor: pointer;
	}
	.addMoreFormWrap .addMoreRowTools.addMoreToolsOpen .addMoreToolsMore
	{
		border-color: var(--ui-border);
		background: var(--ui-surface);
		color: var(--ui-text);
	}
	.addMoreFormWrap .addMoreToolsMore:focus-visible
	{
		outline: 2px solid var(--ui-focus);
		outline-offset: 1px;
	}
	.addMoreFormWrap .addMoreToolsList
	{
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 20;
		display: none;
		flex-direction: column;
		box-sizing: border-box;
		min-width: 12rem;
		margin-top: 2px;
		padding: 4px;
		border: 1px solid var(--ui-border);
		border-radius: var(--ui-radius);
		background: var(--ui-surface);
		box-shadow: var(--ui-shadow-lg);
	}
	.addMoreFormWrap .addMoreRowTools.addMoreToolsOpen .addMoreToolsList
	{
		display: flex;
	}
	.addMoreFormWrap .addMoreRowTools .addMoreToolsList .addMoreTool,
	.addMoreFormWrap .addMoreRowTools .addMoreToolsList .addMoreTool.addMoreMinusImage
	{
		justify-content: flex-start;
		gap: 0.6rem;
		width: 100%;
		height: 40px;
		padding: 0 0.6rem;
		color: var(--ui-text);
		text-align: start;
		white-space: nowrap;
	}
	.addMoreFormWrap .addMoreRowTools .addMoreToolsList .addMoreTool.addMoreRemove,
	.addMoreFormWrap .addMoreRowTools .addMoreToolsList .addMoreTool.addMoreRemove.addMoreMinusImage
	{
		color: var(--ui-danger);
	}
	.addMoreFormWrap .addMoreToolsList .addMoreToolText
	{
		display: inline;
		font-size: 0.95rem;
	}
}

/* the read-only view of the rows (list and view pages) */
.addMoreView .row.addMoreRow,
.addMoreView .row.addMoreHeaderClass
{
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	float: none;
	box-sizing: border-box;
	width: 100%;
	margin: 0 !important;
	padding: 0.4rem 0.5rem;
	border: 0;
	border-bottom: 1px solid var(--ui-border);
	border-radius: 0;
	box-shadow: none;
}
.addMoreView .row.addMoreHeaderClass
{
	background: var(--ui-soft);
	color: var(--ui-muted);
	font-size: 0.92em;
	font-weight: bold;
}
.addMoreView .addMoreRow > .addMoreCell,
.addMoreView .addMoreHeaderClass > .addMoreCell
{
	box-sizing: border-box;
	min-width: 0;
	padding: 0;
	padding-left: 0.5rem;
	padding-inline-end: 0.5rem;
	padding-inline-start: 0;
	overflow-wrap: anywhere;
}
.addMoreView.addMoreVerticalMode .row.addMoreRow
{
	flex-wrap: wrap;
}
@media (max-width: 675px)
{
	.addMoreView:not(.addMoreVerticalMode) .row.addMoreHeaderClass
	{
		display: none;
	}
	.addMoreView:not(.addMoreVerticalMode) .row.addMoreRow
	{
		display: block;
	}
	.addMoreView:not(.addMoreVerticalMode) .addMoreRow > .addMoreCell
	{
		display: block;
		width: 100% !important;
		padding: 0.15rem 0;
	}
	.addMoreView:not(.addMoreVerticalMode) .addMoreRow > .addMoreCell[data-caption]:not([data-caption=""])::before
	{
		content: attr(data-caption) ':';
		margin-left: 0.35rem;
		margin-inline-end: 0.35rem;
		color: var(--ui-muted);
	}
}

/* ---- addMore options (addMore_settings) ---- */
/* the tools column fits the tools a page keeps (sortable, insertable, duplicable, removable) */
.addMoreFormWrap .addMoreRowTools
{
	width: calc(var(--addmore-tools, 5) * 2rem + 8px);
}
/* a closed row ('collapsible'): its bar with the number, the open / close button and a summary of its values */
.addMoreFormWrap .addMoreToggle
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--ui-muted);
	cursor: pointer;
}
.addMoreFormWrap .addMoreToggle:hover
{
	background: var(--ui-surface);
	color: var(--ui-text);
}
.addMoreFormWrap .addMoreToggle:focus-visible
{
	outline: 2px solid var(--ui-focus);
	outline-offset: 1px;
}
.addMoreFormWrap .addMoreToggle > span
{
	transition: transform 0.15s ease;
}
.addMoreFormWrap .addMoreCollapsed .addMoreToggle > span
{
	transform: rotate(90deg);
}
html[dir="rtl"] .addMoreFormWrap .addMoreCollapsed .addMoreToggle > span,
.rtlDirection .addMoreFormWrap .addMoreCollapsed .addMoreToggle > span
{
	transform: rotate(-90deg);
}
.addMoreFormWrap .addMoreRowStart
{
	min-width: 0;
}
.addMoreFormWrap .addMoreRowSummary
{
	overflow: hidden;
	min-width: 0;
	color: var(--ui-text);
	font-weight: bold;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.addMoreFormWrap.addMoreCollapsible .addMoreRowStart
{
	flex: 1 1 auto;
}
.addMoreFormWrap .row.addMoreRow.addMoreCollapsed > .addMoreCells,
.addMoreFormWrap .row.addMoreRow.addMoreCollapsed > .addMoreRowError,
.addMoreFormWrap .row.addMoreRow.addMoreCollapsed > .addMoreRowNotice
{
	display: none;
}
.addMoreFormWrap .row.addMoreRow.addMoreCollapsed > .addMoreRowBar
{
	border-bottom: 0;
	border-radius: var(--ui-radius);
}
.addMoreFormWrap:not(.addMoreCollapsible) .addMoreRowSummary
{
	display: none;
}
/* a repeated value of a 'unique' field */
.addMoreFormWrap .addMoreDuplicateValue
{
	border-color: var(--ui-danger) !important;
	box-shadow: 0 0 0 2px var(--ui-danger-soft);
}
.addMoreFormWrap .addMoreRowNotice
{
	flex: 0 0 100%;
	order: 4;
	color: var(--ui-danger);
	font-size: 0.92em;
}
.addMoreFormWrap .addMoreRowNotice:empty
{
	display: none;
}
.addMoreFormWrap.addMoreVerticalMode .addMoreRowNotice,
.addMoreFormWrap.addMoreTemplateMode .addMoreRowNotice
{
	padding: 0 0.75rem 0.5rem;
}
/* "Row 2 removed. Undo" */
.addMoreFormWrap .addMoreUndoNote
{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
	padding: 0.35rem 0.6rem;
	border-radius: var(--ui-radius);
	background: var(--ui-soft);
	color: var(--ui-text);
}
.addMoreFormWrap .addMoreUndo
{
	margin: 0;
	padding: 0.15rem 0.6rem;
	border: 1px solid var(--ui-border-strong);
	border-radius: 4px;
	background: var(--ui-surface);
	color: var(--ui-accent);
	font: inherit;
	cursor: pointer;
}
/* a closed tools panel (the empty state of 'min'=>0 hides by its attribute: components.css) */
.addMoreFormWrap .addMorePanel[hidden]
{
	display: none;
}
.addMoreFormWrap.addMoreNoRows .row.addMoreHeaderClass
{
	display: none;
}
/* the footer tools (paste rows, JSON, open / close all) and their panel */
.addMoreFormWrap .addMoreFooterTools
{
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-inline-start: auto;
}
.addMoreFormWrap .addMoreFooterTool,
.addMoreFormWrap .addMorePanelButtons button
{
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	height: 2rem;
	margin: 0;
	padding: 0 0.7rem;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	color: var(--ui-text);
	font: inherit;
	font-size: 0.92em;
	cursor: pointer;
}
.addMoreFormWrap .addMoreFooterTool:hover,
.addMoreFormWrap .addMorePanelButtons button:hover
{
	border-color: var(--ui-border-strong);
	background: var(--ui-soft);
}
.addMoreFormWrap .addMorePanelButtons .addMorePanelApply
{
	border-color: var(--ui-accent);
	background: var(--ui-accent);
	color: var(--ui-on-accent);
}
.addMoreFormWrap .addMorePanel
{
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin-top: 0.5rem;
	padding: 0.75rem;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-soft);
}
.addMoreFormWrap .addMorePanelLabel
{
	color: var(--ui-muted);
	font-size: 0.92em;
}
.addMoreFormWrap .addMorePanel textarea.addMorePanelText
{
	box-sizing: border-box;
	width: 100%;
	min-height: 7rem;
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 0.92em;
}
.addMoreFormWrap .addMorePanelButtons
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}
.addMoreFormWrap .addMorePanelNote
{
	color: var(--ui-muted);
	font-size: 0.92em;
}
/* fields of other kinds inside the rows */
.addMoreFormWrap .addMoreCell .formSwitch
{
	margin: 0;
}
.addMoreFormWrap .addMoreCell .radioDivs.formSegmented
{
	vertical-align: top;
}
.addMoreFormWrap:not(.addMoreVerticalMode) .addMoreCell .formSegmented > .radioDiv
{
	padding: 0.35em 0.65em;
}
.addMoreFormWrap .addMoreCell .kField,
.addMoreFormWrap .addMoreCell .radioDivs.formRating
{
	max-width: 100%;
}
/* money: the amount and its currency fill the cell together */
.addMoreFormWrap .addMoreCell .formAffixGroup
{
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
}
/* 'layout'=>'compact': no frames, for short lists of one or two fields */
.addMoreFormWrap.addMoreLayout-compact .addMoreForm
{
	gap: 0.15rem;
}
.addMoreFormWrap.addMoreLayout-compact .row.addMoreRow
{
	padding: 0.1rem 0;
	border: 0;
	border-radius: 0;
	background: none;
}
.addMoreFormWrap.addMoreLayout-compact .row.addMoreHeaderClass
{
	padding-left: 0;
	padding-right: 0;
}
.addMoreFormWrap.addMoreLayout-compact .addMoreRowNumber
{
	display: none;
}
/* 'stickyHeader': the captions stay in sight over a long list */
.addMoreFormWrap.addMoreStickyHeader .row.addMoreHeaderClass
{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 3;
	padding-top: 0.35rem;
	background: var(--ui-surface);
	box-shadow: 0 1px 0 var(--ui-border);
}
/* 'columns' cards: 2 - 4 fields per line on wide screens, captions over their fields */
@media (min-width: 1101px)
{
	.addMoreFormWrap.addMoreColumns .addMoreCells
	{
		display: grid;
		gap: 0.15rem 1rem;
	}
	.addMoreFormWrap.addMoreColumns-2 .addMoreCells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.addMoreFormWrap.addMoreColumns-3 .addMoreCells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.addMoreFormWrap.addMoreColumns-4 .addMoreCells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.addMoreFormWrap.addMoreColumns .addMoreCells > .row
	{
		display: flex;
		flex-direction: column;
		width: auto;
		margin: 0;
		padding: 0;
	}
	.addMoreFormWrap.addMoreColumns .addMoreCells > .row > .addMoreCell
	{
		width: 100% !important;
		float: none;
	}
	.addMoreFormWrap.addMoreColumns .addMoreCells > .row > .addMoreCellCaption
	{
		padding: 0.35rem 0 0.15rem;
		line-height: 1.4;
	}
	.addMoreFormWrap.addMoreColumns .addMoreCells > .row.addMoreFullRow
	{
		grid-column: 1 / -1;
	}
}
@media (max-width: 675px)
{
	.addMoreFormWrap .addMoreFooterTools
	{
		margin-inline-start: 0;
	}
	.addMoreFormWrap .addMoreToggle
	{
		width: 36px;
		height: 36px;
	}
}

/* rows and cells never grow past the form: wide content wraps inside its card */
.addMoreFormWrap .row.addMoreRow,
.addMoreFormWrap .addMoreCells,
.addMoreFormWrap .addMoreCells > .row,
.addMoreFormWrap .addMoreCell
{
	min-width: 0;
	max-width: 100%;
}
.addMoreFormWrap .addMoreCell input,
.addMoreFormWrap .addMoreCell select,
.addMoreFormWrap .addMoreCell textarea
{
	max-width: 100%;
}

/* the bar of a card: the tools keep their size, the summary takes what is left (cut with an ellipsis) */
.addMoreFormWrap .addMoreRowBar > .addMoreRowTools
{
	flex: 0 0 auto;
}
.addMoreFormWrap.addMoreCollapsible .addMoreRowBar > .addMoreRowStart
{
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
}
.addMoreFormWrap .addMoreRowStart > .addMoreRowSummary
{
	flex: 1 1 0;
	min-width: 0;
}

/* a card is one column: wrapping would size it by its widest content */
.addMoreFormWrap.addMoreVerticalMode .row.addMoreRow,
.addMoreFormWrap.addMoreTemplateMode .row.addMoreRow
{
	flex-wrap: nowrap;
}
@media (max-width: 675px)
{
	.addMoreFormWrap .row.addMoreRow
	{
		flex-wrap: nowrap;
	}
}

/* ---- a form with a side panel ('sidePanel'=>array(group keys)): its groups in a column beside the fields ---- */
.formWithSide .formLayout
{
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
}
.formWithSide .formLayoutMain
{
	flex: 1 1 auto;
	min-width: 0;
}
/* the side column scrolls with the page (kScrollFollow moves the shorter column), never by itself */
.formWithSide .formLayoutSide
{
	flex: 0 0 340px;
	width: 340px;
}
.formWithSide .formLayout fieldset
{
	margin-top: 0;
	margin-bottom: 1rem;
}
.formWithSide .formLayoutSide fieldset
{
	padding: 0.6rem 1rem 0.8rem;
}
/* both columns: the caption above its field, the field as wide as its column */
.formWithSide .formLayout .captionClass,
.formWithSide .formLayout .captionClass.column,
.formWithSide .formLayout .inputClass,
.formWithSide .formLayout .column.inputClass
{
	width: 100%;
	float: none;
}
.formWithSide .formLayout .captionClass
{
	padding: 0.5rem 0 0.2rem;
	line-height: 1.3rem;
	text-align: start;
}
.formWithSide .formLayoutSide .captionClass
{
	padding-top: 0.4rem;
	font-size: 0.95rem;
}
.formWithSide .formLayout .inputClass input[type="text"],
.formWithSide .formLayout .inputClass input[type="url"],
.formWithSide .formLayout .inputClass input[type="email"],
.formWithSide .formLayout .inputClass input[type="number"],
.formWithSide .formLayout .inputClass select,
.formWithSide .formLayout .inputClass textarea,
.formWithSide .formLayout .inputClass .kField-picker,
.formWithSide .formLayout .inputClass .kField-link
{
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}
/* the save row under both columns: the side panel comes before it on narrow screens */
@media (max-width: 1100px)
{
	.formWithSide .formLayout
	{
		flex-direction: column;
		align-items: stretch;
	}
	.formWithSide .formLayoutSide
	{
		flex-basis: auto;
		width: 100%;
	}
}
/* the "Insert value" icon inside a field that takes tokens of shared values (scripts/core/sharedValues.js), as the
   eye of a password field (kQuery/kPassword) */
.sharedValuesIcon
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 26px !important;
	height: 26px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 6px;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--ui-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.sharedValuesIcon:hover,
.sharedValuesIcon:focus-visible,
.sharedValuesIcon[aria-expanded="true"]
{
	color: var(--ui-accent);
	background: var(--ui-soft) !important;
}
.sharedValuesIcon svg
{
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.sharedValuesWarning
{
	margin-top: 4px;
}
/* one width for both levels (the groups, a group's values): the menu keeps its place */
.uiDropdownList.sharedValuesMenu
{
	min-width: 18rem;
	max-width: min(26rem, calc(100vw - 16px));
}
/* a group's arrow: it opens the group's values */
.sharedValuesMenu [data-shared-values-group] .uiDropdownItemHint
{
	color: var(--ui-text);
	font-size: 1.3em;
	line-height: 1;
}
/* "Used in" of the shared values: the count opens the places */
.sharedValuesUsage summary
{
	cursor: pointer;
	font-weight: bold;
}
.sharedValuesUsage ul
{
	margin: 4px 0 0;
	padding-inline-start: 18px;
	font-size: 12px;
}
code.sharedValuesToken
{
	font-size: 12px;
	white-space: nowrap;
}
/* ==========================================================================
	Native controls: what the browser draws by itself, everywhere (forms, lists, admin pages written in plain HTML,
	the site), brought to the look of the form controls (tokens in basic/ui.css). Loaded after basic/form.
	- selects: a chevron, the listboxes (multiple / size) sized and with rounded rows, and the popup itself styled
	  where the browser lets it (appearance: base-select, Chrome / Edge 135+; the others keep their own popup)
	- check boxes and radios outside the form class (lists, plain pages): drawn boxes and dots; a form field set
	  'native'=>true keeps the browser's own
	- file, number, date / time, colour, range, search inputs, progress, meter, details, scroll bars
	The low-specificity rules are wrapped in :where() so a theme's own rule still wins.
   ========================================================================== */

/* ---- selects ---- */
/* the chevron of a single select (appearance: none took the browser's arrow); specific enough to beat the base
   select padding, and a theme's background colour still shows under it */
select:not([multiple]):not([size]),
select[size="1"]:not([multiple])
{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 0.8rem center;
	padding-left: 2rem;
	cursor: pointer;
}
:where(select:hover:not([disabled]))
{
	border-color: var(--fld-hover-border, var(--ui-border-input));
}
:where(select:focus)
{
	outline: 0;
	border-color: var(--fld-focus-border, var(--ui-accent));
	box-shadow: var(--fld-ring, 0 0 0 3px var(--ui-accent-soft));
}
:where(select[disabled])
{
	border-color: var(--ui-border);
	background-color: var(--ui-soft);
	color: var(--ui-muted);
	cursor: not-allowed;
}
/* Firefox has no base-select and keeps its own popup, which takes the page's colours (white rows) only when the select has
   no background-image: there the chevron is Firefox's own arrow instead of the drawn one (-moz-orient: Firefox only) */
@supports (-moz-orient: inherit)
{
	select:not([multiple]):not([size]),
	select[size="1"]:not([multiple])
	{
		appearance: auto;
		/* (the form selects draw the chevron with a more specific rule in basic/form.css) */
		background-image: none !important;
		padding-left: 0.5rem !important;
	}
}
/* listboxes (multiple, size > 1): as tall as their rows, not one line high (the base select height is fixed) */
select[multiple]:not([data-kselect]),
select[size]:not([size="1"]):not([data-kselect])
{
	height: auto;
	min-height: 6rem;
	padding: 0.25rem;
	background-image: none;
	scrollbar-width: thin;
}
:where(select[multiple], select[size]:not([size="1"])) option
{
	margin: 1px 0;
	padding: 0.35rem 0.6rem;
	border-radius: 5px;
}
/* the chosen rows: the accent tint instead of the system's grey / blue (a gradient is the only fill Chrome keeps) */
:where(select[multiple], select[size]:not([size="1"])) option:checked
{
	background: var(--ui-accent-soft) linear-gradient(var(--ui-accent-soft), var(--ui-accent-soft));
	color: var(--ui-accent);
}
:where(select[multiple], select[size]:not([size="1"])):focus option:checked
{
	background: var(--ui-accent) linear-gradient(var(--ui-accent), var(--ui-accent));
	color: var(--ui-on-accent);
}
/* the rows of a single select's popup: white, also in the browsers that draw their own popup (no base-select), which
   otherwise fill it grey */
:where(select:not([multiple]):not([size]), select[size="1"]:not([multiple])) option
{
	background-color: var(--ui-surface);
	color: var(--ui-text);
}
:where(select) optgroup
{
	color: var(--ui-muted);
	font-weight: 600;
	font-style: normal;
}
:where(select) optgroup option
{
	color: var(--ui-text);
	font-weight: normal;
}
:where(select) option:disabled
{
	color: var(--ui-placeholder);
}
/* the empty first row ("pick a choice", form.php / Utils.js / kDialog.js): muted, it is not a value */
:where(select) option.pickAChoiceOption
{
	color: var(--ui-muted);
}

/* the month / year menus of the date picker: small, the chevron closer */
html body .ui-datepicker select
{
	height: 1.9rem;
	padding: 0 0.45rem;
	padding-left: 1.5rem;
	background-position: left 0.45rem center;
	font-size: 0.95em;
}

/* the popup of a single select, where the browser allows styling it. kSelect's searchable panel replaces the popup
   on mouse and pen, so those selects keep appearance: none there (touch opens this popup) */
@supports (appearance: base-select)
{
	select:not([multiple]):not([size]),
	select[size="1"]:not([multiple])
	{
		appearance: base-select;
	}
	select::picker-icon
	{
		display: none;
	}
	::picker(select)
	{
		appearance: base-select;
		box-sizing: border-box;
		margin: 4px 0;
		padding: 0.3rem;
		max-block-size: min(22rem, 60vh);
		border: 1px solid var(--ui-border);
		border-radius: var(--ui-radius-lg);
		background: var(--ui-surface);
		color: var(--ui-text);
		box-shadow: var(--ui-shadow-lg);
		scrollbar-width: thin;
	}
	select:not([multiple]):not([size]) option,
	select[size="1"]:not([multiple]) option
	{
		gap: 0.5rem;
		min-block-size: 2.2rem;
		padding: 0.4rem 0.7rem;
		border-radius: 6px;
		line-height: 1.4;
		cursor: pointer;
	}
	select:not([multiple]):not([size]) option:hover,
	select[size="1"]:not([multiple]) option:hover,
	select:not([multiple]):not([size]) option:focus-visible,
	select[size="1"]:not([multiple]) option:focus-visible
	{
		outline: 0;
		background: var(--ui-soft);
	}
	select:not([multiple]):not([size]) option:checked,
	select[size="1"]:not([multiple]) option:checked
	{
		background: var(--ui-accent-soft);
		color: var(--ui-accent);
		font-weight: 600;
	}
	/* the empty first row is not a choice: no highlight when nothing is chosen yet */
	select:not([multiple]):not([size]) option.pickAChoiceOption:checked,
	select[size="1"]:not([multiple]) option.pickAChoiceOption:checked
	{
		background: transparent;
		color: var(--ui-muted);
		font-weight: normal;
	}
	select option.pickAChoiceOption::checkmark
	{
		visibility: hidden;
	}
	select:not([multiple]):not([size]) option::checkmark,
	select[size="1"]:not([multiple]) option::checkmark
	{
		color: var(--ui-accent);
	}
	select:not([multiple]):not([size]) option:disabled,
	select[size="1"]:not([multiple]) option:disabled
	{
		cursor: not-allowed;
	}
	select:not([multiple]) optgroup
	{
		padding-top: 0.3rem;
		font-size: 0.85em;
	}
	@media (pointer: fine)
	{
		select[data-kselect]:not([multiple])
		{
			appearance: none;
		}
	}
}

/* ---- check boxes and radios outside the form class (a form field set 'native' keeps the browser's) ---- */
:where(input[type="checkbox"]:not([role="switch"]):not(.formElement input), input[type="radio"]:not(.formElement input))
{
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: inline-block;
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin: 0;
	margin-inline: 0 0.4em;
	border: 1.5px solid var(--ui-border-strong);
	background: var(--ui-surface) no-repeat center / 0.8em;
	vertical-align: -0.2em;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
:where(input[type="checkbox"]:not([role="switch"]):not(.formElement input))
{
	border-radius: 4px;
}
:where(input[type="radio"]:not(.formElement input))
{
	border-radius: 50%;
}
:where(input[type="checkbox"]:not([role="switch"]):not(.formElement input), input[type="radio"]:not(.formElement input)):hover
{
	border-color: var(--ui-accent);
}
:where(input[type="checkbox"]:not([role="switch"]):not(.formElement input)):checked
{
	border-color: var(--ui-accent);
	background-color: var(--ui-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.3 3.3L11 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:where(input[type="checkbox"]:not([role="switch"]):not(.formElement input)):indeterminate
{
	border-color: var(--ui-accent);
	background-color: var(--ui-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M2 5h8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
:where(input[type="radio"]:not(.formElement input)):checked
{
	border-color: var(--ui-accent);
	background-color: var(--ui-accent);
	box-shadow: inset 0 0 0 0.2em var(--ui-surface);
}
:where(input[type="checkbox"]:not([role="switch"]):not(.formElement input), input[type="radio"]:not(.formElement input)):focus-visible
{
	outline: 2px solid var(--ui-focus);
	outline-offset: 2px;
}
:where(input[type="checkbox"]:not([role="switch"]):not(.formElement input), input[type="radio"]:not(.formElement input)):disabled
{
	border-color: var(--ui-border);
	background-color: var(--ui-soft);
	cursor: not-allowed;
}
:where(input[type="checkbox"]:not([role="switch"]):not(.formElement input)):checked:disabled,
:where(input[type="radio"]:not(.formElement input)):checked:disabled
{
	opacity: 0.5;
}

/* ---- file, number, date / time, colour, range, search ---- */
:where(input[type="file"])::file-selector-button
{
	margin-left: 0.75rem;
	margin-inline: 0 0.75rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--ui-border-strong);
	border-radius: var(--ui-radius);
	background: var(--ui-soft);
	color: var(--ui-text);
	font: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
:where(input[type="file"])::file-selector-button:hover
{
	background: var(--ui-border-soft);
}
/* the steppers show while the field is pointed at or focused */
:where(input[type="number"])::-webkit-inner-spin-button
{
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
:where(input[type="number"]):hover::-webkit-inner-spin-button,
:where(input[type="number"]):focus::-webkit-inner-spin-button
{
	opacity: 0.7;
}
:where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])::-webkit-calendar-picker-indicator
{
	opacity: 0.5;
	cursor: pointer;
	border-radius: 4px;
	transition: opacity 0.15s ease;
}
:where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]):hover::-webkit-calendar-picker-indicator
{
	opacity: 0.9;
}
:where(input[type="color"])
{
	box-sizing: border-box;
	width: 3rem;
	height: 2.2rem;
	padding: 3px;
	border: 1px solid var(--ui-border-strong);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	cursor: pointer;
}
:where(input[type="color"])::-webkit-color-swatch-wrapper
{
	padding: 0;
}
:where(input[type="color"])::-webkit-color-swatch
{
	border: 0;
	border-radius: 4px;
}
:where(input[type="color"])::-moz-color-swatch
{
	border: 0;
	border-radius: 4px;
}
/* range: a thin rounded track and a round thumb with a ring */
:where(input[type="range"])
{
	-webkit-appearance: none;
	appearance: none;
	height: 1.2rem;
	background: transparent;
	cursor: pointer;
}
:where(input[type="range"])::-webkit-slider-runnable-track
{
	height: 6px;
	border-radius: 3px;
	background: var(--ui-border);
}
:where(input[type="range"])::-moz-range-track
{
	height: 6px;
	border-radius: 3px;
	background: var(--ui-border);
}
:where(input[type="range"])::-moz-range-progress
{
	height: 6px;
	border-radius: 3px;
	background: var(--ui-accent);
}
:where(input[type="range"])::-webkit-slider-thumb
{
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	margin-top: -5px;
	border: 2px solid var(--ui-surface);
	border-radius: 50%;
	background: var(--ui-accent);
	box-shadow: var(--ui-shadow-sm);
	transition: box-shadow 0.15s ease;
}
:where(input[type="range"])::-moz-range-thumb
{
	width: 12px;
	height: 12px;
	border: 2px solid var(--ui-surface);
	border-radius: 50%;
	background: var(--ui-accent);
	box-shadow: var(--ui-shadow-sm);
}
:where(input[type="range"]):focus-visible
{
	outline: 0;
}
:where(input[type="range"]):focus-visible::-webkit-slider-thumb
{
	box-shadow: 0 0 0 4px var(--ui-accent-soft), var(--ui-shadow-sm);
}
:where(input[type="range"]):disabled
{
	opacity: 0.5;
	cursor: not-allowed;
}
/* the clear button of a search box: a small round cross */
:where(input[type="search"])::-webkit-search-cancel-button
{
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--ui-border-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 3l4 4M7 3L3 7' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 10px;
	cursor: pointer;
}

/* ---- progress and meter: rounded bars on the accent / status colours ---- */
:where(progress, meter)
{
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	max-width: 16rem;
	height: 8px;
	border: 0;
	border-radius: 4px;
	background: var(--ui-border);
	overflow: hidden;
	vertical-align: middle;
}
:where(progress)::-webkit-progress-bar
{
	border-radius: 4px;
	background: var(--ui-border);
}
:where(progress)::-webkit-progress-value
{
	border-radius: 4px;
	background: var(--ui-accent);
	transition: width 0.2s ease;
}
:where(progress)::-moz-progress-bar
{
	border-radius: 4px;
	background: var(--ui-accent);
}
:where(meter)::-webkit-meter-bar
{
	height: 8px;
	border: 0;
	border-radius: 4px;
	background: var(--ui-border);
}
:where(meter)::-webkit-meter-optimum-value
{
	background: var(--ui-success);
}
:where(meter)::-webkit-meter-suboptimum-value
{
	background: var(--ui-warning);
}
:where(meter)::-webkit-meter-even-less-good-value
{
	background: var(--ui-danger);
}

/* ---- details / summary: a chevron that turns, instead of the triangle ---- */
details > summary
{
	display: flex;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	cursor: pointer;
	color: var(--ui-accent);
}
details > summary::-webkit-details-marker
{
	display: none;
}
details > summary::before
{
	content: '';
	flex: 0 0 auto;
	width: 0.42em;
	height: 0.42em;
	margin-top: -0.2em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease, margin 0.15s ease;
}
/* (down when closed, up when open: the same in both page directions) */
details[open] > summary::before
{
	margin-top: 0.2em;
	transform: rotate(-135deg);
}

/* ---- scroll bars of the scrolling boxes (lists, panels, textareas): thin, on the border colour ---- */
:where(body *)
{
	scrollbar-width: thin;
	scrollbar-color: var(--ui-border-strong) transparent;
}

/* ---- text selection and the browser's autofill fill ---- */
::selection
{
	background: color-mix(in srgb, var(--ui-accent) 20%, var(--ui-surface));
	color: inherit;
}
:where(input, select, textarea):-webkit-autofill
{
	-webkit-text-fill-color: var(--ui-text);
	box-shadow: inset 0 0 0 100px var(--ui-accent-soft);
	caret-color: var(--ui-text);
}
:where(input, select, textarea):-webkit-autofill:focus
{
	box-shadow: inset 0 0 0 100px var(--ui-accent-soft), 0 0 0 3px var(--ui-accent-soft);
}

/* a disabled field outside a form greyed, as in a form (a form's own rules win: :where() weighs nothing) */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]), textarea):disabled
{
	border-color: var(--ui-border);
	background-color: var(--ui-soft);
	color: var(--ui-muted);
}

/* ---- switch: .uiSwitch, uiSwitch() (classes/functions/components.php, core/Utils.js); a form's checkbox switch
	(.formElement .formSwitch) is the same. A fixed size wherever it is (a form, a list, a toolbar): --ui-switch-w / -h;
	.is-sm smaller (a dense bar), .on-dark on a dark bar ---- */
.uiSwitch,
.formElement .formSwitch
{
	--switch-w: var(--ui-switch-w);
	--switch-h: var(--ui-switch-h);
	--switch-gap: 3px;
	cursor: pointer;
	line-height: 1.6;
}
.uiSwitch
{
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	vertical-align: middle;
}
.uiSwitch > input[type="checkbox"]
{
	margin-inline-end: 0;
}
/* in a form the label keeps its flow (a statement under it): the space is the box's */
.formElement .formSwitch > input[type="checkbox"]
{
	margin-inline-end: 0.55em;
}
.formElement .formSwitch > .inputWarning
{
	display: block;
}
.uiSwitch.is-sm
{
	--switch-w: var(--ui-switch-w-sm);
	--switch-h: var(--ui-switch-h-sm);
	--switch-gap: 2px;
}
.uiSwitch > input[type="checkbox"],
.formElement .formSwitch > input[type="checkbox"]
{
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	width: var(--switch-w);
	height: var(--switch-h);
	margin-block: 0;
	margin-inline-start: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--ui-switch-off);
	vertical-align: middle;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.uiSwitch > input[type="checkbox"]::before,
.formElement .formSwitch > input[type="checkbox"]::before
{
	content: '';
	position: absolute;
	top: var(--switch-gap);
	inset-inline-start: var(--switch-gap);
	width: calc(var(--switch-h) - 2 * var(--switch-gap));
	height: calc(var(--switch-h) - 2 * var(--switch-gap));
	border-radius: 50%;
	background: var(--ui-surface);
	box-shadow: var(--ui-shadow-sm);
	transition: inset-inline-start 0.15s ease;
}
.uiSwitch > input[type="checkbox"]:checked,
.formElement .formSwitch > input[type="checkbox"]:checked
{
	background: var(--ui-accent);
}
.uiSwitch > input[type="checkbox"]:checked::before,
.formElement .formSwitch > input[type="checkbox"]:checked::before
{
	inset-inline-start: calc(var(--switch-w) - var(--switch-h) + var(--switch-gap));
}
/* a mixed selection (indeterminate: some on, some off) */
.uiSwitch > input[type="checkbox"]:indeterminate
{
	background: var(--ui-muted);
}
.uiSwitch > input[type="checkbox"]:focus-visible,
.formElement .formSwitch > input[type="checkbox"]:focus-visible
{
	outline: 2px solid var(--ui-focus);
	outline-offset: 2px;
}
.uiSwitch > input[type="checkbox"]:disabled,
.formElement .formSwitch > input[type="checkbox"]:disabled
{
	cursor: not-allowed;
	opacity: 0.5;
}
.uiSwitch.on-dark > input[type="checkbox"]:not(:checked)
{
	background: color-mix(in srgb, var(--ui-surface) 28%, transparent);
}
.uiSwitch.on-dark
{
	color: var(--ui-surface);
}

/* ---- segmented control: .uiSegmented, uiSegmented(); a form's segmented radios are the same. Its options are radios,
	links (aria-current) or buttons (aria-pressed) ---- */
.uiSegmented,
.formElement .radioDivs.formSegmented
{
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	box-sizing: border-box;
	min-height: var(--ui-control-height);
	width: auto;
	max-width: 100%;
	padding: 3px;
	border: 1px solid var(--ui-border);
	border-radius: 9px;
	background: var(--ui-soft);
	vertical-align: middle;
}
/* on a dark bar (a toolbar of the page builders) */
.uiSegmented.on-dark
{
	border-color: transparent;
	background: color-mix(in srgb, var(--ui-surface) 8%, transparent);
}
.uiSegmented.on-dark > button,
.uiSegmented.on-dark > a,
.uiSegmented.on-dark > .radioDiv
{
	color: color-mix(in srgb, var(--ui-surface) 80%, transparent);
}
.uiSegmented.on-dark > button:hover,
.uiSegmented.on-dark > a:hover,
.uiSegmented.on-dark > .radioDiv:hover
{
	color: var(--ui-surface);
}
.uiSegmented.on-dark > button[aria-pressed="true"],
.uiSegmented.on-dark > a[aria-current]
{
	background: var(--ui-surface);
	color: var(--ui-text-strong);
}
.uiSegmented.is-sm
{
	min-height: 0;
	padding: 2px;
	border-radius: 7px;
	font-size: 0.9em;
}
.uiSegmented > .radioDiv,
.uiSegmented > a,
.uiSegmented > button,
.formElement .formSegmented > .radioDiv
{
	position: relative;
	z-index: 0;
	display: block;
	margin: 0;
	padding: 0.3em 1em;
	border: 0;
	border-radius: 7px;
	background: none;
	color: var(--ui-muted);
	font: inherit;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.uiSegmented.is-sm > .radioDiv,
.uiSegmented.is-sm > a,
.uiSegmented.is-sm > button
{
	padding: 0.15em 0.75em;
	border-radius: 5px;
}
.uiSegmented > .radioDiv:hover,
.uiSegmented > a:hover,
.uiSegmented > button:hover,
.formElement .formSegmented > .radioDiv:hover
{
	color: var(--ui-text);
	text-decoration: none;
}
/* the radio fills its label and paints the selected pill behind the caption */
.uiSegmented > .radioDiv > input[type="radio"],
.formElement .formSegmented > .radioDiv > input[type="radio"]
{
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	z-index: -1;
	top: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.uiSegmented > .radioDiv > input[type="radio"]:checked,
.formElement .formSegmented > .radioDiv > input[type="radio"]:checked,
.uiSegmented > a[aria-current],
.uiSegmented > button[aria-pressed="true"]
{
	background: var(--ui-surface);
	box-shadow: var(--ui-shadow);
}
.uiSegmented > a[aria-current],
.uiSegmented > button[aria-pressed="true"]
{
	color: var(--ui-text);
	font-weight: bold;
}
.uiSegmented > .radioDiv > input[type="radio"]:focus-visible,
.formElement .formSegmented > .radioDiv > input[type="radio"]:focus-visible,
.uiSegmented > a:focus-visible,
.uiSegmented > button:focus-visible
{
	outline: 2px solid var(--ui-focus);
	outline-offset: -2px;
}
.uiSegmented > .radioDiv > input[type="radio"]:disabled,
.formElement .formSegmented > .radioDiv > input[type="radio"]:disabled,
.uiSegmented > button:disabled
{
	cursor: not-allowed;
}
@supports selector(:has(*))
{
	.uiSegmented > .radioDiv:has(> input:checked),
	.formElement .formSegmented > .radioDiv:has(> input:checked)
	{
		color: var(--ui-text);
		font-weight: bold;
	}
	.uiSegmented > .radioDiv:has(> input:disabled),
	.formElement .formSegmented > .radioDiv:has(> input:disabled)
	{
		opacity: 0.5;
		cursor: not-allowed;
	}
}

/* ---- menu: .uiDropdown (uiDropdown(); kDropdown(trigger, items), core/kDropdown.js): a button and the dropdown of its choices.
	The rows' menus of the lists (.listRowActions) are the same dropdown, with the same keys ---- */
.uiDropdown
{
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	vertical-align: middle;
}
/* its button with the theme's looks: a centred row of icon and caption (the theme floats the icon) */
.uiDropdownToggle.button
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	gap: 0.4em;
	width: auto;
	margin: 0;
}
.uiDropdownToggle.button > [class^="icon-"]
{
	float: none;
	margin: 0;
}
.uiDropdownList
{
	position: absolute;
	z-index: 900;
	top: calc(100% + 4px);
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	min-width: 11rem;
	max-width: min(22rem, calc(100vw - 16px));
	max-height: min(24rem, calc(100vh - 16px));
	overflow-y: auto;
	padding: 0.3rem;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	background: var(--ui-surface);
	box-shadow: var(--ui-shadow-lg);
	color: var(--ui-text);
	text-align: start;
	box-sizing: border-box;
}
.uiDropdownList[hidden]
{
	display: none;
}
.uiDropdown[data-align="start"] > .uiDropdownList
{
	inset-inline-start: 0;
	inset-inline-end: auto;
}
.uiDropdown.isUp > .uiDropdownList
{
	top: auto;
	bottom: calc(100% + 4px);
}
/* a menu kDropdown() opens from a script: in the page's body, placed by the script, over the full-screen tools and their
	bars (the slider builder, the theme studio, the boxes editor) */
.uiDropdownList.is-floating
{
	position: fixed;
	z-index: 100100;
	top: auto;
	inset-inline-end: auto;
}
.uiDropdownItem
{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	/* a long list scrolls (.uiDropdownList max-height) instead of squeezing its choices */
	flex-shrink: 0;
	min-height: 2.1rem;
	margin: 0;
	padding: 0.35rem 0.6rem;
	border: 0;
	border-radius: var(--ui-radius);
	background: none;
	color: var(--ui-text);
	font: inherit;
	line-height: 1.4;
	text-align: start;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-sizing: border-box;
}
.uiDropdownItem:hover,
.uiDropdownItem:focus-visible,
.uiDropdownItem.isFocused
{
	background: var(--ui-surface-muted);
	color: var(--ui-text);
	text-decoration: none;
	outline: none;
}
.uiDropdownItem [class^="icon-"]
{
	width: 1.1rem;
	color: var(--ui-muted);
	text-align: center;
}
.uiDropdownItem.is-current,
.uiDropdownItem.is-current [class^="icon-"]
{
	color: var(--ui-accent);
	font-weight: bold;
}
.uiDropdownItem.is-danger,
.uiDropdownItem.is-danger [class^="icon-"]
{
	color: var(--ui-danger);
}
.uiDropdownItem:disabled,
.uiDropdownItem[aria-disabled="true"]
{
	opacity: 0.5;
	cursor: not-allowed;
}
/* a choice's second line (kDropdown() description) */
.uiDropdownItem.has-description
{
	align-items: flex-start;
	white-space: normal;
}
.uiDropdownItemTexts
{
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.uiDropdownItemDescription
{
	color: var(--ui-muted);
	font-size: 0.85em;
	font-weight: normal;
	line-height: 1.35;
}
.uiDropdownItemHint
{
	margin-inline-start: auto;
	color: var(--ui-muted);
	font-size: 0.85em;
}
.uiDropdownSeparator
{
	height: 1px;
	margin: 0.3rem 0.2rem;
	background: var(--ui-border-soft);
}
.uiDropdownLabel
{
	padding: 0.35rem 0.6rem 0.15rem;
	color: var(--ui-muted);
	font-size: 0.82em;
	font-weight: bold;
}
/*
	Tabs: one look for every tab bar.
	- page tabs (links) and script tabs (buttons): uiTabs() in classes/functions/ui.php, uiTabsHTML() in scripts/core/Utils.js
	- panel tabs: ui_tabs() and the form / view / list tabs built on it (jQuery UI)
	- list filter tabs: search::tabs()
	Markup: .uiTabs > .uiTab (> .uiTabIcon, .uiTabCount); optional .uiTabsStart (a title) and .uiTabsEnd (actions).
	The current tab: .isActive, aria-selected="true", aria-current="page" or aria-pressed="true".
	Variants: .isCompact (nested tabs), .isPills (filters), .isVertical (a side menu; a row again when it gets the width).
	Colours: --ui-tab-accent, the admin accent unless a theme sets it (the frontend themes can give it a palette colour).
*/
:root
{
	--ui-tab-accent: var(--ui-accent);
	--ui-tab-text: var(--ui-muted);
	--ui-tab-text-hover: var(--ui-text);
	--ui-tab-line: var(--ui-border);
	--ui-tab-font-size: 1rem;
}

/* ---- the bar: one row, it scrolls sideways when the tabs do not fit (never a second row) ---- */
.uiTabs,
html .ui-tabs .ui-tabs-nav
{
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0.25rem;
	margin: 0 0 0.75rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	/* the base line under the tabs; the current tab's underline is drawn over it */
	box-shadow: inset 0 -1px 0 var(--ui-tab-line);
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
}
html .ui-tabs .ui-tabs-nav
{
	margin: 0;
	padding: 0 0.5rem;
}
html .ui-tabs .ui-tabs-nav::before,
html .ui-tabs .ui-tabs-nav::after
{
	display: none;
}
html .ui-tabs .ui-tabs-nav li,
html .ui-tabs .ui-tabs-nav li.ui-state-default,
html .ui-tabs .ui-tabs-nav li.ui-state-active,
html .ui-tabs .ui-tabs-nav li.ui-state-hover,
html .ui-tabs .ui-tabs-nav li.ui-state-focus
{
	flex: 0 0 auto;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	white-space: nowrap;
}

/* ---- a tab ---- */
.uiTab,
html .ui-tabs .ui-tabs-nav .ui-tabs-anchor
{
	display: inline-flex;
	flex: 0 0 auto;
	float: none;
	align-items: center;
	gap: 0.45em;
	box-sizing: border-box;
	margin: 0;
	padding: 0.65em 1em;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	color: var(--ui-tab-text);
	font: inherit;
	font-size: var(--ui-tab-font-size);
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.uiTab:hover,
html .ui-tabs .ui-tabs-nav li:hover .ui-tabs-anchor
{
	color: var(--ui-tab-text-hover);
	text-decoration: none;
}
.uiTab:focus-visible,
html .ui-tabs .ui-tabs-nav .ui-tabs-anchor:focus-visible
{
	outline: 2px solid var(--ui-focus);
	outline-offset: -2px;
}
.uiTab.isActive,
.uiTab[aria-selected="true"],
.uiTab[aria-current="page"],
.uiTab[aria-pressed="true"],
html .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor
{
	border-bottom-color: var(--ui-tab-accent);
	color: var(--ui-tab-accent);
	font-weight: bold;
}
.uiTab.isDanger
{
	color: var(--ui-danger);
}
.uiTab[disabled],
.uiTab.isDisabled
{
	opacity: 0.5;
	cursor: default;
}
.uiTabIcon
{
	flex: 0 0 auto;
	font-size: 0.95em;
}
.uiTabCount
{
	flex: 0 0 auto;
	min-width: 1.6em;
	padding: 0.05em 0.5em;
	border-radius: 999px;
	background: var(--ui-soft);
	color: var(--ui-muted);
	font-size: 0.8em;
	font-weight: normal;
	line-height: 1.5;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.uiTab.isActive .uiTabCount,
.uiTab[aria-selected="true"] .uiTabCount,
.uiTab[aria-current="page"] .uiTabCount,
.uiTab[aria-pressed="true"] .uiTabCount
{
	background: color-mix(in srgb, var(--ui-tab-accent) 12%, transparent);
	color: var(--ui-tab-accent);
}
.uiTabCount:empty
{
	display: none;
}

/* ---- before and after the tabs: a title, actions ---- */
.uiTabsStart,
.uiTabsEnd
{
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}
.uiTabsStart
{
	padding-inline-end: 0.75rem;
	color: var(--ui-text);
	font-weight: bold;
}
.uiTabsEnd
{
	margin-inline-start: auto;
	padding-inline: 0.5rem;
}

/* ---- compact: tabs inside a panel ---- */
.uiTabs.isCompact
{
	margin-block: 0.5rem 0.75rem;
}
.uiTabs.isCompact .uiTab
{
	padding: 0.45em 0.8em;
	font-size: 0.92em;
}

/* ---- pills: filters over a table or a list ---- */
.uiTabs.isPills
{
	flex-wrap: wrap;
	gap: 0.4rem;
	box-shadow: none;
	overflow: visible;
}
.uiTabs.isPills .uiTab
{
	padding: 0.3em 0.85em;
	border: 1px solid var(--ui-tab-line);
	border-radius: 999px;
	background: var(--ui-surface);
	color: var(--ui-text);
	font-size: 0.9em;
}
.uiTabs.isPills .uiTab:hover
{
	border-color: var(--ui-border-strong);
}
.uiTabs.isPills .uiTab.isActive,
.uiTabs.isPills .uiTab[aria-selected="true"],
.uiTabs.isPills .uiTab[aria-current="page"],
.uiTabs.isPills .uiTab[aria-pressed="true"]
{
	border-color: var(--ui-tab-accent);
	background: color-mix(in srgb, var(--ui-tab-accent) 10%, var(--ui-surface));
	color: var(--ui-tab-accent);
}

/* ---- vertical: a side menu. Given more width than a side column (stacked over the content), it is a row again ---- */
.uiTabs.isVertical,
html .ui-tabs .ui-tabs-nav.isVertical
{
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.5rem;
	border: 1px solid var(--ui-tab-line);
	border-radius: var(--ui-radius-lg);
	background: var(--ui-surface);
	box-shadow: none;
	overflow: visible;
}
html .ui-tabs .ui-tabs-nav.isVertical li
{
	width: 100%;
	white-space: normal;
}
.uiTabs.isVertical .uiTab,
html .ui-tabs .ui-tabs-nav.isVertical .ui-tabs-anchor
{
	width: 100%;
	padding: 0.5em 0.65em;
	border-bottom: 0;
	border-inline-start: 3px solid transparent;
	border-radius: var(--ui-radius);
	color: var(--ui-text);
	white-space: normal;
}
.uiTabs.isVertical .uiTab:hover,
html .ui-tabs .ui-tabs-nav.isVertical li:hover .ui-tabs-anchor
{
	background: var(--ui-soft);
}
.uiTabs.isVertical .uiTab.isActive,
.uiTabs.isVertical .uiTab[aria-selected="true"],
.uiTabs.isVertical .uiTab[aria-current="page"],
html .ui-tabs .ui-tabs-nav.isVertical li.ui-tabs-active .ui-tabs-anchor
{
	border-inline-start-color: var(--ui-tab-accent);
	background: color-mix(in srgb, var(--ui-tab-accent) 10%, transparent);
	color: var(--ui-tab-accent);
}
.uiTabs.isVertical .uiTabCount
{
	margin-inline-start: auto;
}
:has(> .uiTabs.isVertical):not(.ui-tabs)
{
	container-type: inline-size;
}
@container (min-width: 20rem)
{
	.uiTabs.isVertical
	{
		flex-direction: row;
		gap: 0.25rem;
		padding: 0.35rem;
		overflow-x: auto;
	}
	.uiTabs.isVertical .uiTab
	{
		width: auto;
		border-inline-start: 0;
		border-bottom: 2px solid transparent;
		border-radius: var(--ui-radius) var(--ui-radius) 0 0;
		white-space: nowrap;
	}
	.uiTabs.isVertical .uiTab.isActive,
	.uiTabs.isVertical .uiTab[aria-selected="true"],
	.uiTabs.isVertical .uiTab[aria-current="page"]
	{
		border-bottom-color: var(--ui-tab-accent);
	}
	.uiTabs.isVertical .uiTabCount
	{
		margin-inline-start: 0;
	}
}

/* ---- phones: a bit tighter ---- */
@media (max-width: 675px)
{
	.uiTab,
	html .ui-tabs .ui-tabs-nav .ui-tabs-anchor
	{
		padding-inline: 0.8em;
	}
}
/*
	Dialogs, drawers, confirmations and prompts (scripts/kQuery/kDialog.js).
	#kDialogs > .kDlgLayer (one per open dialog, z-index from the stack: 5000, 5010, …; under the 10000+ field popups)
	  > .kDlgBackdrop + .kDlg (.kDlg-sm/md/lg/xl/full/media/auto, .isTone-danger/info, .kDialogDrawer)
	    > .kDlgHead (.kDlgIcon, .kDlgTitles, .kDlgTools) + .kDlgBody + .kDlgFoot (.kDlgFormRow, .kDlgActions)
	Phones: a dialog is a sheet from the bottom; lg / xl / full ones fill the screen; a drawer is as wide as the screen.
	Theming: --ui-* tokens, and --ui-dialog-radius / --ui-dialog-backdrop / --ui-dialog-accent for a theme of its own.
*/
:root
{
	--ui-dialog-radius: var(--ui-radius-lg);
	--ui-dialog-backdrop: var(--ui-backdrop);
	--ui-dialog-accent: var(--ui-accent);
	--ui-z-popup: 10050;
}
html.kDialogOpen
{
	overflow: hidden;
}
html.kDialogOpen body
{
	padding-inline-end: var(--kdlg-scrollbar, 0px);
}

/* ---- the layer: the backdrop and the panel ---- */
.kDlgLayer
{
	position: fixed;
	inset: 0;
	z-index: 5000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	box-sizing: border-box;
}
.kDlgBackdrop.ui-widget-overlay
{
	position: absolute;
	inset: 0;
	background: var(--ui-dialog-backdrop);
	opacity: 0;
	transition: opacity 0.16s ease;
}
.kDlgLayer.isShown .kDlgBackdrop
{
	opacity: 1;
}
/* a stacked dialog over another: the lower ones keep their own backdrop, the page is dimmed once */
.kDlgLayer:not(:first-child) .kDlgBackdrop
{
	background: color-mix(in srgb, var(--ui-backdrop) 55%, transparent);
}
.kDlgLayer.isModeless
{
	pointer-events: none;
}
.kDlgLayer.isModeless .kDlgBackdrop
{
	display: none;
}
.kDlgLayer.isModeless .kDlg
{
	pointer-events: auto;
}

/* ---- the panel ---- */
.kDlg.ui-dialog
{
	position: relative;
	top: auto;
	left: auto;
	/* not .ui-front's 100: jQuery UI's date picker takes its z-index from the layer (5000 + 1) */
	z-index: auto;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: min(var(--kdlg-width, 560px), 100%);
	min-width: min(var(--kdlg-min-width, 0px), 100%);
	max-width: min(var(--kdlg-max-width, 100%), 100%);
	height: var(--kdlg-height, auto);
	min-height: var(--kdlg-min-height, 0px);
	max-height: min(var(--kdlg-max-height, 100%), calc(100dvh - 2rem));
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--ui-dialog-radius);
	background: var(--ui-surface);
	box-shadow: var(--ui-shadow-lg);
	color: var(--ui-text);
	font-size: 1rem;
	text-align: start;
	outline: 0;
	opacity: 0;
	transform: translateY(8px) scale(0.98);
	transition: opacity 0.16s ease, transform 0.16s ease;
}
.kDlgLayer.isShown .kDlg
{
	opacity: 1;
	transform: none;
}
.kDlgLayer.isClosing .kDlg
{
	opacity: 0;
	transform: translateY(4px) scale(0.99);
}
.kDlg.kDlg-sm { --kdlg-width: 420px; }
.kDlg.kDlg-md { --kdlg-width: 560px; }
.kDlg.kDlg-lg { --kdlg-width: 760px; }
.kDlg.kDlg-xl { --kdlg-width: 1040px; }
.kDlg.kDlg-full
{
	--kdlg-width: 100%;
	height: calc(100dvh - 2rem);
}
.kDlg.kDlg-auto
{
	width: auto;
	min-width: min(320px, 100%);
	max-width: min(var(--kdlg-max-width, 720px), 100%);
}
.kDlg.kDlg-media
{
	--kdlg-width: min(960px, calc((100dvh - 9rem) * 16 / 9));
}
.kDlg.kDlg-media .kDlgBody
{
	padding: 0;
	background: #000; /* own colour: a photo or a video shows on black */
}
.kDlg.kDlg-media .kDlgBody :is(video, iframe, img)
{
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* header */
.kDlgHead
{
	display: flex;
	flex: 0 0 auto;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.95rem 1.15rem 0.8rem;
	border-bottom: 1px solid var(--ui-border);
	border-radius: var(--ui-dialog-radius) var(--ui-dialog-radius) 0 0;
}
.kDlgHead.isEmpty
{
	display: none;
}
/* only the × (no title): in the corner, over the content */
.kDlgHead.isToolsOnly
{
	position: absolute;
	top: 0.4rem;
	inset-inline-end: 0.4rem;
	z-index: 3;
	padding: 0;
	border: 0;
	background: none;
}
.kDlgHead.isToolsOnly .kDlgTitles
{
	display: none;
}
.kDlgHead.isToolsOnly .kDlgIconButton
{
	background: var(--ui-surface);
	box-shadow: var(--ui-shadow);
}
.kDlg.hasToolsOnlyHead .kDlgBody.ui-dialog-content
{
	padding-inline-end: 3rem;
}
.kDlg.hasToolsOnlyHead.kDlg-media .kDlgBody.ui-dialog-content
{
	padding: 0;
}
.kDlgIcon
{
	display: grid;
	flex: 0 0 2.25rem;
	place-items: center;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--ui-accent-soft);
	color: var(--ui-dialog-accent);
	font-size: 1.05rem;
	font-weight: bold;
}
.kDlg.isTone-danger .kDlgIcon
{
	background: var(--ui-danger-soft);
	color: var(--ui-danger);
}
.kDlgTitles
{
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 0.15rem;
}
.kDlg .kDlgTitle.ui-dialog-title
{
	float: none;
	width: auto;
	margin: 0;
	overflow: visible;
	color: var(--ui-text);
	font-size: 1.12rem;
	font-weight: bold;
	line-height: 1.4;
	white-space: normal;
}
.kDlgSub
{
	margin: 0.15rem 0 0;
	color: var(--ui-muted);
	font-size: 0.9rem;
}
.kDlgTools
{
	display: flex;
	flex: 0 0 auto;
	gap: 0.25rem;
	margin-inline-start: auto;
}
.kDlgIconButton
{
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--ui-muted);
	font: inherit;
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
}
.kDlgIconButton:hover
{
	background: var(--ui-soft);
	color: var(--ui-text);
}
.kDlgIconButton:focus-visible,
.kDlgButton:focus-visible
{
	outline: 2px solid var(--ui-focus);
	outline-offset: 2px;
}
.kDlgClose
{
	font-size: 1.5rem;
}

/* body */
.kDlg .kDlgBody.ui-dialog-content
{
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	padding: 1rem 1.15rem;
	border: 0;
	background: none;
	overflow: auto;
	overscroll-behavior: contain;
}
.kDlgText
{
	white-space: pre-line;
}
.kDlgLoading,
.kDlgError
{
	padding: 1.5rem 0;
	color: var(--ui-muted);
	text-align: center;
}
.kDlgError
{
	color: var(--ui-danger);
}
.kDlgBody.isIframe
{
	padding: 0;
}
.kDlgFrame
{
	display: block;
	width: 100%;
	height: 100%;
	min-height: 60vh;
	border: 0;
}
.kDlgBody.isIframe.isLoading
{
	background: linear-gradient(90deg, var(--ui-soft), var(--ui-surface), var(--ui-soft)) 0 0 / 200% 100%;
	animation: kDlgShimmer 1.2s linear infinite;
}
@keyframes kDlgShimmer
{
	to { background-position: -200% 0; }
}

/* footer: the buttons (primary first in the reading direction), a form's save row */
.kDlgFoot
{
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.15rem;
	border-top: 1px solid var(--ui-border);
	border-radius: 0 0 var(--ui-dialog-radius) var(--ui-dialog-radius);
	background: var(--ui-surface-muted);
}
.kDlgFoot.isEmpty
{
	display: none;
}
.kDlgActions
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.kDlgActions.isStart
{
	margin-inline-start: auto;
}
.kDlgActions.isStart:empty
{
	display: none;
}
.kDlgFormRow
{
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
/* the form's own row, emptied while its content is in the footer */
.submit-row.kDlgMovedRow
{
	display: none !important;
}
.kDlgFormRow .column
{
	float: none;
	width: auto;
}
.kDlgButton
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 2.35rem;
	padding: 0 1rem;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	color: var(--ui-text);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: filter 0.15s ease, background-color 0.15s ease;
}
.kDlgButton:hover
{
	background: var(--ui-soft);
}
.kDlgButton.is-primary
{
	border-color: var(--ui-dialog-accent);
	background: var(--ui-dialog-accent);
	color: var(--ui-on-accent);
}
.kDlgButton.is-danger
{
	border-color: var(--ui-danger);
	background: var(--ui-danger);
	color: var(--ui-on-accent);
}
.kDlgButton.is-primary:hover,
.kDlgButton.is-danger:hover
{
	filter: brightness(0.93);
}
.kDlgButton.is-link
{
	border-color: transparent;
	background: none;
	color: var(--ui-muted);
}
.kDlgButton:disabled
{
	opacity: 0.6;
	cursor: default;
}
.kDlgButton.isBusyButton::before
{
	content: "";
	width: 0.85em;
	height: 0.85em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: kDlgSpin 0.7s linear infinite;
}
@keyframes kDlgSpin
{
	to { transform: rotate(360deg); }
}

/* a confirmation: no lines, the text under the title */
.kDlgConfirm .kDlgHead,
.kDlgAlert .kDlgHead
{
	border-bottom: 0;
	padding-bottom: 0.25rem;
}
.kDlgConfirm .kDlgFoot,
.kDlgAlert .kDlgFoot
{
	border-top: 0;
	background: none;
}
.kDlgConfirm .kDlgBody.ui-dialog-content,
.kDlgAlert .kDlgBody.ui-dialog-content
{
	padding-top: 0.5rem;
	padding-bottom: 0.25rem;
}
.kDlgConfirm .kDlgHead:has(.kDlgTitle[style*="none"]) + .kDlgBody
{
	padding-top: 1.1rem;
}

/* a prompt's fields */
.kDlgForm .kDlgField
{
	margin-bottom: 0.85rem;
}
.kDlgForm .kDlgLabel
{
	display: block;
	margin-bottom: 0.3rem;
	color: var(--ui-text);
	font-weight: 600;
}
.kDlgForm .kDlgLabel.isRequired::after
{
	content: " *";
	color: var(--ui-danger);
}
.kDlgForm .kDlgInput:not([type=checkbox])
{
	width: 100%;
	box-sizing: border-box;
}
.kDlgForm .kDlgCheck
{
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	cursor: pointer;
}
.kDlgNote
{
	margin-top: 0.25rem;
	color: var(--ui-muted);
	font-size: 0.85rem;
}
.kDlgFieldError
{
	margin-top: 0.3rem;
	color: var(--ui-danger);
	font-size: 0.85rem;
}
.kDlgField.hasError .kDlgInput
{
	border-color: var(--ui-danger);
}
.kDlgPromptText
{
	margin: 0 0 0.85rem;
}

/* ---- drawer: a panel along the end side, the whole height ---- */
.kDlgLayer.isDrawer
{
	justify-content: flex-end;
	padding: 0;
}
.kDlgLayer.isDrawer.isSide-start
{
	justify-content: flex-start;
}
.kDlg.kDialogDrawer
{
	width: min(var(--kdlg-width, 560px), 100vw);
	height: 100dvh;
	max-height: none;
	border-radius: 0;
	transform: translateX(calc(var(--kdlg-slide, 1) * 24px));
}
.kDlgLayer[dir=rtl].isDrawer:not(.isSide-start) .kDlg,
.kDlgLayer.isDrawer.isSide-start .kDlg
{
	--kdlg-slide: -1;
}
.kDlgLayer[dir=rtl].isDrawer.isSide-start .kDlg
{
	--kdlg-slide: 1;
}
.kDlg.kDialogDrawer .kDlgHead,
.kDlg.kDialogDrawer .kDlgFoot
{
	border-radius: 0;
}
/* its form: the save row held at the bottom, every caption above its field, the fields as wide as the panel */
.kDlg.kDialogDrawer .formElement .submit-row
{
	position: sticky;
	bottom: -1rem;
	z-index: 2;
	margin: 0 -1.15rem -1rem;
	padding: 0.6rem 1.15rem;
	border-top: 1px solid var(--ui-border);
	background: var(--ui-surface);
}
.kDlg.kDialogDrawer .formElement .captionClass,
.kDlg.kDialogDrawer .formElement .inputClass
{
	width: 100%;
	float: none;
	text-align: start;
}
.kDlg.kDialogDrawer .formElement .captionClass
{
	padding: 0.5rem 0 0.2rem;
}
.kDlg.kDialogDrawer .formElement .inputClass :is(input[type=text], input[type=email], input[type=url], input[type=number], input[type=search], select, textarea)
{
	width: 100%;
	box-sizing: border-box;
}

/* ---- the popups of fields, over the dialogs (the date picker takes its z-index from its field) ---- */
.tox.tox-silver-sink,
.tox.tox-tinymce-aux
{
	z-index: var(--ui-z-popup, 10050) !important;
}
.colpick
{
	z-index: var(--ui-z-popup, 10050);
}

/* ---- phones: sheets from the bottom; the big ones fill the screen ---- */
@media (max-width: 675px)
{
	.kDlgLayer.isDialog
	{
		align-items: flex-end;
		padding: 0;
	}
	.kDlgLayer.isDialog .kDlg
	{
		width: 100%;
		min-width: 0;
		max-width: 100%;
		max-height: 92dvh;
		border-radius: 16px 16px 0 0;
		padding-bottom: env(safe-area-inset-bottom);
		transform: translateY(24px);
	}
	.kDlgLayer.isDialog.isShown .kDlg
	{
		transform: none;
	}
	.kDlgLayer.isDialog .kDlg::before
	{
		content: "";
		flex: 0 0 auto;
		align-self: center;
		width: 2.5rem;
		height: 4px;
		margin-top: 0.5rem;
		border-radius: 2px;
		background: var(--ui-border-strong);
	}
	.kDlgLayer.isDialog .kDlg :is(.kDlgHead, .kDlgFoot)
	{
		border-radius: 0;
	}
	.kDlgLayer.isDialog .kDlg:is(.kDlg-lg, .kDlg-xl, .kDlg-full)
	{
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}
	.kDlgLayer.isDialog .kDlg:is(.kDlg-lg, .kDlg-xl, .kDlg-full)::before
	{
		display: none;
	}
	.kDlgLayer.isDialog .kDlg.kDlg-media
	{
		align-self: center;
		border-radius: 0;
	}
	.kDlg.kDialogDrawer
	{
		width: 100vw;
	}
	.kDlgFoot .kDlgActions,
	.kDlgFoot .kDlgActions .kDlgButton
	{
		flex: 1 1 0;
	}
	.kDlgFoot .kDlgActions.isStart
	{
		margin-inline-start: 0;
	}
}
@media (prefers-reduced-motion: reduce)
{
	.kDlg.ui-dialog,
	.kDlgBackdrop.ui-widget-overlay
	{
		transition: none;
	}
	.kDlgButton.isBusyButton::before,
	.kDlgBody.isIframe.isLoading
	{
		animation: none;
	}
}
.row {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
	padding: 5px 0px;
}
  .row:before, .row:after {
    content: " ";
    display: table; }
  .row:after {
    clear: both; }
  .row.collapse > .column {
    padding-left: 0;
    padding-right: 0; }
  .row.collapse .row {
    margin-left: 0;
    margin-right: 0; }
  .row .row {
/*    width: auto; */
    margin-top: 0;
    margin-bottom: 0;
    max-width: none; }
    .row .row:before, .row .row:after {
      content: " ";
      display: table; }
    .row .row:after {
      clear: both; }
    .row .row.collapse {
      width: auto;
      margin: 0;
      max-width: none; }
      .row .row.collapse:before, .row .row.collapse:after {
        content: " ";
        display: table; }
      .row .row.collapse:after {
        clear: both; }

.column{
  height: auto;
  min-height: 1rem;
  width: 100%;
}
.col1
{
	width: 8.33%;
}
.col2
{
	width: 16.66%;
}
.col3
{
	width: 25%;
}
.col4
{
	width: 33.33%;
}
.col5
{
	width: 41.66%;
}
.col6
{
	width: 50%;
}
.col7
{
	width: 58.33%;
}
.col8
{
	width: 66.66%;
}
.col9
{
	width: 75%;
}
.col10
{
	width: 83.33%;
}
.col11
{
	width: 91.66%;
}
.col12
{
	width: 100%;
}

.linesCount_2
{
	line-height: 1.9rem;
	height: 3.8rem;
	white-space: normal;
}

/* ---- flex rows: fRow / fColumn ----
	Used by the core list class (classes/core/list.php) instead of .row / .column above, which stay
	as they are for forms and templates. No float, no clearfix pseudo elements (they became flex items). */
.fRow
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
}
.fColumn
{
	box-sizing: border-box;
	min-width: 0;
	min-height: 1rem;
}
.fRow > .fColumn:only-child
{
	flex: 1 1 100%;
}
.fColumn.autoWidth
{
	width: auto;
}
@media (max-width: 480px)
{
	.fRow > .fColumn
	{
		width: 100% !important;
	}
}
@media (max-width:1279px){
	.listBody .button
	{
		font-size: 0.9rem;
	}
}
@media  (max-width:850px){
	.listBody .button {
		width: 100%;
		min-width: 100%;
	}
	.listBody .button span:where([class^="icon-"], [class*=" icon-"], [class^="button-"], [class*=" button-"]){
		margin: 0px auto;
		float: none;
	}
	.listHeaderClass .column,
	.listHeaderClass .fColumn
	{
		font-size: 0.8rem;
	}
	.formFileDelete img
	{
		display: none;
	}
	.fastChangeController
	{
		display: none;
	}
	.kDesignThemeRender table, .kDesignTemplateRender table
	{
		width: 100%;
	}
	.button.onlyImage span, .defaultButton.onlyImage span{
		background-size: 100%;
	}
}
@media  (max-width:675px){
	.passwordGeneratorButton
	{
		width: 75%;
		margin-top: 4px;
	}
	.listBody .button {
		padding: 0px 4px;
	}
	.adminWidgetWrapper
	{
		width: 100% !important;
	}
	.formTransferFieldSelect, .formTransferArrows
	{
		width: 100%;
	}
}
@media  (max-width:480px){
	.row {
		margin-bottom: 10px;
	}
	.hidden-row.formRow .captionClass, .submit-row.formRow  .captionClass
	{
		display: none;
	}
	.formRow.row
	{
		padding: 3px 0px;
	}
	
	.column,
	.formFileDeleteAndInputDiv, 
	.formFilePreview, 
	.formFileDelete, 
	.formFileInput, 
	.button
	{
		width: 100% !important;
		float: none;
		margin: 0px 0px 2px 0px;
		clear: both;
	}
	.passwordGeneratorButton
	{
		width: 100%;
		margin-top: 4px;
	}
	.formFileDeleteAndInputDiv, 
	.fieldsBesideEachOther, 
	.formFilePreview, 
	.formFileDelete, 
	.formFileInput
	{
		padding: 0px;
	}
	.table.captionsLong .inputClass, 
	.inputClass, 
	.row.hiddenCaption .row .inputClass, 
	.captionClass, 
	.table.captionsLong .captionClass, 
	input[type="text"],
	input[type="password"],
	.inputOk,
	.inputWarning,
	.progressWrapper,
	.fieldsBesideEachOther ,
	select,
	.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12
	{
		width: 100%;
	}
	.weightHandler
	{
		display: none;
	}
	.listBody .button span:where([class^="icon-"], [class*=" icon-"], [class^="button-"], [class*=" button-"]){
		float: right;
	}
	.listBody .button {
		font-size: 1rem;
	}
	.phoneAreaField
	{
		width: 15%;
	}
	.phoneCountryAndAreaField
	{
		width: 30%;
	}
	.phoneMainField
	{
		width: 85%;
	}
	.phoneMainWithCountryField
	{
		width: 70%;
	}
	.phoneFieldErrorRow
	{
		margin-bottom: 0px;
	}
}

/* phones: buttons in trees, in list rows and in the toolbar above lists keep a compact size
   (the full-width buttons above stay for the forms) */
@media (max-width:675px){
	.TreeElementBody .button,
	.listBody .TreeElementBody .button,
	.elementsButtonsArea .button,
	.listBody .elementsButtonsArea .button,
	.listBody .button.onlyImage,
	.listElement .listRow .button.onlyImage
	{
		width: auto !important;
		min-width: 0 !important;
		float: none;
		clear: none;
		margin: 0 0 4px;
		margin-inline-end: 4px;
	}
	.TreeElementBody .button,
	.listBody .TreeElementBody .button,
	.listElement .listRow .TreeElementBody .button.onlyImage
	{
		min-width: 36px !important;
		justify-content: center;
	}
}

/* An extension shown on one device only (its "device" visibility rule): printed by the server, hidden here */
@media (max-width:675px){
	.deviceOnly.hideOnMobile
	{
		display: none !important;
	}
}
@media (min-width:676px){
	.deviceOnly.hideOnDesktop
	{
		display: none !important;
	}
}
/* A box or a row not shown on a device (its display rules, boxes_displayClasses()): phone up to 675px, tablet up to
   1024px, desktop above; the inline editor still shows it, dimmed (boxesAway, styles/addons/boxes) */
@media (max-width:675px){
	.deviceHide-phone:not(.boxesFrontendEditor *)
	{
		display: none !important;
	}
}
@media (min-width:676px) and (max-width:1024px){
	.deviceHide-tablet:not(.boxesFrontendEditor *)
	{
		display: none !important;
	}
}
@media (min-width:1025px){
	.deviceHide-desktop:not(.boxesFrontendEditor *)
	{
		display: none !important;
	}
}
.marginAfter2 { 
	margin-left: 2px;
}
.marginAfter5 { 
	margin-left: 5px;
}
.marginAfter10 { 
	margin-left: 10px;
}
.marginAfter25 { 
	margin-left: 25px;
}
.marginAfter50 { 
	margin-left: 50px;
}
.marginAfter100{ 
	margin-left: 100px;
}
.marginBefore2 { 
	margin-right: 2px;
}
.marginBefore5 { 
	margin-right: 5px;
}
.marginBefore10 { 
	margin-right: 10px;
}
.marginBefore25 { 
	margin-right: 25px;
}
.marginBefore50 { 
	margin-right: 50px;
}
.marginBefore100{ 
	margin-right: 100px;
}


.marginBottom2 {
	margin-bottom: 5px;
}
.marginBottom5 {
	margin-bottom: 5px;
}
.marginBottom10 {
	margin-bottom: 10px;
}
.marginBottom25 {
	margin-bottom: 25px;
}
.marginBottom50 {
	margin-bottom: 50px;
}
.marginBottom100 {
	margin-bottom: 100px;
}

.marginTop2 {
	margin-top: 5px;
}
.marginTop5 {
	margin-top: 5px;
}
.marginTop10 {
	margin-top: 10px;
}
.marginTop25 {
	margin-top: 25px;
}
.marginTop50 {
	margin-top: 50px;
}
.marginTop100 {
	margin-top: 100px;
}

.padding2 {
	padding: 2px;
}
.padding0 {
	padding: 0px;
}
.padding5 {
	padding: 5px;
}
.padding10 {
	padding: 10px;
}

.paddingBeforeAfter5 {
	padding-right: 5px;
	padding-left: 5px;
}
.paddingBeforeAfter10 {
	padding-right: 10px;
	padding-left: 10px;
}
.paddingTopBottom5
{
	padding-top: 5px;
	padding-bottom: 5px;
	
}
.paddingTop0 {
	padding-top: 0px;
}
.paddingTop2 {
	padding-top: 2px;
}
.paddingTop5 {
	padding-top: 5px;
}
.paddingTop10 {
	padding-top: 10px;
}
.paddingTop25 {
	padding-top: 25px;
}
.paddingBottom0 {
	padding-bottom: 0px;
}
.paddingAfter2 { 
	padding-left: 2px;
}
.paddingAfter5 { 
	padding-left: 5px;
}
.paddingAfter10 { 
	padding-left: 10px;
}
.paddingAfter25 { 
	padding-left: 25px;
}
.paddingAfter50 { 
	padding-left: 50px;
}
.paddingBefore2 { 
	padding-right: 2px;
}
.paddingBefore5 { 
	padding-right: 5px;
}
.paddingBefore10{ 
	padding-right: 10px;
}
.paddingBefore25{ 
	padding-right: 25px;
}
.paddingBefore50{ 
	padding-right: 50px;
}/*
	Images and galleries inserted by the kImage TinyMCE plugin
	(scripts/lib/editor/tiny_mce_platform/plugins/kImage/plugin.js).
	Registered as 'always', so the editor (content_css) and the site render them the same way.
	Positions follow the content direction: right/left for the page, inline-start/end for mixed content.
*/
.kImage
{
	width: fit-content;
	max-width: 100%;
	margin: 0px 0px 10px;
}
.kImage img
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.kImageStart
{
	float: right;
	float: inline-start;
	margin-inline-end: 20px;
}
.kImageEnd
{
	float: left;
	float: inline-end;
	margin-inline-start: 20px;
}
.kImageCenter
{
	clear: both;
	margin-left: auto;
	margin-right: auto;
}
div.kImageW25, img.kImageW25
{
	width: 25%;
}
div.kImageW33, img.kImageW33
{
	width: 33.33%;
}
div.kImageW50, img.kImageW50
{
	width: 50%;
}
div.kImageW75, img.kImageW75
{
	width: 75%;
}
div.kImageW100, img.kImageW100
{
	width: 100%;
}
.kImageSized img
{
	width: 100%;
}
.kImageCaption
{
	padding: 5px 0px 0px;
	font-size: 0.9em;
	line-height: 1.5em;
	color: var(--ui-muted);
	text-align: center;
}

/* Styles (on the img) */
.kImageRounded
{
	border-radius: 8px;
}
.kImageCircle
{
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.kImageShadow
{
	box-shadow: var(--ui-shadow-sm);
}
.kImageBorder
{
	border: 1px solid var(--ui-border-strong);
	padding: 3px;
	background: var(--ui-surface);
}

/* Galleries */
.kImageGallery
{
	clear: both;
	margin: 0px 0px 10px;
}
.kImageGalleryItem img
{
	display: block;
	width: 100%;
}
.kImageGalleryGrid
{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
.kImageGalleryGrid.kImageCols2
{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kImageGalleryGrid.kImageCols4
{
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.kImageGalleryGrid.kImageCols5
{
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.kImageGalleryGrid.kImageCols6
{
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
.kImageGalleryGrid .kImageGalleryItem img
{
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
/* Carousel before (or without) kCarousel: a horizontal strip, e.g. in the editor */
.kImageGalleryCarousel:not(.kCarousel)
{
	display: flex;
	gap: 10px;
	overflow-x: auto;
}
.kImageGalleryCarousel:not(.kCarousel) > .kImageGalleryItem
{
	flex: 0 0 31%;
}
.kImageGalleryCarousel.kImageCols2:not(.kCarousel) > .kImageGalleryItem
{
	flex-basis: 48%;
}
.kImageGalleryCarousel.kImageCols4:not(.kCarousel) > .kImageGalleryItem
{
	flex-basis: 23%;
}
.kImageGalleryCarousel.kImageCols5:not(.kCarousel) > .kImageGalleryItem
{
	flex-basis: 18%;
}
.kImageGalleryCarousel.kImageCols6:not(.kCarousel) > .kImageGalleryItem
{
	flex-basis: 15%;
}
/* a gallery before kCarousel (and in the editor): its pictures large, one after the other */
.kImageGalleryCarousel.kImageGalleryThumbs:not(.kCarousel) > .kImageGalleryItem
{
	flex-basis: 100%;
}
.kImageGallery.kImageGalleryCarousel .kImageGalleryItem img
{
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width:675px){
	.kImageGalleryGrid.kImageCols4, .kImageGalleryGrid.kImageCols5, .kImageGalleryGrid.kImageCols6
	{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width:480px){
	.kImageStart, .kImageEnd
	{
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
	.kImageSized
	{
		width: 100% !important;
	}
	.kImageGalleryGrid, .kImageGalleryGrid.kImageCols4, .kImageGalleryGrid.kImageCols5, .kImageGalleryGrid.kImageCols6
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/*
	kSelect: chips box and panel of the searchable selects (scripts/kQuery/kSelect.js).
	Single selects keep the native element (styled with the other selects in basic/form.css).
*/
select[data-kselect].kSelect-open
{
	border-color: var(--ui-accent);
	box-shadow: 0 0 0 3px var(--ui-accent-soft);
}

/* multiple ("shadow" mode): the select stays in the layout, invisible, so validation still sees it */
select.kSelect-native
{
	display: block;
	height: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	margin: 0 !important;
	opacity: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}
.kSelect
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	width: 75%;
	max-width: 100%;
	min-height: var(--ui-control-height);
	padding: 4px var(--fld-padding-x, 8px);
	padding-left: 2rem;
	/* the theme's field style, as the other fields (basic/form.css) */
	border-width: var(--fld-border-width, 1px);
	border-style: var(--fld-border-style, solid);
	border-color: var(--fld-border, var(--ui-border-strong));
	border-radius: var(--fld-radius, var(--ui-radius));
	background-color: var(--fld-bg, var(--ui-surface));
	box-shadow: var(--fld-shadow, none);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 0.8rem center;
	color: var(--fld-fg, var(--ui-text));
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kSelect[hidden]
{
	display: none;
}
.kSelect:focus,
.kSelect.kSelect-open
{
	outline: 0;
	border-color: var(--fld-focus-border, var(--ui-accent));
	background-color: var(--fld-focus-bg, var(--fld-bg, var(--ui-surface)));
	box-shadow: var(--fld-ring, 0 0 0 3px var(--ui-accent-soft));
}
.kSelect.kSelect-disabled
{
	cursor: not-allowed;
	opacity: 0.6;
	background-color: var(--ui-soft);
}
.kSelect.kSelect-hasError
{
	border-color: var(--ui-danger);
}
.kSelect-placeholderText
{
	color: var(--fld-placeholder, var(--ui-muted));
}
.kSelect-chip
{
	display: inline-flex;
	align-items: center;
	gap: 2px;
	max-width: 100%;
	padding: 1px 4px;
	padding-inline-start: 9px;
	border-radius: 999px;
	background: var(--ui-accent-soft);
	color: var(--ui-accent-hover);
	line-height: 1.6;
	font-size: 0.95em;
}
.kSelect-chipText
{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kSelect-chipRemove
{
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.kSelect-chipRemove:hover
{
	background: var(--ui-hover);
}
.kSelect-chipRemove::before,
.kSelect-chipRemove::after
{
	content: '';
	position: absolute;
	top: 8px;
	left: 4px;
	width: 10px;
	height: 1.6px;
	background: currentColor;
	transform: rotate(45deg);
}
.kSelect-chipRemove::after
{
	transform: rotate(-45deg);
}

/* the shared panel */
.kSelect-panel
{
	position: fixed;
	z-index: 10050;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	background: var(--ui-surface);
	box-shadow: var(--ui-shadow-lg);
	color: var(--ui-text);
	text-align: start;
	line-height: 1.4;
}
.kSelect-panel[hidden],
.kSelect-searchWrap[hidden],
.kSelect-status[hidden]
{
	display: none;
}
.kSelect-searchWrap
{
	padding: 8px;
	border-bottom: 1px solid var(--ui-border);
}
.kSelect-panel input.kSelect-search
{
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 2.4rem;
	margin: 0;
	padding: 0 0.75rem;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-soft);
	box-shadow: none;
	font-size: max(16px, 1em);
	color: inherit;
}
.kSelect-panel input.kSelect-search:focus
{
	outline: 0;
	border-color: var(--ui-accent);
	background: var(--ui-surface);
	box-shadow: 0 0 0 3px var(--ui-accent-soft);
}
.kSelect-list
{
	position: relative;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px;
	outline: 0;
}
.kSelect-list.kSelect-listVirtual
{
	padding: 0;
}
.kSelect-virtual
{
	position: relative;
}
.kSelect-group
{
	padding: 8px 10px 4px;
	color: var(--ui-muted);
	font-size: 0.82em;
	font-weight: bold;
}
.kSelect-option
{
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	padding: 7px 10px;
	border-radius: var(--ui-radius);
	cursor: pointer;
}
.kSelect-listVirtual .kSelect-option
{
	left: 4px;
	right: 4px;
	white-space: nowrap;
	overflow: hidden;
}
.kSelect-listVirtual .kSelect-optionText
{
	overflow: hidden;
	text-overflow: ellipsis;
}
.kSelect-optionText
{
	flex: 1;
	min-width: 0;
}
/* an option's picture (form.php LUPhoto: a flag, an icon) */
.kSelect-optionPhoto
{
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	object-fit: contain;
}
.kSelect-option.kSelect-active
{
	background: var(--ui-soft);
}
.kSelect-option.kSelect-selected
{
	color: var(--ui-accent);
	font-weight: bold;
}
.kSelect-option.kSelect-selected::after
{
	content: '';
	flex: 0 0 auto;
	width: 10px;
	height: 5px;
	margin-top: -3px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}
.kSelect-option.kSelect-disabled
{
	cursor: not-allowed;
	opacity: 0.45;
}
.kSelect-option.kSelect-placeholder
{
	color: var(--ui-muted);
}
.kSelect-option.kSelect-other
{
	margin-top: 4px;
	border-top: 1px dashed var(--ui-border);
	border-radius: 0 0 var(--ui-radius) var(--ui-radius);
}
.kSelect-status
{
	padding: 12px;
	color: var(--ui-muted);
	text-align: center;
}
@media (prefers-reduced-motion: no-preference)
{
	.kSelect-panel
	{
		animation: kSelectIn 0.12s ease-out;
	}
}
@keyframes kSelectIn
{
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}
.kSelect-panel.kSelect-panelUp
{
	animation-name: kSelectInUp;
}
@keyframes kSelectInUp
{
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}

/* tree selects (form.php 'treeSelect'): rows indented by level with a guide; search results show the parents' path */
.kSelect-option.kSelect-treeRow
{
	position: relative;
	flex-wrap: wrap;
	padding-right: calc(10px + var(--kselect-level, 0) * 18px);
	padding-inline-start: calc(10px + var(--kselect-level, 0) * 18px);
}
.kSelect-option.kSelect-treeRow.kSelect-treeFlat
{
	padding-right: 10px;
	padding-inline-start: 10px;
}
.kSelect-option.kSelect-treeRow:not([data-level="0"]):not(.kSelect-treeFlat)::before
{
	content: '';
	position: absolute;
	top: 0;
	bottom: 50%;
	right: calc(var(--kselect-level, 1) * 18px - 6px);
	inset-inline-start: calc(var(--kselect-level, 1) * 18px - 6px);
	width: 8px;
	border-bottom: 1px solid var(--ui-border-strong);
	border-right: 1px solid var(--ui-border-strong);
	border-inline-start: 1px solid var(--ui-border-strong);
	border-inline-end: 0;
}
.kSelect-option.kSelect-treeRow::after
{
	order: 1;
}
.kSelect-optionPath
{
	order: 2;
	flex: 1 0 100%;
	color: var(--ui-muted);
	font-size: 0.85em;
	font-weight: normal;
}
/* a parent that cannot be picked ('onlyLeaves') reads as a heading of its branch */
.kSelect-option.kSelect-treeRow.kSelect-disabled
{
	opacity: 1;
	color: var(--ui-muted);
	cursor: default;
}
/* kFields (scripts/kQuery/kFields.js): controls of the field types in classes/functions/fields.php,
   and how list / view show their values. Colours come from the tokens in basic/ui.css. */

/* the real input of a composite control: in the layout (the form validates it) but not seen */
.kFieldValue
{
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	overflow: hidden;
}
.kField
{
	box-sizing: border-box;
	max-width: 100%;
}
.kField input.kFieldPart
{
	box-sizing: border-box;
	height: var(--ui-control-height);
	margin: 0;
	padding: 0 0.6rem;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	color: var(--ui-text);
	font: inherit;
}
.kField input.kFieldPart:focus
{
	border-color: var(--ui-accent);
	outline: 0;
	box-shadow: 0 0 0 3px var(--ui-accent-soft);
}
.kField input.kFieldPart:disabled,
.kField button:disabled
{
	opacity: 0.6;
	cursor: not-allowed;
}

/* 'inputType' (email, tel, url, number, search, time): the box of the form's text inputs */
.formElement input[type="email"],
.formElement input[type="tel"],
.formElement input[type="url"],
.formElement input[type="number"],
.formElement input[type="search"],
.formElement input[type="time"]
{
	box-sizing: border-box;
	width: 75%;
	height: var(--ui-control-height);
	padding: 0.5rem var(--fld-padding-x, 0.5rem);
	font-family: inherit;
	font-size: 1.07rem;
}
.formElement input[type="time"]
{
	width: auto;
	min-width: 9rem;
}
.formElement input[type="email"],
.formElement input[type="url"],
.formElement input[type="tel"],
.formElement input[type="number"]
{
	direction: ltr;
	text-align: start;
}

/* range: the value beside the slider */
input[type="range"][data-kfield="range"]
{
	width: calc(100% - 4.5rem);
	max-width: 22rem;
	accent-color: var(--ui-accent);
	vertical-align: middle;
}
.kField-range
{
	display: inline-block;
	vertical-align: middle;
	margin-inline-start: 0.5rem;
}
.kRangeValue
{
	display: inline-block;
	min-width: 2.6rem;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: var(--ui-accent-soft);
	color: var(--ui-accent);
	font-weight: bold;
	text-align: center;
}

/* datetime */
.kField-datetime
{
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	width: 100%;
}
.kField-datetime .kDatePart
{
	flex: 1 1 9rem;
	min-width: 0;
}
.kField-datetime .kTimePart
{
	flex: 0 1 8rem;
}

/* duration */
.kField-duration
{
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.kDurationPart
{
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	cursor: text;
}
.kDurationPart input.kFieldPart
{
	width: 4.5rem;
	text-align: center;
}
.kDurationUnit
{
	color: var(--ui-muted);
}

/* otp */
.kField-otp
{
	display: inline-flex;
	gap: 0.4rem;
	direction: ltr;
}
.kField-otp input.kOtpBox
{
	width: 2.6rem;
	padding: 0;
	font-size: 1.25rem;
	font-weight: bold;
	text-align: center;
}

/* keyValue */
.kField-keyvalue
{
	display: block;
	width: 100%;
}
.kKvRows
{
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 0.4rem;
}
.kKvRow
{
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.kKvRow input.kFieldPart
{
	flex: 1 1 0;
	min-width: 0;
}
.kKvRow input.kKvKey
{
	flex-basis: 35%;
	flex-grow: 0.6;
	font-weight: bold;
}
.kKvRemove,
.kIconClear,
.kTagRemove
{
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ui-muted);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}
.kKvRemove:hover,
.kIconClear:hover,
.kTagRemove:hover
{
	background: var(--ui-danger-soft);
	color: var(--ui-danger);
}
.kField .button.kKvAdd
{
	width: auto;
	height: 2.2rem;
	padding: 0 0.8rem;
	line-height: 2.1rem;
}

/* tags */
.kField-tags
{
	position: relative;
	display: block;
	width: 100%;
}
.kTagsBox
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	box-sizing: border-box;
	min-height: var(--ui-control-height);
	padding: 0.25rem 0.4rem;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	cursor: text;
}
.kTagsBox:focus-within
{
	border-color: var(--ui-accent);
	box-shadow: 0 0 0 3px var(--ui-accent-soft);
}
/* a tag: a chip (uiChip is-accent) with its remove button at its end */
.kTagsBox > .uiChip
{
	padding-inline-end: 0.15rem;
}
.kTagsBox > .uiChip .kTagRemove
{
	width: 1.4rem;
	height: 1.4rem;
	font-size: 1rem;
	color: inherit;
}
.kField-tags input.kTagsEntry
{
	flex: 1 1 6rem;
	min-width: 5rem;
	height: 1.9rem;
	padding: 0 0.2rem;
	border: 0;
	background: transparent;
	box-shadow: none;
}
.kField-tags input.kTagsEntry:focus
{
	box-shadow: none;
}
.kTagsSuggestions
{
	position: absolute;
	z-index: 95;
	top: calc(100% + 4px);
	inset-inline-start: 0;
	inset-inline-end: 0;
	max-height: 14rem;
	margin: 0;
	padding: 0.25rem;
	overflow: auto;
	list-style: none;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	background: var(--ui-surface);
	box-shadow: var(--ui-shadow-lg);
}
.kTagsSuggestions[hidden]
{
	display: none !important;
}
.kTagsSuggestion
{
	padding: 0.4rem 0.6rem;
	border-radius: var(--ui-radius);
	cursor: pointer;
}
.kTagsSuggestion:hover,
.kTagsSuggestion.isActive
{
	background: var(--ui-accent-soft);
	color: var(--ui-accent);
}

/* icon picker */
.kField-icon
{
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}
.kField .kIconButton
{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: auto;
	height: var(--ui-control-height);
	padding: 0 0.8rem;
	border: 1px solid var(--ui-border);
	background: var(--ui-surface);
	color: var(--ui-text);
	line-height: 1;
	border-radius: var(--ui-radius);
	font: inherit;
	cursor: pointer;
	white-space: nowrap;
}
.kField .kIconButton:hover
{
	border-color: var(--ui-accent);
}
.kIconPreview
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	font-size: 1.25rem;
	color: var(--ui-accent);
}
.kIconClear[hidden]
{
	display: none !important;
}
.kFields-panel
{
	position: fixed;
	z-index: 10060;
	box-sizing: border-box;
	padding: 0.6rem;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	background: var(--ui-surface);
	box-shadow: var(--ui-shadow-lg);
	color: var(--ui-text);
}
.kIconPanel .kIconSearch
{
	box-sizing: border-box;
	width: 100%;
	height: 2.3rem;
	margin: 0 0 0.5rem;
	padding: 0 0.6rem;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	font: inherit;
}
.kIconGrid
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));
	gap: 0.25rem;
	max-height: 16rem;
	overflow: auto;
}
.kIconOption
{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.6rem;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--ui-radius);
	background: transparent;
	color: var(--ui-text);
	font-size: 1.2rem;
	cursor: pointer;
}
.kIconOption:hover,
.kIconOption:focus-visible
{
	border-color: var(--ui-accent);
	color: var(--ui-accent);
}
.kIconOption.isSelected
{
	background: var(--ui-accent);
	color: var(--ui-on-accent);
}
/* money: the currency beside the amount */
.formAffixGroup
{
	display: inline-flex;
	flex-wrap: wrap;
	align-items: stretch;
	max-width: 100%;
}
.formAffixGroup > input
{
	flex: 1 1 auto;
	min-width: 0;
}
.formAffix
{
	display: inline-flex;
	align-items: center;
	padding: 0 0.7rem;
	border: 1px solid var(--ui-border);
	background: var(--ui-soft);
	color: var(--ui-muted);
	white-space: nowrap;
}
.formAffixGroup > .formAffix:first-child
{
	border-inline-end: 0;
	border-start-start-radius: var(--ui-radius);
	border-end-start-radius: var(--ui-radius);
}
.formAffixGroup > .formAffix:last-child
{
	border-inline-start: 0;
	border-start-end-radius: var(--ui-radius);
	border-end-end-radius: var(--ui-radius);
}
.formAffixGroup > .formAffix:first-child + input
{
	border-start-start-radius: 0;
	border-end-start-radius: 0;
}
.formAffixGroup > input:first-child
{
	border-start-end-radius: 0;
	border-end-end-radius: 0;
}
/* an amount typed left to right on a right to left page: its own start / end are the page's opposite sides */
.formAffixGroup > .formAffix:first-child + input.ltr
{
	border-radius: var(--ui-radius);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.formAffixGroup > input.ltr:first-child
{
	border-radius: var(--ui-radius);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.formAffixGroup > .inputWarning,
.formAffixGroup > .inputOk
{
	flex-basis: 100%;
}

/* star rating (a radio group: validation and keyboard stay the browser's) */
.formElement .radioDivs.formRating
{
	display: inline-flex;
	align-items: center;
	gap: 0.1rem;
	padding: 0;
	border: 0;
	background: none;
}
.formElement .radioDivs.formRating > .radioDiv
{
	position: relative;
	float: none;
	display: inline-flex;
	width: auto;
	margin: 0;
	padding: 0 0.05rem;
	color: var(--ui-border-strong);
	font-size: 1.75rem;
	line-height: 1.1;
	cursor: pointer;
	transition: color 0.12s ease, transform 0.12s ease;
}
.formElement .radioDivs.formRating > .radioDiv::before
{
	content: '★';
}
.formElement .radioDivs.formRating > .radioDiv > input[type="radio"]
{
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.formElement .radioDivs.formRating > .radioDiv.isOn,
.formElement .radioDivs.formRating > .radioDiv.isHover
{
	color: var(--ui-star);
}
.formElement .radioDivs.formRating:hover > .radioDiv.isOn:not(.isHover)
{
	color: var(--ui-border-strong);
}
.formElement .radioDivs.formRating > .radioDiv.isHover
{
	transform: scale(1.12);
}
@supports selector(:has(*))
{
	.formElement .radioDivs.formRating > .radioDiv:has(> input:focus-visible)
	{
		outline: 2px solid var(--ui-focus);
		outline-offset: 1px;
		border-radius: 4px;
	}
}
@media (prefers-reduced-motion: reduce)
{
	.formElement .radioDivs.formRating > .radioDiv
	{
		transition: none;
	}
	.formElement .radioDivs.formRating > .radioDiv.isHover
	{
		transform: none;
	}
}

/* ---- values in lists and views ---- */
.kRating
{
	display: inline-flex;
	gap: 0.05rem;
	color: var(--ui-border-strong);
	font-size: 1.1em;
	line-height: 1;
	white-space: nowrap;
}
.kRatingStar.isOn
{
	color: var(--ui-star);
}
.kMoney,
.kNumber,
.kDuration,
.kOtpValue
{
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.kOtpValue
{
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	letter-spacing: 0.15em;
}
/* long localized dates: the range wraps between its parts on narrow screens */
.kDateRange
{
	white-space: normal;
}
.kDateRangeSep
{
	color: var(--ui-muted);
}
.kIconValue .icon-home,
.kIconValue [class^="icon-"]
{
	color: var(--ui-accent);
	font-size: 1.2em;
	vertical-align: middle;
}
.kIconName
{
	color: var(--ui-muted);
	font-size: 0.9em;
}
.kTags
{
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}
.kTag
{
	display: inline-block;
	padding: 0.05rem 0.55rem;
	border-radius: 999px;
	background: var(--ui-accent-soft);
	color: var(--ui-accent);
	font-size: 0.92em;
	line-height: 1.6;
	white-space: nowrap;
}
.kKeyValue
{
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.15rem 0.75rem;
	margin: 0;
}
.kKeyValueRow
{
	display: contents;
}
.kKeyValue dt
{
	color: var(--ui-muted);
	font-weight: bold;
}
.kKeyValue dd
{
	margin: 0;
	overflow-wrap: anywhere;
}
.kCopyable
{
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35rem;
}
.kCopyButton
{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	color: var(--ui-muted);
	cursor: pointer;
}
.kCopyButton:hover
{
	border-color: var(--ui-accent);
	color: var(--ui-accent);
}
.kCopyButton.isCopied
{
	border-color: var(--ui-success);
	color: var(--ui-success);
}
.kCopyButton[data-tip]::after
{
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	padding: 0.2rem 0.5rem;
	border-radius: var(--ui-radius);
	background: var(--ui-text);
	color: var(--ui-on-accent);
	font-size: 0.8rem;
	white-space: nowrap;
	pointer-events: none;
}

/* the searched fields (link, picker, kFields.js searchChip/searchList): the chosen row as a chip in place of the
   search box, the size and look of the form's text inputs (the theme's field style, --fld-*), and the results */
.kLinkChip
{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--ui-control-height);
	box-sizing: border-box;
	padding: 0.25rem;
	padding-inline-start: var(--fld-padding-x, 0.5rem);
	border-width: var(--fld-border-width, 1px);
	border-style: var(--fld-border-style, solid);
	border-color: var(--fld-border, var(--ui-border-strong));
	border-radius: var(--fld-radius, var(--ui-radius));
	background-color: var(--fld-bg, var(--ui-surface));
	box-shadow: var(--fld-shadow, none);
	color: var(--fld-fg, var(--ui-text));
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kLinkChip:hover
{
	border-color: var(--fld-hover-border, var(--ui-border-input));
}
.kLinkChip:focus-within
{
	border-color: var(--fld-focus-border, var(--ui-accent));
	box-shadow: var(--fld-ring, 0 0 0 3px var(--ui-accent-soft));
}
.kLinkChip.isGone
{
	border-color: var(--ui-danger);
	background-color: var(--ui-danger-soft);
}
.kLinkChip[hidden],
.kLinkNote[hidden],
.kLinkResults[hidden],
.kLinkOpen[hidden],
.kLinkIcon[hidden],
.kLinkSubtitle[hidden],
.kPickerImage[hidden]
{
	display: none !important;
}
.kLinkIcon
{
	flex: 0 0 auto;
	color: var(--ui-accent);
	font-size: 1.1rem;
}
.kLinkChip.isGone .kLinkIcon,
.kLinkChip.isGone .kLinkTitle
{
	color: var(--ui-danger);
}
.kLinkText
{
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.5rem;
	min-width: 0;
}
.kLinkKind
{
	color: var(--ui-muted);
	font-size: 0.85em;
}
.kLinkKind:empty
{
	display: none;
}
.kLinkTitle
{
	font-weight: 600;
}
.kLinkSubtitle,
.kLinkPath
{
	color: var(--ui-muted);
	font-size: 0.85em;
	overflow-wrap: anywhere;
}
.kField .kLinkOpen,
.kField .kLinkClear
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.8rem;
	height: 1.8rem;
	padding: 0;
	border: 0;
	border-radius: var(--ui-radius);
	background: transparent;
	color: var(--ui-muted);
	font: inherit;
	font-size: 1.1rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}
.kField .kLinkOpen:hover,
.kField .kLinkClear:hover
{
	background: var(--ui-accent-soft);
	color: var(--ui-accent);
}
/* link: what was recognized in an address typed or pasted, and "keep as typed" */
.kLinkNote
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.6rem;
	margin-top: 0.3rem;
	color: var(--ui-muted);
	font-size: 0.85em;
}
.kField .kLinkKeep
{
	padding: 0;
	border: 0;
	background: none;
	color: var(--ui-accent);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}
/* the results float on the page, over dialogs (placed by kFields.js), like the other field popups */
.kLinkResults
{
	position: fixed;
	z-index: 10060;
	box-sizing: border-box;
	max-height: 18rem;
	margin: 0;
	padding: 0.25rem;
	overflow: auto;
	list-style: none;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	background: var(--ui-surface);
	box-shadow: var(--ui-shadow-lg);
	color: var(--ui-text);
}
/* the site's themes float list items */
.kLinkResults > li
{
	float: none !important;
}
.kLinkGroup
{
	padding: 0.45rem 0.6rem 0.2rem;
	color: var(--ui-muted);
	font-size: 0.8em;
	font-weight: 600;
}
.kLinkOption
{
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0.6rem;
	border-radius: var(--ui-radius);
	cursor: pointer;
}
.kLinkOption:hover,
.kLinkOption.isActive
{
	background: var(--ui-accent-soft);
}
.kLinkEmpty
{
	padding: 0.5rem 0.6rem;
	color: var(--ui-muted);
}
/* picker: a search box until a row is chosen, then the row as a chip. The picker and the link's chip are 75% wide as
   the form's text inputs (full width where the inputs are, basic/form.css) */
.kField-picker,
.kField-link
{
	width: 75%;
	max-width: 100%;
}
.kField-picker .kPickerSearch
{
	width: 100%;
	box-sizing: border-box;
}
/* one line, the height of an input: the name, then the username, each cut short when the field is narrow */
.kLinkChip.kPickerChip
{
	height: var(--ui-control-height);
	min-height: 0;
	padding-block: 0;
}
.kPickerChip .kLinkText
{
	flex-wrap: nowrap;
	align-items: baseline;
	overflow: hidden;
}
.kPickerChip .kLinkTitle,
.kPickerChip .kLinkSubtitle
{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.kPickerChip .kLinkTitle
{
	flex: 0 1 auto;
}
.kPickerChip .kLinkSubtitle
{
	flex: 1 1 0;
	min-width: 3em;
	overflow-wrap: normal;
}
/* several values: the chosen rows as chips (uiChip, as the tags) before the search box, in a box like an input */
.kPickerBox
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	box-sizing: border-box;
	min-height: var(--ui-control-height);
	padding: 0.25rem var(--fld-padding-x, 0.5rem);
	border-width: var(--fld-border-width, 1px);
	border-style: var(--fld-border-style, solid);
	border-color: var(--fld-border, var(--ui-border-strong));
	border-radius: var(--fld-radius, var(--ui-radius));
	background-color: var(--fld-bg, var(--ui-surface));
	box-shadow: var(--fld-shadow, none);
	color: var(--fld-fg, var(--ui-text));
	cursor: text;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kPickerBox:hover
{
	border-color: var(--fld-hover-border, var(--ui-border-input));
}
.kPickerBox:focus-within
{
	border-color: var(--fld-focus-border, var(--ui-accent));
	box-shadow: var(--fld-ring, 0 0 0 3px var(--ui-accent-soft));
}
.kPickerBox > .uiChip
{
	gap: 0.3rem;
	max-width: 100%;
	padding-inline-end: 0.15rem;
}
.kPickerBox > .uiChip.isGone
{
	background: var(--ui-danger-soft);
	color: var(--ui-danger);
}
.kPickerBox > .uiChip .kPickerImage
{
	width: 1.25rem;
	height: 1.25rem;
	margin-inline-start: -0.35rem;
}
.kPickerBox > .uiChip .kPickerRemove
{
	width: 1.4rem;
	height: 1.4rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}
/* the search box inside: no box of its own (over the form's text input style) */
.kField .kPickerBox input.kPickerEntry,
.kField .kPickerBox input.kPickerEntry:hover,
.kField .kPickerBox input.kPickerEntry:focus
{
	flex: 1 1 6rem;
	width: auto;
	min-width: 5rem;
	height: 1.9rem;
	padding: 0 0.2rem;
	border: 0;
	background: transparent;
	box-shadow: none;
	outline: 0;
}
.kPickerSearch[hidden]
{
	display: none !important;
}
.kPickerImage
{
	flex: 0 0 auto;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--ui-surface-muted);
}
.kLinkChip.isGone .kPickerImage
{
	opacity: 0.5;
}
/* the shared values' menu is for typed addresses (its button is before or after the control) */
.kField-link.hasChip ~ .sharedValuesIcon,
input.kFieldValue[data-kfield="link"] ~ .sharedValuesIcon
{
	display: none !important;
}
/*! jQuery UI - v1.13.3 - 2024-04-26
* https://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit https://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
* Copyright OpenJS Foundation and other contributors; Licensed MIT */

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;-ms-filter:"alpha(opacity=0)"}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important;pointer-events:none}.ui-icon{display:inline-block;vertical-align:middle;margin-top:-.25em;position:relative;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-icon-block{left:50%;margin-left:-8px;display:block}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-accordion .ui-accordion-header{display:block;cursor:pointer;position:relative;margin:2px 0 0 0;padding:.5em .5em .5em .7em;font-size:100%}.ui-accordion .ui-accordion-content{padding:1em 2.2em;border-top:0;overflow:auto}.ui-autocomplete{position:absolute;top:0;left:0;cursor:default}.ui-menu{list-style:none;padding:0;margin:0;display:block;outline:0}.ui-menu .ui-menu{position:absolute}.ui-menu .ui-menu-item{margin:0;cursor:pointer;list-style-image:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")}.ui-menu .ui-menu-item-wrapper{position:relative;padding:3px 1em 3px .4em}.ui-menu .ui-menu-divider{margin:5px 0;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}.ui-menu .ui-state-focus,.ui-menu .ui-state-active{margin:-1px}.ui-menu-icons{position:relative}.ui-menu-icons .ui-menu-item-wrapper{padding-left:2em}.ui-menu .ui-icon{position:absolute;top:0;bottom:0;left:.2em;margin:auto 0}.ui-menu .ui-menu-icon{left:auto;right:0}.ui-button{padding:.4em 1em;display:inline-block;position:relative;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:visible}.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}.ui-button-icon-only{width:2em;box-sizing:border-box;text-indent:-9999px;white-space:nowrap}input.ui-button.ui-button-icon-only{text-indent:0}.ui-button-icon-only .ui-icon{position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.ui-button.ui-icon-notext .ui-icon{padding:0;width:2.1em;height:2.1em;text-indent:-9999px;white-space:nowrap}input.ui-button.ui-icon-notext .ui-icon{width:auto;height:auto;text-indent:0;white-space:normal;padding:.4em 1em}input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;padding:0}.ui-controlgroup{vertical-align:middle;display:inline-block}.ui-controlgroup > .ui-controlgroup-item{float:left;margin-left:0;margin-right:0}.ui-controlgroup > .ui-controlgroup-item:focus,.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus{z-index:9999}.ui-controlgroup-vertical > .ui-controlgroup-item{display:block;float:none;width:100%;margin-top:0;margin-bottom:0;text-align:left}.ui-controlgroup-vertical .ui-controlgroup-item{box-sizing:border-box}.ui-controlgroup .ui-controlgroup-label{padding:.4em 1em}.ui-controlgroup .ui-controlgroup-label span{font-size:80%}.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item{border-left:none}.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item{border-top:none}.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content{border-right:none}.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content{border-bottom:none}.ui-controlgroup-vertical .ui-spinner-input{width:75%;width:calc( 100% - 2.4em )}.ui-controlgroup-vertical .ui-spinner .ui-spinner-up{border-top-style:solid}.ui-checkboxradio-label .ui-icon-background{box-shadow:inset 1px 1px 1px #ccc;border-radius:.12em;border:none}.ui-checkboxradio-radio-label .ui-icon-background{width:16px;height:16px;border-radius:1em;overflow:visible;border:none}.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon{background-image:none;width:8px;height:8px;border-width:4px;border-style:solid}.ui-checkboxradio-disabled{pointer-events:none}.ui-datepicker{width:17em;padding:.2em .2em 0;display:none}.ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}.ui-datepicker .ui-datepicker-prev{left:2px}.ui-datepicker .ui-datepicker-next{right:2px}.ui-datepicker .ui-datepicker-prev-hover{left:1px}.ui-datepicker .ui-datepicker-next-hover{right:1px}.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center}.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0}.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:45%}.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}.ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0}.ui-datepicker td{border:0;padding:1px}.ui-datepicker td span,.ui-datepicker td a{display:block;padding:.2em;text-align:right;text-decoration:none}.ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0}.ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible}.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}.ui-datepicker.ui-datepicker-multi{width:auto}.ui-datepicker-multi .ui-datepicker-group{float:left}.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}.ui-datepicker-row-break{clear:both;width:100%;font-size:0}.ui-datepicker-rtl{direction:rtl}.ui-datepicker-rtl .ui-datepicker-prev{right:2px;left:auto}.ui-datepicker-rtl .ui-datepicker-next{left:2px;right:auto}.ui-datepicker-rtl .ui-datepicker-prev:hover{right:1px;left:auto}.ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto}.ui-datepicker-rtl .ui-datepicker-buttonpane{clear:right}.ui-datepicker-rtl .ui-datepicker-buttonpane button{float:left}.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,.ui-datepicker-rtl .ui-datepicker-group{float:right}.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header{border-right-width:0;border-left-width:1px}.ui-datepicker .ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat;left:.5em;top:.3em}.ui-dialog{position:absolute;top:0;left:0;padding:.2em;outline:0}.ui-dialog .ui-dialog-titlebar{padding:.4em 1em;position:relative}.ui-dialog .ui-dialog-title{float:left;margin:.1em 0;white-space:nowrap;width:90%;overflow:hidden;text-overflow:ellipsis}.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.3em;top:50%;width:20px;margin:-10px 0 0 0;padding:1px;height:20px}.ui-dialog .ui-dialog-content{position:relative;border:0;padding:.5em 1em;background:none;overflow:auto}.ui-dialog .ui-dialog-buttonpane{text-align:left;border-width:1px 0 0 0;background-image:none;margin-top:.5em;padding:.3em 1em .5em .4em}.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{float:right}.ui-dialog .ui-dialog-buttonpane button{margin:.5em .4em .5em 0;cursor:pointer}.ui-dialog .ui-resizable-n{height:2px;top:0}.ui-dialog .ui-resizable-e{width:2px;right:0}.ui-dialog .ui-resizable-s{height:2px;bottom:0}.ui-dialog .ui-resizable-w{width:2px;left:0}.ui-dialog .ui-resizable-se,.ui-dialog .ui-resizable-sw,.ui-dialog .ui-resizable-ne,.ui-dialog .ui-resizable-nw{width:7px;height:7px}.ui-dialog .ui-resizable-se{right:0;bottom:0}.ui-dialog .ui-resizable-sw{left:0;bottom:0}.ui-dialog .ui-resizable-ne{right:0;top:0}.ui-dialog .ui-resizable-nw{left:0;top:0}.ui-draggable .ui-dialog-titlebar{cursor:move}.ui-draggable-handle{-ms-touch-action:none;touch-action:none}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;-ms-touch-action:none;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-progressbar{height:2em;text-align:left;overflow:hidden}.ui-progressbar .ui-progressbar-value{margin:-1px;height:100%}.ui-progressbar .ui-progressbar-overlay{background:url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");height:100%;-ms-filter:"alpha(opacity=25)";opacity:0.25}.ui-progressbar-indeterminate .ui-progressbar-value{background-image:none}.ui-selectable{-ms-touch-action:none;touch-action:none}.ui-selectable-helper{position:absolute;z-index:100;border:1px dotted black}.ui-selectmenu-menu{padding:0;margin:0;position:absolute;top:0;left:0;display:none}.ui-selectmenu-menu .ui-menu{overflow:auto;overflow-x:hidden;padding-bottom:1px}.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup{font-size:1em;font-weight:bold;line-height:1.5;padding:2px 0.4em;margin:0.5em 0 0 0;height:auto;border:0}.ui-selectmenu-open{display:block}.ui-selectmenu-text{display:block;margin-right:20px;overflow:hidden;text-overflow:ellipsis}.ui-selectmenu-button.ui-button{text-align:left;white-space:nowrap;width:14em}.ui-selectmenu-icon.ui-icon{float:right;margin-top:0}.ui-slider{position:relative;text-align:left}.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:pointer;-ms-touch-action:none;touch-action:none}.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;background-position:0 0}.ui-slider.ui-state-disabled .ui-slider-handle,.ui-slider.ui-state-disabled .ui-slider-range{filter:inherit}.ui-slider-horizontal{height:.8em}.ui-slider-horizontal .ui-slider-handle{top:-.3em;margin-left:-.6em}.ui-slider-horizontal .ui-slider-range{top:0;height:100%}.ui-slider-horizontal .ui-slider-range-min{left:0}.ui-slider-horizontal .ui-slider-range-max{right:0}.ui-slider-vertical{width:.8em;height:100px}.ui-slider-vertical .ui-slider-handle{left:-.3em;margin-left:0;margin-bottom:-.6em}.ui-slider-vertical .ui-slider-range{left:0;width:100%}.ui-slider-vertical .ui-slider-range-min{bottom:0}.ui-slider-vertical .ui-slider-range-max{top:0}.ui-sortable-handle{-ms-touch-action:none;touch-action:none}.ui-spinner{position:relative;display:inline-block;overflow:hidden;padding:0;vertical-align:middle}.ui-spinner-input{border:none;background:none;color:inherit;padding:.222em 0;margin:.2em 0;vertical-align:middle;margin-left:.4em;margin-right:2em}.ui-spinner-button{width:1.6em;height:50%;font-size:.5em;padding:0;margin:0;text-align:center;position:absolute;cursor:default;display:block;overflow:hidden;right:0}.ui-spinner a.ui-spinner-button{border-top-style:none;border-bottom-style:none;border-right-style:none}.ui-spinner-up{top:0}.ui-spinner-down{bottom:0}.ui-tabs{position:relative;padding:.2em}.ui-tabs .ui-tabs-nav{margin:0;padding:.2em .2em 0}.ui-tabs .ui-tabs-nav li{list-style:none;float:left;position:relative;top:0;margin:1px .2em 0 0;border-bottom-width:0;padding:0;white-space:nowrap}.ui-tabs .ui-tabs-nav .ui-tabs-anchor{float:left;padding:.5em 1em;text-decoration:none}.ui-tabs .ui-tabs-nav li.ui-tabs-active{margin-bottom:-1px;padding-bottom:1px}.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor{cursor:text}.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor{cursor:pointer}.ui-tabs .ui-tabs-panel{display:block;border-width:0;padding:1em 1.4em;background:none}.ui-tooltip{padding:8px;position:absolute;z-index:9999;max-width:300px}body .ui-tooltip{border-width:2px}.ui-widget{font-size:1.1em}.ui-widget .ui-widget{font-size:1em}.ui-widget-content{border:1px solid #aaa;background:#fff}.ui-widget-header{border:1px solid #aaa;background:#ccc url("../images/ui/smoothness/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;color:#222;font-weight:bold}.ui-widget-header a{color:#222}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,.ui-button,html .ui-button.ui-state-disabled:hover,html .ui-button.ui-state-disabled:active{border:1px solid #d3d3d3;background:#e6e6e6 url("../images/ui/smoothness/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;font-weight:normal;color:#555}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited,a.ui-button,a:link.ui-button,a:visited.ui-button,.ui-button{color:#555;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus,.ui-button:hover,.ui-button:focus{border:1px solid #999;background:#dadada url("../images/ui/smoothness/ui-bg_glass_75_dadada_1x400.png") 50% 50% repeat-x;font-weight:normal;color:#212121}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited,a.ui-button:hover,a.ui-button:focus{color:#212121;text-decoration:none}.ui-visual-focus{box-shadow:0 0 3px 1px rgb(94,158,214)}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active,.ui-button:active,.ui-button.ui-state-active:hover{border:1px solid #aaa;background:#fff url("../images/ui/smoothness/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;font-weight:normal;color:#212121}.ui-icon-background,.ui-state-active .ui-icon-background{border:#aaa;background-color:#212121}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#212121;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #fcefa1;background:#fbf9ee url("../images/ui/smoothness/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x;color:#363636}.ui-state-checked{border:1px solid #fcefa1;background:#fbf9ee}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#363636}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#fef1ec url("../images/ui/smoothness/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;color:#cd0a0a}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#cd0a0a}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#cd0a0a}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;-ms-filter:"alpha(opacity=70)";font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;-ms-filter:"alpha(opacity=35)";background-image:none}.ui-state-disabled .ui-icon{-ms-filter:"alpha(opacity=35)"}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url("../images/ui/smoothness/ui-icons_222222_256x240.png")}.ui-widget-header .ui-icon{background-image:url("../images/ui/smoothness/ui-icons_222222_256x240.png")}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon,.ui-button:hover .ui-icon,.ui-button:focus .ui-icon{background-image:url("../images/ui/smoothness/ui-icons_454545_256x240.png")}.ui-state-active .ui-icon,.ui-button:active .ui-icon{background-image:url("../images/ui/smoothness/ui-icons_454545_256x240.png")}.ui-state-highlight .ui-icon,.ui-button .ui-state-highlight.ui-icon{background-image:url("../images/ui/smoothness/ui-icons_2e83ff_256x240.png")}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url("../images/ui/smoothness/ui-icons_cd0a0a_256x240.png")}.ui-button .ui-icon{background-image:url("../images/ui/smoothness/ui-icons_888888_256x240.png")}.ui-icon-blank.ui-icon-blank.ui-icon-blank{background-image:none}.ui-icon-caret-1-n{background-position:0 0}.ui-icon-caret-1-ne{background-position:-16px 0}.ui-icon-caret-1-e{background-position:-32px 0}.ui-icon-caret-1-se{background-position:-48px 0}.ui-icon-caret-1-s{background-position:-65px 0}.ui-icon-caret-1-sw{background-position:-80px 0}.ui-icon-caret-1-w{background-position:-96px 0}.ui-icon-caret-1-nw{background-position:-112px 0}.ui-icon-caret-2-n-s{background-position:-128px 0}.ui-icon-caret-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-65px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-65px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:1px -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:4px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:4px}.ui-widget-overlay{background:#aaa;opacity:.3;-ms-filter:"alpha(opacity=30)"}.ui-widget-shadow{-webkit-box-shadow:-8px -8px 8px #aaa;box-shadow:-8px -8px 8px #aaa}/*
	Menus: the markup of getMenuItemsHTML() (classes/functions/menus.php) and the behaviour of scripts/core/menu.js.
	The class names are the ones themes already style (sf-menu, sf-vertical, collapsible, menuItemArrow, ...).
	Sides are logical: "start" is the reading side (right in Arabic), "end" the other one.
	menu.js adds: menuOpen (a hover menu's item opened by focus, a tap or the close delay), clickedOnItem (an item
	opened by click), menuFlip (a sub menu that would leave the screen opens to the other side) and menuCompact
	(the menu is at its mobile width).
*/
:root
{
	--menu-sub-min-width: 13em;
	--menu-sub-z: 99;
	--menu-focus: var(--ui-focus);
}

/*** Horizontal (sf-menu) and vertical (sf-vertical) drop-down menus ***/
.sf-menu, .sf-menu *
{
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu li
{
	float: inline-start;
	position: relative;
	white-space: nowrap;
}
.sf-menu > li.nfloat
{
	float: inline-end;
}
.sf-menu > li.float
{
	float: inline-start;
}
.sf-menu ul
{
	position: absolute;
	display: none;
	top: 100%;
	z-index: var(--menu-sub-z);
	inset-inline-start: 0;
	min-width: var(--menu-sub-min-width);
}
/* an item on the other side opens its list from that side, a deeper level away from it (not over its parent) */
.sf-menu .nfloat ul
{
	inset-inline-start: auto;
	inset-inline-end: 0;
}
.sf-menu .nfloat ul ul
{
	inset-inline-start: auto;
	inset-inline-end: 100%;
}
.sf-menu li:hover > ul,
.menuWrapper:not(.menuCompact) .sf-menu li.menuOpen > ul
{
	display: block;
}
.sf-menu a
{
	display: inline-block;
	width: 100%;
	position: relative;
	padding: 0 1rem;
	text-decoration: none;
	font-weight: normal;
}
.sf-menu a:hover
{
	text-decoration: none;
}
.sf-menu ul li
{
	width: 100%;
}
.sf-menu ul ul
{
	top: 0;
	inset-inline-start: 100%;
}
.sf-vertical
{
	min-width: 12em;
}
.sf-vertical ul
{
	top: 0;
	inset-inline-start: 100%;
}
.sf-vertical > li
{
	float: none;
}
.sf-vertical li
{
	width: 100%;
}
/* a list that would leave the screen opens to the other side */
.sf-menu li.menuFlip > ul
{
	inset-inline-start: auto;
	inset-inline-end: 0;
}
.sf-menu ul li.menuFlip > ul,
.sf-vertical li.menuFlip > ul
{
	inset-inline-start: auto;
	inset-inline-end: 100%;
}
.sf-menu .grayNumber, .sf-menu .redNumber, .sf-menu .greenNumber
{
	padding: 3px;
}

/*** Mega menu: the item's list is a full-width panel of columns (a wide screen only: at the mobile width the item
     is an ordinary one, its list opening like the others) ***/
.menuWrapper:not(.menuCompact) .sf-menu .megaMenu
{
	position: static;
}
/* its panel takes the menu's width, so the item is not positioned: its arrow sits in the row beside its link */
.menuWrapper:not(.menuCompact) .sf-menu > li.megaMenu
{
	display: flex;
	align-items: center;
}
.menuWrapper:not(.menuCompact) .sf-menu > li.megaMenu > a
{
	width: auto;
}
.menuWrapper:not(.menuCompact) .sf-menu > li.megaMenu > .menuItemArrow:not(.menuItemArrow_mobile)
{
	position: static;
	height: auto;
	margin-inline-start: -0.8rem;
	margin-inline-end: 0.4rem;
}
.menuWrapper:not(.menuCompact) .sf-menu > li.megaMenu > .menuItemArrow_mobile,
.menuWrapper:not(.menuCompact) .sf-menu > li.megaMenu > .menuItemArrow_extended,
.menuWrapper:not(.menuCompact) .sf-menu > li.megaMenu:hover > .menuItemArrow_normal,
.menuWrapper:not(.menuCompact) .sf-menu > li.megaMenu.menuOpen > .menuItemArrow_normal
{
	display: none;
}
.menuWrapper:not(.menuCompact) .sf-menu > li.megaMenu:hover > .menuItemArrow_extended:not(.menuItemArrow_mobile),
.menuWrapper:not(.menuCompact) .sf-menu > li.megaMenu.menuOpen > .menuItemArrow_extended:not(.menuItemArrow_mobile)
{
	display: inline-block;
}
.menuWrapper:not(.menuCompact) .sf-menu .megaMenu ul
{
	width: 100%;
	background: var(--ui-surface);
}
/* the columns are floated: the panel holds them without overflow:hidden, which clipped shadows and deeper levels */
.menuWrapper:not(.menuCompact) .sf-menu .megaMenu > ul::after
{
	content: "";
	display: table;
	clear: both;
}
.menuWrapper:not(.menuCompact) .sf-menu .megaMenu ul ul
{
	display: block;
	position: relative;
	width: auto;
	box-shadow: none;
	padding-inline-start: 25px;
	inset-inline-start: 0;
}
.menuWrapper:not(.menuCompact) .sf-menu .megaMenu ul li
{
	/* the item's columns (mega_menu_columns), five by default */
	width: calc(100% / var(--mega-columns, 5));
	white-space: normal;
	float: inline-start;
}
.menuWrapper:not(.menuCompact) .sf-menu .megaMenu > ul > li.megaMenuImage
{
	padding: 10px;
	box-sizing: border-box;
}
.menuWrapper:not(.menuCompact) .sf-menu .megaMenu > ul > li.megaMenuImage img
{
	display: block;
	width: 100%;
	max-width: none;
	max-height: 220px;
	object-fit: cover;
	border-radius: 6px;
}
.menuWrapper:not(.menuCompact) .sf-menu .megaMenu ul ul li
{
	float: none;
	width: 100%;
}

/*** An item's badge ("New"), its description under the title, the button looks ***/
/* the badge is the core's solid one (uiBadge(): components.css); here its place beside the title */
.menuWrapper .menuBadge
{
	margin-inline-start: 4px;
	font-size: 0.7em;
}
.menuWrapper a .menuItemText
{
	display: block;
}
.menuWrapper a .menuItemSubtitle
{
	display: block;
	margin-block-start: -0.4em;
	padding-block-end: 0.3em;
	font-size: 0.78em;
	line-height: 1.4;
	opacity: 0.75;
	white-space: normal;
}
/* a button (themes may already style asButton, their look wins) */
.menuWrapper li.menuItemButton > a
{
	border-radius: 999px;
}
.menuWrapper li.menuItemOutline > a
{
	border: 2px solid currentColor;
	border-radius: 999px;
	line-height: 2;
	margin-block: 0.4em;
}

/*** Photos and icons ***/
.menuWrapper .imageContainer, .menuWrapper img
{
	max-height: 18px;
	max-width: 18px;
}
.menuWrapper li span.menuItemIcon
{
	vertical-align: top;
}
.onlyDisplayItemsPhotos
{
	font-size: 0px;
}
.onlyDisplayItemsPhotos span
{
	font-size: 1rem;
}
.onlyDisplayItemsPhotos a
{
	padding: 0px;
}

/*** The admin top menu (default and empty themes, extensions/core/top_menu.php) ***/
.adminTopMenu .menu_adminWrapper [class^="icon-"], .adminTopMenu .menu_adminWrapper [class*=" icon-"]
{
	font-size: 18px;
	position: relative;
	top: 3px;
	color: var(--ui-muted);
}
.adminTopMenu .menu_adminWrapper li
{
	height: 43px;
	line-height: 43px;
}
.adminTopMenu .menu_adminWrapper ul ul li
{
	height: auto;
	line-height: 32px;
}
.adminTopMenu .menu_adminWrapper .sf-menu ul a
{
	border-inline-start: 1px solid var(--ui-surface);
}
.adminTopMenu .menu_adminWrapper .sf-menu
{
	width: 100%;
}
.adminTopMenu .menu_adminWrapper
{
	box-shadow: var(--ui-shadow);
	background: var(--ui-surface);
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 200;
	font-size: 13px;
}
.adminTopMenu .menu_adminWrapper .inlineMenu
{
	width: auto;
}
.adminTopMenu .menu_adminWrapper .sf-menu ul
{
	box-shadow: var(--ui-shadow);
}
.adminTopMenu .menu_adminWrapper .sf-menu a
{
	padding: 0em .75em;
	color: var(--ui-text);
}
.adminTopMenu .menu_adminWrapper .sf-menu ul a
{
	padding: 0em 1em;
}
.adminTopMenu .menu_adminWrapper .sf-menu li
{
	background: var(--ui-surface);
	transition: background .3s;
}
.adminTopMenu .menu_adminWrapper .sf-menu li:hover,
.adminTopMenu .menu_adminWrapper .sf-menu li.menuOpen
{
	background: var(--ui-accent-soft);
	/* only transition out, not in */
	transition: none;
}

/*** Arrows: the normal one, and the "extended" one shown while the item is open ***/
.menuItemArrow
{
	position: absolute;
	inset-inline-end: 0px;
	top: 0px;
	bottom: 0px;
	margin: auto;
	height: 1.4rem;
	cursor: pointer;
	padding: 0.2rem;
	opacity: 1;
	line-height: 1rem;
	/* above its own link only: a higher value painted menu boxes' arrows over the sticky navbar and open dropdowns */
	z-index: 2;
}
.menuWrapper ul ul .menuItemArrow
{
	inset-inline-end: 5px;
}
.menuItemArrow.menuItemArrow_extended
{
	opacity: 0;
}
.menuWrapper.showSubsByClick li:hover > .menuItemArrow.menuItemArrow_extended
{
	opacity: 0;
}
li:hover > .menuItemArrow.menuItemArrow_extended,
li.menuOpen > .menuItemArrow.menuItemArrow_extended,
.menuWrapper.showSubsByClick li.clickedOnItem > .menuItemArrow.menuItemArrow_extended
{
	opacity: 1;
}
.menuWrapper.showSubsByClick li:hover > .menuItemArrow.menuItemArrow_normal
{
	opacity: 1;
}
li:hover > .menuItemArrow.menuItemArrow_normal,
li.menuOpen > .menuItemArrow.menuItemArrow_normal,
.menuWrapper.showSubsByClick li.clickedOnItem > .menuItemArrow.menuItemArrow_normal
{
	opacity: 0;
}
.menuWrapper .menuItemArrow_mobile
{
	display: none;
}

/*** The mobile toggler: a button that looks like its icon ***/
.menuWrapper .menuMobileToggler
{
	display: none;
}
/* the button's own look is removed with the lowest weight (:where), so any theme rule on .menuMobileToggler wins */
:where(.menuWrapper) .menuMobileToggler
{
	cursor: pointer;
	font-size: 2rem;
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0px none;
	border-radius: 0px;
	margin: 0px;
	padding: 0px;
	color: inherit;
	font-family: inherit;
	line-height: inherit;
	text-align: inherit;
	box-shadow: none;
	min-height: 0px;
}

/*** Keyboard focus ***/
.menuWrapper a:focus-visible,
.menuWrapper .menuMobileToggler:focus-visible
{
	outline: 2px solid var(--menu-focus);
	outline-offset: -2px;
}

/*** Menus that open by click ***/
.menuWrapper.showSubsByClick ul ul
{
	display: none;
}
/* ...still show a mega menu's deeper levels as its columns' lists */
.menuWrapper.showSubsByClick:not(.menuCompact) .sf-menu .megaMenu ul ul
{
	display: block;
}

/*** Collapsible (type 4) ***/
.menuWrapper  .collapsible li .menuItemArrow
{
	bottom: auto;
	line-height: 20px;
}
.menuWrapper  .collapsible.collapseByHover li:hover >  ul,
.menuWrapper:not(.menuCompact) .collapsible.collapseByHover li.menuOpen >  ul
{
	display: block;
}
.menuWrapper  .collapsible, .menuWrapper  .collapsible ul
{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
.menuWrapper  .collapsible ul
{
	display: none;
}

/*** Columns (type 5): the top items side by side, each heading its own list (a footer, a site map); on a phone each
     heading opens and folds its list (an accordion, menu.js) ***/
.menuWrapper .columnsMenu, .menuWrapper .columnsMenu ul
{
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.menuWrapper:not(.menuCompact) .columnsMenu
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px 24px;
}
.menuWrapper:not(.menuCompact) .columnsMenu > li > a
{
	font-weight: bold;
}
.menuWrapper:not(.menuCompact) .columnsMenu ul ul
{
	padding-inline-start: 1em;
}
.menuWrapper:not(.menuCompact) .columnsMenu .menuItemArrow
{
	display: none;
}
/* on a phone: the headings fold their lists; the levels under a list stay open in it */
.menuWrapper.menuCompact .columnsMenu > li
{
	border-block-end: 1px solid var(--ui-border);
}
.menuWrapper.menuCompact .columnsMenu > li > a
{
	font-weight: bold;
}
.menuWrapper.menuCompact.extendTopLevelOnMobile .columnsMenu ul ul
{
	display: block;
	padding-inline-start: 1em;
}
.menuWrapper.menuCompact .columnsMenu ul .menuItemArrow
{
	display: none;
}

/*** Extended (type 3): every level open, as nested lists ***/
.menuWrapper .extendedMenu, .menuWrapper .extendedMenu ul
{
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.menuWrapper .extendedMenu ul
{
	padding-inline-start: 1em;
}

.menuWrapper  li
{
	position: relative;
}

/*** Items hidden on some screens: phones up to 675px, tablets up to 1024px, desktops above ***/
@media (min-width:1025px){
	.menuWrapper li.menuHideDesktop
	{
		display: none;
	}
}
@media (min-width:676px) and (max-width:1024px){
	.menuWrapper li.menuHideTablet
	{
		display: none;
	}
}
@media (max-width:675px){
	.menuWrapper li.menuHidePhone
	{
		display: none;
	}
}

/*** The mobile look: a menu at its mobile width (its breakpoint, 675px unless set) has menuCompact ***/
.menuWrapper.menuCompact ul ul .menuItemArrow
{
	inset-inline-end: 0px;
}
.menuWrapper.menuCompact .menuItemArrow
{
	padding: 0.5em;
	height: 2em;
}
.menuWrapper.menuCompact .menuItemArrow_mobile
{
	display: block;
}
.menuWrapper.menuCompact.showSubsByClickOnMobile li:hover > .menuItemArrow.menuItemArrow_extended
{
	opacity: 0;
}
.menuWrapper.menuCompact.showSubsByClickOnMobile li:hover > .menuItemArrow.menuItemArrow_normal
{
	opacity: 1;
}
.menuWrapper.menuCompact.showSubsByClickOnMobile li.clickedOnItem > .menuItemArrow.menuItemArrow_extended
{
	opacity: 1;
}
.menuWrapper.menuCompact.showSubsByClickOnMobile li.clickedOnItem > .menuItemArrow.menuItemArrow_normal
{
	opacity: 0;
}
.menuWrapper.menuCompact.toggleMenuMobile .menuBody
{
	display: none;
}
.menuWrapper.menuCompact.hideOnMobile
{
	display: none;
}
.menuWrapper.menuCompact.extendOnMobile .menuItemArrow, .menuWrapper.menuCompact .menuItemArrow.hideOnMobile
{
	display: none;
}
.menuWrapper.menuCompact.extendOnMobile li, .menuWrapper.menuCompact.extendTopLevelOnMobile li
{
	float: none;
	line-height: 2.2em;
}
.menuWrapper.menuCompact.extendOnMobile ul, .menuWrapper.menuCompact.extendTopLevelOnMobile ul
{
	min-width: var(--menu-sub-min-width);
}
.menuWrapper.menuCompact.extendOnMobile ul ul, .menuWrapper.menuCompact.extendTopLevelOnMobile ul ul
{
	position: relative;
	top: 0px;
	display: block;
	inset-inline-start: 0px;
}
.menuWrapper.menuCompact.extendTopLevelOnMobileNoClick .menuItemArrow
{
	display: none;
}
.menuWrapper.menuCompact.extendTopLevelOnMobile ul ul
{
	display: none;
}
.menuWrapper.menuCompact.extendTopLevelOnMobile .menuItemArrow, .menuWrapper.menuCompact.extendOnMobile .menuItemArrow
{
	bottom: auto;
}
.menuWrapper.menuCompact .sf-menu .nfloat ul, .menuWrapper.menuCompact .sf-menu .nfloat ul ul
{
	inset-inline-start: 0px;
	inset-inline-end: auto;
}
/* a full-width bar like the block it used to be (a theme that places it absolutely gives it its own size) */
.menuWrapper.menuCompact .menuMobileToggler
{
	display: block;
}
:where(.menuWrapper.menuCompact) .menuMobileToggler
{
	width: 100%;
}
/* the open menu's button shows a cross */
.menuWrapper.menuCompact .menuMobileToggler[aria-expanded="true"] [class^="icon-"]:before
{
	content: "\e6b8";
}
/* a mega menu's picture is for the wide panel */
.menuWrapper.menuCompact .sf-menu .megaMenu > ul > li.megaMenuImage
{
	display: none;
}
/* the "More" item is a desktop thing: on a phone its items are back in the list (menu.js) */
.menuWrapper.menuCompact .menuMoreItem
{
	display: none;
}
/* touch targets of a finger's size */
.menuWrapper.menuCompact .menuInner > li > a
{
	min-height: 44px;
}

/*** The phone panel: a drawer from either side or the full screen, over the page ***/
.menuWrapper.menuPanel .menuPanelClose
{
	display: none;
}
.menuWrapper.menuPanel.menuCompact .menuBody
{
	display: block;
	position: fixed;
	inset-block: 0px;
	z-index: 1000;
	width: min(86vw, 360px);
	padding: 56px 0px 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-sizing: border-box;
	background: var(--menu-panel-background, var(--ui-surface));
	color: var(--menu-panel-color, var(--ui-text));
	box-shadow: var(--ui-shadow-lg);
	visibility: hidden;
	transition: transform .25s ease, visibility 0s linear .25s;
	line-height: 1.5;
	text-align: start;
}
.menuWrapper.menuPanelDrawerStart.menuCompact .menuBody
{
	inset-inline-start: 0px;
	transform: translateX(-105%);
}
.rtlDirection .menuWrapper.menuPanelDrawerStart.menuCompact .menuBody
{
	transform: translateX(105%);
}
.menuWrapper.menuPanelDrawerEnd.menuCompact .menuBody
{
	inset-inline-end: 0px;
	transform: translateX(105%);
}
.rtlDirection .menuWrapper.menuPanelDrawerEnd.menuCompact .menuBody
{
	transform: translateX(-105%);
}
.menuWrapper.menuPanelFullscreen.menuCompact .menuBody
{
	inset-inline: 0px;
	width: auto;
	transform: translateY(-3%);
	opacity: 0;
	transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
}
.menuWrapper.menuPanel.menuCompact.menuBodyOpen .menuBody
{
	visibility: visible;
	transform: none;
	opacity: 1;
	transition: transform .25s ease, opacity .25s ease;
}
.menuWrapper.menuPanel.menuCompact .menuPanelClose
{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	width: 44px;
	height: 44px;
	border: 0px none;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 1.2rem;
	cursor: pointer;
}
.menuWrapper.menuPanel.menuCompact .menuPanelClose:hover, .menuWrapper.menuPanel.menuCompact .menuPanelClose:focus-visible
{
	background: var(--ui-soft);
}
.menuWrapper.menuPanel.menuCompact .menuBody a
{
	color: inherit;
}
.menuWrapper.menuPanel.menuCompact .menuInner > li
{
	border-block-end: 1px solid var(--ui-border);
}
.menuWrapper.menuPanel.menuCompact .menuInner > li > a
{
	padding-inline: 20px;
}
.menuWrapper.menuPanel.menuCompact ul ul
{
	box-shadow: none;
	background: transparent;
}
.menuWrapper.menuPanel.menuCompact ul ul a
{
	padding-inline-start: 34px;
}
.menuWrapper.menuPanel.menuCompact .menuItemArrow
{
	inset-inline-end: 12px;
	color: inherit;
}
/* the page behind an open panel: dimmed, not scrolled */
.menuBackdrop
{
	position: fixed;
	inset: 0px;
	z-index: 999;
	background: var(--ui-backdrop);
	opacity: 0;
	transition: opacity .25s ease;
}
.menuBackdrop.menuBackdropShown
{
	opacity: 1;
}
html.menuPanelOpen, html.menuPanelOpen body
{
	overflow: hidden;
}
/* the containers of the open panel come above the rest of the page (a positioned one is a stacking context) */
html.menuPanelOpen body :has(.menuWrapper.menuBodyOpen)
{
	z-index: 1000 !important;
}
@media (prefers-reduced-motion: reduce) {
	.menuWrapper.menuPanel.menuCompact .menuBody, .menuBackdrop
	{
		transition: none;
	}
}

/*** Looks of a menu (its style, alignment and sub menus; not at its mobile width) ***/
:root
{
	--menu-accent: var(--ui-accent);
}
.menuWrapper.menuAlignCenter:not(.menuCompact) .sf-menu:not(.sf-vertical),
.menuWrapper.menuAlignStart:not(.menuCompact) .sf-menu:not(.sf-vertical),
.menuWrapper.menuAlignEnd:not(.menuCompact) .sf-menu:not(.sf-vertical),
.menuWrapper.menuAlignJustify:not(.menuCompact) .sf-menu:not(.sf-vertical)
{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.menuWrapper.menuAlignCenter:not(.menuCompact) .sf-menu:not(.sf-vertical)::after,
.menuWrapper.menuAlignStart:not(.menuCompact) .sf-menu:not(.sf-vertical)::after,
.menuWrapper.menuAlignEnd:not(.menuCompact) .sf-menu:not(.sf-vertical)::after,
.menuWrapper.menuAlignJustify:not(.menuCompact) .sf-menu:not(.sf-vertical)::after
{
	display: none;
}
.menuWrapper.menuAlignCenter:not(.menuCompact) .sf-menu > li,
.menuWrapper.menuAlignStart:not(.menuCompact) .sf-menu > li,
.menuWrapper.menuAlignEnd:not(.menuCompact) .sf-menu > li,
.menuWrapper.menuAlignJustify:not(.menuCompact) .sf-menu > li
{
	float: none;
}
.menuWrapper.menuAlignStart:not(.menuCompact) .sf-menu:not(.sf-vertical)
{
	justify-content: flex-start;
}
.menuWrapper.menuAlignCenter:not(.menuCompact) .sf-menu:not(.sf-vertical)
{
	justify-content: center;
}
.menuWrapper.menuAlignEnd:not(.menuCompact) .sf-menu:not(.sf-vertical)
{
	justify-content: flex-end;
}
.menuWrapper.menuAlignJustify:not(.menuCompact) .sf-menu:not(.sf-vertical) > li
{
	flex: 1 1 auto;
	text-align: center;
}
/* underline: a bar under the hovered, open and current items */
.menuWrapper.menuStyleUnderline:not(.menuCompact) .menuInner > li > a
{
	box-shadow: inset 0 -3px 0 transparent;
	transition: box-shadow .15s;
}
.menuWrapper.menuStyleUnderline:not(.menuCompact) .menuInner > li:hover > a,
.menuWrapper.menuStyleUnderline:not(.menuCompact) .menuInner > li.menuOpen > a,
.menuWrapper.menuStyleUnderline:not(.menuCompact) .menuInner > li.menuItemCurrent > a,
.menuWrapper.menuStyleUnderline:not(.menuCompact) .menuInner > li.menuItemCurrentParent > a
{
	box-shadow: inset 0 -3px 0 var(--menu-accent);
}
/* a preset replaces the theme's own marks under the items (one more step of weight than the themes' rules) */
:root .menuWrapper.menuStylePills:not(.menuCompact) .menuInner > li > a,
:root .menuWrapper.menuStyleUnderline:not(.menuCompact) .menuInner > li > a
{
	border-bottom-color: transparent;
}
/* pills: rounded items, the current one filled */
.menuWrapper.menuStylePills:not(.menuCompact) .menuInner > li
{
	margin: 4px 2px;
}
.menuWrapper.menuStylePills:not(.menuCompact) .menuInner > li > a
{
	border-radius: 999px;
	line-height: 2.4;
	transition: background .15s, color .15s;
}
.menuWrapper.menuStylePills:not(.menuCompact) .menuInner > li:hover > a,
.menuWrapper.menuStylePills:not(.menuCompact) .menuInner > li.menuOpen > a
{
	background: color-mix(in srgb, var(--menu-accent) 12%, transparent);
}
.menuWrapper.menuStylePills:not(.menuCompact) .menuInner > li.menuItemCurrent > a,
.menuWrapper.menuStylePills:not(.menuCompact) .menuInner > li.menuItemCurrentParent > a
{
	background: var(--menu-accent);
	color: var(--ui-on-accent);
}
/* plain: text only, the current one bold */
.menuWrapper.menuStylePlain .menuInner a
{
	border: 0px none;
	background: none;
	box-shadow: none;
}
.menuWrapper.menuStylePlain .menuInner li.menuItemCurrent > a
{
	font-weight: bold;
}
/* sub menus as cards: rounded, shadowed, fading in */
.menuWrapper.menuSubCard:not(.menuCompact) .sf-menu ul
{
	padding: 6px 0px;
	border: 1px solid var(--ui-border);
	border-radius: 10px;
	background: var(--ui-surface);
	box-shadow: var(--ui-shadow-lg);
	animation: menuSubIn .16s ease-out;
}
.menuWrapper.menuSubCard:not(.menuCompact) .sf-menu ul ul
{
	margin-top: -7px;
}
.menuWrapper.menuSubCard:not(.menuCompact) .sf-menu ul li > a
{
	border-radius: 6px;
	margin: 0px 6px;
	width: calc(100% - 12px);
	box-sizing: border-box;
}
.menuWrapper.menuSubCard:not(.menuCompact) .sf-menu ul li:hover > a
{
	background: var(--ui-soft);
}
@keyframes menuSubIn
{
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.menuWrapper.menuSubCard .sf-menu ul
	{
		animation: none;
	}
}

/*** "More": the items of a horizontal menu that do not fit (menu.js) ***/
/* an item pushed to the far end: floated there, or (an aligned menu is a flex row) the free space before it */
.menuWrapper[class*="menuAlign"]:not(.menuCompact) .sf-menu:not(.sf-vertical) > li.menuPushEnd
{
	margin-inline-start: auto;
}
/* the item chosen as "More": with no link of its own and nothing under it, it is shown only when items moved under
   it (never at the mobile width, where nothing moves) */
.menuWrapper .menuInner > li.menuMoreChosen.menuMoreEmpty
{
	display: none;
}

.menuWrapper .menuMoreItem > a
{
	cursor: pointer;
}
.menuWrapper .menuMoreItem > ul
{
	inset-inline-start: auto;
	inset-inline-end: 0px;
}
.menuWrapper .menuMoreItem ul ul
{
	inset-inline-start: auto;
	inset-inline-end: 100%;
}
/*ThemeVars*/

body {
	color: #33363b;
}
a
{
	color: #0088CC;
}
a:hover
{
	color:#005580;
}
html, body {
	font-size: 13px;
}

 body h1 { font-size: 2.6rem; } body h2 { font-size: 2.15rem; } body h3 { font-size: 1.7rem; } body h4 { font-size: 1.45rem; } body h5 { font-size: 1.3rem; } body h6 { font-size: 1.05rem; } html, body { font-size: 15px !important; } body .titleAccent { padding: 0.02em 0.45em; border-radius: 999px; background: color-mix(in srgb, var(--title-accent, var(--skin-accent, var(--ui-accent, #1d5fbf))) 14%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

                                        @font-face {
                                                font-family: "DroidKufi";
                                                src: url("../file/fonts/../../lib/fonts/DroidKufiRegular.ttf");
                                                font-display: swap;
                                                src: url("../file/fonts/../../lib/fonts/DroidKufiRegular.ttf") format("truetype");
                                        }
                                        
                                        @font-face {
                                                font-family: "Helvetica";
                                                src: url("../file/fonts/helveticaneuemeforskyw21-rg_web.woff2");
                                                ascent-override: 90%;
                                                descent-override: 40%;
                                                font-display: swap;
                                                src: url("../file/fonts/helveticaneuemeforskyw21-rg_web.woff2") format("woff2");
                                        }
                                        
                                        @font-face {
                                                font-family: "Helvetica";
                                                src: url("../file/fonts/helveticaneuelt-arabic-75-bold.woff2");
                                                ascent-override: 90%;
                                                descent-override: 40%;
                                                font-weight: bold;
                                                font-display: swap;
                                                src: url("../file/fonts/helveticaneuelt-arabic-75-bold.woff2") format("woff2");
                                        }
                                        
                                        @font-face {
                                                font-family: "OpenSans";
                                                src: url("../file/fonts/../../lib/fonts/OpenSans-Light.ttf");
                                                font-display: swap;
                                                src: url("../file/fonts/../../lib/fonts/OpenSans-Light.ttf") format("truetype");
                                        }
                                        
html body{ font-family: 'Helvetica', 'Tahoma', 'Arial'; }
body a{ font-family: inherit; }
html body{ color: #26323D; }
body a{ color: #1D76BC; }
body a:hover{ color: #0F1F2E; }
body h1 { color: #0F1F2E; }
body h2 { color: #0F1F2E; }
body h3 { color: #0F1F2E; }
body h4 { color: #0F1F2E; }
body h5 { color: #0F1F2E; }
body h6 { color: #0F1F2E; }
:root { --card-bg: #FFFFFF; --card-border: #E6EBF0; --card-border-width: 1px; --card-border-style: solid; --card-radius: 24px; --card-overflow: hidden; }
.card-flat { --card-border-width: 0px; --card-border-style: solid; --card-radius: 20px; --card-overflow: hidden; }
.skin-incubator { --skin-accent: #30B4E4; --skin-accent-text: #FFFFFF; --skin-heading: #0F1F2E; --skin-extra: #30B4E4; --skin-accent-hover: color-mix(in srgb, #30B4E4 82%, #000000); --skin-heading-hover: color-mix(in srgb, #0F1F2E 82%, #ffffff); }
.skin-dialogue { --skin-accent: #087B78; --skin-accent-text: #FFFFFF; --skin-heading: #0F1F2E; --skin-extra: #087B78; --skin-accent-hover: color-mix(in srgb, #087B78 82%, #ffffff); --skin-heading-hover: color-mix(in srgb, #0F1F2E 82%, #ffffff); }
.skin-camp { --skin-accent: #1D76BC; --skin-accent-text: #FFFFFF; --skin-heading: #0F1F2E; --skin-extra: #1D76BC; --skin-accent-hover: color-mix(in srgb, #1D76BC 82%, #ffffff); --skin-heading-hover: color-mix(in srgb, #0F1F2E 82%, #ffffff); }
.skin-forum { --skin-accent: #E7731E; --skin-accent-text: #FFFFFF; --skin-heading: #0F1F2E; --skin-extra: #E7731E; --skin-accent-hover: color-mix(in srgb, #E7731E 82%, #000000); --skin-heading-hover: color-mix(in srgb, #0F1F2E 82%, #ffffff); }
.skin-award { --skin-accent: #F7A228; --skin-accent-text: #FFFFFF; --skin-heading: #0F1F2E; --skin-extra: #F7A228; --skin-accent-hover: color-mix(in srgb, #F7A228 82%, #000000); --skin-heading-hover: color-mix(in srgb, #0F1F2E 82%, #ffffff); }
:root { --theme-btn-bg: #1D76BC; --theme-btn-fg: #FFFFFF; --theme-btn-hover-bg: #0F1F2E; --theme-btn-hover-fg: #FFFFFF; --theme-btn-border-width: 0px; --theme-btn-radius: 100px; --theme-btn-padding-x: 28px; }
.blueButton { --btn-bg: #1D76BC; --btn-fg: #FFFFFF; --btn-hover-bg: #0F1F2E; --btn-hover-fg: #FFFFFF; --btn-border-width: 0px; --btn-radius: 100px; --btn-padding-x: 28px; --btn-hover-border: initial; }
.orangeButton { --btn-bg: #E7731E; --btn-fg: #FFFFFF; --btn-hover-bg: #0F1F2E; --btn-hover-fg: #FFFFFF; --btn-border-width: 0px; --btn-radius: 100px; --btn-height: 3.2rem; --btn-padding-x: 28px; --btn-hover-border: initial; }
.btn-outline { --btn-bg: rgba(255, 255, 255, 0); --btn-fg: #0F1F2E; --btn-border: #0F1F2E; --btn-hover-bg: #0F1F2E; --btn-hover-fg: #FFFFFF; --btn-hover-border: #0F1F2E; --btn-border-width: 2px; --btn-border-style: solid; --btn-radius: 100px; --btn-height: 3.2rem; --btn-padding-x: 28px; }

html body {
	background: #FFFFFF;
}
body {
	line-height: 1.7em;
	margin: 0px;
	padding: 0px;
	text-align: right;
	direction: rtl;
	overflow-x: hidden;
}
body a
{
	text-decoration: none;
}
ul
{
	padding-right:15px;
}

body.disableScroll
{
	overflow: hidden;
}
body .fixedWidth
{
	width: 1200px;
	max-width: 94%;
	margin: 0px auto ;
}
.fixedWidth .fixedWidth
{
	width: 100%;
}
body .oneSideFixedWidth
{
	width: calc(100% - ((100% - 1200px)/2));
}







.bigSide, .smallSide
{
	font-size: 1rem;
}
.smallSide
{
	float: left;
	width: 35%;
	padding-right: 2.5%;
	
}

.bigSide
{
	float: right;
	width: 65%;
}
.noSideBar .bigSide
{
	width: 100%;
}
.noSideBar .smallSide
{
	display: none;
}
.smallSide input[type="text"]
{
	width: 100%;
}
.smallSide .box
{
	margin-bottom: 20px;
}
.smallSide .box:last-child
{
	margin-bottom: 0px;
}
.innerPages .mainContent
{
    padding-top: 20px;
	padding-bottom: 60px;
}
.innerPages .mainContentWrapper
{
	background: #FFFFFF;
}

/* Home page cards: every article of the home sections sits on the surface items */
.homePage .mainContentWrapper .rowTemplate.photo_title_date_under .rowTemplateInner,
.homePage .mainContentWrapper .rowTemplate.photo_title_description_date .rowTemplateInner,
.homePage .mainContentWrapper .rowTemplate.photo_title_description .rowTemplateInner,
.homePage .mainContentWrapper .rowTemplate.photo_title_date .rowTemplateInner
{
	background: #FFFFFF;
	border: 1px solid #E6EBF0;
	border-radius: 24px;
	box-shadow: 0px 0px 0px 0px rgba(15, 31, 46, 0);
	overflow: hidden;
	height: 100%;
}
.homePage .mainContentWrapper .rowTemplate.photo_title_date_under .rowTemplateInfo,
.homePage .mainContentWrapper .rowTemplate.photo_title_description_date .rowTemplateInfo
{
	padding: 14px 16px 12px;
}
.homePage .rowTemplate.photo_title_date .rowTemplateInner
{
	padding: 12px;
	align-items: center;
}
.homePage .rowTemplate.photo_title_date_under .rowTemplateTitle,
.homePage .rowTemplate.photo_title_description_date .rowTemplateTitle,
.homePage .rowTemplate.photo_title_date .rowTemplateTitle
{
	font-weight: bold;
}
.homePage .rowTemplate .rowTemplatePhoto .imageContainer img
{
	border-radius: 0px;
}
body .rowTemplate.row .rowTemplateDate
{
	color: #6F7479;
}
body .articlesNavSliderNav .listRow.articlesNavSliderNavActive
{
	background: none;
}
.articlesNavSliderMain
{
	border-radius: 24px;
	overflow: hidden;
}
.homePage .mainContentWrapper .mainArticleThenOthers .otherArticles .rowTemplate.photo_title_date .rowTemplatePhoto
{
	width: 32%;
	flex: 0 0 32%;
}
.homePage .mainContentWrapper .rowTemplate.photo_title_date .rowTemplatePhoto .authorPanelBase
{
	display: none;
}
.homePage .mainContentWrapper .rowTemplate.photo_title_description .rowTemplateInner
{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	padding: 16px;
}
.homePage .mainContentWrapper .rowTemplate.photo_title_description .rowTemplatePhoto
{
	width: 38%;
	flex: 0 0 38%;
}
.homePage .mainContentWrapper .rowTemplate.photo_title_description .rowTemplateData
{
	flex: 1;
}
.homePage .mainContentWrapper .rowTemplate.photo_title_description .rowTemplateTitle
{
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.5em;
	margin-bottom: 10px;
}
.homePage .mainContentWrapper .rowTemplate.photo_title_description .rowTemplateDescription
{
	color: #6F7479;
}
.homePage .mainContentWrapper .rowTemplate.photo_title_description_date .rowTemplateDescription
{
	color: #6F7479;
}
.homePage .mainContentWrapper .articlesNavSliderNav .rowTemplate.photo_title_date .rowTemplateInner
{
	background: #FFFFFF;
}
.homePage .mainContentWrapper .box_structure_mail_newsletter label.waterMark
{
	color: #6F7479;
}
.homePage .mainContentWrapper .boxPositionRowColumnInner:has(> .box_structure_mail_newsletter) .box_structure_text,
.homePage .mainContentWrapper .boxPositionRowColumnInner:has(> .box_structure_mail_newsletter) .box_structure_text p
{
	color: #6F7479;
}
.homePage .mainContentWrapper .rowTemplate.photo_title_description .rowTemplatePhoto .imageContainer img
{
	border-radius: 24px;
}
body .smallerFixedWidth
{
	width: calc(1200px - 240px);
	max-width: 94%;
	margin: 0px auto;
}
.articlesNavSliderNav .listRow.articlesNavSliderNavActive .rowTemplateInner
{
	border-color: #1D76BC;
}




input[type=text], textarea, input[type=password], select, input.button
{
    width: 100%;
    
}
.inputWarning
{
    width: 100%;
}

.wrapperOfSlides > div.row
{
    display: none;
}
.wrapperOfSlides > div.row:first-child
{
    display: block;
}


.mainArticleTitle a
{
    font-size: 1.5rem;
    color: #6b9b40;
}
.mainArticle 
{
    
}
.mainArticleTitleAndDescription
{
    padding: 10px 20px;
}
.boxes_home .boxTitle h4
{
    font-size: 2.4rem;
}
.boxes_home .boxTitle
{
    margin-bottom: 10px;
}
.paddingBefore
{
    padding-right: 10px;
}
.borderBefore
{
    border-right: 3px solid #51b8f2;
}

.smallSide .block
{
    /* margin: 0px 0px 10px; */
}


.withBorderRadius
{
	border-radius: 20px;
}
/* The colour roles of the shared row templates (styles/templates/rows): the leaders' palette fills them, a site without them
   falls back to the --ui-* tokens. accent: category names, badges, links; dark: the hero slide and the dark opinion
   badge; mist and cloud: ranks and texts on dark; pale: a quiet panel; slate: a study card's button; sky: the dot of
   a dark badge */
:root
{
	--row-accent: #1D76BC;
	--row-dark: #0F1F2E;
	--row-slate: #26323D;
	--row-sky: #30B4E4;
	--row-mist: #DCE3EB;
	--row-cloud: #E6EBF0;
	--row-pale: #F3F7FA;
}
/* Row custom style "darkBackground": it never sets a background (the row background style does), it only adapts what sits
   inside the row to a dark background; the section title, the slider dots and the dark cards are in their own files */
.darkBackground
{
	color: #FFFFFF;
}
.darkBackground .block-title a
{
	color: #FFFFFF;
}
/* a heading box without a frame (the frame's own title is adapted in its file) */
.darkBackground .box_structure_header :is(h1, h2, h3, h4, h5, h6)
{
	color: #FFFFFF;
}
.darkBackground .button,
.darkBackground .button a
{
	color: #000000;
}
.darkBackground .button
{
	background: #FFFFFF;
}
.grayScaleImages img
{
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
.grayScaleImages img:hover
{
	filter: none;
	-webkit-filter: grayscale(0%);
}
/* The buttons: the theme studio's button styles (Manage buttons) draw every .button through --btn-* (styles/basic/buttons.css);
   a theme's stylesheet does not style .button itself */
.button.whiteButton
{
	background: #FFF;
	color: #666;
	border: 1px solid #666;
	line-height: 2.5rem;
}
.button.whiteButton:hover
{
	background: #F0F0F0;
}
.button.signInWithFacebookButton span,
.button.signInWithGoogleButton span
{
	height: 1.8rem;
	width: 1.8rem;
	background-size: contain;
	float: none;
	display: inline-block;
	vertical-align: middle;
	margin-left: 15px;
}
.button.signInWithFacebookButton span
{
	background-image: url('../images/sign-facebook.png');
}
.button.signInWithGoogleButton span
{
	background-image: url('../images/sign-google.png');
}
.pageBreadCrumbs
{
    text-align: left;
    font-size: 0.9rem;
    margin-top: 5px;
    margin-bottom: 10px;
    line-height: 2rem;
}
.mainContentWrapper
{
	/* clip rather than hidden: an ancestor with overflow hidden stops position: sticky (the scroll-following columns, scripts/kQuery/kScrollFollow.js); flow-root keeps the block formatting context hidden gave */
    overflow: hidden;
    overflow: clip;
    display: flow-root;
	/* background: url('../images/background.png') no-repeat bottom center; */
	/* background-size: contain; */
}
.rowTemplatePhoto .imageContainer
{
    overflow: hidden;
}
.rowTemplatePhoto .imageContainer img
{
	border-radius: 4px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.block .block-title .boxPathTrail .pathTrailElems
{
	font-size: inherit;
}
.articleCategoryYoutube
{
    padding: 10px 0px;
}
.articleCategoryVideo
{
    padding: 10px 0px;
}
.articleCategoryDescription, .articleCategoryPhoto, .articleCategoryYoutube, .articleCategoryVideo
{
    margin-bottom: 15px;
}

.infoIconValue_icon
{
	color: #1D76BC;
}
body .highslide img
{
	border: 0px none;
}
.rowTemplateTitle a
{
	color: #0F1F2E;
}

.title_under_photo .rowTemplateTitle a, .title_above_photo .rowTemplateTitle a, .title_over_photo .rowTemplateTitle a, .title_under_photo .rowTemplateTitle span, .title_above_photo .rowTemplateTitle span, .title_over_photo .rowTemplateTitle span
{
	padding: 0px 10px;
}

.title_under_photo .rowTemplateTitle, .title_above_photo .rowTemplateTitle, .title_over_photo .rowTemplateTitle
{
	font-size: 1.08em;
}
.albumItemPhoto .imageContainer img
{
	width: 100% !important;
}
.rowTemplate.row.title_over_photo_always  .rowTemplateTitle 
{
    font-size: 1.1rem;
	margin: 0px;
	max-height: 3.61em;
	overflow: hidden;
}
.title_over_photo .rowTemplateData
{
	background: rgba(0,0,0,0.7);
}
/* the search page's photos: 40% of the row beside the texts (rows/photo_beside#description; above them on phones) */
@media (min-width:481px)
{
	body .rowTemplate.photo_title_description .rowTemplatePhoto
	{
		width: 40%;
	}
}
.menu_socialWrapper ul.sf-menu > li a:hover
{
	color: #666;
}
.menu_socialWrapper ul.sf-menu > li a
{
	display: block;
	height: 28px;
	line-height: 28px;
	white-space: nowrap;
	color: #AAA;
}
.menu_socialWrapper ul.sf-menu > li:last-child
{
	margin-left: 0px;
}
.menu_socialWrapper ul.sf-menu > li
{
	margin-left: 12px;
	width: 28px;
	height: 28px;
	text-align: center;
	background: #FFF;
	border-radius: 50%;
}
.menu_socialWrapper ul.sf-menu > li img
{
	max-width: 18px;
	max-height: 18px;
	filter: brightness(0) saturate(100%) invert(67%);
}
.menu_socialWrapper ul.sf-menu > li:hover img
{
	filter: brightness(0) saturate(100%) invert(40%);
}
.menu_socialWrapper.onlyDisplayItemsPhotos ul.sf-menu > li > a > span
{
	font-size: 1.3rem;
	display: inline-block;
	transition: 0.4s all;
	-webkit-transition: 0.4s all;
	text-align: center;
	font-size: 1.1rem;
}
.extrasBlockItems .extrasBlockItem
{
	margin-top: 60px;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6
{
	font-weight: bold;
}

.formElement 
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.formElement > .row.formRow.separator-row .column
{
	background: #CCC;
	height: 3px;
	min-height: 3px;
}
.formElement > .row.formRow.separator-row
{
	
}
.formElement > .row.formRow,
.row.similarToFormRow
{
	flex: 1;
	max-width: 50%;
	min-width: 50%;
	padding: 10px 10px;
	margin: 0px;
}
.fullWidthFormRows .formElement > .row,
.formElement > .row.formRow.fullWidthRow,
.formElement > .row.formRow.submit-row,
.formElement > .row.formRow.file-row,
.formElement > .row.formRow.caption-row,
.formElement > .row.formRow.textarea-row,
.formElement > .row.formRow.custom-row,
.row.similarToFormRow,
.formElement .passwordStrengthDiv .progressWrapper,
.formElement .inputOk,
.formElement .camera
{
	min-width: 100%;
	width: 100%;
}
.formElement > .row.formRow .captionClass 
{
	width: 100%;
	padding: 0.2rem 0px;
	color: #323946;
	font-size: 0.95rem;
}
.formElement > .row.formRow .inputClass,
.row.similarToFormRow .inputClass
{
	width: 100%;
}
.formElement > .row.formRow.reset-row .inputClass,
.formElement > .row.formRow.submit-row .inputClass,
.row.similarToFormRow.submit-row .inputClass
{
	display: flex;
	flex-wrap: nowrap;
}
.formElement > .row.formRow.caption-row .captionClass,
.formElement > .row.formRow.submit-row .captionClass
{
	display: none;
}
.formElement > .row.formRow.reset-row .inputClass input,
.formElement > .row.formRow.submit-row .inputClass  input,
.formElement > .row.formRow.caption-row .button,
.row.similarToFormRow .button
{
	flex: 1;
	border-radius: 10px;
}
.formElement textarea
{
	border-radius: 10px;
	padding: 5px 15px;
}
.formElement .phoneMainField .phoneFieldWrapper > div
{
	width: 100%;
}
.formElement > .row.formRow.submit-row .inputClass  input
{
	/* background-color: inherit; */
	/* border-radius: 20px; */
}
.formElement > .row.formRow input[type=text],
.formElement > .row.formRow input[type=password]
{
	border-radius: 10px;
	padding: 5px 15px;
}

.formElement > .row.formRow.caption-row.seperatorCaption
{
	border-top: 1px solid #DDD;
	margin-top: 15px;
	padding-top: 15px;
	text-align: center;
}
.formElement > .row.formRow.caption-row .button
{
	width: 100%;
}
.formElement .captionAlternative
{
	color: #999;
}
.formElement .camera
{
	background-color: #F9F9F9;
	color: #AAA;
}

.phoneAreaField
{
	width: 30%;
}
label.waterMark
{
	right: 15px;
}
.box_structure_header.notebookStyleHeader .boxValue
{
	padding-bottom: 20px;
	background: url('../images/notebook_bg.png') bottom center;
	background-repeat: repeat-x;
	background-size: 20px;
}
.box_structure_slider .boxInner
{
	position: relative;
}
.box_structure_slider .boxValue:after
{
	content: ".";
	background: url('../images/header-top-art.png') top center;
	background-repeat: repeat-x;
	background-size: 24px;
	width: 100%;
	height: 10px;
	position: absolute;
	bottom: 0px;
	z-index: 100;
}
body.ltrDirection .orangeOvalBackground:before
{
	left: 0px;
	right: auto;
}
body.ltrDirection .blueOvalBackground:before
{
	left: auto;
	right: 0px;
}
body.ltrDirection .orangeOvalBackground:before,
body.ltrDirection .blueOvalBackground:before
{
	-moz-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
}
.orangeOvalBackground:before,
.blueOvalBackground:before
{
	content: "";
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;
	display: block;
	position: absolute;
	z-index: 0;
	top: 0px;
	bottom: 0px;
	margin: auto;
	
}
.orangeOvalBackground:before
{
	right: 0px;
	background-image: url('../images/orange_oval_bg.png');
	width: 600px;
	height: 600px;
}
.blueOvalBackground:before
{
	background-image: url('../images/blue_oval_bg.png');
	left: 0px;
	width: 500px;
	height: 500px;
}

body.rtlDirection .flipBackgroundInRTL .boxPositionBackground
{
	-moz-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
}


body .iconTitleDescriptions .iconTitleDescriptionTitle
{
	margin-bottom: 0px;
}
body .iconTitleDescriptions .iconTitleDescriptionDescription
{
	font-weight: bold;
	line-height: 1.2em;
}
body .iconTitleDescriptions .iconTitleDescriptionDetails
{
	font-weight: bold;
}
body .iconTitleDescriptions .iconTitleDescriptionTitleAndDescription
{
	position: relative;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
}
body .iconTitleDescriptions .iconTitleDescriptionTitleAndDescription:after
{
	content: "";
	position: absolute;
	display: block;
	width: 190px;
	height: 190px;
	background: url('../images/cloud.png') no-repeat center center;
	background-size: contain;
	top: 0px;
	bottom: -5px;
	left: 0px;
	right: 0px;
	margin: auto;
	z-index: -1;
}
.wavesAboveBackground:before
{
	top: 0px;
	background: url('../images/wave_top.png') bottom center;
}
.wavesAboveBackground:after
{
	bottom: 0px;
	background: url('../images/wave_bottom.png') top center;
}
.wavesAboveBackground:before,
.wavesAboveBackground:after
{
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 150px;
	z-index: 2;
	background-size: cover;
	background-repeat: no-repeat;
}
#notificationsDiv
{
	font-size: 1rem;
}
.box.box_structure_image.biggerScale
{
	scale: 1.15;
}
.box_structure_header.underlinedHeader h1,
.box_structure_header.underlinedHeader h2,
.box_structure_header.underlinedHeader h3,
.box_structure_header.underlinedHeader h4,
.box_structure_header.underlinedHeader h5,
.box_structure_header.underlinedHeader h6
{
	background: url('../images/header.png') bottom right no-repeat;
	background-size: 300px;
	padding-bottom: 20px;
}
.block .registerTabsButtons > div
{
	border: 1px solid #1D76BC;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom: 0px;
	overflow: hidden;
}
.block .registerTabsButtons > div.active a,
.block .registerTabsButtons > div.active span
{
	background: #FFF;
	color: #1D76BC;
}
.block .registerTabsButtons a,
.block .registerTabsButtons span
{
	background: #1D76BC;
	color: #FFF;
	padding: 10px 50px;
	
	display: block;
	width: 100%;
	height: 100%;
	margin-bottom: 2px;
}
.block .registerTabsButtons
{
	display: flex;
	flex-direction: row;
	gap: 10px;
	position: relative;
	top: 1px;
	right: 40px;
}

.pathTrailElems 
{
	display: flex;
	gap: 10px;
}
.rowTemplate .rowTemplatePhoto
{
	position:relative;
}
.rowTemplate .rowTemplatePhoto::after
{
	content: "";
	background: rgba(255,255,255,0.1);
	width: 0px;
	height: 0px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
	pointer-events: none;
}
.rowTemplate:hover .rowTemplatePhoto:after{width:100%;height: 100%;}
.articleViewDescription .articleDate
{
	color: #aaa;
}
.articlesNavSliderNav .rowTemplate .rowTemplatePhoto .authorPanelBase,
.smallSide .rowTemplatePhoto .authorPanelBase
{
	display: none;
}
.articlesNavSliderNav .rowTemplate.photo_title_date .rowTemplatePhoto
{
	width: 20%;
}
/* Sidebar lists: a small thumbnail leaves the width of the narrow column to the title and the date */
.smallSide .rowTemplate.photo_title_date .rowTemplatePhoto
{
	flex: 0 0 88px;
	width: 88px;
}
.smallSide .rowTemplate.photo_title_date .rowTemplateInner
{
	gap: 14px;
}
.smallSide .rowTemplate.photo_title_date .rowTemplateTitle
{
	font-size: 0.95rem;
	font-weight: bold;
	line-height: 1.6em;
}
.smallSide .rowTemplate.photo_title_date .rowTemplateDate
{
	font-size: 0.8rem;
}

.authorPanelBaseInner .authorImage .imageContainer:after
{
	padding-top: 100% !important;
}
.authorPanelBaseInner .authorImage
{
	width: 34px;
	border-radius: 50%;
	overflow: hidden;
}
.authorPanelBaseInner .authorPanelBaseNameAndInfo
{
	flex: 1;
}
.authorPanelBaseInner
{
	display: flex;
	gap: 10px;
	align-items: center;
	/* font-weight: bold; */
	text-align: right;
}
.rowTemplate .rowTemplatePhoto .authorPanelBase 
{
	position: absolute;
	bottom: 0px;
	pointer-events: none;
	color: #FFF;
	padding: 10px;
	width: 100%;
	background: linear-gradient(0deg,rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0) 100%);
}
.rowTemplate.title_over_photo_always .rowTemplatePhoto .authorPanelBase 
{
	/* top: 0px; */
	bottom: 70px;
	background: linear-gradient(0deg,rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0) 100%);
}
.sliderFeature_center .swiper-slide {
	transition: all 0.6s;
	-webkit-transition: all 0.6s;
}
/* the swiper's own backface rule (.swiper-backface-hidden .swiper-slide) has the same weight and comes later: one more class keeps the scale */
.sliderFeature_center .swiper-slide.swiper-slide-active {
   transform: scale(1.1);
   -webkit-transform: scale(1.1);
   z-index: 1;
}
.sliderFeature_center .kCarousel > .swiper
{
	/* room for the centred card to scale up and for its shadow, without being cropped by the slider */
	padding: 30px 0px 70px;
	margin: -30px 0px -70px;
}
.sliderFeature_center .kCarouselDots
{
	margin-top: 20px;
}
.sliderFeature_center .swiper-slide-active .rowTemplateInner
{
	border-color: #1D76BC;
	box-shadow: 0px 12px 30px color-mix(in srgb, #0F1F2E 22%, transparent);
}

/* Slider arrows and dots follow the surface and button items */
.homePage .kCarousel .kCarouselNav .kCarouselPrev,
.homePage .kCarousel .kCarouselNav .kCarouselNext
{
	width: 40px;
	height: 40px;
	background: #FFFFFF;
	border: 1px solid #E6EBF0;
	border-radius: 24px;
	box-shadow: 0px 0px 0px 0px rgba(15, 31, 46, 0);
	color: #0F1F2E;
}
.homePage .kCarousel .kCarouselNav .kCarouselPrev span,
.homePage .kCarousel .kCarouselNav .kCarouselNext span
{
	font-size: 1.3rem;
	text-shadow: none;
	height: 1.3rem;
	line-height: 1.3rem;
}
.homePage .kCarousel .kCarouselNav .kCarouselPrev
{
	right: -10px;
}
.homePage .kCarousel .kCarouselNav .kCarouselNext
{
	left: -10px;
}
.kCarousel .kCarouselDots .swiper-pagination-bullet-active
{
	background: #1D76BC;
	border-color: #1D76BC;
}
.darkBackground .kCarousel .kCarouselDots .swiper-pagination-bullet
{
	border-color: #FFFFFF;
}
.darkBackground .kCarousel .kCarouselDots .swiper-pagination-bullet-active
{
	background: #FFFFFF;
}

/* Home newsletter panel: the box of the mail newsletter with its inner header and sub text */
.homePage .mainContentWrapper .boxPositionRowColumnInner:has(> .box_structure_mail_newsletter)
{
	background: #F3F7FA;
	color: #0F1F2E;
	border: 1px solid #E6EBF0;
	border-radius: 24px;
	padding: 40px 50px;
	text-align: center;
}
.homePage .mainContentWrapper .boxPositionRowColumnInner:has(> .box_structure_mail_newsletter) .box_structure_header h1,
.homePage .mainContentWrapper .boxPositionRowColumnInner:has(> .box_structure_mail_newsletter) .box_structure_header h2,
.homePage .mainContentWrapper .boxPositionRowColumnInner:has(> .box_structure_mail_newsletter) .box_structure_header h5
{
	color: #0F1F2E;
	font-size: 2.2rem;
	margin: 0px 0px 10px;
}
.homePage .mainContentWrapper .box_structure_mail_newsletter .formElement
{
	flex-wrap: nowrap;
	max-width: 620px;
	margin: 20px auto 0px;
	padding: 6px;
	background: #FFFFFF;
	border: 1px solid #E6EBF0;
	border-radius: 24px;
}
.homePage .mainContentWrapper .box_structure_mail_newsletter .formElement > .row.formRow
{
	min-width: 0px;
	max-width: none;
	padding: 0px;
}
.homePage .mainContentWrapper .box_structure_mail_newsletter .formElement > .row.formRow.text-row
{
	flex: 1;
}
.homePage .mainContentWrapper .box_structure_mail_newsletter .formElement > .row.formRow.submit-row
{
	flex: 0 0 auto;
	width: auto;
}
.homePage .mainContentWrapper .box_structure_mail_newsletter .formElement input[type=text]
{
	background: none;
	border: 0px none;
	box-shadow: none;
	height: 44px;
}
.homePage .mainContentWrapper .box_structure_mail_newsletter .formElement .button
{
	height: 44px;
	line-height: 44px;
	padding: 0px 30px;
	background: #E7731E;
	color: #FFFFFF;
	border: none;
	border-radius: 200px;
}
.homePage .mainContentWrapper .box_structure_mail_newsletter .formElement .button:hover
{
	background: #0F1F2E;
	color: #FFFFFF;
}
.articleViewDescription .box_structure_text .boxValue
{
	line-height: 2rem;
}

.articlesListPage_mode_boxes_then_articles > .listElementWrapper .block-title,
.articlesListPage_mode_boxes_only > .listElementWrapper .block-title 
{
	display: none;
}
.box_structure_articles_categories.sortVertically .listBody > div
{
	width: 100%;
}
.box_structure_articles_categories.sortVertically .listBody:after
{
	display: none;
}
.box_structure_articles_categories.sortVertically .listBody 
{
	display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-auto-columns: minmax(0, 1fr);
    width: 100%;
}

/* Article page: tags as chips, meta line in the muted colour */
.articleTags .articleTag a
{
	background: #E4EEF7;
	color: #26323D;
	border-color: transparent;
}
.articleViewMediaMeta .articleDate,
.articleViewMediaMeta .articleViewsCount,
.articleViewMediaMeta .articleReadingTime,
.articleViewMediaMeta .articleId
{
	color: #6F7479;
}

/* Calendar in the sidebar: the day names fit their cells (a long name breaks the header's height) */
.smallSide .calendarHeaderCell
{
	font-size: 0.8rem;
	padding: 0px;
	overflow-wrap: normal;
	word-break: keep-all;
}

/* The play badge on a list photo: smaller than the platform's, as the design's archive tiles */
.rowTemplate:not(.hero_slide) .rowTemplatePhoto .rowTemplatePlay
{
	width: clamp(28px, 17%, 44px);
	font-size: 0.9rem;
}

/* Article text and the pages of boxes are ragged as the design (the articles addon justifies .articleViewDescription,
   which pushes the words of short Arabic lines apart; its sheet comes later, so this rule says body) */
body .articleViewDescription
{
	text-align: start;
}

/* The home hero as the design: the accent word of the title on its own line; the photo wheel's hollow centre is a light
   ring (its slices and the active one's text work as the orbit box draws them) */
.block_default_isolated.blockHero .block-title .titleAccent
{
	display: table;
	margin-top: 0.15em;
}
body .orbitTemplate-wheel .orbitCentre
{
	border: calc(var(--_size) * 0.035) solid #DCE3EB;
}

/* The numbers band as the design: large figures, and the box's badge («آخر تحديث…») as a muted note at the end of the
   title row */
.box_structure_counters .items_stats
{
	--stat-value-size: 3rem;
}
.box_structure_counters .block_default_isolated .block-heading
{
	flex: 1;
}
.boxPositionRow .box.box_structure_counters .block_default_isolated .block-badge
{
	margin-inline-start: auto;
	padding: 0px;
	border-radius: 0px;
	font-weight: normal;
	color: inherit;
	background: none;
	opacity: 0.75;
}

/* Page headers line up with the content (the container's 94% / 90% of the screen, not the full width under 1200px);
   the cover's lead is a short paragraph as the design's two lines */
.pageHeaderLook .pageHeaderInner
{
	width: 94%;
	padding-inline: 0px;
}
@media (max-width: 1200px)
{
	.pageHeaderLook .pageHeaderInner
	{
		width: 90%;
	}
}
.pageHeaderLook_cover .pageHeaderLead
{
	max-width: 34em;
}

/* A check list (list rows with outlined discs, the about page's target group): small outlined checks and plain lines,
   as the design */
.itemTemplate.list_rows.look-icon_fill-outline .itemMedia
{
	--box-icon-size: 30px;
}
.itemTemplate.list_rows.look-icon_fill-outline .itemTitle
{
	font-size: 0.95rem;
	font-weight: normal;
}

/* The card header keeps its photo's own colours on a page without a skin (the training page); the umbrellas' pages
   (a skin each) keep it in their colour, as the design */
body:not([class*="skin-"]) .pageHeaderLook_card .pageHeaderPhoto img
{
	filter: none;
}
body:not([class*="skin-"]) .pageHeaderLook_card .pageHeaderPhoto:has(img):after
{
	display: none;
}
@font-face {
	font-family: DroidKufiRegular;
	src: url('../lib/fonts/DroidKufiRegular.ttf');
	font-display: swap;
}

body  {
	font-family: DroidKufiRegular, Tahoma, Arial , Verdana;	
}

html, body {
	font-size: 13px;
	line-height: 20px;
}
@media (max-width:1380px){
	
}
@media (max-width:1200px){
	body .fixedWidth
	{
		width: 90%;
	}
	body .smallerFixedWidth
	{
		width: 90%;
	}
    .floatingBox.box_structure_menu
	{
		right: 5%;
	}
}
@media  (max-width:1024px){
	.boxPositionRow .boxPositionBackground
	{
		/* display: none; */
	}
	.pageBoxPositionType .boxPositionRowContentInner .boxPositionRowColumn
	{
		padding: 0px !important;
		width: 100%;
	}
	.pageBoxPositionType   .boxPositionRowContentInner
	{
		flex-direction: column;
	}
    .floatHeaderAndDescription.boxPositionRow .box_structure_header .boxValue > *
	{
		font-size: 5rem;
	}
	.articlesListPage .formElement
	{
		width: 100%;
	}
	body .orangeOvalBackground:before,
	body .blueOvalBackground:before
	{
		display: none
	}
	.centerAlignTabletMobile
	{
		text-align: center;
	}
}
@media  (max-width:850px){
	.centerAlignMobile
	{
		text-align: center;
	}
	.branchesListSlider .kCarouselNext
	{
		/* translate: 0px; */
		/* -webkit-translate: 0px; */
	}
	.branchesListSlider .kCarouselPrev
	{
		/* translate: -125px; */
		/* -webkit-translate: 125px; */
		right: 0px;
		
	}
	.branchesListSlider .kCarouselPrev,
	.branchesListSlider .kCarouselNext
	{
		/* right: 50%; */
		top: -200px;
		
	}
	.boxPositionRow.betweenParanthes .boxPositionRowContent
	{
		padding-right: 0px;
		padding-left: 0px;
	}
	.boxPositionRow.betweenParanthes .boxPositionRowContent:before,
	.boxPositionRow.betweenParanthes .boxPositionRowContent:after
	{
		display: none;
	}
	.floatHeaderAndDescription.boxPositionRow .box_structure_header,
	.floatHeaderAndDescription.boxPositionRow .box_structure_text
	{
		max-width: 100%;
		min-width: 100%;
	}
	.floatHeaderAndDescription.boxPositionRow .box_structure_header
	{
		margin-bottom: 10px;
	}
	.floatHeaderAndDescription.boxPositionRow .box_structure_header .boxValue > *
	{
		font-size: 4rem;
	}
    .bigSide, .smallSide
	{
		width: 100%;
		padding: 0px;
	}
	form .row
	{
		max-width: 48%;
		min-width: 48%;
	}
	.fourColumns > .row.iconTitleDescription
	{
		width: 50%;
		min-width: 50%;
		max-width: 50%;
	}
	.innerPages .mainContent
	{
		
		padding-top: 30px;
		padding-bottom: 70px;
	}
	.branchPage .mainContent
	{
		padding-top: 160px;
	}
	.galleryAlbumDialogPhoto
	{
		max-width: 50%;
		min-width: 50%;
	}
	.box.box_structure_slider
	{
       display: none;
    }
	.smallSide
	{
		margin-top: 30px;
	}
}
@media  (max-width:675px){
	.formElement > .row.formRow,
	.row.similarToFormRow
	{
		max-width: 100%;
		min-width: 100%;
	}
	.menu_socialWrapper ul.sf-menu > li,
	.menu_socialWrapper ul.sf-menu > li:last-child
	{
		margin-left: 10px;
	}
	.fourColumns > .row.iconTitleDescription
	{
		width: 100%;
		min-width: 100%;
		max-width: 100%;
	}
	.betweenParanthes.boxPositionRow,
	.floatHeaderAndDescription.boxPositionRow
	{
		padding-top: 40px !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
		padding-bottom: 40px !important;
		
	}
	.floatingBox.box_structure_text
	{
		display: none;
	}
	.floatingBox.box_structure_text .boxValue
	{
		max-width: none;
	}
	.floatingBox.box_structure_text
	{
		position: relative;
		bottom: auto;
		left: auto;
		width: 100%;
	}
	.floatingBox.box_structure_menu
	{
		position: relative;
		bottom: auto;
		right: auto;
		text-align: center;
	}
	.floatingBox.box_structure_menu li img
	{
		filter: brightness(0%);
		-webkit-filter: brightness(0%);
	}
	.floatingBox.box_structure_menu li
	{
		float: none;
		display: inline-block;
		padding: 5px;
	}
	.floatingBox.box_structure_menu a
	{
		color: #000;
	}
	.floatHeaderAndDescription.boxPositionRow .box_structure_header .boxValue > *
	{
		font-size: 3rem;
	}
   .formElement > .formRow,
   .formElement .formRow.file-row
	{
		max-width: 100%;
		min-width: 100%;
	}
    .sliderFeature_center .swiper-slide-active {
	   transform: scale(1);
	   -webkit-transform: scale(1);
	}
}
@media  (max-width:480px){
	.galleryAlbumDialogPhoto
	{
		max-width: 100%;
		min-width: 100%;
	}
}

/* Home cards: fewer columns on tablets and phones */
@media  (max-width:850px){
	.homePage .mainContentWrapper .fourColumns > .row.rowTemplate
	{
		width: 50%;
	}
	.homePage .mainContentWrapper .fiveColumns > .row.rowTemplate
	{
		width: 33.33%;
	}
}
@media  (max-width:675px){
	.homePage .mainContentWrapper .fiveColumns > .row.rowTemplate
	{
		width: 50%;
	}
}
@media  (max-width:480px){
	.homePage .mainContentWrapper .fourColumns > .row.rowTemplate,
	.homePage .mainContentWrapper .fiveColumns > .row.rowTemplate
	{
		width: 100%;
	}
}

/* Home rows of a photo beside its title and description (ui.css): a smaller title on a phone, the photo above the texts on a narrow one */
@media  (max-width:675px){
	.homePage .mainContentWrapper .rowTemplate.photo_title_description .rowTemplateInner
	{
		gap: 16px;
		padding: 12px;
	}
	.homePage .mainContentWrapper .rowTemplate.photo_title_description .rowTemplateTitle
	{
		font-size: 1.2rem;
	}
}
@media  (max-width:480px){
	.homePage .mainContentWrapper .rowTemplate.photo_title_description .rowTemplateInner
	{
		flex-direction: column;
		align-items: stretch;
	}
	.homePage .mainContentWrapper .rowTemplate.photo_title_description .rowTemplatePhoto
	{
		flex: 0 0 auto;
		width: 100%;
	}
}
@font-face {
	font-family: 'icomoon';
	src:url('../lib/fonts/icomoon/icomoon.eot?wsmy1p');
	src:url('../lib/fonts/icomoon/icomoon.eot?#iefixwsmy1p') format('embedded-opentype'),
		url('../lib/fonts/icomoon/icomoon.woff2?wsmy1p') format('woff2'),
		url('../lib/fonts/icomoon/icomoon.woff?wsmy1p') format('woff'),
		url('../lib/fonts/icomoon/icomoon.ttf?wsmy1p') format('truetype'),
		url('../lib/fonts/icomoon/icomoon.svg?wsmy1p#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	/* the text never waits for the icons; they draw as soon as the font arrives */
	font-display: swap;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	display: inline-block;
	vertical-align: middle;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-th-large:before {
	content: "\f009";
}
.icon-th:before {
	content: "\f00a";
}
.icon-th-list:before {
	content: "\f00b";
}
.icon-gear:before {
	content: "\f013";
}
.icon-refresh:before {
	content: "\f021";
}
.icon-font:before {
	content: "\f031";
}
.icon-arrows:before {
	content: "\f047";
}
.icon-backward:before {
	content: "\f04a";
}
.icon-play:before {
	content: "\f04b";
}
.icon-pause:before {
	content: "\f04c";
}
.icon-stop:before {
	content: "\f04d";
}
.icon-forward:before {
	content: "\f04e";
}
.icon-chevron-left:before {
	content: "\f053";
}
.icon-chevron-right:before {
	content: "\f054";
}
.icon-plus:before {
	content: "\f067";
}
.icon-minus:before {
	content: "\f068";
}
.icon-arrows-v:before {
	content: "\f07d";
}
.icon-group:before {
	content: "\f0c0";
}
.icon-navicon:before {
	content: "\f0c9";
}
.icon-caret-left:before {
	content: "\f0d9";
}
.icon-caret-right:before {
	content: "\f0da";
}
.icon-rotate-left:before {
	content: "\f0e2";
}
.icon-dashboard:before {
	content: "\f0e4";
}
.icon-angle-double-left:before {
	content: "\f100";
}
.icon-angle-double-right:before {
	content: "\f101";
}
.icon-angle-left:before {
	content: "\f104";
}
.icon-angle-right:before {
	content: "\f105";
}
.icon-angle-up:before {
	content: "\f106";
}
.icon-angle-down:before {
	content: "\f107";
}
.icon-quote-left:before {
	content: "\f10d";
}
.icon-quote-right:before {
	content: "\f10e";
}
.icon-question:before {
	content: "\f128";
}
.icon-ellipsis-v:before {
	content: "\f142";
}
.icon-tumblr-square:before {
	content: "\f174";
}
.icon-database:before {
	content: "\f1c0";
}
.icon-sliders:before {
	content: "\f1de";
}
.icon-link:before {
	content: "\e60f";
}
.icon-calendar:before {
	content: "\e6bb";
}
.icon-calendar2:before {
	content: "\e6fe";
}
.icon-file2:before {
	content: "\e611";
}
.icon-files:before {
	content: "\e609";
}
.icon-camera:before {
	content: "\e6ff";
}
.icon-camera3:before {
	content: "\e704";
}
.icon-film:before {
	content: "\e705";
}
.icon-microphone:before {
	content: "\e612";
}
.icon-cog:before {
	content: "\e607";
}
.icon-suitcase:before {
	content: "\e620";
}
.icon-suitcase2:before {
	content: "\e637";
}
.icon-sitemap:before {
	content: "\e706";
}
.icon-sitemap2:before {
	content: "\e707";
}
.icon-chart2:before {
	content: "\e709";
}
.icon-chart4:before {
	content: "\e70b";
}
.icon-chart3:before {
	content: "\e62d";
}
.icon-location:before {
	content: "\e650";
}
.icon-alarm:before {
	content: "\e727";
}
.icon-alarm-cancel:before {
	content: "\e728";
}
.icon-lab:before {
	content: "\e651";
}
.icon-locked:before {
	content: "\e652";
}
.icon-unlocked:before {
	content: "\e653";
}
.icon-megaphone:before {
	content: "\e729";
}
.icon-grid:before {
	content: "\e61d";
}
.icon-tools:before {
	content: "\e657";
}
.icon-chat:before {
	content: "\e66c";
}
.icon-comments:before {
	content: "\e66d";
}
.icon-chat2:before {
	content: "\e66e";
}
.icon-chat3:before {
	content: "\e670";
}
.icon-resize:before {
	content: "\e61e";
}
.icon-download2:before {
	content: "\e72a";
}
.icon-attachment:before {
	content: "\e730";
}
.icon-hourglass:before {
	content: "\e732";
}
.icon-profile:before {
	content: "\e73d";
}
.icon-bookmark:before {
	content: "\e73e";
}
.icon-bookmark2:before {
	content: "\e73f";
}
.icon-addressbook:before {
	content: "\e740";
}
.icon-addressbook2:before {
	content: "\e741";
}
.icon-envelope:before {
	content: "\e742";
}
.icon-envelope2:before {
	content: "\e743";
}
.icon-paperplane:before {
	content: "\e693";
}
.icon-checked:before {
	content: "\e694";
}
.icon-error:before {
	content: "\e695";
}
.icon-add:before {
	content: "\e6a2";
}
.icon-minus2:before {
	content: "\e6ab";
}
.icon-heart:before {
	content: "\e744";
}
.icon-heart2:before {
	content: "\e745";
}
.icon-clipboard:before {
	content: "\e746";
}
.icon-switch:before {
	content: "\e6ac";
}
.icon-home:before {
	content: "\e600";
}
.icon-home2:before {
	content: "\e601";
}
.icon-newspaper:before {
	content: "\e603";
}
.icon-pencil:before {
	content: "\e604";
}
.icon-quill:before {
	content: "\e606";
}
.icon-image2:before {
	content: "\e60a";
}
.icon-images:before {
	content: "\e60b";
}
.icon-camera4:before {
	content: "\e60c";
}
.icon-music:before {
	content: "\e60d";
}
.icon-headphones:before {
	content: "\e60e";
}
.icon-bullhorn:before {
	content: "\e613";
}
.icon-connection:before {
	content: "\e614";
}
.icon-feed:before {
	content: "\e602";
}
.icon-book:before {
	content: "\e615";
}
.icon-books:before {
	content: "\e616";
}
.icon-file3:before {
	content: "\e617";
}
.icon-profile2:before {
	content: "\e618";
}
.icon-copy:before {
	content: "\e61c";
}
.icon-stack:before {
	content: "\e690";
}
.icon-folder:before {
	content: "\e622";
}
.icon-folder-open:before {
	content: "\e623";
}
.icon-tag:before {
	content: "\e624";
}
.icon-tags:before {
	content: "\e658";
}
.icon-barcode:before {
	content: "\e626";
}
.icon-qrcode:before {
	content: "\e627";
}
.icon-cart2:before {
	content: "\e629";
}
.icon-cart3:before {
	content: "\e62a";
}
.icon-coin:before {
	content: "\e62b";
}
.icon-credit:before {
	content: "\e62c";
}
.icon-support:before {
	content: "\e62e";
}
.icon-phone:before {
	content: "\e62f";
}
.icon-phone-hang-up:before {
	content: "\e630";
}
.icon-address-book:before {
	content: "\e631";
}
.icon-envelope3:before {
	content: "\e633";
}
.icon-map2:before {
	content: "\e638";
}
.icon-clock:before {
	content: "\e63a";
}
.icon-alarm22:before {
	content: "\e63d";
}
.icon-print:before {
	content: "\e625";
}
.icon-keyboard:before {
	content: "\e63b";
}
.icon-screen:before {
	content: "\e63f";
}
.icon-mobile:before {
	content: "\e640";
}
.icon-tv:before {
	content: "\e642";
}
.icon-download22:before {
	content: "\e645";
}
.icon-upload:before {
	content: "\e646";
}
.icon-disk:before {
	content: "\e647";
}
.icon-undo2:before {
	content: "\e64b";
}
.icon-redo2:before {
	content: "\e64c";
}
.icon-forward2:before {
	content: "\e64d";
}
.icon-reply:before {
	content: "\e64e";
}
.icon-bubbles4:before {
	content: "\e654";
}
.icon-user:before {
	content: "\e655";
}
.icon-users:before {
	content: "\e656";
}
.icon-user3:before {
	content: "\e659";
}
.icon-user4:before {
	content: "\e65a";
}
.icon-busy:before {
	content: "\e65c";
}
.icon-spinner:before {
	content: "\e65d";
}
.icon-spinner2:before {
	content: "\e65e";
}
.icon-spinner3:before {
	content: "\e65f";
}
.icon-spinner5:before {
	content: "\e661";
}
.icon-spinner6:before {
	content: "\e662";
}
.icon-binoculars:before {
	content: "\e663";
}
.icon-search:before {
	content: "\e664";
}
.icon-zoomin:before {
	content: "\e665";
}
.icon-zoomout:before {
	content: "\e666";
}
.icon-key:before {
	content: "\e66b";
}
.icon-wrench:before {
	content: "\e66f";
}
.icon-cogs:before {
	content: "\e673";
}
.icon-cog2:before {
	content: "\e674";
}
.icon-wand:before {
	content: "\e676";
}
.icon-bug:before {
	content: "\e677";
}
.icon-stats:before {
	content: "\e679";
}
.icon-bars:before {
	content: "\e67a";
}
.icon-gift:before {
	content: "\e67c";
}
.icon-trophy:before {
	content: "\e67d";
}
.icon-mug:before {
	content: "\e67e";
}
.icon-rocket:before {
	content: "\e67f";
}
.icon-meter:before {
	content: "\e680";
}
.icon-lab2:before {
	content: "\e682";
}
.icon-magnet:before {
	content: "\e683";
}
.icon-remove:before {
	content: "\e684";
}
.icon-remove2:before {
	content: "\e685";
}
.icon-truck:before {
	content: "\e748";
}
.icon-target:before {
	content: "\e687";
}
.icon-shield:before {
	content: "\e688";
}
.icon-lightning:before {
	content: "\e689";
}
.icon-switch2:before {
	content: "\e68a";
}
.icon-signup:before {
	content: "\e68c";
}
.icon-list:before {
	content: "\e68d";
}
.icon-list2:before {
	content: "\e68e";
}
.icon-numbered-list:before {
	content: "\e68f";
}
.icon-tree:before {
	content: "\e692";
}
.icon-globe:before {
	content: "\e698";
}
.icon-earth:before {
	content: "\e699";
}
.icon-link2:before {
	content: "\e69a";
}
.icon-flag:before {
	content: "\e69b";
}
.icon-eye:before {
	content: "\e69d";
}
.icon-eye-blocked:before {
	content: "\e69e";
}
.icon-bookmarks:before {
	content: "\e6a1";
}
.icon-star:before {
	content: "\e6a3";
}
.icon-star2:before {
	content: "\e6a4";
}
.icon-star3:before {
	content: "\e6a5";
}
.icon-heart3:before {
	content: "\e6a6";
}
.icon-thumbs-up:before {
	content: "\e6a9";
}
.icon-thumbs-up2:before {
	content: "\e6aa";
}
.icon-smiley:before {
	content: "\e74a";
}
.icon-sad:before {
	content: "\e74b";
}
.icon-neutral:before {
	content: "\e74e";
}
.icon-wondering:before {
	content: "\e74f";
}
.icon-warning2:before {
	content: "\e6af";
}
.icon-notification:before {
	content: "\e6b0";
}
.icon-info:before {
	content: "\e6b2";
}
.icon-blocked:before {
	content: "\e6b4";
}
.icon-cancel-circle:before {
	content: "\e6b5";
}
.icon-checkmark-circle:before {
	content: "\e6b6";
}
.icon-spam:before {
	content: "\e6b7";
}
.icon-close:before {
	content: "\e6b8";
}
.icon-checkmark2:before {
	content: "\e6b9";
}
.icon-checkmark22:before {
	content: "\e6ba";
}
.icon-enter:before {
	content: "\e6be";
}
.icon-exit:before {
	content: "\e6bf";
}
.icon-volume-medium:before {
	content: "\e6d0";
}
.icon-arrow-right2:before {
	content: "\e6e5";
}
.icon-arrow-left2:before {
	content: "\e6e9";
}
.icon-checkbox-checked:before {
	content: "\e6f3";
}
.icon-checkbox-partial:before {
	content: "\e6f5";
}
.icon-radio-checked:before {
	content: "\e6f6";
}
.icon-crop:before {
	content: "\e6f8";
}
.icon-scissors:before {
	content: "\e6f9";
}
.icon-text-height:before {
	content: "\e6fa";
}
.icon-text-width:before {
	content: "\e6fb";
}
.icon-table2:before {
	content: "\e701";
}
.icon-pilcrow:before {
	content: "\e703";
}
.icon-newtab:before {
	content: "\e70d";
}
.icon-embed:before {
	content: "\e70e";
}
.icon-code:before {
	content: "\e70f";
}
.icon-share:before {
	content: "\e710";
}
.icon-mail3:before {
	content: "\e713";
}
.icon-google:before {
	content: "\e714";
}
.icon-googleplus:before {
	content: "\e715";
}
.icon-googleplus2:before {
	content: "\e716";
}
.icon-googleplus3:before {
	content: "\e717";
}
.icon-googleplus4:before {
	content: "\e718";
}
.icon-facebook:before {
	content: "\e719";
}
.icon-facebook2:before {
	content: "\e71a";
}
.icon-facebook3:before {
	content: "\e71b";
}
.icon-twitter:before {
	content: "\e71c";
}
.icon-twitter2:before {
	content: "\e71d";
}
.icon-twitter3:before {
	content: "\e71e";
}
.icon-feed2:before {
	content: "\e71f";
}
.icon-feed3:before {
	content: "\e720";
}
.icon-feed4:before {
	content: "\e721";
}
.icon-youtube:before {
	content: "\e722";
}
.icon-youtube2:before {
	content: "\e723";
}
.icon-vimeo:before {
	content: "\e724";
}
.icon-vimeo2:before {
	content: "\e725";
}
.icon-vimeo3:before {
	content: "\e726";
}
.icon-github:before {
	content: "\e6ce";
}
.icon-tumblr:before {
	content: "\e6fc";
}
.icon-apple:before {
	content: "\e72b";
}
.icon-android:before {
	content: "\e72c";
}
.icon-skype:before {
	content: "\e6fd";
}
.icon-paypal:before {
	content: "\e72e";
}
.icon-file-pdf:before {
	content: "\e731";
}
.icon-file-word:before {
	content: "\e733";
}
.icon-file-excel:before {
	content: "\e734";
}
.icon-file-zip:before {
	content: "\e735";
}
.icon-file-xml:before {
	content: "\e737";
}
.icon-chrome:before {
	content: "\e739";
}
.icon-firefox:before {
	content: "\e73a";
}
.icon-IE:before {
	content: "\e73b";
}
.icon-opera:before {
	content: "\e73c";
}
/*ThemeVars*/
.block_default_isolated
{

}
.block_default_isolated .blockInner
{

}
.block_default_isolated .blockInner > .block-title
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
	padding-bottom: 12px;
	/* the title sits on the page, above the body card that paints the skin's surface: the theme's colour, not the skin's
	   heading (meant for its surface); the skin shows in the marker (accent) and the card */
	color: #0F1F2E;
	border-bottom: none;
	font-weight: bold;
	position: relative;
}
.block_default_isolated .blockInner > .block-title:after
{
	display: none;
}
.block_default_isolated .block-body
{
	background: var(--skin-surface, #FFFFFF);
	/* painted: the skinned rows inside paint nothing (styles/basic/list.css) */
	--skin-painted: transparent;
	border: 1px solid #E6EBF0;
	border-radius: 24px;
	box-shadow: 0px 0px 0px 0px rgba(15, 31, 46, 0);
	padding: 25px;
}
.block_default_isolated .block-title h1, .block_default_isolated .block-title h2, .block_default_isolated .block-title h3, .block_default_isolated .block-title h4, .block_default_isolated .block-title h5, .block_default_isolated .block-title h6
{
	display: flex;
	align-items: center;
	margin: 0px;
	font-weight: bold;
	line-height: 1.5em;
	font-size: 30px;
	color: #0F1F2E;
}
/* the selected path of a box (show_selected_path) is the section title: it reads as the title text, not as a link */
.block_default_isolated .block-title .boxPathTrail a
{
	color: inherit;
	font: inherit;
	text-decoration: none;
}
.block_default_isolated .block-title h1:before, .block_default_isolated .block-title h2:before, .block_default_isolated .block-title h3:before, .block_default_isolated .block-title h4:before, .block_default_isolated .block-title h5:before, .block_default_isolated .block-title h6:before
{
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 6px;
	height: 1.05em;
	margin-left: 0.5em;
	border-radius: 2px;
	/* a page in an article's skin: the bar takes its accent */
	background: var(--skin-accent, #1D76BC);
}
/* The heading: an optional icon, the kicker above the title and the badge after it; the link sits at the other end of the title row */
.block_default_isolated .block-heading
{
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0px;
}
.block_default_isolated .block-headingText
{
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0px;
}
.block_default_isolated .block-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 10px;
	font-size: 1.2rem;
	color: #1D76BC;
	background: color-mix(in srgb, #1D76BC 12%, transparent);
}
/* the icon marks the title: no marker bar beside it */
.block_default_isolated .hasIcon h1:before, .block_default_isolated .hasIcon h2:before, .block_default_isolated .hasIcon h3:before, .block_default_isolated .hasIcon h4:before, .block_default_isolated .hasIcon h5:before, .block_default_isolated .hasIcon h6:before
{
	display: none;
}
.block_default_isolated .block-kicker
{
	font-size: 0.85rem;
	font-weight: bold;
	line-height: 1.4em;
	color: #1D76BC;
}
.block_default_isolated .block-badge
{
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: bold;
	line-height: 1.4em;
	color: var(--skin-accent-text, #FFFFFF);
	background: var(--skin-accent, #1D76BC);
}
.block_default_isolated .block-link
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	font-size: 1rem;
	font-weight: bold;
	white-space: nowrap;
	text-decoration: none;
}
/* a plain link takes the section link colours; with the "button" class it keeps the site's button look */
.block_default_isolated .block-link:not(.button)
{
	color: #1D76BC;
}
.block_default_isolated .block-link:not(.button):hover
{
	color: #0F1F2E;
}
.block_default_isolated .block-link:after
{
	content: "\2192";
	display: inline-block;
}
.rtlDirection .block_default_isolated .block-link:after
{
	transform: scaleX(-1);
}
.block_default_isolated .block-subText
{
	font-size: 0.95rem;
	margin-bottom: 10px;
	color: #6F7479;
}

/* The home page sections sit directly on the page or on a band, the cards are the articles themselves */
.homePage .block_default_isolated .block-body
{
	background: none;
	border: 0px none;
	border-radius: 0px;
	box-shadow: none;
	padding: 0px;
}

/* Sidebar blocks are cards with their title inside */
.smallSide .block_default_isolated .blockInner
{
	background: #FFFFFF;
	border: 1px solid #E6EBF0;
	border-radius: 24px;
	box-shadow: 0px 0px 0px 0px rgba(15, 31, 46, 0);
	padding: 20px;
}
.smallSide .block_default_isolated .block-body
{
	background: none;
	border: 0px none;
	border-radius: 0px;
	box-shadow: none;
	padding: 0px;
}
.smallSide .block_default_isolated .blockInner > .block-title
{
	margin-bottom: 12px;
	border-bottom: 1px solid #E6EBF0;
}
.smallSide .block_default_isolated .block-title h1, .smallSide .block_default_isolated .block-title h2, .smallSide .block_default_isolated .block-title h3, .smallSide .block_default_isolated .block-title h4, .smallSide .block_default_isolated .block-title h5, .smallSide .block_default_isolated .block-title h6
{
	font-size: 1.2rem;
}
.smallSide .block_default_isolated .block-title h1:before, .smallSide .block_default_isolated .block-title h2:before, .smallSide .block_default_isolated .block-title h3:before, .smallSide .block_default_isolated .block-title h4:before, .smallSide .block_default_isolated .block-title h5:before, .smallSide .block_default_isolated .block-title h6:before
{
	display: none;
}

/* Article page: the article is one card and its title sits inside it */
.articleViewWrapper .block_default_isolated .blockInner
{
	background: #FFFFFF;
	border: 1px solid #E6EBF0;
	border-radius: 24px;
	box-shadow: 0px 0px 0px 0px rgba(15, 31, 46, 0);
	padding: 32px 36px;
}
.articleViewWrapper .block_default_isolated .block-body
{
	background: none;
	border: 0px none;
	border-radius: 0px;
	box-shadow: none;
	padding: 0px;
}
.articleViewWrapper .block_default_isolated .blockInner > .block-title
{
	border-bottom: 0px none;
	margin-bottom: 24px;
	padding-bottom: 0px;
}
.articleViewWrapper .block_default_isolated .block-title h1
{
	font-size: 2.4rem;
	line-height: 1.6em;
	color: #0F1F2E;
}
.articleViewWrapper .block_default_isolated .block-title h1:before
{
	display: none;
}

/* Rows set to a dark background (row custom style darkBackground): light heading and sub text, a divider and a marker that show on the dark background */
.boxPositionRow.darkBackground .block_default_isolated .block-title,
.boxPositionRow.darkBackground .block_default_isolated .block-title h1,
.boxPositionRow.darkBackground .block_default_isolated .block-title h2,
.boxPositionRow.darkBackground .block_default_isolated .block-title h3,
.boxPositionRow.darkBackground .block_default_isolated .block-title h4,
.boxPositionRow.darkBackground .block_default_isolated .block-title h5,
.boxPositionRow.darkBackground .block_default_isolated .block-title h6,
.boxPositionRow.darkBackground .block_default_isolated .block-subText,
.boxPositionRow.darkBackground .block_default_isolated .block-kicker,
.boxPositionRow.darkBackground .block_default_isolated .block-link:not(.button),
.boxPositionRow.darkBackground .block_default_isolated .block-link:not(.button):hover,
.boxPositionRow.darkBackground .block_default_isolated .block-icon
{
	color: #FFFFFF;
}
/* on a dark row a button link is outlined in the light text colour */
.boxPositionRow.darkBackground .block_default_isolated .block-link.button
{
	background: transparent;
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
}
.boxPositionRow.darkBackground .block_default_isolated .block-link.button:hover
{
	background: color-mix(in srgb, #FFFFFF 15%, transparent);
}
.boxPositionRow.darkBackground .block_default_isolated .block-icon
{
	background: color-mix(in srgb, #FFFFFF 15%, transparent);
}
.boxPositionRow.darkBackground .block_default_isolated .block-badge
{
	color: #292929;
	background: #FFFFFF;
}
.boxPositionRow.darkBackground .block_default_isolated .blockInner > .block-title
{
	border-bottom-color: color-mix(in srgb, #FFFFFF 18%, transparent);
}
.boxPositionRow.darkBackground .block_default_isolated .block-title h1:before,
.boxPositionRow.darkBackground .block_default_isolated .block-title h2:before,
.boxPositionRow.darkBackground .block_default_isolated .block-title h3:before,
.boxPositionRow.darkBackground .block_default_isolated .block-title h4:before,
.boxPositionRow.darkBackground .block_default_isolated .block-title h5:before,
.boxPositionRow.darkBackground .block_default_isolated .block-title h6:before
{
	background: #E7731E;
}
@media  (max-width:850px)
{
	.block_default_isolated .block-body
	{
		padding: 20px;
	}
	.homePage .block_default_isolated .block-body
	{
		padding: 0px;
	}
	.block_default_isolated .block-title h1, .block_default_isolated .block-title h2, .block_default_isolated .block-title h3, .block_default_isolated .block-title h4, .block_default_isolated .block-title h5, .block_default_isolated .block-title h6
	{
		font-size: 1.4rem;
	}
}
@media  (max-width:675px)
{
	/* the link of a section title stays small beside the title, the title never wraps word by word */
	.block_default_isolated .blockInner > .block-title
	{
		gap: 12px;
	}
	.block_default_isolated .block-link
	{
		font-size: 0.85rem;
	}
	.block_default_isolated .block-link.button
	{
		width: auto !important;
		height: auto;
		padding: 6px 12px;
		line-height: 1.4em;
	}
}

/* Variations (the template's metadata): compact, a smaller body; plain, no shadow around the body */
.block_default_isolated.blockCompact .block-body
{
	padding: 12px;
}
.block_default_isolated.blockPlain .block-body
{
	box-shadow: none;
}

/* bare: the section sits directly on the page or on a band (a page of boxes as the home page is), the boxes' own cards inside */
.block_default_isolated.blockBare .block-body
{
	background: none;
	border: 0px none;
	border-radius: 0px;
	box-shadow: none;
	padding: 0px;
}

/* the page's buttons beside the title (the template's inherit: uiWorkspace()'s block actions); a line of their own on phones */
.block_default_isolated .block-actions
{
	display: flex;
	flex-wrap: wrap;
	flex-shrink: 0;
	gap: 6px;
	padding: 6px 0;
	white-space: normal;
}
.block_default_isolated .block-actions .button
{
	margin: 0;
}
@media (max-width: 675px)
{
	/* the title wraps: one line pushed the page wider than a phone */
	.block_default_isolated .block-title
	{
		white-space: normal;
	}
	.block_default_isolated .block-title h1, .block_default_isolated .block-title h2, .block_default_isolated .block-title h3
	{
		min-width: 0px;
		overflow-wrap: anywhere;
	}
	.block_default_isolated .block-title:has(.block-actions)
	{
		flex-wrap: wrap;
	}
	.block_default_isolated .block-actions
	{
		width: 100%;
		padding-top: 0;
	}
	/* side by side, not the theme's one button per line */
	.block_default_isolated .block-actions .button
	{
		flex: 1 1 auto;
		width: auto !important;
	}
}

/* Title layouts (the frame's variations): split puts the sub text between the title and the link, in one row (the sub
   text is printed in the title row too, shown only here); side puts the title (its kicker, sub text and link) in a
   column beside the content, above it on narrow screens */
.block_default_isolated .block-subTextInTitle
{
	display: none;
}
.block_default_isolated.blockSplit .blockInner > .block-title
{
	align-items: flex-end;
	flex-wrap: wrap;
}
.block_default_isolated.blockSplit .block-subTextInTitle
{
	display: block;
	flex: 1 1 260px;
	max-width: 56ch;
	margin: 0px;
	font-weight: normal;
	line-height: 1.6em;
}
.block_default_isolated.blockSplit .block-body > .block-subText
{
	display: none;
}
.block_default_isolated.blockSide .blockInner
{
	display: grid;
	grid-template-columns: minmax(180px, 32%) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
.block_default_isolated.blockSide .blockInner > .block-title
{
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 0px;
	border-bottom: 0px none;
}
.block_default_isolated.blockSide .block-subTextInTitle
{
	display: block;
	margin: 0px;
	font-weight: normal;
	line-height: 1.6em;
}
.block_default_isolated.blockSide .block-body > .block-subText
{
	display: none;
}
@media (max-width: 850px)
{
	.block_default_isolated.blockSide .blockInner
	{
		display: block;
	}
	.block_default_isolated.blockSide .blockInner > .block-title
	{
		margin-bottom: 20px;
	}
}

/* The hero (variation hero, on the plain one): a large title with no marker, its accent word in the text's colour on its tint,
   the sentence larger, a paragraph of buttons as a row */
.block_default_isolated.blockHero .block-title h1,
.block_default_isolated.blockHero .block-title h2
{
	font-size: clamp(2.4rem, 3.96vw, 3.8rem);
	line-height: 1.3;
}
.block_default_isolated.blockHero .block-title h1:before,
.block_default_isolated.blockHero .block-title h2:before
{
	display: none;
}
.block_default_isolated.blockHero .titleAccent
{
	color: inherit;
	border-radius: 14px;
}
.block_default_isolated.blockHero .block-body p
{
	font-size: 1.15rem;
	line-height: 1.9;
	color: #6F7479;
}
.block_default_isolated.blockHero .block-body p:has(> .button)
{
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 26px;
}
.block_default_isolated.blockHero .block-body p:has(> .button) .button
{
	margin: 0px;
}