/* ============================================================================================================================
	rm-components-theme.css - the components the site took over from its old page theme (Step 4, 5 Oct 2026): buttons, styled
	icons, forms, alerts, headings blocks, dividers, quotes, overlays, the radio/checkbox styles and the theme colours, with their
	responsive and dark-scheme rules. Loaded after the icon font (assets/fonts/icons/icons.css), before the UI components.

	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: Flex Slider ---- */

.fslider { min-height: 32px; }
.flexslider a:active,
.flexslider a:focus { outline: none; border: none; }
.flexslider .slider-wrap > .slide {display: none; -webkit-backface-visibility: hidden;}
.flexslider .slider-wrap img {width: 100%; display: block;}
.slider-wrap:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slider-wrap {display: block;}
* html .slider-wrap {height: 1%;}

/* ---- site.css: Slider ---- */

.fslider[data-animation="fade"][data-thumbs="true"] .flexslider { height: auto !important; }
.slider-element .container {
	position: relative;
	height: 100%;
}

/* ---- site.css: Portfolio ---- */

.well .line {
	margin: var(--rm-space-4) 0;
	border-color: var(--rm-grey-e5);
}

/* ---- site.css: Blog ---- */

.entry:after {
	content: '';
	position: relative;
	height: 2px;
	margin-top: var(--rm-space-7);
	background-color: var(--rm-grey-f5);
}
.entry blockquote p {
	font-weight: 400;
	font-family: 'Crete Round', serif;
	font-style: italic;
}

/* ---- site.css: Comments List ---- */

#comments {
	position: relative;
	margin-top: var(--rm-space-7);
	padding-top: var(--rm-space-7);
	border-top: var(--rm-border-width) solid var(--rm-lighter);
}

/* ---- site.css: Comment Form ---- */

#respond,
#respond form { margin-bottom: 0; }
#respond p { margin: var(--rm-space-2) 0 0 0; }
#respond p:first-child { margin-top: 0; }
#respond label small {
	color: var(--rm-grey-99);
	font-weight: normal;
}
#respond input[type="text"],
#respond textarea { margin-bottom: 0; }
#respond .col_one_third,
#respond .col_full { margin-bottom: var(--rm-space-4); }

/* ---- site.css: Shop ---- */

.product { position: relative; }

/* ---- site.css: Cart ---- */

td.actions {
	padding: var(--rm-space-4) var(--rm-space-3) !important;
	vertical-align: top !important;
	background-color: var(--rm-grey-f5);
}

/* ---- site.css: Events ---- */

.events .entry {
	padding: var(--rm-space-4);
	background-color: var(--rm-grey-f9);
	border-bottom: 3px solid var(--rm-lighter);
}
.events .entry:after { display: none !important; }

/* ---- site.css: Countdown ---- */

.countdown { display: block; }

/* ---- site.css: Buttons ---- */

body:not(.device-touch) .button {
	-webkit-transition: all var(--rm-duration-fast) ease-in-out;
	-o-transition: all var(--rm-duration-fast) ease-in-out;
	transition: all var(--rm-duration-fast) ease-in-out;
}
.button:hover {
	background-color: var(--rm-grey-44);
	color: var(--rm-white);
	text-shadow: 1px 1px 1px var(--rm-black-20);
}
.button i {
	position: relative;
	top: 1px;
	line-height: 1;
	margin-right: var(--rm-space-1);
	width: 16px;
	text-align: center;
}
.button.tright i { margin: 0 0 0 var(--rm-space-1); }

/* ---- site.css: Alerts ---- */

.alert i {
	position: relative;
	top: 1px;
	font-size: 14px;
	width: 14px;
	text-align: center;
	margin-right: var(--rm-space-1);
}

/* ---- site.css: Styled Icons ---- */

