/* ##########################################
#####BuS CUSTOM STYLES - Updated 21.07.2024 #####
########################################### */

/* ############################
## CSS VARIABLES
############################### */

:root {
  /* Colors */
  --primary-color: forestgreen;
  --secondary-color: gold;
  --background-color: #ffffff;
  --text-color: #006363;
  --link-color: forestgreen;
  --link-hover-color: maroon;
  --border-color: #ccc;
  --highlight-color: #428bca;
  --footer-link-color: rgb(0, 143, 143);

  /* Typography */
  --font-family-sans: "itc-officina-sans-pro", sans-serif;
  --font-family-serif: "bc-novatica-cyr", sans-serif;
  --font-size-base: 1rem;
  --font-size-large: 1.2rem;
  --font-size-h1: 2rem;
  --font-size-h2: 1.5rem;
  --font-size-h3: 1.25rem;
  --font-size-h4: 1rem;

  /* Spacing */
  --spacing-small: 5px;
  --spacing-medium: 10px;
  --spacing-large: 15px;
  --spacing-xlarge: 20px;
}

/* ############################
## TYPOGRAPHY
############################### */

body,
a,
p,
li {
  font-family: var(--font-family-sans) !important;
}

#sp-main-body p,
a,
li {
  font-family: var(--font-family-sans) !important;
  font-size: var(--font-size-large);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-family-serif) !important;
  font-weight: 400 !important;
  font-style: normal;
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

a,
.uk-link {
  color: var(--link-color);
  text-decoration: none;
}

a:hover,
a:focus,
a:active,
.uk-link:hover,
.uk-link:focus,
.uk-link:active {
  color: var(--link-hover-color);
}
a.uk-link-heading:hover,
.uk-link-heading a:hover,
.uk-link-toggle:hover .uk-link-heading,
.uk-link-toggle:focus .uk-link-heading,
.uk-button-link {
  color: var(--link-hover-color);
}

.qx-btn {
  border-radius: 0px;
  border: none;
  color: var(--background-color);
}

/* ############################
## PAGE STRUCTURE
############################### */

html,
body {
  width: 100%;
  height: 100%;
}

body {
  height: auto;
}

.body-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.fa,
.far {
  padding-right: var(--spacing-small);
}

.tm-headerbar-top {
  padding: 0;
  border-top: 30px solid var(--secondary-color);
}

.tm-logo {
  height: 70px;
}

.logo-2 img {
  height: 70px;
  width: auto;
}

#sp-main-body {
  flex: 1 0 auto;
}

/* ############################
## HEADER
# NAVIGATION
############################### */

.fa-right-to-bracket::before,
.fa-sign-in-alt::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f2f6";
}

.container .sp-megamenu-wrapper {
  margin: 0 auto;
}

.tm-header .uk-navbar-container:not(.uk-navbar-transparent) {
  border-top: 1px solid var(--secondary-color);
  border-bottom: 1px solid var(--secondary-color);
}

.tm-header .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-nav > li > a:active,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:active {
  color: var(--primary-color);
}

.sp-megamenu-parent .sp-mega-group > li > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.sp-mega-group > li > a .sp-group-title {
  border-bottom: 1px solid var(--border-color);
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
  color: var(--primary-color);
}

#sp-header .uk-navbar-container a[href^="http"]::after,
#sp-header a[href^="http"]::after {
  content: "";
  width: 11px;
  height: 11px;
  margin-left: var(--spacing-small);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a.5.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

.sp-megamenu-parent > li {
  display: inline-block;
  position: relative;
  padding: 0;
  white-space: nowrap !important;
}

.uk-sticky .uk-panel {
  flex: 1;
}

.uk-sticky .uk-navbar-nav {
  justify-content: center;
}

.uk-navbar-dropdown {
  width: auto;
  padding: var(--spacing-medium) !important;
  background: var(--background-color);
  color: #666;
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.03);
  white-space: nowrap !important;
  border: 1px solid var(--border-color);
}

.uk-navbar {
  padding-top: 0px;
}

.uk-nav-secondary > li > a {
  font-size: var(--font-size-base);
  color: #111;
  padding: var(--spacing-small) 0;
}

