/* ============================================================================================================================
	rm-base.css - the base layer (Step 4, 5 Oct 2026): the reset, the typography and the plain HTML elements (body, headings,
	paragraphs, links, lists, form elements, selection), the animations (the old theme's animate.css), and the dark scheme's element
	rules.

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

body,
.dropdown-menu { font-size: var(--rm-font-size-page); }

/* ---- site.css: Basic ---- */

dl,
dt,
dd,
ol,
ul,
li {
	margin: 0;
	padding: 0;
}
.clear {
	clear: both;
	display: block;
	font-size: 0px;
	height: 0px;
	line-height: 0;
	width: 100%;
	overflow:hidden;
}
::selection {
	background: var(--theme-color);
	color: var(--rm-white);
	text-shadow: none;
}
::-moz-selection {
	background: var(--theme-color); /* Firefox */
	color: var(--rm-white);
	text-shadow: none;
}
::-webkit-selection {
	background: var(--theme-color); /* Safari */
	color: var(--rm-white);
	text-shadow: none;
}
:active,
:focus { outline: none !important; }

/* ---- site.css: Typography ---- */

body {
	line-height: var(--rm-line-height);
	color: var(--rm-grey-55);
	font-family: 'Lato', sans-serif;
}
a {
	text-decoration: none !important;
	color: var(--rm-accent);
}
a:hover { color: var(--rm-darker); }
a img { border: none; }
img { max-width: 100%; }
iframe { border: none !important; }

/* ---- site.css: Basic Layout Styles ---- */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--rm-grey-44);
	font-weight: 600;
	line-height: var(--rm-line-height);
	margin: 0 0 var(--rm-space-5) 0;
	font-family: 'Raleway', sans-serif;
}
h5,
h6 {
	margin-bottom: var(--rm-space-4);
	font-weight: bold;
}
h1 { font-size: var(--rm-font-size-h1); }
h4 { font-size: var(--rm-font-size-h4); font-weight: 600; }
h5 { font-size: var(--rm-font-size-h5); }
h6 { font-size: var(--rm-font-size-h6); }
h1 > span:not(.nocolor):not(.badge),
h2 > span:not(.nocolor):not(.badge),
h3 > span:not(.nocolor):not(.badge),
h4 > span:not(.nocolor):not(.badge),
h5 > span:not(.nocolor):not(.badge),
h6 > span:not(.nocolor):not(.badge) { color: var(--rm-accent); }
small { font-family: 'Lato', sans-serif; }

/* ---- site.css: Dark Scheme ---- */

.dark fieldset { border-color: var(--rm-white-10); }
.dark hr { border-top-color: var(--rm-white-10); }
.dark blockquote { border-left-color: var(--rm-white-20); }
.dark code {
	--rm-code-on-dark: #DF6F72;				/* the theme's code colour on dark backgrounds */
	color: var(--rm-code-on-dark);
	background-color: var(--rm-black-30);
}
.dark pre {
	color: var(--rm-white);
	background-color: var(--rm-black-30);
	border-color: var(--rm-white-15);
}

/* ---- site-after-icons.css: from the theme's css/animate.css ---- */

.not-animated { opacity: 0; }
.animated.infinite {
	animation-iteration-count: infinite;
}
@keyframes flash {
	from, 50%, to {
		opacity: 1;
	}

	25%, 75% {
		opacity: 0;
	}
}
.flash {
	animation-name: flash;
}
@keyframes swing {
	20% {
		transform: rotate3d(0, 0, 1, 15deg);
	}

	40% {
		transform: rotate3d(0, 0, 1, -10deg);
	}

	60% {
		transform: rotate3d(0, 0, 1, 5deg);
	}

	80% {
		transform: rotate3d(0, 0, 1, -5deg);
	}

	to {
		transform: rotate3d(0, 0, 1, 0deg);
	}
}
.swing {
	transform-origin: top center;
	animation-name: swing;
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}
.fadeIn {
	animation-name: fadeIn;
}
@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}
.fadeInRight {
	animation-name: fadeInRight;
}
@keyframes fadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}
.fadeOut {
	animation-name: fadeOut;
}
@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}

	50% {
		opacity: 1;
	}
}
.zoomIn {
	animation-name: zoomIn;
}

