/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/*
 * Custom Style Sheet - Use this file to style your content
 */


/* Custom Logo
----------------------------------------------------------------------------------------------------*/

 .custom-logo {
	display: inline-block;
	width: 180px;
	height: 60px;
	background: url(../../../images/yootheme/logo.png) 50% 50% no-repeat;
	background-size: contain;
}

/* Only Phones (Portrait) */
@media (max-width: 380px) {

	.custom-logo { width: 145px; }
	
}


/* Custom Logo
----------------------------------------------------------------------------------------------------*/

#headerbar .module { font-size: 85%;  margin-bottom: 0;  
  margin-top: -20px;  }



/* Slideshow Tabs Custom Backgrounds
----------------------------------------------------------------------------------------------------*/

.tab-custom {
	min-height: 270px;
	padding: 30px 460px 30px 30px;
	background-position: 100% 50%;
	background-repeat: no-repeat;
}

.tab1 { background-image: url(../../../images/yootheme/demo/slideshow/image1.png); }
.tab2 { background-image: url(../../../images/yootheme/demo/slideshow/image2.png); }
.tab3 { background-image: url(../../../images/yootheme/demo/slideshow/image3.png); }
.tab4 { background-image: url(../../../images/yootheme/demo/slideshow/image4.png); }
.tab5 { background-image: url(../../../images/yootheme/demo/slideshow/image5.png); }

.tab-custom { background-size: 570px 420px; }

.tab-custom h1,
.tab-custom h2 { margin-top: 0; }
.tab-custom h1 { margin-bottom: 10px; }
.tab-custom h2 { font-size: 25px; line-height: 25px; }

.tab-custom p {
	margin: 30px 0;
	line-height: 25px;
	font-size: 18px;
}
.tab-custom p:last-child { margin-bottom: 0; }

.tab-custom .button-default,
.tab-custom .button-primary { font-size: 16px; }

/* Only Phones and Tablets (Portrait) */
@media (max-width: 768px) {

	.tab-custom {
		padding-right: 30px;
		background: none;
	}
}


/* Bottom-B Custom Module Backgrounds 
----------------------------------------------------------------------------------------------------*/

.demo-box1,
.demo-box2 {
	margin: -20px!important;
	padding: 20px 120px 10px 20px;
	background-position: 100% 0;
	background-repeat: no-repeat;
}

.demo-box1 { background-image: url(../../../images/yootheme/demo/bg_box1.png); }
.demo-box2 { background-image: url(../../../images/yootheme/demo/bg_box2.png); }


#logo > img {  
  padding-left: 80px;  
}
/* BEGIN kunena-dark */
/* Kunena forum and Bootstrap 5 components on the dark Drive theme.
   The template sets data-bs-theme="dark" on <html>; this block adapts the surfaces to the translucent Drive boxes.
----------------------------------------------------------------------------------------------------*/

:root[data-bs-theme="dark"] {
	--bs-body-color: #d6dadd;
	--bs-link-color: #ffeb9e;
	--bs-link-color-rgb: 255, 235, 158;
	--bs-link-hover-color: #fff9e5;
	--bs-link-hover-color-rgb: 255, 249, 229;
	--bs-border-color: rgba(255, 255, 255, 0.2);
	--bs-secondary-bg: rgba(255, 255, 255, 0.08);
	--bs-tertiary-bg: rgba(255, 255, 255, 0.05);
	--bs-secondary-color: rgba(214, 218, 221, 0.82);
}

/* Surfaces */
html #kunena.layout .card,
html #kunena.layout .offcanvas,
html #kunena.layout .modal-content {
	--bs-card-bg: rgba(0, 0, 0, 0.4);
	--bs-card-cap-bg: rgba(255, 255, 255, 0.08);
	--bs-card-border-color: rgba(255, 255, 255, 0.18);
	--bs-card-color: #d6dadd;
	--bs-offcanvas-bg: #1f2020;
	--bs-offcanvas-color: #d6dadd;
	color: #d6dadd;
}