.uk-nav.uk-nav-divider
  > :not(.uk-nav-divider)
  + :not(.uk-nav-header, .uk-nav-divider) {
  margin-top: var(--spacing-small);
  padding-top: var(--spacing-small);
  border-top: 1px solid #d7ecdd;
}

.uk-navbar-item,
.uk-navbar-nav > li > a,
.uk-navbar-toggle {
  font-size: 1.15rem !important;
}

.uk-navbar-center {
  padding-left: 0;
}

.uk-navbar-sticky {
  border-bottom: 1px solid #8a8a8a;
  box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.2);
  padding: 0;
  transition: all 0.5s ease;
}

.uk-navbar-sticky .uk-navbar {
  padding-top: 0;
}

.sticky-logo {
  display: none;
}

.uk-navbar-sticky .sticky-logo {
  display: none;
}

@media screen and (min-width: 1660px) {
  .uk-navbar-sticky .sticky-logo {
    display: flex;
  }
}

.uk-navbar-sticky .tm-logo {
  max-height: 2.75rem;
}

.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active > a {
  color: var(--primary-color);
}

/* ############################
## SUB-MENUS
############################### */

#sp-sub-menus {
  background-color: var(--background-color) !important;
  color: #121212 !important;
  padding: var(--spacing-xlarge) 0;
}

/* ############################
## HEADER
# BREADCRUMBS
############################### */

.uk-section {
  padding-top: var(--spacing-medium) !important;
  padding-bottom: var(--spacing-medium) !important;
}

.uk-breadcrumb > :nth-child(n + 2):not(.uk-first-column)::before {
  margin: 0 var(--spacing-small) !important;
}

/* ############################
## MAIN CONTENT
############################### */

#sp-main-body {
  padding: var(--spacing-medium) 0;
  margin-bottom: 60px;
  flex: 1 0 auto;
}

.com-content #sp-main-body {
  background-color: var(--background-color);
}

.page-header {
  display: none;
}

/* ############################
## RIGHT COLUMN
############################### */

#sp-right {
  border-left: 1px solid var(--border-color);
}

#sp-right .uk-card-title {
  margin-top: var(--spacing-xlarge);
  font-size: 24px;
  line-height: 1.4;
  border-bottom: 1px solid #121212;
}

#sp-right .sp-column > .uk-panel {
  background-color: var(--background-color);
  padding: 0 !important;
}

#sp-right ul.uk-nav-sub {
  padding-left: var(--spacing-medium);
}

.right-menu.uk-nav-default > li > a {
  color: #1d973a !important;
}

/* ############################
## CONTENT TOP to display modules.
############################### */

/* ############################
## CONTENT TOP to display modules.
############################### */

.sp-module-content-top {
  display: flex;
  justify-content: space-around;
  align-items: center; /* Optional: Align items vertically in the center */
  border: 1px solid var(--border-color);
  margin-bottom: var(--spacing-xlarge);
  background-color: #fff7df;
  padding: var(--spacing-medium) 0;
  border-radius: var(--spacing-medium);
  position: relative; /* Ensure the pseudo-element is positioned correctly */
  margin-bottom: 4rem;
}

.sp-module-content-top.clearfix::before,
.sp-module-content-top.clearfix::after {
  content: none;
  display: none;
}
.sp-module-content-top::after {
  content: "" !important;
  display: block !important;
  width: 100%;
  height: 3px;
  background-color: #ccc;
  position: absolute;
  bottom: -3rem;
  left: 0;
}
.sp-module-content-top h3 {
  font-family: var(--font-family-sans) !important;
  color: var(--primary-color);
  margin-bottom: var(--spacing-small);
  text-align: center;
}

/* ############################
## RIGHT COLUMN
############################### */

#sp-right {
  border-left: 1px solid var(--border-color);
}

#sp-right .uk-card-title {
  margin-top: var(--spacing-xlarge);
  font-size: 24px;
  line-height: 1.4;
  border-bottom: 1px solid #121212;
}

