/* CSS Document */
/* plugin css */

.cbawecl_box {
  padding: 2%;
  border: 1px solid #000000;
  background-color: #fff;
  margin-bottom: 10px;
}


/* lizenz css */
.cbawecl_error {
  padding: 2%;
  border: 1px solid #000000;
  background-color: #ff8080;
  margin-bottom: 10px;
  color: #fff
}

.cbawecl_ok {
  padding: 2%;
  border: 1px solid #000000;
  background-color: #1c6e00;
  margin-bottom: 10px;
  color: #fff
}

.cbawecl_error_msg {
  padding: 2%;
  margin: 10px;
  border: 1px solid #000000;
  background-color: #d63638!important;
  color: #fff!important;
  font-size: 1.1rem;
}

/* checkbox slider settings */

input.cbawecl_checkbox_slide[type="checkbox"] {
  appearance: none;
    height: 20px;
    width: 50px;
    background-color: #34384b;
    border-radius: 50px;
    position: relative;
    transition: 300ms;
    cursor: pointer;
    outline: none;
    border: 1px solid #000;
}

input.cbawecl_checkbox_slide[type="checkbox"]:before {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: #d5d5d5;
    border-radius: 50%;
    border: 1px solid #000;
    left: 3px;
    top: 3px;
    transition: 300ms;
}

input.cbawecl_checkbox_slide[type="checkbox"]:checked {
    background-color: #ececec;
}

input.cbawecl_checkbox_slide[type="checkbox"]:checked:before {
    background-color: #22c900; /* 5acbff*/
    top: 4px;
    left: 30px;
    height: 15px;
    width: 15px;
    
}


/* template css */

.event_titel {
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
}
.container {
  width:100%;
  padding-bottom: 50px;
}
.event_zeile {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  align-items: center;
}
.event_tag{
  flex: 1;
  align-items: center; 
}

.event_tag::before{
  content:"🗓️";
  display:inline-block;
  margin-right:5px;
}
.event_zeit::before{
  content:"⏰";
  display:inline-block;
  margin-right:5px;
}

.event_ort::before{
  content:"🌐";
  display:inline-block;
  margin-right:5px;
}

.event_zeit{
  flex: 1;
  text-align: left;
} 
.event_ort{
  width: 100%;
  text-align: left;
}

.event_ort_link {
  color:#666;

}

@media screen and (max-width: 767px) {
        .event_zeile {
            flex-direction: column;
        }
        .event_zeit {
            text-align: left;
        }
        .event_ort {
          text-align: left;
        }
    }

/* design 1 */
.event-wrapper1 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px; /* Abstand zwischen den einzelnen Events */
    }

    .event-thumbnail1 {
        flex: 0 0 auto; /* Thumbnail-Bereich nimmt nur so viel Platz wie nötig ein */
        margin-bottom: 10px; /* Abstand zwischen Thumbnail und Titel */
    }

    .event-thumbnail1 img {
        max-width: 100%; /* Das Bild wird auf die volle Breite des Elternelements begrenzt */
        height: auto;
    }

    .event-content1 {
        flex: 1; /* Der Text-Bereich nimmt den verbleibenden Platz ein */
        margin-bottom: 10px; /* Abstand zwischen Titel und Text */
    }

    .event-content1 h2 {
        margin-top: 0; /* Abstand oben entfernen */
    }

    @media screen and (max-width: 767px) {
        .event-thumbnail1 img {
            max-width: 100%; /* Das Bild wird auf die Hälfte der Breite des Elternelements begrenzt */
        }
    }

    @media screen and (min-width: 768px) {
        .event-wrapper1 {
            flex-direction: row;
            align-items: flex-start;
        }

        .event-thumbnail1 {
            margin-right: 20px; /* Abstand zwischen Thumbnail und Text */
            margin-bottom: 0; /* Abstand zum Text im responsiven Modus entfernen */
        }

        .event-content1 {
            margin-bottom: 0; /* Abstand zwischen Titel und Text im responsiven Modus entfernen */
        }
    }


/* STYLE 2*/
.event-wrapper2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.event-content2 {
  flex: 1;
}

.event-thumbnail {
  flex: 1;
  margin-left: 100px; /* Fügen Sie einen Abstand zwischen Bild und Text hinzu */
}

.event-content2 p {
  width: 600px!important; /* Definieren Sie die Breite des <p> Tags */
}

@media screen and (min-width: 769px) { /* Für Desktop-Layouts */
  .event-thumbnail2 {
    margin-left: 40px; /* Erhöhen Sie den Abstand, um das Bild weiter nach rechts zu verschieben */
  }
}

@media screen and (max-width: 768px) {
  .event-wrapper2 {
    flex-direction: column;
  }

  .event-thumbnail2,
  .event-content2 {
    flex: none;
    width: 100%; /* Bild und Text nehmen die volle Breite ein */
    margin: 0; /* Entfernt den Abstand zwischen Bild und Text */
  }

  .event-title { /* Fügen Sie eine Klasse für den Titel hinzu */
    order: 2; /* Ändern Sie die Reihenfolge, damit der Titel nach dem Bild kommt */
  }

  .event-description { /* Fügen Sie eine Klasse für die Beschreibung hinzu */
    order: 3; /* Ändern Sie die Reihenfolge, damit die Beschreibung als letztes kommt */
  }
}





.event_scroller {
  width: 100%; 
  overflow: hidden;

  background-color: #000000;
  margin-top: 0px; /* 20 */
  margin-bottom: 0px; /* 20 */
}

.event_scroller-link {
  color: #ffffff;
  text-decoration: none;
  
}
  
.event_scroller-text {
  font-size: 22px;
  margin-top: 10px;
	margin-bottom: 10px;
  color: #ffffff;
  
  font-weight:bold;
  display: inline-block;
  white-space: nowrap;
  animation: event_scroller 40s linear infinite; 
}

@keyframes event_scroller {
  0% { transform: translateX(110%); }
  100% { transform: translateX(-100%); }
}



/* jscalendar */
.jsCalendar {
            position: relative;
        }

        .jsCalendar .loading {
            display: none;
            position: absolute;
            background: rgba(255, 255, 255, 0.8);
            top: 0px;
            left: 0px;
            color: black;
            text-align: center;
            line-height: 314px;
            width: 288px;
            height: 314px;
        }

        .jsCalendar tbody td.jsCalendar-selected {
            border: 2px solid #6600ff !important;
            cursor:pointer;
        }
        #my-calendar{
          width: 420px!important;
          margin: 0 auto;
          display: block;

        }
        #event-details{
          width: 420px!important;
          margin: 0 auto;
          display: block;
        }

        .jsCalendar-title-name, .jsCalendar-nav-right::after, .jsCalendar-nav-left::after  {
        color: #9a1ad5!important;
        }

        .jsCalendar thead .jsCalendar-week-days th {
        color: #9a1ad5!important;
        }