html #kunena.layout .navbar,
html #kunena.layout .navbar.bg-light,
html #kunena.layout .bg-light {
	background-color: rgba(0, 0, 0, 0.45) !important;
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #d6dadd;
}

html #kunena.layout .navbar .nav-link,
html #kunena.layout .navbar-light .navbar-nav .nav-link,
html #kunena.layout .navbar-brand { color: #ffeb9e; }

html #kunena.layout .navbar .nav-link:hover,
html #kunena.layout .navbar .nav-link.active { color: #fff; }

html #kunena.layout .navbar-light .navbar-toggler { border-color: rgba(255, 255, 255, 0.4); }
html #kunena.layout .navbar-toggler-icon { filter: invert(1); }

html #kunena.layout .dropdown-menu {
	--bs-dropdown-bg: #1f2020;
	--bs-dropdown-color: #d6dadd;
	--bs-dropdown-border-color: rgba(255, 255, 255, 0.2);
	--bs-dropdown-link-color: #ffeb9e;
	--bs-dropdown-link-hover-color: #fff;
	--bs-dropdown-link-hover-bg: rgba(255, 235, 158, 0.15);
	--bs-dropdown-divider-bg: rgba(255, 255, 255, 0.15);
}

/* Tables */
html #kunena.layout .table {
	--bs-table-color: #d6dadd;
	--bs-table-bg: transparent;
	--bs-table-border-color: rgba(255, 255, 255, 0.14);
	--bs-table-striped-bg: rgba(255, 255, 255, 0.04);
	--bs-table-striped-color: #d6dadd;
	--bs-table-hover-bg: rgba(255, 235, 158, 0.08);
	--bs-table-hover-color: #fff;
}

html #kunena.layout .table td,
html #kunena.layout .table th { color: #d6dadd; }

/* Forms */
html #kunena.layout .form-control,
html #kunena.layout .form-select,
html #kunena.layout textarea,
html #kunena.layout input[type="text"],
html #kunena.layout input[type="password"],
html #kunena.layout input[type="email"],
html #kunena.layout input[type="search"],
html #kunena.layout input[type="url"],
html #kunena.layout input[type="number"],
html #kunena.layout select {
	background-color: rgba(0, 0, 0, 0.55);
	border-color: rgba(255, 255, 255, 0.28);
	color: #f1f1f1;
}

html #kunena.layout .form-control::placeholder,
html #kunena.layout textarea::placeholder { color: rgba(214, 218, 221, 0.6); }

html #kunena.layout .form-control:focus,
html #kunena.layout .form-select:focus,
html #kunena.layout textarea:focus,
html #kunena.layout input:focus,
html #kunena.layout select:focus {
	background-color: rgba(0, 0, 0, 0.7);
	border-color: #ffeb9e;
	box-shadow: 0 0 0 0.2rem rgba(255, 235, 158, 0.25);
	color: #fff;
}

html #kunena.layout .input-group-text {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.28);
	color: #ffeb9e;
}

/* Buttons */
html #kunena.layout .btn-light,
html #kunena.layout .btn-default,
html #kunena.layout .btn-secondary {
	--bs-btn-color: #ffeb9e;
	--bs-btn-bg: rgba(255, 255, 255, 0.1);
	--bs-btn-border-color: rgba(255, 255, 255, 0.28);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: rgba(255, 235, 158, 0.22);
	--bs-btn-hover-border-color: #ffeb9e;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: rgba(255, 235, 158, 0.3);
	--bs-btn-active-border-color: #ffeb9e;
	--bs-btn-disabled-color: rgba(214, 218, 221, 0.5);
	--bs-btn-disabled-bg: rgba(255, 255, 255, 0.05);
	--bs-btn-disabled-border-color: rgba(255, 255, 255, 0.15);
}