#sp-right .sp-column > .uk-panel {
  background-color: var(--background-color);
  padding: 0 !important;
}

#sp-right ul.uk-nav-sub {
  padding-left: var(--spacing-medium);
}

.right-menu.uk-nav-default > li > a {
  color: #1d973a !important;
}

/* Neues aus category settings */
.neues-aus-category .uk-grid-margin,
.neues-aus-category .uk-grid + .uk-grid,
.uk-grid > .uk-grid-margin {
  margin-top: 0;
}

.neues-aus-category .category-desc {
  padding: var(--spacing-medium) var(--spacing-large);
  border: 1px solid var(--primary-color);
  border-radius: var(--spacing-large);
}

.neues-aus-category .uk-article,
.neues-aus-category .view-category .uk-article {
  background: var(--background-color);
  padding: 0 !important;
  border-bottom: 1px solid #dedede;
}

.neues-aus-category .uk-margin-top {
  margin-top: 0px;
}

/* ############################
## BOTTOM1
############################### */

#qx-section-common-bottom {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: var(--spacing-large);
  padding-left: 0px;
  border-style: solid;
  border-top-width: 1px;
  border-color: #28a745;
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
}

#sp-bottom1 {
  background-color: #fefefe;
}

#sp-common-bottom {
  padding: var(--spacing-large) 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 0px;
}

#sp-bottom {
  padding: var(--spacing-xlarge) 0 !important;
  border-top: 1px solid var(--primary-color);
}

#sp-sub-menus {
  background-color: var(--background-color) !important;
  color: #121212 !important;
  padding: var(--spacing-xlarge) 0;
}

/* ############################
## FOOTER
############################### */

#sp-footer {
  color: var(--text-color);
  background-color: var(--background-color);
  width: 100%;
  padding: 0;
}

#sp-footer .site-footer {
  border-top: 2px solid var(--secondary-color);
}

#sp-footer .container {
  padding-left: 0;
  padding-right: 0;
}

#sp-footer a {
  color: var(--footer-link-color);
}
#sp-footer a:hover,
#sp-footer a:active,
#sp-footer a:focus {
  color: var(--link-hover-color);
}

footer .uk-subnav > * > :first-child {
  column-gap: 0.85em;
}
/* ############################
## GURU OVERRIDES
############################### */

/* Guru lesson footer navigation colors */
.guru-lesson-footer-prev,
.guru-lesson-footer-next {
  color: #ccc;
}

.guru-lesson-nav-lesson > span {
  color: #ccc;
}

/* ############################
## JEM Joomla Events management
############################### */

/* JEM list row settings */
.jem-list-row.jem-small-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.jem-event-info-small {
  padding-bottom: var(--spacing-medium);
}

.jem-list-row.jem-small-list > div {
  display: flex;
}

.jem-list-row.jem-small-list > div:last-child {
  margin-right: 0; /* Remove margin for the last element */
}

.jem-event-date,
.jem-event-title {
  flex: 1 50%;
  align-items: center;
}

.jem-event-info-small {
}

.jem-event-info-small:not(:last-child)::before {
}

/* ############################
## JEM CALENDAR MODULE
############################### */

/* JEM calendar table and cell settings */
.eventcalq {
  border: 1px solid var(--primary-color);
  border-radius: var(--spacing-large);
  padding: var(--spacing-medium);
  max-width: inherit;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--spacing-medium);
  font-family: inherit;
}

/* Overall calendar table properties */
.eventcalq table.mod_jemcalq_calendar {
  width: 100%;
  padding: 0;
  margin: 0;
  border-left: 1px solid var(--border-color);

  color: #616b76;
  text-align: center;
  background-color: var(--background-color);
}

.eventcalq table.mod_jemcalq_calendar th,
.eventcalq table.mod_jemcalq_calendar td {
  padding: var(--spacing-small);
  margin: 0;
}

