/*#region VerticalAppointmentTemplate */
.appointment-card {
  position: relative;
  opacity: 0.9;
  display: flex;
  height: 100%;
  margin: 1px;
  background-color: transparent;
  margin-bottom: 1px;
}

  .appointment-card .ac-left-bar {
    width: 5px;
    border-radius: 1px;
    margin-bottom: 1px;
  }

    .appointment-card .ac-left-bar.Termin,
    .appointment-card .ac-left-bar.Ereignisse,
    .appointment-card .ac-left-bar.InterneBesprechung {
      background-color: var(--calendar-color-1);
    }

      .appointment-card .ac-left-bar.Privat.private {
        background-color: transparent;
      }

    .appointment-card .ac-left-bar.Veranstaltung {
      background-color: var(--calendar-color-6);
    }

    .appointment-card .ac-left-bar.Beratungstermin {
      background-color: var(--calendar-color-1);
    }

    .appointment-card .ac-left-bar.Weiterbildung {
      background-color: var(--calendar-color-1);
    }

    .appointment-card .ac-left-bar.Arbeitszeit {
      background-color: var(--calendar-color-4);
    }

    .appointment-card .ac-left-bar.Homeoffice {
      background-color: var(--calendar-color-3);
    }

    .appointment-card .ac-left-bar.Reise-Start,
    .appointment-card .ac-left-bar.Reise-Ende,
    .appointment-card .ac-left-bar.Reise,
    .appointment-card .ac-left-bar.Reisezeit {
      background-image: linear-gradient(to bottom, var(--calendar-color-2), var(--calendar-color-2)), repeating-linear-gradient( to bottom, var(--calendar-color-2), var(--calendar-color-2) 5px, var(--main-color-3) 5px, var(--main-color-3) 10px ), linear-gradient(to bottom, var(--calendar-color-2), var(--calendar-color-2));
      background-size: 33.33% 100%, 33.33% 100%, 33.33% 100%;
      background-position: left top, center top, right top;
      background-repeat: no-repeat, no-repeat, no-repeat;
    }

    .appointment-card .ac-left-bar.Urlaub,
    .appointment-card .ac-left-bar.UnbezahlterUrlaub,
    .appointment-card .ac-left-bar.Papamonat,
    .appointment-card .ac-left-bar.Pflegeurlaub,
    .appointment-card .ac-left-bar.ZAAlsUrlaub {
      box-sizing: border-box;
      padding: 0.5px;
      background-color: var(--calendar-color-5);
      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDEyIDEyIj4NCiAgPGxpbmUgeDE9IjAuNSIgeTE9IjkuNSIgeDI9IjguNjYiIHkyPSIwLjUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4NCjwvc3ZnPg==');
      background-size: contain;
      background-origin: content-box;
      background-repeat: no-repeat repeat;
      background-position: center;
    }

    .appointment-card .ac-left-bar.Zeitausgleich {
      box-sizing: border-box;
      padding: 0.5px;
      background-color: var(--calendar-color-5);
      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDEyIDEyIj4NCiAgPGxpbmUgeDE9IjAuNSIgeTE9IjkuNSIgeDI9IjguNjYiIHkyPSIwLjUiIHN0cm9rZT0iIzQ0NEY1NiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4NCjwvc3ZnPg==');
      background-size: contain;
      background-origin: content-box;
      background-repeat: no-repeat repeat;
      background-position: center;
    }

    .appointment-card .ac-left-bar.DVArzt,
    .appointment-card .ac-left-bar.DVSonstige,
    .appointment-card .ac-left-bar.Krank,
    .appointment-card .ac-left-bar.KrankOB {
      background-color: var(--calendar-color-5);
    }

  .appointment-card .ac-content {
    position: relative;
    overflow: hidden;
    flex: 1;
    padding: 4px;
    margin-left: 1px;
    border-radius: 4px;
    margin-bottom: 1px;
  }

    .appointment-card .ac-content.Termin,
    .appointment-card .ac-content.Ereignisse,
    .appointment-card .ac-content.InterneBesprechung {
      background-color: var(--signal-color-6);
    }

      .appointment-card .ac-content.Termin.selected,
      .appointment-card .ac-content.Ereignisse.selected,
      .appointment-card .ac-content.InterneBesprechung.selected {
        background-color: var(--calendar-color-1);
      }

    .appointment-card .ac-content.Beratungstermin {
      background-color: var(--signal-color-6);
    }

      .appointment-card .ac-content.Beratungstermin.selected {
        background-color: var(--calendar-color-1);
      }

    .appointment-card .ac-content.Weiterbildung {
      background-color: var(--signal-color-6);
    }

      .appointment-card .ac-content.Weiterbildung.selected {
        background-color: var(--signal-color-6);
      }

    .appointment-card .ac-content.Veranstaltung {
      background-color: var(--calendar-color-1);
    }

    .appointment-card .ac-content.Arbeitszeit {
      display: none;
    }

      .appointment-card .ac-content.Arbeitszeit.selected {
        display: block;
        color: var(--calendar-color-4);
        background-color: var(--calendar-color-4);
      }

    .appointment-card .ac-content.Homeoffice {
      display: none;
    }

      .appointment-card .ac-content.Homeoffice.selected {
        display: block;
        color: var(--calendar-color-3);
        background-color: var(--calendar-color-3);
      }

    .appointment-card .ac-content.Reise-Start,
    .appointment-card .ac-content.Reise-Ende {
      background-color: var(--secondary-color-1);
      height: fit-content;
    }

    .appointment-card .ac-content.Reise {
      background-color: var(--secondary-color-1);
    }

      .appointment-card .ac-content.Reise.selected,
      .appointment-card .ac-content.Reise-Start.selected,
      .appointment-card .ac-content.Reise-Ende.selected {
        background-color: var(--calendar-color-2);
      }

    .appointment-card .ac-content.Reise-Ende {
      position: absolute;
      left: 6px;
      right: 0;
      bottom: 0px;
      padding: 4px;
      margin-left: 0;
      margin-bottom: 0;
    }

    .appointment-card .ac-content.Reisezeit {
      display: none;
    }

    .appointment-card .ac-content.Urlaub,
    .appointment-card .ac-content.UnbezahlterUrlaub,
    .appointment-card .ac-content.Papamonat,
    .appointment-card .ac-content.Pflegeurlaub,
    .appointment-card .ac-content.ZAAlsUrlaub {
      background-color: #FAE8E7;
    }

      .appointment-card .ac-content.Urlaub.selected,
      .appointment-card .ac-content.UnbezahlterUrlaub.selected,
      .appointment-card .ac-content.Papamonat.selected,
      .appointment-card .ac-content.Pflegeurlaub.selected,
      .appointment-card .ac-content.ZAAlsUrlaub.selected {
        background-color: var(--calendar-color-5);
      }

    .appointment-card .ac-content.Zeitausgleich {
      background-color: #FAE8E7;
    }

      .appointment-card .ac-content.Zeitausgleich.selected {
        background-color: var(--calendar-color-5);
      }

    .appointment-card .ac-content.Privat {
      background-color: var(--secondary-color-3);
    }

      .appointment-card .ac-content.Privat.selected {
        background-color: #A4B1CF;
      }

    .appointment-card .ac-content.DVArzt,
    .appointment-card .ac-content.DVSonstige,
    .appointment-card .ac-content.Krank,
    .appointment-card .ac-content.KrankOB {
      background-color: #FAE8E7;
    }

      .appointment-card .ac-content.DVArzt.selected,
      .appointment-card .ac-content.DVSonstige.selected,
      .appointment-card .ac-content.Krank.selected,
      .appointment-card .ac-content.KrankOB.selected {
        background-color: var(--calendar-color-5);
      }

  .appointment-card .ac-icon {
    position: absolute;
    top: 6px;
    right: 0px;
  }

  .appointment-card .ac-text {
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    position: relative;
  }

  .appointment-card .ac-description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Maximal 3 Zeilen */
    -webkit-box-orient: vertical;
    min-height: 0;
    margin-bottom: 4px;
  }

  .appointment-card .ac-location {
    margin-top: auto;
    padding-left: 4px;
    position: relative;
    bottom: 0;
  }

    .appointment-card .ac-location .ac-detail-item {
      display: grid;
      grid-template-columns: 20px auto;
    }

      .appointment-card .ac-location .ac-detail-item .ac-detail-item-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