/* ---- site-after-icons.css: from the theme's css/responsive.css ---- */

@media (max-width: 767.98px) {
	body { padding: 0 !important; }
	h1 { font-size: 28px; }
	/* (no h2/h3 sizes here: the unconditional h2/h3 below won over them, so they never applied - J-42) */
	h4 { font-size: 16px; }
	form .col_full,
	form .col_half,
	form .col_one_third { margin-bottom: 25px !important; }
}

/* ---- rm-components.css ---- */

/* Make sure background covers the whole screen (terms of service or other very short pages needs this) */
html, body {
	height: 100% !important;
}
/* the old theme padded the right side 17px */
p, pre, ul, ol, dl, dd, blockquote, address, table, fieldset, form { margin-bottom: 0; }
/* The drop-down lists' look: assets/css/ui/rm-select.css (Step 3a, 5 Oct 2026; bootstrap-select's rules were here) */
/* Remove scrolling arrows on number input fields */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {		/* Chrome, Safari, Edge, Opera */
	-webkit-appearance: none;
	margin: 0;
}
/* Disables horizontal resizing of text areas in modals */
textarea { resize: vertical; }
/* Create a nice halo for current input field */
input:focus, textarea:focus {
	outline: var(--theme-color) auto 2px !important;
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) to override default look) */
/* input.media-thumbnail-slider::-webkit-slider-thumb, input#cmp-thumbnail-slider::-webkit-slider-thumb, input#editor-thumbnail-slider::-webkit-slider-thumb, input#keyframes-thumbnail-slider::-webkit-slider-thumb */
input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: var(--theme-color);
}
/* The slider handle (use -moz- (Firefox) to override default look) */
/* input.media-thumbnail-slider::-moz-range-thumb, input#cmp-thumbnail-slider::-moz-range-thumb, input#editor-thumbnail-slider::-moz-range-thumb, input#keyframes-thumbnail-slider::-moz-range-thumb */
input::-moz-range-thumb {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: var(--theme-color);
}
/* Hover the above slider handle */
/* input.media-thumbnail-slider::-webkit-slider-thumb:hover, input#cmp-thumbnail-slider::-webkit-slider-thumb:hover, input#editor-thumbnail-slider::-webkit-slider-thumb:hover, input#keyframes-thumbnail-slider::-webkit-slider-thumb:hover */
input::-webkit-slider-thumb:hover {
	background-color: var(--theme-color);
	filter: brightness(110%);
}
/* Hover the above slider handle */
/* input.media-thumbnail-slider::-moz-range-thumb:hover, input#cmp-thumbnail-slider::-moz-range-thumb:hover, input#editor-thumbnail-slider::-moz-range-thumb:hover, input#keyframes-thumbnail-slider::-moz-range-thumb:hover */
input::-moz-range-thumb:hover {
	background-color: var(--theme-color);
	filter: brightness(110%);
}
h2 { font-size: var(--rm-font-size-body); font-family: var(--rm-font-family); letter-spacing: var(--rm-letter-spacing); }
h3 { font-size: 0.8rem; font-family: var(--rm-font-family); font-weight: bold; letter-spacing: var(--rm-letter-spacing); margin-bottom: var(--rm-space-3); }
@media (min-width: 544px) {
	h2 { font-size: 1.25rem; font-family: var(--rm-font-family); }
	h3 { font-size: 0.8rem; font-family: var(--rm-font-family); font-weight: bold; letter-spacing: var(--rm-letter-spacing); margin-bottom: var(--rm-space-3); }
}