body:not(.device-touch) .i-rounded,
body:not(.device-touch) .i-plain,
body:not(.device-touch) .i-circled,
body:not(.device-touch) .social-icon {
	-webkit-transition: all var(--rm-duration-medium) ease;
	-o-transition: all var(--rm-duration-medium) ease;
	transition: all var(--rm-duration-medium) ease;
}
.i-rounded,
.i-circled {
	width: 52px !important;
	height: 52px !important;
	line-height: 52px !important;
	background-color: var(--rm-grey-44);
	border-radius: 3px;
}
.i-plain {
	width: 36px !important;
	height: 36px !important;
	font-size: 28px;
	line-height: 36px !important;
	color: var(--rm-grey-44);
	text-shadow: 1px 1px 1px var(--rm-white);
}
.i-plain:hover { color: var(--rm-grey-77); }
.i-circled { border-radius: 50%; }
.i-rounded:hover,
.i-circled:hover {
	background-color: var(--rm-accent);
	color: var(--rm-white);
	text-shadow: 1px 1px 1px var(--rm-black-30);
	box-shadow: 0 0 0 var(--rm-black-20);
}
.i-small.i-rounded,
.i-small.i-plain,
.i-small.i-circled {
	margin: 4px 11px 7px 0;
	font-size: 14px;
}
.i-small.i-rounded,
.i-small.i-circled {
	width: 28px !important;
	height: 28px !important;
	line-height: 28px !important;
}
.i-small.i-plain {
	width: 18px !important;
	height: 18px !important;
	font-size: 14px;
	line-height: 18px !important;
}

/* ---- site.css: Social Icons ---- */

.si-borderless { border-color: transparent !important; }
.social-icon i {
	display: block;
	position: relative;
}
body:not(.device-touch) .social-icon i {
	-webkit-transition: all var(--rm-duration-medium) ease;
	-o-transition: all var(--rm-duration-medium) ease;
	transition: all var(--rm-duration-medium) ease;
}
.social-icon i:last-child { color: var(--rm-white) !important; }
.social-icon:hover i:first-child { margin-top: -38px; }
.social-icon:hover {
	color: var(--rm-grey-55);
	border-color: transparent;
}
/* the social icons under the pointer: the accent (owner, 6 Oct 2026: brand colours only for UI elements - they turned the networks'
   own colours until Step 7) */
.si-facebook:hover, .si-linkedin:hover, .si-twitter:hover, .si-youtube:hover, .si-instagram:hover { background-color: var(--rm-accent) !important; }

/* ---- site.css: Accordions ---- */

.accordion { margin-bottom: var(--rm-space-4); }

/* ---- site.css: Tabs ---- */

.tabs {
	position: relative;
	margin: 0 0 var(--rm-space-5) 0;
}

/* ---- site.css: Pricing Boxes ---- */

.pricing { position: relative; }
.pricing [class^=col-] {
	padding: 0;
	margin-top: var(--rm-space-4);
}

/* ---- site.css: Counter ---- */

.counter {
	font-size: 42px;
	font-weight: 600;
	font-family: 'Raleway', sans-serif;
}
.counter + h5 {
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--rm-letter-spacing);
	margin-top: var(--rm-space-2);
}
.widget .counter + h5 { opacity: 0.7; }

/* ---- site.css: Quotes & Blockquotes ---- */

blockquote p { margin-bottom: var(--rm-space-3); }
blockquote {
	padding: var(--rm-space-2) var(--rm-space-4);
	margin: 0 0 var(--rm-space-4);
	font-size: 17px;
	border-left: 5px solid var(--rm-lighter);
}
.quote {
	border: none !important;
	position: relative;
}
.quote p { position: relative; }

/* ---- site.css: Dropcaps & Highlights ---- */

.highlight {
	padding: 2px var(--rm-space-1);
	background-color: var(--rm-grey-44);
	color: var(--rm-white);
	border-radius: var(--rm-radius-sm);
}

/* ---- site.css: Overlays ---- */

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ---- site.css: Forms ---- */