.appointment-short {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appointment-card .ac-teams-icon {
  width: 11px;
  height: 6px;
}

.appointment-card .ac-location-icon {
  width: 7px;
  height: 11px;
}

.appointment-card .ac-location .ac-detail-item object {
  align-self: center;
}
/*#endregion VerticalAppointmentTemplate */

/*#region HorizontalAppointmentTemplate */
.day-event-container {
  display: flex;
  width: 100%;
}

.day-event {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  background-color: var(--background-color-2);
  padding: 4px;
  border-radius: 4px;
  box-sizing: border-box;
}

  .day-event.BK {
    background-color: var(--calendar-color-4);
  }

.day-event-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-event + .day-event {
  margin-left: 2px;
}
/*#endregion HorizontalAppointmentTemplate */

/*#region AppointmentTooltipTemplate */
.att-header-container {
  width: 100%;
  padding: 8px 0px;
}

.att-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

  .att-header .title {
    flex: 0 1 auto;
    text-align: center;
  }

  .att-header .button {
    position: absolute;
    right: 6px;
  }

.att-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  text-decoration: underline;
}

.att-detail-item {
  display: grid;
  grid-template-columns: 32px auto;
  align-items: center;
  flex-direction: row;
  background-color: var(--background-color-1);
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}

  .att-detail-item.completed {
    background-color: #E8FFE7;
  }

  .att-detail-item.not-completed {
    background-color: #FFE2E1;
  }

  .att-detail-item.empty {
    background-color: var(--signal-color-6);
  }

  .att-detail-item.pending {
    background-color: #FFE2E1;
  }

  .att-detail-item.applied {
    background-color: var(--signal-color-6);
  }

  .att-detail-item.approved {
    background-color: #E8FFE7;
  }

  .att-detail-item .att-teams-link {
    color: var(--main-color-1);
  }