html #kunena.layout .btn-outline-primary,
html #kunena.layout .btn-outline-secondary,
html #kunena.layout .btn-link {
	--bs-btn-color: #ffeb9e;
	--bs-btn-border-color: #c9b36a;
	--bs-btn-hover-color: #1b1b1b;
	--bs-btn-hover-bg: #ffeb9e;
	--bs-btn-hover-border-color: #ffeb9e;
	--bs-btn-active-color: #1b1b1b;
	--bs-btn-active-bg: #ffeb9e;
	--bs-btn-active-border-color: #ffeb9e;
}

html #kunena.layout .btn-primary {
	--bs-btn-color: #1b1b1b;
	--bs-btn-bg: #ffeb9e;
	--bs-btn-border-color: #ffeb9e;
	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: #fff3c4;
	--bs-btn-hover-border-color: #fff3c4;
	--bs-btn-active-color: #000;
	--bs-btn-active-bg: #ffe27a;
	--bs-btn-active-border-color: #ffe27a;
}

/* Breadcrumbs, pagination, badges */
html #kunena.layout .breadcrumb { --bs-breadcrumb-divider-color: rgba(214, 218, 221, 0.6); --bs-breadcrumb-item-active-color: #d6dadd; }

html #kunena.layout .pagination {
	--bs-pagination-color: #ffeb9e;
	--bs-pagination-bg: rgba(0, 0, 0, 0.35);
	--bs-pagination-border-color: rgba(255, 255, 255, 0.2);
	--bs-pagination-hover-color: #fff;
	--bs-pagination-hover-bg: rgba(255, 235, 158, 0.2);
	--bs-pagination-hover-border-color: #ffeb9e;
	--bs-pagination-active-color: #1b1b1b;
	--bs-pagination-active-bg: #ffeb9e;
	--bs-pagination-active-border-color: #ffeb9e;
	--bs-pagination-disabled-color: rgba(214, 218, 221, 0.5);
	--bs-pagination-disabled-bg: rgba(0, 0, 0, 0.25);
	--bs-pagination-disabled-border-color: rgba(255, 255, 255, 0.12);
}

/* User names by role: lighter colors for the dark background */
html #kunena.layout a.kwho-user,
html #kunena.layout span.kwho-user { color: #9fd0ff; }
html #kunena.layout a.kwho-guest,
html #kunena.layout span.kwho-guest { color: #c4c4c4; }
html #kunena.layout a.kwho-admin,
html #kunena.layout span.kwho-admin { color: #ff9e92; }
html #kunena.layout a.kwho-moderator,
html #kunena.layout span.kwho-moderator,
html #kunena.layout a.kwho-globalmoderator,
html #kunena.layout span.kwho-globalmoderator { color: #8be4a0; }
html #kunena.layout a.kwho-banned,
html #kunena.layout span.kwho-banned { color: #c9a0a0; }

/* Topic messages */
html #kunena.layout .mykmsg-header,
html #kunena.layout .kmsg-header {
	background-color: rgba(255, 255, 255, 0.1);
	color: #d6dadd;
}

html #kunena.layout .text-muted,
html #kunena.layout .small.text-muted { color: rgba(214, 218, 221, 0.75) !important; }

html #kunena.layout blockquote,
html #kunena.layout .kmsgtext-quote {
	background-color: rgba(255, 255, 255, 0.06);
	border-left: 3px solid #c9b36a;
	color: #d6dadd;
}

html #kunena.layout pre,
html #kunena.layout code,
html #kunena.layout .kmsgtext-code {
	background-color: rgba(0, 0, 0, 0.5);
	border-color: rgba(255, 255, 255, 0.2);
	color: #f0e6c0;
}

html #kunena.layout hr { border-color: rgba(255, 255, 255, 0.25); opacity: 1; }

