ul.timeline {
    list-style-type: none;
    position: relative;
}
/* Linie */
ul.timeline:before {
    content: ' ';
    background: #d7c097aa;
    display: inline-block;
    position: absolute;
    margin: -25px 0;
    left: 17px;
    width: 2px;
    height: 100%;
    z-index: 400;
}
/* div is used to group li elements */
/* ul.timeline > div > li,
ul.timeline > li { */
ul.timeline li {
  padding-left: 10px;
}
h1.tl-title {
  color: #746e60;
}
small.tl-title {
  color: #ab7a36ff;
  font-weight: 500;
}
h5.tl-title {
  color: #ab7a36ff;
}
ul.timeline .tl-title {
  color: #ab7a36ff;
}
div.card-header {
  background: #e1d1b3ee;
  color: #746e60;
}
div.card-body.tl-title {
  color: #ab7a36ff;
}
div.card-body.baptism.service,
div.card-body.harvest.service,
div.card-body.easter.service {
  border: 4px solid rgb(255, 227, 65);
  border-radius: .25rem !important;
  background-color: rgb(255, 227, 65, .055);
}
div.card-body.advent2022.service {
  border: 4px solid rgb(192, 82, 106);
  border-radius: .25rem !important;
  background-color: rgb(255, 227, 65, .055);
  /* color: rgba(255, 255, 255, 0.952);
  background-image: url('contents/vorne_einladung_2022.jpg");
  background-size: cover; */
}
div.card-body.christmas.service {
  border: 4px solid rgb(192, 82, 106);
  border-radius: .25rem !important;
  background-color: rgb(255, 227, 65, .055);
}
div.card-body.wedding.service {
  border: 4px solid rgb(192, 82, 106);
  border-radius: .25rem !important;
  /* background-image: url("images/roses2.png"); */
  background-color: rgb(192, 82, 106, .055)  ;
}
div.card-body.child.service {
  border: 4px solid red;
  border-radius: .25rem !important;
  background-color: rgb(255, 0, 0, .055)  ;
}
div.card-body.youth.service {
  border: 4px solid rgb(163, 28, 190);
  border-radius: .25rem !important;
  background-color: rgb(163, 28, 190, .055)  ;
}

div.card-body.general.service {
  border: 4px solid rgba(255, 123, 0, 0.404);
  border-radius: .25rem !important;
  background-color: #dbc19d65;
}
div.card-body.supper.service {
  border: 4px solid rgb(131, 37, 37);
  border-radius: .25rem !important;
  background-color: rgb(131, 37, 37, .055);;
}
div.card-body.outing.service,
div.card-body.bibleschool.service,
div.card-body.year-pray.service {
  border: 4px solid rgb(0, 187, 115);
  border-radius: .25rem !important;
  background-color: rgb(0, 187, 115, .055);
}
div.card-body.russian.service {
  border: 4px solid rgb(22, 54, 240);
  border-radius: .25rem !important;
  background-color: rgb(22, 54, 240, .055);
}
div.card-body.service {
  border: 2px solid #ab7a36ff;
  border-radius: .25rem !important;
}
div.card-body.missed.service {
  border: 1px solid #ab7a36ff;
  border-radius: .25rem !important;
  background-color: rgba(255, 63, 63, 0.125);
}

div.card-body.advent2022.future.service,
div.card-body.christmas.future.service,
div.card-body.baptism.future.service,
div.card-body.harvest.future.service,
div.card-body.outing.future.service,
div.card-body.future.service,
div.card-body.easter.future.service,
div.card-body.child.future.service,
div.card-body.youth.future.service,
div.card-body.supper.future.service,
div.card-body.bibleschool.future.service,
div.card-body.year-pray.future.service,
div.card-body.russian.future.service,
div.card-body.general.future.service,
div.card-body.wedding.future.service {
  border: 1px solid #dbc19d65;
  border-radius: .25rem !important;
  background-color: #ffffffff;
}

div.card-body.advent2022.past.service,
div.card-body.christmas.past.service,
div.card-body.baptism.past.service,
div.card-body.harvest.past.service,
div.card-body.outing.past.service,
div.card-body.past.service,
div.card-body.easter.past.service,
div.card-body.child.past.service,
div.card-body.youth.past.service,
div.card-body.supper.past.service,
div.card-body.bibleschool.past.service,
div.card-body.year-pray.past.service,
div.card-body.russian.past.service,
div.card-body.general.past.service,
div.card-body.wedding.past.service {
  border: 1px solid #ab7a36ff;
  border-radius: .25rem !important;
  background-color: rgba(0, 0, 0, 0.125);
}