.mod_jemcalq_daynames {
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
/* Blank cell properties */
.eventcalq td.mod_jemcalq {
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
  background-color: var(--background-color);
}
.eventcalq td.mod_jemcalq_calday {
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
  background-color: lightgoldenrodyellow;
}
/* Today cell properties */
.eventcalq td.mod_jemcalq_caltoday {
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
  background-color: #fff7df;
}

.eventcalq td.mod_jemcalq_calday span.nolink {
  display: block;
}

/* Event day cell properties (date cell with link) */
.eventcalq td.mod_jemcalq_caldaylink,
.eventcalq td.mod_jemcalq_caltodaylink {
  text-align: center;
  background-color: white;
}

/* Event day cell hover Link / Visited */
.eventcalq td.mod_jemcalq_caldaylink a:link,
.eventcalq td.mod_jemcalq_caldaylink a:visited {
  text-decoration: none;
  font-weight: bold;
  display: block;
  color: red;
  background-color: white;
}

/* Event day cell hover */
.eventcalq td.mod_jemcalq_caldaylink a:hover {
  text-decoration: none;
  font-weight: bold;
  display: block;
  color: var(--background-color);
  background-color: var(--primary-color);
}

/* Non-event day cell properties */
.eventcalq td.mod_jemcalq_caltoday {
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
  background-color: var(--border-color);
}

.eventcalq td.mod_jemcalq_calday span.nolink {
  border: 2px solid transparent; /* to get always same cell size */
  display: block;
}

/* Event day cell properties (date cell with link) */
.eventcalq td.mod_jemcalq_caldaylink,
.eventcalq td.mod_jemcalq_caltodaylink {
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
  background-color: var(--background-color);
}
.eventcalq td.mod_jemcalq_caldaylink {
  background-color: var(--primary-color);
}
/* Event day cell hover Link / Visited */
.eventcalq td.mod_jemcalq_caldaylink a:link,
.eventcalq td.mod_jemcalq_caldaylink a:visited {
  text-decoration: none;
  font-weight: bold;
  display: block;
  color: var(--background-color);
  background-color: var(--primary-color);
}

/* Event day cell hover */
.eventcalq td.mod_jemcalq_caldaylink a:hover {
  text-decoration: none;
  font-weight: bold;
  display: block;
  color: var(--background-color);
  background-color: var(--primary-color);
}
/* Month heading properties */
.eventcalq caption.mod_jemcalq_calendar-month {
  color: var(--background-color);
  background-color: var(--primary-color);
  text-align: center;
}
.mod_jemcalq_calendar-month a:link {
  color: var(--background-color);
}

.eventcalq td {
  text-indent: 0;
  white-space: nowrap;
}
/* ##### jqTree settings ##### */
.k-ui-namespace .jqtree-whitespace,
.k-ui-namespace .jqtree-toggler,
.k-ui-namespace .jqtree-icon,
.k-ui-namespace .jqtree-title {
  font-size: 15px;
}

/* ############################
## ACYMAILING MODULE
############################### */

.acymailing_form .controls {display:none;}

/* ACYMailing button styles */
.acysubbuttons > .btn-primary,
.acysubbuttons > .sppb-btn-primary,
.unsubbutton {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--background-color);
}
.acymailing_form .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.unsubbutton {
  background: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.unsubbutton:hover {
  color: var(--background-color);
  background-color: var(--link-hover-color);
  border-color: var(--link-hover-color);
}

/* ACYMailing module full div settings */
.bus-acymailing-module > .acymailing_fulldiv {
  border: 1px solid var(--primary-color);
  padding: var(--spacing-medium);
  border-radius: var(--spacing-large);
}

.acysubbuttons .btn:hover,
.acysubbuttons .btn:focus,
.acysubbuttons .btn:active {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

/* ############################
## nx-extensions
## CARD MENU STYLING overrides to backend
############################### */

.nx-extensions .uk-grid {
  justify-content: center !important;
}

.nx-extensions .uk-card-media-top {
  height: 80px;
}

.nx-extensions .uk-card-media-top {
  overflow: hidden;
}

.nx-extensions .uk-card-body {
  padding: var(--spacing-medium) var(--spacing-large);
  background-color: rgba(253, 199, 41, 0.15) !important;
}

.nx-extensions .nx-h3,
.nx-extensions h3 {
  font-size: var(--font-size-base) !important;
  line-height: 1.25rem !important;
  color: var(--primary-color) !important;
  margin-top: var(--spacing-large);
}

/*## hide media image ##*/

@media (max-width: 960px) {
  .nx-extensions.nx-card-media-top {
    display: none;
  }
}

@media (max-width: 1024px) {
  .nx-extensions .nx-h3,
  .nx-extensions h3 {
    font-size: var(--font-size-base) !important;
    line-height: 1.25 !important;
  }
}

/* ############################
## MEDIA QUERIES
############################### */

/* Hide sticky search on small screens */
.uk-navbar-sticky .sticky-search {
  display: none;
}

@media screen and (max-width: 640px) {
  /* Add specific styles for screens smaller than 640px */
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Add specific styles for screens between 768px and 1024px */
  #qx-section-jcmcq {
    padding-top: 0px !important;
    padding-right: 0px;
    padding-bottom: 0px !important;
    padding-left: 0px;
  }
}

@media screen and (max-width: 1024px) {
  /* Add specific styles for screens smaller than 1024px */
  .view-article .uk-article,
  .view-category .uk-article {
    background: var(--background-color);
    padding: var(--spacing-small);
  }

  #sp-main-body p,
  a,
  li {
    font-family: var(--font-family-sans) !important;
    font-size: var(--font-size-base);
  }

  #qx-section-jcmcq {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  }
}

@media only screen and (max-width: 960px) {
  /* Add specific styles for screens smaller than 960px */
  .uk-navbar-left,
  .uk-navbar-right,
  [class*="uk-navbar-center"] {
    display: flex;
    gap: var(--spacing-large);
    align-items: center;
  }

  #sp-main-body .container,
  .sppb-row-container {
    padding-left: var(--spacing-small);
    padding-right: var(--spacing-small);
  }

  .container,
  .container-md,
  .container-sm {
    max-width: 85vw;
  }

  /* Partners images row settings */
  #qx-row-r9lc6,
  #qx-column-bp58q {
    margin-top: 0px;
    margin-right: auto !important;
    margin-bottom: 0px;
    margin-left: auto !important;
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: var(--background-color);
    max-width: 68%;
  }

  #qx-row-r9lc6,
  #qx-column-bp58q {
    text-align: center;
  }

  #qx-row-r9lc6,
  #qx-column-bp58q img {
    width: 78%;
    margin: 0 auto;
  }

  /* Hide border on column */
  #qx-column-94ytb > .qx-col-wrap {
    border: none !important;
  }

  /* Footer settings */
  #sp-footer {
    color: var(--text-color);
    background-color: var(--background-color);
    border-top: 1px solid var(--text-color);
    position: relative;
    bottom: 0;
    width: 100%;
    z-index: 1000;
  }

  #sp-footer p,
  #sp-footer a,
  #sp-footer li {
    padding: 0 !important;
    font-size: var(--font-size-base);
  }
}

@media screen and (min-width: 1200px) {
  /* Add specific styles for screens larger than 1200px */
  .container,
  .qx-container {
    max-width: 1200px;
  }
}

@media screen and (min-width: 1400px) {
  /* Add specific styles for screens larger than 1400px my macbook pro */
  .container,
  .qx-container {
    max-width: 1400px;
  }
}


@media screen and (min-width: 1600px) {
  /* Add specific styles for screens larger than 1600px */
  .bus-width .container,
  .bus-width .qx-container,
  .container {
    width: 85vw !important;
    max-width: 1440px !important;
    margin: 0 auto;
  }
}

@media only screen and (orientation: portrait) {
  /* Add specific styles for portrait orientation */
  .container,
  .container-md,
  .container-sm {
    max-width: 85vw;
  }

  #sp-footer1,
  #sp-footer2 {
    text-align: center !important;
    padding: 0;
  }

  #qx-column-yo2mt > .qx-col-wrap {
    border-right-width: 0 !important;
    border-bottom-width: 3px !important;
  }

  address,
  dl,
  fieldset,
  figure,
  ol,
  p,
  pre,
  ul {
    margin: 0 0 var(--spacing-small) 0;
  }
}