/* Outline buttons and badges in status colors: lighter variants for the dark background */
html #kunena.layout .btn-outline-success {
	--bs-btn-color: #7fe0a8; --bs-btn-border-color: #4fb67f;
	--bs-btn-hover-color: #06240f; --bs-btn-hover-bg: #7fe0a8; --bs-btn-hover-border-color: #7fe0a8;
	--bs-btn-active-color: #06240f; --bs-btn-active-bg: #7fe0a8; --bs-btn-active-border-color: #7fe0a8;
}
html #kunena.layout .btn-outline-danger {
	--bs-btn-color: #ff9e92; --bs-btn-border-color: #d9665a;
	--bs-btn-hover-color: #2a0a06; --bs-btn-hover-bg: #ff9e92; --bs-btn-hover-border-color: #ff9e92;
	--bs-btn-active-color: #2a0a06; --bs-btn-active-bg: #ff9e92; --bs-btn-active-border-color: #ff9e92;
}
html #kunena.layout .btn-outline-warning {
	--bs-btn-color: #ffd36b; --bs-btn-border-color: #cfa23a;
	--bs-btn-hover-color: #2a2000; --bs-btn-hover-bg: #ffd36b; --bs-btn-hover-border-color: #ffd36b;
}
html #kunena.layout .btn-outline-info {
	--bs-btn-color: #7fdcf0; --bs-btn-border-color: #3ea9c2;
	--bs-btn-hover-color: #06232b; --bs-btn-hover-bg: #7fdcf0; --bs-btn-hover-border-color: #7fdcf0;
}
html #kunena.layout .badge.bg-info,
html #kunena.layout .badge.bg-warning,
html #kunena.layout .badge.bg-light { color: #10252b !important; }
html #kunena.layout .badge.bg-secondary { background-color: rgba(255, 255, 255, 0.22) !important; color: #f1f1f1 !important; }
html #kunena.layout .page-item.disabled .page-link { color: rgba(214, 218, 221, 0.72); }

/* Kunena sets explicit colors on outline buttons; make them follow the button variables again */
html #kunena.layout .btn[class*="btn-outline-"] { color: var(--bs-btn-color); border-color: var(--bs-btn-border-color); }
html #kunena.layout .btn[class*="btn-outline-"]:hover,
html #kunena.layout .btn[class*="btn-outline-"]:focus-visible,
html #kunena.layout .btn[class*="btn-outline-"].active {
	color: var(--bs-btn-hover-color);
	background-color: var(--bs-btn-hover-bg);
	border-color: var(--bs-btn-hover-border-color);
}

/* Joomla's fancy select (Choices.js) in forms of the user profile etc. */
html #system .choices__inner,
html #system .choices__list--dropdown,
html #system .choices__list[aria-expanded] {
	background-color: #1f2020;
	border-color: rgba(255, 255, 255, 0.28);
	color: #f1f1f1;
}
html #system .choices__item { color: #f1f1f1; }
html #system .choices__input { background-color: transparent; color: #f1f1f1; }
html #system .choices__list--dropdown .choices__item--selectable.is-highlighted,
html #system .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background-color: rgba(255, 235, 158, 0.18); }
html #system .choices__list--multiple .choices__item { background-color: rgba(255, 235, 158, 0.25); border-color: #c9b36a; color: #fff; }
/* END kunena-dark */

/* BEGIN galerie */
/* Image gallery (article with .galerie grids) with lightbox, see js/template.js
----------------------------------------------------------------------------------------------------*/

.galerie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px;
	margin: 10px 0 30px;
}

.galerie .galerie-item {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(0, 0, 0, 0.35);
}

.galerie .galerie-item img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.25s, opacity 0.25s;
}

.galerie .galerie-item:hover img,
.galerie .galerie-item:focus img { transform: scale(1.06); opacity: 0.85; }
.galerie .galerie-item:focus-visible { outline: 2px solid #ffeb9e; outline-offset: 1px; }

#galerie-lightbox {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.9);
}

#galerie-lightbox.open { display: flex; }

#galerie-lightbox img {
	max-width: 92vw;
	max-height: 86vh;
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 0 30px #000;
}

#galerie-lightbox button {
	position: absolute;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(0, 0, 0, 0.6);
	color: #ffeb9e;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}

#galerie-lightbox button:hover,
#galerie-lightbox button:focus-visible { background: #ffeb9e; color: #1b1b1b; outline: 0; }