.alert-secondary .badge {
  background: #d2d3d5ff;
}
.badge-group {
  background: #ab7a36cc;
  color: #ffffffff;
}
.badge-group-light {
  background: #f8f9fa;
  color: #21252977;
}
.alert-secondary .badge-group {
  color: #21252977;
}
.alert-secondary .badge-group-light {
  color: #ffffffff;
}
.badge-new-archive {
  background: #a99780;
  color: #FFFFFFbb;
}
/* Kreise */
/* div is used to group li elements */
ul.timeline > div > li:before,
ul.timeline > li:before {
  content: ' ';
  background: white;
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  border: 2px solid #a99780;
  margin: 5px 0;
  left: 10px;
  width: 16px;
  height: 16px;
  z-index: 400;
}
#mainNav {
  height: 68px;
}
:target {
  scroll-margin-top: 68px;
}
#mainNav,
#moreTab #dropdownTabs,
#navTabs {
  background: #e1d1b3f5;
}
#navTabs {
  flex-wrap: nowrap;
  /* overflow: hidden; optional, verhindert Überlauf */
  border-bottom: 1px solid #a99780;
  text-align: center;
}
#navTabs .nav-link,
#moreTab .nav-link,
#dropdownTabs .nav-link {
  color: #a99780;
  border: 1px solid #e1d1b3f5;
  border-bottom: none;  /* unten entfernen */
}
#navTabs .nav-link:hover { /* on mouse-over over tabs*/
  background: #FFFFFFbb;
  color: #a99780;
  border: 1px solid #a99780;
  border-bottom: none;  /* unten entfernen */
  /* border-bottom: 1px solid #d7c097; */
}
#navTabs .nav-link.active {
  background: #a99780;
  color: #FFFFFFbb;
  /* border: 1px solid #a99780; */
}
/* Tabs: flex, kein Umbruch, gleichmäßig schrumpfen */
.dropdown-able-tabs {
    display: flex;
}
.dropdown-able-tabs .nav-link {
    display: block;
    flex: 0 0 auto;
    text-align: center;
    white-space: nowrap;
}
#hamburger {
  background: #a99780;
  color: #FFFFFFbb;
  font-size: 32px;
}
.logo {
  max-height: 200px;
}
body .stream-timer {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 10px !important;
  /* font-style: italic; */
}
.hide-collapse-button {
  background: #e1d1b3ee;
  color: #746e60;
}
.hide-collapse-button[aria-expanded="true"] {
  display: none;
}
.login-button {
  background: #ab7a36cc;
  color: #ffffffff;
}
.login-button:hover {
  background: #e1d1b3ee;
  color: #746e60;
}
.login-button:focus {
  background: #e1d1b3ee;
  color: #746e60;
}

html {
  height: 100%;
}
body {
   /* position:fixed; */
  position: relative;
  padding-top: 2rem;
  /* margin-top: 3rem; */
  background: #d7c09723
}

.fiv-sqo {
  font-size: 1.5em;
}
.download-list a {
  display: flex;
  align-items: center; /* Icon + Text werden vertikal zentriert */
  gap: 1em;
}


input.validate:invalid {
  border-color: red;
}
input.validate:valid {
  border-color: green;
}

/* Spinner für Chrome, Safari, Edge, Opera entfernen */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Spinner für Firefox entfernen */
input[type=number] {
  -moz-appearance: textfield;
}

.tooltip .tooltip-inner {
  text-align: left;
  padding-left: 1rem;
}

/*
*
* ==================================================
* UNNECESSARY STYLE - JUST TO MAKE IT LOOKS NICE
* ==================================================
*
*/
.countdown {
    text-transform: uppercase;
    font-weight: bold;
}

.countdown span {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 3rem;
    margin-left: 0.8rem;
}

.countdown span:first-of-type {
    margin-left: 0;
}

.countdown-circles {
    text-transform: uppercase;
    font-weight: bold;
}

.countdown-circles span {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.countdown-circles span:first-of-type {
    margin-left: 0;
}