/**
 * für den Kalender im Backend
 */

/* Hauptinhaltsteil über die anderen Teile legen, damit der breite Kalender nicht von nachfolgenden HTML-Elementen überlagert wird */
.layout-region--main {
  z-index: 2;
}

#legend {
  width: 100%;
}
#legend, #legend .legend-body {
  border-collapse: inherit;
}
#legend .legend-header {
  display: none;
  font-weight: bold;
}
#legend .legend-body td {
  white-space: nowrap;
}
#legend .legend-body .legend-item {
  padding-left: 2rem !important;
  padding-right: 0.5rem !important;
}
#legend .vertical-bar {
  padding: 0 0 0 2rem;
  font-size: 2rem;
}
#legend .legend-body .legend-item span {
  border: 1px solid #999;
  width: 48px;
  height: 48px;
  padding: 8px;
}
#legend .legend-body .legend-item.individual span.ui-state-highlight {
  background-color: darkgreen;
  color: white;
  font-weight: lighter;
}
#legend .legend-body .legend-item.group span.ui-state-highlight {
  background-color: #1971ff;
  color: white;
  font-weight: lighter;
}

.ui-datepicker-header {
  background: transparent;
  border: none;
  color: #000000;
}

#edit-field-date-list-wrapper table {
  /*border-collapse: collapse;*/
}

#edit-field-date-list-wrapper th {
  background-color: transparent;
  font-weight: normal;
}

#edit-field-date-list-wrapper td {
  height: auto;
  border: none;
  padding: 0;
}

#edit-field-date-list-wrapper td .ui-state-default {
  border: 1px solid lightgrey;
  background: transparent;
}

#edit-field-date-list-wrapper td .ui-state-highlight {
  border: none;
  background: transparent;
}

.form-item--field-date-list-0-value {
  height: 0;
  visibility: collapse;
}

/** TODO:
    call a more specific selector because the margin-right leads to
 *  calendar month not displayed side by side in the front end
 */
.ui-datepicker-group {
  /* margin-right: 8px; */
}

#edit-field-date-list-wrapper .ui-datepicker-unselectable span {
  background-color: transparent !important;
}

#edit-field-date-list-wrapper.individual .ui-datepicker-unselectable {
  filter: none;
}
#edit-field-date-list-wrapper.individual .ui-datepicker-unselectable.marked {
  /*border: 1px solid red;*/
}
#edit-field-date-list-wrapper .ui-datepicker-unselectable.color_midnight_zipping span,
#edit-field-date-list-wrapper .ui-datepicker-unselectable.individual0 span {
  background-color: yellow !important;
  color: #000000;
}
#edit-field-date-list-wrapper .ui-datepicker-unselectable.color_individual span,
#edit-field-date-list-wrapper .ui-datepicker-unselectable.individual1 span {
  background-color: seagreen !important;
  color: #000000;
}
#edit-field-date-list-wrapper .ui-datepicker-unselectable.color_family span,
#edit-field-date-list-wrapper .ui-datepicker-unselectable.individual2 span {
  background-color: lawngreen !important;
  color: #000000;
}
#edit-field-date-list-wrapper .ui-datepicker-unselectable.color_group span {
  background-color: #1971ff !important;
  color: #ffffff;
}
#edit-field-date-list-wrapper .ui-datepicker-unselectable.group2 span {
  background-color: darkblue !important;
  color: #ffffff;
}
#edit-field-date-list-wrapper .ui-datepicker-unselectable span {
  font-weight: 100 !important;
}

#edit-field-date-list-wrapper .ui-state-highlight a {
  background: darkgreen !important;
}
#edit-field-date-list-wrapper .ui-datepicker-unselectable span {
  background: red !important;
}

#edit-field-date-list-wrapper.individual .ui-state-highlight a {
  background: darkgreen !important;
  font-weight: 100 !important;
}

#edit-field-date-list-wrapper.group .ui-state-highlight a {
  background: #1971ff !important;
  font-weight: 100 !important;
}
#edit-field-date-list-wrapper .ui-datepicker-unselectable span {
  background: hotpink !important;
}


/**
 * für die Tagesansicht, um die Aktionslinks für Bestellungen für die Guides auszublenden
 */
.role-guide .views-field.views-field-operations, .role-guide .dropbutton-wrapper {
  display: none;
}


/**
 * Einfärbung jeder zweiten Zeile in der Tabelle der Bestellungen mit einem Hover-Effekt
 */
table.sticky-header tbody tr:nth-child(even) {
  background-color: #fafafd;
}
table.sticky-header tbody tr:nth-child(even):hover {
  background-color: #edfbfd;
}
table.sticky-header tbody tr:nth-child(odd) {
  background-color: #f0f8fb;
}
table.sticky-header tbody tr:nth-child(odd):hover {
  background-color: #d7f1fb;
}
/**
 * Ausblenden der Gesamtsumme und der Gutscheine in jeder weiteren Zeile, wenn eine Bestellung mehrere Artikel enthält -
 * damit es nicht aussieht, als würden sie mehrfach angewandt.
 */
table.sticky-header tr:not(:first-child) td.views-field-total-price__number {
  opacity: 0;
}
table.sticky-header tr:not(:first-child) td.views-field-coupons-target-id {
  opacity: 0;
}
/**
 * Ausblenden des Aktionen-Buttons und der Checkbox nach dem ersten Element
 * (letztere ist in der View ausgeblendet)
 */
#edit-state option:checked:not([value="draft"]) .view-commerce-orders table.sticky-header tr:not(:first-child) td.views-field-operations .dropbutton-wrapper,
.view-bookings-of-the-day table.sticky-header tr:not(:first-child) td.views-field-operations .dropbutton-wrapper {
  display: none;
}
.view-commerce-orders table.sticky-header tr:not(:first-child) td.views-field-commerce-order-bulk-form .form-item,
.view-bookings-of-the-day table.sticky-header tr:not(:first-child) td.views-field-commerce-order-bulk-form .form-item {
  display: none;
}
/**
 * Einfärbung der Kopfzeile einer Bestellung
 */
table.sticky-header thead tr th {
  background-color: #b2e7fd;
}


/*
#edit-field-date-list-wrapper.individual .ui-state-highlight a {
  background: #98ca4e !important;
}
#edit-field-date-list-wrapper.individual .ui-datepicker-unselectable span {
  background: #1971ff !important;
}

#edit-field-date-list-wrapper.group .ui-state-highlight a {
  background: #1971ff !important;
}
#edit-field-date-list-wrapper.group .ui-datepicker-unselectable span {
  background: #98ca4e !important;
}
*/