#galerie-lightbox .gl-close { top: 14px; right: 14px; }
#galerie-lightbox .gl-prev { top: 50%; left: 14px; margin-top: -24px; }
#galerie-lightbox .gl-next { top: 50%; right: 14px; margin-top: -24px; }

#galerie-lightbox .gl-count {
	position: absolute;
	bottom: 12px;
	left: 0;
	right: 0;
	color: #d6dadd;
	font-size: 14px;
	text-align: center;
}
/* END galerie */

/* BEGIN gildenchat */
/* "New messages" indicator on the chat menu item: yellow top edge and a thin frame, like the selected menu item but subtler */
.menu-dropdown li.chat-new .level1:before {
	content: "";
	display: block;
	position: absolute;
	top: -9px;
	right: 0;
	left: 0;
	width: 100%;
	height: 14px;
	background: url(../images/menu_dropdown_level1_active_color.png) 0 0 repeat-x;
	opacity: 0.85;
}

.menu-dropdown li.chat-new > a.level1 {
	box-shadow: inset 0 0 0 1px rgba(255, 235, 158, 0.6);
	animation: gildenchat-pulse 2.8s ease-in-out infinite;
}

@keyframes gildenchat-pulse {
	0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 235, 158, 0.65); }
	50%      { box-shadow: inset 0 0 0 1px rgba(255, 235, 158, 0.2); }
}

@media (prefers-reduced-motion: reduce) {
	.menu-dropdown li.chat-new > a.level1 { animation: none; }
}
/* END gildenchat */

/* BEGIN joomla-forms */
/* Joomla user forms (login, registration, reset/remind, profile) in the Drive look.
   Bootstrap is not loaded by this template, so the few Bootstrap classes these forms use are defined here, scoped to the form pages.
----------------------------------------------------------------------------------------------------*/

html #system :is(.login, .registration, .reset, .remind, .reset-confirm, .reset-complete, .profile, .profile-edit) {
	--gf-text: #d6dadd;
	--gf-accent: #ffeb9e;
	--gf-line: rgba(255, 255, 255, 0.22);
	--gf-field: rgba(0, 0, 0, 0.55);
	color: var(--gf-text);
}

/* layout */
html #system :is(.login, .registration, .reset, .remind, .reset-confirm, .reset-complete, .profile-edit) fieldset {
	margin: 0 0 20px;
	padding: 14px 20px 8px;
	border: 1px solid var(--gf-line);
	background: rgba(0, 0, 0, 0.25);
	min-width: 0;
}

html #system :is(.login, .registration, .reset, .remind, .reset-confirm, .reset-complete, .profile-edit) legend {
	width: auto;
	margin: 0;
	padding: 0 8px;
	border: 0;
	color: var(--gf-accent);
	font-size: 20px;
	line-height: 24px;
}

html #system :is(.login, .registration, .reset, .remind, .reset-confirm, .reset-complete, .profile-edit) .control-group { margin: 0 0 14px; }

html #system :is(.login, .registration, .reset, .remind, .reset-confirm, .reset-complete, .profile-edit) .control-label label {
	display: block;
	margin: 0 0 4px;
	color: var(--gf-text);
}

html #system :is(.login, .registration, .reset, .remind, .reset-confirm, .reset-complete, .profile-edit) .control-label .star,
html #system :is(.login, .registration, .reset, .remind, .reset-confirm, .reset-complete, .profile-edit) .red { color: #ff9e92; }

html #system :is(.login, .registration, .reset, .remind, .reset-confirm, .reset-complete, .profile-edit) .controls { max-width: 520px; }

/* fields */
html #system :is(.login, .registration, .reset, .remind, .reset-confirm, .reset-complete, .profile-edit) :is(input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], select, textarea, .form-control, .form-select) {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 0;
	background-color: var(--gf-field);
	box-shadow: none;
	color: #f1f1f1;
	font: inherit;
	font-size: 16px;
	color-scheme: dark;
}

html #system :is(.login, .registration, .reset, .remind, .reset-confirm, .reset-complete, .profile-edit) textarea { height: auto; padding: 8px 12px; }