.sm-form-control {
	display: block;
	width: 100%;
	height: auto;
	padding: 8px 14px;
	font-size: 15px;
	line-height: 1.42857143;
	color: var(--rm-grey-55);
	background-color: var(--rm-white);
	background-image: none;
	border: 2px solid var(--rm-grey-dd);
	border-radius: 0 !important;
	-webkit-transition: border-color ease-in-out var(--rm-duration-xfast);
	-o-transition: border-color ease-in-out var(--rm-duration-xfast);
	transition: border-color ease-in-out var(--rm-duration-xfast);
}
.sm-form-control:focus {
	border-color: var(--rm-grey-aa);
	outline: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.sm-form-control::-moz-placeholder {
	color: var(--rm-grey-99);
	opacity: 1;
}
.sm-form-control:-ms-input-placeholder { color: var(--rm-grey-99); }
.sm-form-control::-webkit-input-placeholder { color: var(--rm-grey-99); }
.sm-form-control[disabled],
.sm-form-control[readonly],
fieldset[disabled] .sm-form-control {
	cursor: not-allowed;
	background-color: var(--rm-lighter);
	opacity: 1;
}
.form-control { border-radius: 3px; }
.form-control:active,
.form-control:focus {
	border-color: var(--rm-grey-99);
	box-shadow: none;
}
label {
	display: inline-block;
	font-size: 13px;
	font-weight: var(--rm-font-weight-bold);
	font-family: 'Raleway', sans-serif;
	text-transform: uppercase;
	letter-spacing: var(--rm-letter-spacing);
	color: var(--rm-grey-55);
	margin-bottom: var(--rm-space-2);
	cursor: pointer;
}
form .col_full,
form .col_half,
form .col_one_third { margin-bottom: 25px; }

/* ---- site.css: Contact Form ---- */

label.error {
	margin-top: var(--rm-space-1);
	color: var(--rm-field-error);
	font-weight: 400;
	display: none !important;
}
input[type=checkbox]:not(:checked) + label.error { display: block !important; }
.form-control.error,
.sm-form-control.error { border-color: var(--rm-field-error); }

/* ---- site.css: Heading Styles ---- */

.fancy-title {
	position: relative;
	margin-bottom: var(--rm-space-5);
}
.fancy-title h1,
.fancy-title h2,
.fancy-title h3,
.fancy-title h4,
.fancy-title h5,
.fancy-title h6 {
	position: relative;
	display: inline-block;
	background-color: var(--rm-white);
	padding-right: var(--rm-space-3);
	margin-bottom: 0;
}
.fancy-title h4,
.fancy-title h5,
.fancy-title h6 { padding-right: var(--rm-space-2); }
.fancy-title.title-bottom-border h1,
.fancy-title.title-bottom-border h2,
.fancy-title.title-bottom-border h3,
.fancy-title.title-bottom-border h4,
.fancy-title.title-bottom-border h5,
.fancy-title.title-bottom-border h6 {
	display: block;
	background: transparent;
	padding: 0 0 var(--rm-space-2);
	border-bottom: 2px solid var(--rm-accent);
	border-bottom-color: var(--theme-color);
}

/* ---- site.css: Divider ---- */

.divider {
	position: relative;
	overflow: hidden;
	margin: 35px 0;
	color: var(--rm-grey-e5);
	width: 100%;
}
.divider:after {
	content: '';
	position: absolute;
	width: 100%;
	top: 8px;
	left: 30px;
	height: 0;
	border-top: var(--rm-border-width) solid var(--rm-lighter);
}
.divider i {
	position: relative;
	width: 18px;
	height: 18px;
	line-height: 1;
	font-size: 18px !important;
	text-align: center;
}
.divider a {
	position: relative;
	display: inline-block;
	color: inherit;
	-webkit-transition: all var(--rm-duration-medium) ease;
	-o-transition: all var(--rm-duration-medium) ease;
	transition: all var(--rm-duration-medium) ease;
}
.divider a:hover { color: var(--rm-grey-88); }

/* ---- site.css: Widgets ---- */

.widget {
	position: relative;
	margin-top: var(--rm-space-7);
}
.widget p { line-height: 1.7; }
.widget:first-child { margin-top: 0; }
.widget > h4 {
	margin-bottom: 25px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.widget p:not(.lead) { font-size: 14px; }

/* ---- site.css: Bootstrap Specific ---- */

.table .success { color: var(--rm-orange); }		/* brand colours (owner, 6 Oct 2026: no green or blue on the site; they were Bootstrap 3's text colours) */
.table .info { color: var(--rm-light); }
.table .warning { --rm-table-text-warning: #8a6d3b; color: var(--rm-table-text-warning); }
.btn-link,
.page-link,
.page-link:hover,
.page-link:focus { color: var(--rm-accent); }

/* ---- site.css: Page Transitions ---- */

.css3-spinner {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: var(--rm-z-popup);
	text-align: center;
	background-color: var(--rm-white);
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-perspective: 1000;
}
.css3-spinner > div {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -9px;
	margin-left: 13px;
	width: 18px;
	height: 18px;
	background-color: var(--rm-grey-dd);
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
	animation: bouncedelay 1.4s infinite ease-in-out;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.css3-spinner .css3-spinner-bounce1 {
	margin-left: -31px;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.css3-spinner .css3-spinner-bounce2 {
	margin-left: -9px;
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

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

.dark,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 { color: var(--rm-lighter); }
.dark a:hover { color: var(--rm-lighter); }
body.dark,
.dark #wrapper,
.dark #content,
.dark .modal-content,
.dark .css3-spinner { background-color: var(--rm-grey-38); }
.dark .line { border-top-color: var(--rm-white-10); }
.dark .section,
.section.dark {
	background-color: var(--rm-grey-28);
	border-color: var(--rm-white-10);
}
.dark .well .line { border-color: var(--rm-white-08); }
.dark .entry { border-bottom-color: var(--rm-white-08); }
.dark #comments { border-top-color: var(--rm-white-08); }
.dark td.actions { background-color: var(--rm-black-20); }
.dark .events .entry {
	background-color: var(--rm-black-20);
	border-bottom-color: var(--rm-black-10);
}
.dark .button:hover { background-color: var(--rm-black-30); }
.dark .i-rounded,
.dark .i-circled { background-color: var(--rm-grey-49); }
.dark .i-rounded:hover,
.dark .i-circled:hover {
	background-color: var(--rm-accent);
	color: var(--rm-white);
	text-shadow: 1px 1px 1px var(--rm-black-20);
	box-shadow: 0 0 0 var(--rm-black-20);
}
.dark .i-plain {
	color: var(--rm-white);
	text-shadow: 1px 1px 1px var(--rm-black-20);
}
.dark .i-plain:hover { color: var(--rm-grey-dd); }
.dark .social-icon {
	color: var(--rm-grey-dd) !important;
	border-color: var(--rm-grey-dd);
}
.dark .social-icon i:last-child { color: var(--rm-white) !important; }
.dark .social-icon:hover {
	color: var(--rm-white) !important;
	border-color: transparent;
}
.dark label { color: var(--rm-grey-bb); }
.dark .counter { text-shadow: 1px 1px 1px var(--rm-black-10); }
.dark .fancy-title h1,
.dark .fancy-title h2,
.dark .fancy-title h3,
.dark .fancy-title h4,
.dark .fancy-title h5,
.dark .fancy-title h6 { background-color: var(--rm-grey-38); }
.dark .divider { color: var(--rm-white-15); }
.dark .divider:after { border-top-color: var(--rm-white-10); }
.dark .quote:before { color: var(--rm-white-10); }
.dark .highlight { background-color: var(--rm-black-20); }
.dark .widget h4 { color: var(--rm-grey-dd); }
.dark .widget p { opacity: 0.8; }
.dark mark {
	background: var(--rm-black-50);
	color: var(--rm-white);
}
.dark kbd { background-color: var(--rm-white-10); }
.dark .table > thead > tr > th,
.dark .table > tbody > tr > th,
.dark .table > tfoot > tr > th,
.dark .table > thead > tr > td,
.dark .table > tbody > tr > td,
.dark .table > tfoot > tr > td { border-top-color: var(--rm-white-10); }
.dark .table > thead > tr > th { border-bottom-color: var(--rm-white-10); }
.dark .table > tbody + tbody { border-top-color: var(--rm-white-10); }
.dark .table .table { background-color: var(--rm-black-20); }
.dark .table-hover > tbody > tr:hover > td,
.dark .table-hover > tbody > tr:hover > th { background-color: var(--rm-black-10); }
.dark .table > thead > tr > td.active,
.dark .table > tbody > tr > td.active,
.dark .table > tfoot > tr > td.active,
.dark .table > thead > tr > th.active,
.dark .table > tbody > tr > th.active,
.dark .table > tfoot > tr > th.active,
.dark .table > thead > tr.active > td,
.dark .table > tbody > tr.active > td,
.dark .table > tfoot > tr.active > td,
.dark .table > thead > tr.active > th,
.dark .table > tbody > tr.active > th,
.dark .table > tfoot > tr.active > th { background-color: var(--rm-black-10); }
.dark .table-hover > tbody > tr > td.active:hover,
.dark .table-hover > tbody > tr > th.active:hover,
.dark .table-hover > tbody > tr.active:hover > td,
.dark .table-hover > tbody > tr.active:hover > th { background-color: var(--rm-white-10); }
@media (max-width: 767px) {
	.table-responsive { border-color: var(--rm-white-10); }
}
.dark legend {
	color: var(--rm-grey-dd);
	border-bottom-color: var(--rm-white-10);
}
.dark output { color: var(--rm-grey-99); }
.dark .form-control:not(.not-dark),
.dark .sm-form-control:not(.not-dark) {
	color: var(--rm-grey-99);
	background-color: var(--rm-black-20);
	border-color: var(--rm-black-25);
}
.dark .form-control:not(.not-dark) option,
.dark .sm-form-control:not(.not-dark) option { background-color: var(--rm-grey-28); }
.dark .form-control:not(.not-dark):active,
.dark .form-control:not(.not-dark):focus,
.dark .sm-form-control:not(.not-dark):active,
.dark .sm-form-control:not(.not-dark):focus {
	background-color: var(--rm-black-30);
	border-color: var(--rm-black-25) !important;
}
/* (placeholders: #AAAAAA, 5.05:1 on the read-only fields' #383838 - #666 was 2.04:1 there, 2.99:1 on the dialogs' fields; some
   states are shown only as placeholder text, e.g. Administrator Tools' 'No API Key has been created' - J-35) */
.dark .form-control:not(.not-dark)::-moz-placeholder { color: var(--rm-grey-aa); }
.dark .form-control:not(.not-dark):-ms-input-placeholder { color: var(--rm-grey-aa); }
.dark .form-control:not(.not-dark)::-webkit-input-placeholder { color: var(--rm-grey-aa); }
.dark .sm-form-control:not(.not-dark)::-moz-placeholder { color: var(--rm-grey-aa); }
.dark .sm-form-control:not(.not-dark):-ms-input-placeholder { color: var(--rm-grey-aa); }
.dark .sm-form-control:not(.not-dark)::-webkit-input-placeholder { color: var(--rm-grey-aa); }
.dark .form-control:not(.not-dark)[disabled],
.dark .form-control:not(.not-dark)[readonly],
.dark fieldset[disabled] .form-control:not(.not-dark),
.dark .sm-form-control:not(.not-dark)[disabled],
.dark .sm-form-control:not(.not-dark)[readonly],
.dark fieldset[disabled] .sm-form-control:not(.not-dark) { background-color: var(--rm-white-10); }
.dark .input-group .form-control.error:not(.not-dark) { color: var(--rm-field-error); }
.dark .sm-form-control.error:not(.not-dark) { border-color: var(--rm-field-error) !important; }
.dark .form-control.error:not(.not-dark)::-moz-placeholder { color: var(--rm-field-error-placeholder); }
.dark .form-control.error:not(.not-dark):-ms-input-placeholder { color: var(--rm-field-error-placeholder); }
.dark .form-control.error:not(.not-dark)::-webkit-input-placeholder { color: var(--rm-field-error-placeholder); }
.dark .btn:hover,
.dark .btn:focus { color: var(--rm-white); }
.dark .btn-link:hover,
.dark .btn-link:focus { color: var(--rm-lighter); }
.dark .dropdown-menu {
	background-color: var(--rm-dark);
	border-color: var(--rm-grey-3f);
}
.dark .dropdown-item { color: var(--rm-grey-dd); }
.dark .dropdown-item:hover,
.dark .dropdown-item:focus {
	color: var(--rm-lighter);
	background-color: var(--rm-white-10);
}
.dark .nav > li > a:hover,
.dark .nav > li > a:focus,
.dark .nav .open > a,
.dark .nav .open > a:hover,
.dark .nav .open > a:focus { background-color: var(--rm-black-20); }
.dark .nav-tabs { border-bottom-color: var(--rm-white-15); }
.dark .nav-tabs > li > a:hover {
	border-color: var(--rm-white-20);
	border-bottom: none;
}
.dark .nav-tabs > li.active > a,
.dark .nav-tabs > li.active > a:hover,
.dark .nav-tabs > li.active > a:focus {
	color: var(--rm-grey-dd);
	background-color: var(--rm-grey-38);
	border: var(--rm-border-width) solid var(--rm-white-20);
	border-bottom-color: var(--rm-grey-38);
}
.dark .page-link {
	color: var(--rm-grey-bb);
	background-color: var(--rm-white-10);
	border-color: var(--rm-mid-grey);
}
.dark .page-link:hover,
.dark .page-link:focus {
	color: var(--rm-lighter);
	background-color: var(--rm-black-10);
}
.dark .disabled .page-link,
.dark .disabled .page-link:hover,
.dark .disabled .page-link:focus {
	color: var(--rm-grey-99);
	background-color: var(--rm-white-20);
	border-color: var(--rm-grey-77);
}
.dark .thumbnail {
	background-color: var(--rm-white-15);
	border-color: var(--rm-white-10);
}
.dark .thumbnail .caption { color: var(--rm-lighter); }
.dark .progress { background-color: var(--rm-white-15); }
.dark .card { background-color: var(--rm-black-20); }
.dark .card > .card-body + .table,
.dark .card > .card-body + .table-responsive { border-top-color: var(--rm-white-10); }
.dark .btn-close {
	opacity: 1;
	color: var(--rm-black-15);
	text-shadow: 0 1px 0 var(--rm-black-20);
}
.dark .btn-close:hover,
.dark .btn-close:focus {
	--rm-btn-close-dark-hover: rgba(0, 0, 0, 0.4);
	color: var(--rm-btn-close-dark-hover);
}
.dark .modal-content { border-color: var(--rm-grey-55); }
.dark .modal-header { border-bottom-color: var(--rm-white-15); }
.dark .modal-footer { border-top-color: var(--rm-white-15); }
.dark .popover {
	background-color: var(--rm-grey-28);
	border-color: var(--rm-grey-49);
}
.dark .popover.top > .arrow { border-top-color: var(--rm-grey-49); }
.dark .popover.top > .arrow:after { border-top-color: var(--rm-grey-28); }
.dark .popover.right > .arrow { border-right-color: var(--rm-grey-49); }
.dark .popover.right > .arrow:after { border-right-color: var(--rm-grey-28); }
.dark .popover.bottom > .arrow { border-bottom-color: var(--rm-grey-49); }
.dark .popover.bottom > .arrow:after { border-bottom-color: var(--rm-grey-28); }
.dark .popover.left > .arrow { border-left-color: var(--rm-grey-49); }
.dark .popover.left > .arrow:after { border-left-color: var(--rm-grey-28); }

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

.animated {
	opacity: 1;
	animation-duration: var(--rm-duration-slow);
	animation-fill-mode: both;
}

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

@media (max-width: 1199.98px) {
	canvas {
		max-width: 100%;
		height: auto !important;
	}
}
@media (max-width: 991.98px) {
	.product { width: 33.33333333%; }
}
@media (max-width: 767.98px) {
	.col_full,
	.col_half,
	.col_one_third {
		width: 100%;
		margin-right: 0;
		float: none;
		margin-bottom: var(--rm-space-7) !important;
	}
}

/* ---- site-after-icons.css: Colors Replace the HEX Code with your Desired Color HEX ---- */

a,
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),
#primary-menu ul li:hover > a,
#primary-menu ul li.current > a,
#primary-menu div ul li:hover > a,
#primary-menu div ul li.current > a,
#primary-menu ul ul li:hover > a,
.btn-link { color: var(--theme-color); }
/* Links on dark backgrounds (Step 7, 6 Oct 2026; UI Code Style Guide 4.5): the dialogs, the .dark boxes and the dark pages show text
   links in --rm-link-on-dark, the Recuro orange made lighter (WCAG AA: 6.2:1 on the dialogs' #222, 4.9:1 on #333, 6.7:1 on the
   page; the theme orange had 3.6:1, 2.9:1 and 3.9:1), and in light grey under the pointer, as .dark links already were (outside
   a .dark box a hovered link turned #222, invisible on the dark grey). :where() gives these rules the specificity of the plain
   link rules, so every link with a colour of its own (buttons, paging, menus, drop-down rows, the sign-in buttons) keeps it */
:where(.dark, .modal-content, .my_background_image, .rm-page--dark) a { color: var(--rm-link-on-dark); }
:where(.dark, .modal-content, .my_background_image, .rm-page--dark) a:hover { color: var(--rm-lighter); }
.color { color: var(--theme-color) !important; }
.button:not(.button-white):not(.button-dark):not(.button-border):not(.button-black):not(.button-red):not(.button-teal):not(.button-yellow):not(.button-green):not(.button-brown):not(.button-aqua):not(.button-purple):not(.button-leaf):not(.button-pink):not(.button-blue):not(.button-dirtygreen):not(.button-amber):not(.button-lime),
.i-rounded:hover,
.i-circled:hover,
#gotoTop:hover,
.dark .i-rounded:hover,
.dark .i-circled:hover,
input.switch-toggle-round:checked + label:before,
.entry:after { background-color: var(--theme-color); }
.page-item.active .page-link,
.page-link:hover,
.page-link:focus { background-color: var(--theme-color) !important; }
.border-color,
.page-item.active .page-link,
.page-link:hover,
.page-link:focus { border-color: var(--theme-color) !important; }

/* ---- site-after-icons.css: from the theme's css/components/radio-checkbox.css ---- */

.radio-style {
	opacity: 0;
	position: absolute;
}
.radio-style,
.radio-style-2-label {
	display: inline-block;
	vertical-align: middle;
	margin: var(--rm-space-1);
	cursor: pointer;
}
.radio-style-2-label { position: relative; }
.radio-style-2-label:before {
	content: '';
	background: var(--rm-white);
	border: 2px solid var(--rm-grey-dd);
	display: inline-block;
	vertical-align: middle;
	width: 24px;
	height: 24px;
	padding: 4px;
	margin-right: var(--rm-space-2);
	line-height: 1;
	text-align: center;
	border-radius: 50%;
}
.radio-style-2-label.radio-small:before {
	border: 2px solid var(--rm-grey-dd);
	width: 16px;
	height: 16px;
	margin: 0 8px 1px 0;
}
.radio-style:checked + .radio-style-2-label:before {
	background: var(--rm-grey-cc);
	box-shadow: inset 0px 0px 0px 4px var(--rm-white);
}
.radio-style:checked + .radio-style-2-label.radio-small:before { box-shadow: inset 0px 0px 0px 2px var(--rm-white); }