.att-icon {
  margin-right: 4px;
}

  .att-icon.att-clock::before {
    content: var(--icon-clock);
  }

  .att-icon.att-not-completed::before {
    content: var(--icon-docu-not-completed);
  }

  .att-icon.att-completed::before {
    content: var(--icon-docu-completed);
  }

  .att-icon.att-empty::before {
    content: "";
  }

  .att-icon.att-pending::before {
    content: var(--icon-pending);
  }

  .att-icon.att-applied::before {
    content: var(--icon-applied);
  }

  .att-icon.att-approved::before {
    content: var(--icon-approved);
  }

  .att-icon.att-private::before {
    content: var(--icon-private);
  }

  .att-icon.att-meetingpoint::before {
    content: var(--icon-meetingpoint);
  }

  .att-icon.att-teams::before {
    content: var(--icon-teams);
  }

  .att-icon.att-participant-winter::before {
    content: var(--icon-partitipant-winter);
  }

  .att-icon.att-participant-external::before {
    content: var(--icon-partitipant-external);
  }

  .att-icon.att-accepted::before {
    content: var(--icon-accepted);
  }

  .att-icon.att-rejected::before {
    content: var(--icon-rejected);
  }

  .att-icon.att-perhaps::before {
    content: var(--icon-perhaps);
  }

  .att-icon.att-unknown::before {
    content: var(--icon-unknown);
  }

  .att-icon.att-error {
    color: red;
  }

    .att-icon.att-error::before {
      content: var(--icon-error);
      padding: 4px;
    }

.att-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
/*#endregion AppointmentTooltipTemplate */