html #system :is(.login, .registration, .reset, .remind, .reset-confirm, .reset-complete, .profile-edit) :is(input, select, textarea):focus {
	outline: 0;
	border-color: var(--gf-accent);
	background-color: rgba(0, 0, 0, 0.7);
	box-shadow: 0 0 0 0.2rem rgba(255, 235, 158, 0.25);
	color: #fff;
}

html #system :is(.login, .registration, .reset, .remind, .reset-confirm, .reset-complete, .profile-edit) :is(input, textarea)::placeholder { color: rgba(214, 218, 221, 0.6); }

/* red border only after Joomla's validation marked the field as invalid */
html #system :is(.login, .registration, .reset, .remind, .reset-confirm, .reset-complete, .profile-edit) :is(input, select, textarea).invalid,
html #system :is(.login, .registration, .reset, .remind, .reset-confirm, .reset-complete, .profile-edit) :is(input, select, textarea)[aria-invalid="true"] { border-color: #d9665a; }

/* password field with show/hide button */
html #system .input-group { display: flex; align-items: stretch; width: 100%; }
html #system .input-group > .form-control,
html #system .input-group > input { flex: 1 1 auto; min-width: 0; }
html #system .input-group > .btn { flex: 0 0 auto; margin-left: -1px; }

html #system .password-group meter { display: block; width: 100%; max-width: 520px; height: 8px; margin: 6px 0 0; }
html #system .password-group output { display: block; margin-top: 2px; color: rgba(214, 218, 221, 0.8); font-size: 13px; }

html #system .input-password-toggle { min-width: 44px; padding: 0; }
html #system .input-password-toggle .icon-eye:before { content: "\1F441"; font-size: 18px; }
html #system .input-password-toggle .icon-eye-slash:before { content: "\1F648"; font-size: 18px; }

html #system .visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* check boxes ("remember me") */
html #system .form-check { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
html #system .form-check-input { width: 18px; height: 18px; margin: 0; accent-color: #ffeb9e; }
html #system .form-check-label { margin: 0; }

/* buttons */
html #system .btn {
	display: inline-block;
	box-sizing: border-box;
	min-height: 40px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 0;
	background: rgba(255, 255, 255, 0.1);
	color: #ffeb9e;
	font: inherit;
	font-size: 16px;
	line-height: 38px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

html #system .btn:hover,
html #system .btn:focus-visible { background: rgba(255, 235, 158, 0.22); border-color: #ffeb9e; color: #fff; outline: 0; }

html #system .btn-primary { background: #ffeb9e; border-color: #ffeb9e; color: #1b1b1b; font-weight: bold; }
html #system .btn-primary:hover,
html #system .btn-primary:focus-visible { background: #fff3c4; border-color: #fff3c4; color: #000; }

html #system .btn-danger { border-color: #d9665a; color: #ff9e92; }
html #system .btn-danger:hover,
html #system .btn-danger:focus-visible { background: #ff9e92; border-color: #ff9e92; color: #2a0a06; }

html #system .btn-outline-primary { background: transparent; border-color: #c9b36a; }
html #system .btn-sm { min-height: 30px; padding: 0 10px; font-size: 14px; line-height: 28px; }
html #system .btn[disabled],
html #system .btn.disabled { opacity: 0.5; cursor: default; }

html #system .com-users-login__submit,
html #system .com-users-registration__submit,
html #system .com-users-reset__submit,
html #system .com-users-remind__submit,
html #system .com-users-profile__edit-submit { margin-top: 6px; }

/* links below the login form */
html #system .list-group { margin: 14px 0 0; padding: 0; list-style: none; }
html #system .list-group-item { display: block; padding: 4px 0; border: 0; background: transparent; }

/* small texts */
html #system :is(.login, .registration, .reset, .remind, .profile-edit) :is(.form-text, .small, .text-muted) { color: rgba(214, 218, 221, 0.78); font-size: 13px; }
html #system .bg-light { background: rgba(255, 255, 255, 0.08) !important; color: var(--gf-text, #d6dadd); }

