/* Source of Genius - Kunena Aurelia Custom Style 1.0.0
   Direkt fuer bestehendes Aurelia Template. Kein neues Template noetig. */
:root {
  --sog-bg: #f4f6fb;
  --sog-dark: #101624;
  --sog-dark2: #172033;
  --sog-card: #ffffff;
  --sog-border: rgba(17, 24, 39, .10);
  --sog-text: #172033;
  --sog-muted: #6b7280;
  --sog-blue: #4f7cff;
  --sog-radius: 16px;
  --sog-shadow: 0 14px 42px rgba(16, 22, 36, .10);
}

body:has(#kunena),
body.com_kunena {
  background: var(--sog-bg) !important;
}

#kunena,
.kunena,
.kfrontend,
.kunena-layout {
  max-width: 1180px;
  margin: 0 auto;
  color: var(--sog-text);
  font-size: 15.5px;
  line-height: 1.55;
}

#kunena a,
.kunena a,
.kfrontend a {
  color: var(--sog-blue);
  text-decoration: none !important;
}

#kunena a:hover,
.kunena a:hover,
.kfrontend a:hover {
  color: #315fe8;
}

#kunena .navbar,
.kunena .navbar,
#kunena .breadcrumb,
#kunena .kpathway,
#kunena .ktopmenu,
#kunena .kfrontend-header {
  background: linear-gradient(135deg, var(--sog-dark), var(--sog-dark2)) !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 45px rgba(16, 22, 36, .26);
  color: #ffffff !important;
  margin: 0 0 22px 0 !important;
  padding: 14px 18px !important;
}

#kunena .navbar a,
.kunena .navbar a,
#kunena .breadcrumb a,
#kunena .ktopmenu a {
  color: rgba(255, 255, 255, .88) !important;
  font-weight: 650;
}

#kunena .card,
#kunena .well,
#kunena .kblock,
#kunena .kmsg,
#kunena .ktopic,
#kunena .kcategory,
#kunena .category,
#kunena .topic,
#kunena .message,
#kunena .table,
.kunena .card,
.kunena .table,
.kfrontend .card,
.kfrontend .table {
  background: var(--sog-card) !important;
  border: 1px solid var(--sog-border) !important;
  border-radius: var(--sog-radius) !important;
  box-shadow: var(--sog-shadow);
  overflow: hidden;
}

#kunena .card + .card,
#kunena .kblock + .kblock,
#kunena .category + .category,
#kunena .message + .message {
  margin-top: 18px;
}

#kunena .card-header,
#kunena .kheader,
#kunena .category-header,
#kunena .topic-header,
#kunena thead th,
#kunena .table thead th,
.kunena .card-header,
.kfrontend .card-header {
  background: linear-gradient(135deg, var(--sog-dark), var(--sog-dark2)) !important;
  color: #ffffff !important;
  border: 0 !important;
  font-weight: 800;
  letter-spacing: .01em;
  padding: 15px 18px !important;
}

#kunena .card-header a,
#kunena .kheader a,
#kunena .category-header a,
#kunena .topic-header a,
#kunena thead th a {
  color: #ffffff !important;
}

#kunena table,
.kunena table,
.kfrontend table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
}

#kunena td,
#kunena th,
.kunena td,
.kunena th,
.kfrontend td,
.kfrontend th {
  padding: 16px 18px !important;
  border-color: var(--sog-border) !important;
  vertical-align: middle;
}

#kunena tbody tr:hover,
.kunena tbody tr:hover,
.kfrontend tbody tr:hover {
  background: #f7faff !important;
}

#kunena .btn,
#kunena button,
#kunena input[type="submit"],
.kunena .btn,
.kfrontend .btn {
  border-radius: 999px !important;
  border: 1px solid var(--sog-border) !important;
  background: #ffffff !important;
  color: var(--sog-text) !important;
  box-shadow: none !important;
  padding: 9px 16px !important;
  font-weight: 750;
  line-height: 1.2;
}

#kunena .btn-primary,
#kunena .btn-success,
#kunena .btn-info,
#kunena .kbutton-primary,
.kunena .btn-primary,
.kfrontend .btn-primary {
  background: linear-gradient(135deg, var(--sog-blue), #315fe8) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(79, 124, 255, .24) !important;
}

#kunena .nav-tabs,
#kunena .pagination,
.kunena .nav-tabs,
.kfrontend .nav-tabs {
  border: 0 !important;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#kunena .nav-tabs .nav-link,
#kunena .pagination a,
#kunena .pagination span,
.kunena .nav-tabs .nav-link {
  border-radius: 999px !important;
  border: 1px solid var(--sog-border) !important;
  background: #ffffff !important;
  color: var(--sog-muted) !important;
  padding: 8px 14px !important;
  font-weight: 700;
}

#kunena .nav-tabs .nav-link.active,
#kunena .pagination .active a,
#kunena .pagination .active span,
.kunena .nav-tabs .nav-link.active {
  background: var(--sog-dark) !important;
  border-color: var(--sog-dark) !important;
  color: #ffffff !important;
}

#kunena img.avatar,
#kunena .avatar img,
.kunena img.avatar,
.kfrontend img.avatar {
  border-radius: 50% !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 8px 22px rgba(17, 24, 39, .16);
}

#kunena .small,
#kunena small,
#kunena .muted,
#kunena .text-muted {
  color: var(--sog-muted) !important;
}

@media (max-width: 768px) {
  #kunena,
  .kunena,
  .kfrontend {
    padding-inline: 10px;
    font-size: 15px;
  }

  #kunena td,
  #kunena th,
  .kunena td,
  .kunena th,
  .kfrontend td,
  .kfrontend th {
    padding: 12px 10px !important;
  }
}