/* profile view: definition list as table-like rows */
html #system .profile .dl-horizontal { margin: 0 0 20px; overflow: hidden; }
html #system .profile .dl-horizontal dt { float: left; clear: left; width: 220px; padding: 4px 0; color: rgba(214, 218, 221, 0.78); font-weight: normal; }
html #system .profile .dl-horizontal dd { margin: 0 0 0 240px; padding: 4px 0; }
html #system .profile fieldset { margin: 0 0 20px; padding: 14px 20px 8px; border: 1px solid var(--gf-line); background: rgba(0, 0, 0, 0.25); }
html #system .profile legend { width: auto; padding: 0 8px; border: 0; color: var(--gf-accent); font-size: 20px; }
html #system .profile .btn-toolbar { margin: 0 0 10px; }

/* the few Bootstrap utility classes used by the profile page (multi-factor section) */
html #system .profile-edit :is(.d-flex) { display: flex; }
html #system .profile-edit :is(.flex-wrap) { flex-wrap: wrap; }
html #system .profile-edit :is(.flex-column) { flex-direction: column; }
html #system .profile-edit :is(.align-items-center) { align-items: center; }
html #system .profile-edit :is(.flex-grow-1) { flex-grow: 1; }
html #system .profile-edit :is(.gap-2) { gap: 0.5rem; }
html #system .profile-edit :is(.gap-3) { gap: 1rem; }
html #system .profile-edit :is(.my-3) { margin-top: 1rem; margin-bottom: 1rem; }
html #system .profile-edit :is(.my-1) { margin-top: 0.25rem; margin-bottom: 0.25rem; }
html #system .profile-edit :is(.mx-1) { margin-left: 0.25rem; margin-right: 0.25rem; }
html #system .profile-edit :is(.me-1) { margin-right: 0.25rem; }
html #system .profile-edit :is(.m-0) { margin: 0; }
html #system .profile-edit :is(.p-0) { padding: 0; }
html #system .profile-edit :is(.p-2) { padding: 0.5rem; }
html #system .profile-edit :is(.pt-1) { padding-top: 0.25rem; }
html #system .profile-edit :is(.pt-2) { padding-top: 0.5rem; }
html #system .profile-edit :is(.pb-1) { padding-bottom: 0.25rem; }
html #system .profile-edit :is(.pb-2) { padding-bottom: 0.5rem; }
html #system .profile-edit :is(.px-3) { padding-left: 1rem; padding-right: 1rem; }
html #system .profile-edit :is(.border) { border: 1px solid var(--gf-line); }
html #system .profile-edit :is(.border-top) { border-top: 1px solid var(--gf-line); }
html #system .profile-edit :is(.img-fluid) { max-width: 100%; height: auto; }
html #system .profile-edit :is(.h4) { font-size: 18px; }
html #system .profile-edit .card { border: 1px solid var(--gf-line); background: rgba(0, 0, 0, 0.3); }
html #system .profile-edit .card-header { padding: 8px 12px; background: rgba(255, 255, 255, 0.08); }
html #system .profile-edit .card-body { padding: 10px 12px; }
html #system .float-end { float: right; }
html #system .btn-group { display: inline-flex; }
html #system .btn-group > .btn + .btn { margin-left: -1px; }

@media (max-width: 600px) {
	html #system .profile .dl-horizontal dt { float: none; width: auto; padding-bottom: 0; }
	html #system .profile .dl-horizontal dd { margin-left: 0; }
	html #system :is(.login, .registration, .reset, .remind, .reset-confirm, .reset-complete, .profile-edit) fieldset { padding: 12px 12px 6px; }
}
/* END joomla-forms */

/* BEGIN header-images */
/* Images in the header (logo) are never wider than the screen; on small screens the logo fills the header width */
html #header img { max-width: 100%; height: auto; box-sizing: border-box; }
html #header-responsive .logo { display: block; }
html #header-responsive .logo img { width: 100%; }
/* END header-images */