/*@import url('http://www.pagony.local/resources/templates/default/assets/booq/css/program-calendar.css?v=1709674128');
@import url('http://www.pagony.local/resources/templates/default/assets/rumini/css/style.css?v=1675760614');*/

.pt-calendar .pager {
  grid-area: pager;
}
.pt-calendar .pager li {
  margin-inline-end: 3px;
}
.pt-calendar-title {
  grid-area: title;
}

.pt-calendar .legend {
  grid-area: legend;
}

.pt-monthly-calendar {
  width: 100%;
  text-align: left;
  border: 1px solid #cac7c1;
  background: #fff;
  border-bottom: none;
  border-right: none;
  margin: 2em 0 3.6em 0;
  font-size: 0.95em;
  border-collapse: collapse;
  position:relative;
}

.pt-monthly-calendar .date-label {
  position: absolute;
  top: 5px;
  left: 8px;
  font-size: 13px;
  text-align: left;
  color: #545d69;
}

.pt-day {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: 'gutter-header header'
    'gutter rooms';
}

.pt-day li {
  list-style-type: none;
}

.pt-day-header, .pt-resource-header {
  background-color: rgba(202, 199, 193, 0.15);
  border-right: 1px solid #cac7c1;
  border-bottom: 1px solid #cac7c1;
  padding: 15px 10px;
  vertical-align: middle;
  font-weight: normal;
  font-family: "Teko", sans-serif;
  font-size: 1.35em;
  text-align: center;
}

.pt-day ol, .pt-day ul {
  margin: 0;
  padding: 0;
}

.booking-dialog {
  padding: 0;
}

.day-header {
  text-transform: capitalize;
  background-color: rgba(202, 199, 193, 0.15);
  border-right: 1px solid #cac7c1;
  border-bottom: 1px solid #cac7c1;
  padding: 10px 5px 10px 8px;
  vertical-align: middle;
  font-weight: normal;
  white-space: nowrap;
  text-align: left;
  font-family: "Teko", sans-serif;
  font-size: 1.35em;
}
.day {
  border-bottom: 1px solid #cac7c1;
  border-right: 1px solid #cac7c1;
  padding: 35px 5px 30px 5px;
  vertical-align: middle;
  text-align: center;
  position: relative;
  &.past {
    background: rgba(0,0,0,.015);
  }
}
.pt-with-link {
	all: unset;
	cursor: pointer;
}
@layer ui-components.pt-form {
    .pt-icon-field {
        position: relative;
    }
    .pt-icon-field input {
        width: 100%;
    }
    .pt-icon-field .pt-icon {
        cursor: pointer;
        height: var(--form-input-height, 2rem);
        width: var(--form-input-height, 2rem);
        position: absolute;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
@layer ui-components.pt-dialog {
    .pt-dialog {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 100;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .pt-dialog-overlay {
        background-color: var(--overlay-color, black);
        opacity: var(--overlay-opacity, 0.3);
        position: fixed;
        z-index: 99;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .pt-dialog .pt-btn-action-close {
        color: var(--btn-tertiary-color, white);
        background-color: var(--btn-tertiary-bckg-color, rgba(0,0,0,0.3));
        border: 0;
        border-radius: 50%;
        padding: 0.5em;
        position: absolute;
        top: 0.5em;
        right: 0.5em;
    }
}

.pt-toolbar.floating {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    opacity: 0;
}
.pt-carousel-track {
	--pt-carousel-gap: var(--carousel-gap, 1em); /* needs unit */
	--pt-carousel-margin: var(--carousel-margin, 0px);
	--pt-carousel-item-width: calc(
		100cqw / var(--carousel-item-count, 4) -
			(var(--pt-carousel-gap) * (1 - (1/var(--carousel-item-count, 4))))
	);
}

.pt-carousel {
	position: relative;
	.pt-carousel-track {
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* Internet Explorer 10+ */
		&::-webkit-scrollbar {
			display: none;
		}
		overflow-x: auto;
		display: flex;
		gap: var(
			--pt-carousel-gap
		) !important; /* Override any gap set internally */
		margin: var(--pt-carousel-margin);
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		container-type: inline-size;
	}
	.pt-carousel-track > * {
		flex: 0 0 var(--pt-carousel-item-width);
		/*scroll-snap-align: start;*/
		box-sizing: border-box;
	}
}

.pt-calendar-resource {
    .pt-resource-calendar {
        width: 100%;
        text-align: left;
        border: 1px solid #cac7c1;
        background: #fff;
        border-bottom: none;
        border-right: none;
        margin: 2em 0 3.6em 0;
        font-size: 0.95em;
        border-collapse: collapse;
    }
    .pt-time-gutter {
        padding: 15px 10px;
    }
    .pt-calendar-resource-time-slot .pt-calendar-resource-slot {
        align-items: center;
        justify-content: center;
        justify-items: center;
        display: grid;
    }
}
.radio-option {
    display: flex;
    cursor: pointer;
    span:has(input[type="radio"]) {
        input {
            position: absolute;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        &:before {
            display: inline-block;
            content: "";
            border: 1px solid #000;
            border-radius: 100%;
            width: 13px;
            height: 13px;
            margin-right: .25rem;
        }
        &:has(input[type="radio"]:checked) {
            &:before {
                background-color: #000;
                background: radial-gradient(circle,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 41%, rgba(255, 255, 255, 0) 100%);
            }
        }
    }
    span.label {
        flex-grow: 1;
    }
}
.confirm-dialog {
    .dialog-actions {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        gap: 0.5rem;
    }
}
dialog {
    padding: 0;
    > div {
        padding: 1em;
    }
    .dialog-actions {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 0.5rem;
    }
}
dialog.booking-cart {
    overflow: hidden;
    padding: 0;
    > div {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        .booking {
            max-height: clamp(80vh, 100vh, 2rem);
            overflow: auto;
        }
    }
}
.booking-cart-button {
    .booking-cart-indicator {
        display: inline-block;
        margin-left: .25rem;
        &:before {
            content: "(";
        }
        &:after {
            content: ")";
        }
    }
}
.booking-item {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border: 1px solid #000;
    margin: .75rem 0;
    padding: .75rem;
    > div {
        margin: 0.5rem;
        flex-grow: 0;
    }
    .name, .category {
        width: 100%;
        margin: 0.25rem 0 0.5rem 0;
    }
    .time {
        flex-grow: 1;
    }
}
.booking-summary {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
@layer pentu-ui.layout.pt-agent {
	.pt-agent {
		display: grid;
		grid-template-areas: "title title" "lastname firstname" "email phone" "submit submit";
		.pt-card-title {
			grid-area: title;
		}
		.pt-form-field {
			&:nth-child(2) {
				grid-area: lastname;
			}
			&:nth-child(3) {
				grid-area: firstname;
			}
			&:nth-child(4) {
				grid-area: email;
			}
			&:nth-child(5) {
				grid-area: phone;
			}
		}
	}
}

@layer pentu-ui.layout.pt-invoice {
	.pt-invoice {
		display: grid;
		grid-template-areas:
			"title title title"
			"component_type component_type component_type"
			"name name name"
			"taxcountry taxcountry taxcountry"
			"postcode city address"
			"comment comment comment"
			"submit submit submit";

		&:has(.field-taxid) {
			grid-template-areas:
				"title title title"
				"component_type component_type component_type"
				"taxcountry taxid taxid"
				"name name name"
				"postcode city address"
				"comment comment comment"
				"submit submit submit";

			&:has(.field-eu_taxid) {
				grid-template-areas:
					"title title title"
					"component_type component_type component_type"
					"taxcountry taxid taxid"
					"eu_taxid eu_taxid eu_taxid"
					"name name name"
					"postcode city address"
					"comment comment comment"
					"submit submit submit";
			}

			&:has([name="country"][value="348"]) {
				grid-template-areas:
					"title title title"
					"component_type component_type component_type"
					"taxcountry taxid taxid"
					"name name name"
					"postcode city address"
					"comment comment comment"
					"submit submit submit";
			}

			&:has(.field-group_taxid) {
				grid-template-areas:
					"title title title"
					"component_type component_type component_type"
					"taxcountry taxid taxid"
					"group_taxid group_id eu_taxid"
					"name name name"
					"postcode city address"
					"comment comment comment"
					"submit submit submit";

				&:has([name="country"][value="348"]) {
					grid-template-areas:
						"title title title"
						"component_type component_type component_type"
						"taxcountry taxid taxid"
						"group_taxid group_id group_id"
						"name name name"
						"postcode city address"
						"comment comment comment"
						"submit submit submit";
				}
			}

			&:has([name="country"][value="348"]) {
				.pt-form-field {
					&:has(.field-eu_taxid) {
						display: none;
					}
				}
			}
		}

		.pt-card-title {
			grid-area: title;
		}

		.pt-component-type-field {
			grid-area: component_type;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: 1fr;
		}

		.pt-component-type {
			display: flex;
			flex-direction: row-reverse;
			justify-content: flex-end;
			align-items: center;
		}

		.pt-form-field {
			&:has(.field-country) {
				grid-area: taxcountry;
			}

			&:has(.field-taxid) {
				grid-area: taxid;
			}

			&:has(.field-group_taxid) {
				grid-area: group_taxid;
			}

			&:has(.field-group_id) {
				grid-area: group_id;
			}

			&:has(.field-eu_taxid) {
				grid-area: eu_taxid;
			}

			&:has(.field-to_name) {
				grid-area: name;
			}

			&:has(.field-postcode) {
				grid-area: postcode;
			}

			&:has(.field-city) {
				grid-area: city;
			}

			&:has(.field-address) {
				grid-area: address;
			}

			&:has(.field-comment) {
				grid-area: comment;
			}
		}
	}
}
@layer pentu-ui.pt-voucher-payment {
}
@layer pentu-ui.layout.pt-payment {
	.pt-payment {
		.pt-form-field {
			.pt-payment-method {
				display: flex;
				flex-direction: row-reverse;
				justify-content: flex-end;
				align-items: center;
			}
		}
	}

}
@layer pentu-ui.layout.pt-shipping {
	.pt-shipping {
		display: flex;
		flex-direction: column;

		.pt-shipping-method {
			display: flex;
			flex-direction: row-reverse;
			justify-content: flex-end;
			align-items: center;
		}

		.pt-shipping-provider-furgefutar,
		.pt-shipping-provider-MPL {
			display: grid;
			grid-template-areas:
				"contact contact contact contact"
				"email email telnum telnum"
				"country country country country"
				"postcode city address address"
				"request request request request"
				"submit submit submit submit";
			grid-template-columns: 1fr 2fr 3fr 1fr;
		}
		.pt-shipping-provider-furgefutarpoint,
		.pt-shipping-provider-MPLPoint {
			display: grid;
			grid-template-areas:
				"contact contact contact contact"
				"email email telnum telnum"
				"city city point point"
				"submit submit submit submit";
			grid-template-columns: 1fr 2fr 3fr 1fr;
		}
		.pt-shipping-provider-personalpickup {
			display: grid;
			grid-template-areas:
				"contact contact contact contact"
				"email email telnum telnum"
				"location location location location"
				"submit submit submit submit";
			grid-template-columns: 1fr 2fr 3fr 1fr;
		}
		.pt-shipping-provider:empty {
			display: none;
		}
		.pt-form-field {
			&:has(.field-contact) {
				grid-area: contact;
			}
			&:has(.field-telnum) {
				grid-area: telnum;
			}
			&:has(.field-email) {
				grid-area: email;
			}
			&:has(.field-country) {
				grid-area: country;
			}
			&:has(.field-postcode) {
				grid-area: postcode;
			}
			&:has(.field-city) {
				grid-area: city;
			}
			&:has(.field-address) {
				grid-area: address;
			}
			&:has(.field-request) {
				grid-area: request;
			}
			&:has(.field-point) {
				grid-area: point;
			}
			&:has(.field-location) {
				grid-area: location;
			}
		}
	}

}
.ticket {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border-bottom: 1px solid #ccc;
    margin: 0.75rem 0;
    padding: 0.75rem 0;
    &:last-child {
        border-bottom: none;
    }
    > *:not(dialog) {
        margin: 0.5rem;
        flex-grow: 0;
        &.name {
            flex-grow: 0;
            width: 100%;
            margin: 0.25rem 0 0.5rem 0;
        }
        &.time {
            flex-grow: 0;
            width: 100%;
            margin: 0.25rem 0 0.5rem 0;
        }
        &.saleprice {
            flex-grow: 1;
        }
    }
}
.ticket-schema {
    display: grid;
    grid-template-areas: "name remove quantity add" "saleprice remove quantity add";
    grid-template-columns: 50fr 1fr 1fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    border-bottom: 1px solid #ccc;
    margin: 0.75rem 0;
    padding: 0.75rem 0;
    @media screen and (max-width: 768px) {
        grid-template-areas: "name name name saleprice" ". remove quantity add";
        row-gap: 0.5rem;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    button {
        display: block;
        width: 100%;
    }
    .name {
        grid-area: name;
    }
    .saleprice {
        grid-area: saleprice;
    }
    .remove {
        grid-area: remove;
        transition: opacity 0.3s ease-in-out;
        &.empty {
            opacity: 0;
            pointer-events: none;
        }
        button {
            display: grid;
            grid-template-areas: "stack";
            .text, .icon {
                opacity: 1;
                transition: opacity 0.3s ease-in-out;
                grid-area: stack;
            }
        }
        &.empty, &.one {
            .icon {
                opacity: 0;
            }
        }
        &:not(.empty):not(.one) {
            .text {
                opacity: 0;
            }
        }
    }
    .quantity {
        grid-area: quantity;
        transition: opacity 0.3s ease-in-out;
        input {
            width: clamp(100px, 50%, 200px);
        }
        &.empty {
            opacity: 0;
            pointer-events: none;
        }
    }
    .add {
        grid-area: add;
        transition: opacity 0.3s ease-in-out;
        button {
            display: grid;
            grid-template-areas: "stack";
            .text, .icon {
                opacity: 1;
                transition: opacity 0.3s ease-in-out;
                grid-area: stack;
            }
        }
        &.empty {
            .icon {
                opacity: 0;
            }
        }
        &:not(.empty) {
            .text {
                opacity: 0;
            }
        }
    }
}
.pt-datepicker {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    grid-template-columns: repeat(7, 1fr);
}
.pt-datepicker-one-week {
    grid-template-rows: 1fr 1fr;
}
.pt-datepicker-four-weeks {
    grid-template-rows: repeat(6, 1fr);
}
.pt-datepicker-six-weeks {
    grid-template-rows: repeat(8, 1fr);
}
.pt-datepicker:has(.pt-week-gutter) {
    grid-template-columns: repeat(8, 1fr);
}
.pt-datepicker-header {
    display: flex;
    flex-direction: row;
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 8;
}
.pt-datepicker-day {
    grid-row: 2;
}
.event-list {
    text-align: center;
    margin-top: 1em;
    padding: 0 1em;
    @media only screen and (max-width: 460px) {
        font-size: 0.4em;
        padding: 0;
    }
    .pt-datepicker {
        column-gap: 1em;
        width: 100%;
    }
    .pt-datepicker-header {
        justify-content: space-evenly;
        align-items: center;
    }
    .pt-datepicker-header button{
        background-color: transparent;
        border-radius: 50%;
        height: 4em;
        width: 4em;
    }
    .pt-prev-month-btn::before {
        font-family: FontAwesome;
        font-size: 1.75em;
        content: "\f104";
    }
    .pt-next-month-btn::before {
        font-family: FontAwesome;
        font-size: 1.75em;
        content: "\f105";
    }
    .pt-datepicker-header button span{
        display: none;
    }
    .pt-datepicker-month {
        font-size: 3em;
    }
    .pt-datepicker-day {
        display: flex;
        flex-direction: column;
        font-size: 1.5em;
        border-radius: 50%;
        aspect-ratio: 1;
        justify-content: center;
    }
    .pt-datepicker-day:hover {
        background-color: rgb(228, 228, 228);
    }
    .pt-datepicker-day.active {
        border: 1px solid #2BB2BB;
        font-weight: bold;
    }
}
.pt-calendar .pager {
  grid-area: pager;
}
.pt-calendar .pager li {
  margin-inline-end: 3px;
}
.pt-calendar-title {
  grid-area: title;
}

.pt-calendar .legend {
  grid-area: legend;
}

.pt-calendar-pager button .label {
  display: none;
}

.pt-calendar-pager .pt-back-btn::before {
  content: "<";
}

.pt-calendar-pager .pt-next-btn::before {
  content: ">";
}

.pt-monthly-calendar {
  width: 100%;
  text-align: left;
  border: 1px solid #cac7c1;
  background: #fff;
  border-bottom: none;
  border-right: none;
  margin: 2em 0 3.6em 0;
  font-size: 0.95em;
  border-collapse: collapse;
  position:relative;

  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-column-gap: 0;
  grid-row-gap: 0;

  .day-header:nth-child(-n+14) {
      display: block;
  }
  .day-header {
    order: 0;
    display: none;
  }
  .day {
    order: 1;
  }
}

.pt-monthly-calendar .date-label {
  margin: 5px 8px;
  font-size: 13px;
  text-align: left;
  color: #545d69;
}

.pt-day-header, .pt-resource-header {
  background-color: rgba(202, 199, 193, 0.15);
  border-right: 1px solid #cac7c1;
  border-bottom: 1px solid #cac7c1;
  padding: 15px 10px;
  vertical-align: middle;
  font-weight: normal;
  font-family: "Teko", sans-serif;
  font-size: 1.35em;
  text-align: center;
}

.day-header {
  text-transform: capitalize;
  background-color: rgba(202, 199, 193, 0.15);
  border-right: 1px solid #cac7c1;
  border-bottom: 1px solid #cac7c1;
  padding: 10px 5px 10px 8px;
  vertical-align: middle;
  font-weight: normal;
  white-space: nowrap;
  text-align: left;
  font-family: "Teko", sans-serif;
  font-size: 1.35em;
}
.day {
  border-bottom: 1px solid #cac7c1;
  border-right: 1px solid #cac7c1;
  padding: 35px 5px 30px 5px;
  vertical-align: middle;
  text-align: center;
  position: relative;
}

.pt-resource-calendar, .pt-event-calendar {

  .pt-monthly-calendar {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-column-gap: 0;
      grid-row-gap: 0;
      .day-header {
        order: 0;
        display: none;
      }
      .day {
        order: 1;
      }
      .day-header:nth-child(-n+14) {
        display: block;
      }
  }

  .pt-weekly-calendar {
    display: grid;
    &:has(.pt-day-header) {
      grid-template-columns: repeat(var(--days), 1fr);
      &:has(> .pt-time-gutter) {
        grid-template-columns: 1fr repeat(var(--days), 10fr);
      }
    }
    &:has(.pt-day-header:not(~ .pt-day-header)) {
      --days: 1;
    }
    &:has(.pt-day-header ~ .pt-day-header) {
      --days: 2;
    }
    &:has(.pt-day-header ~ .pt-day-header ~ .pt-day-header) {
      --days: 3;
    }
    &:has(.pt-day-header ~ .pt-day-header ~ .pt-day-header ~ .pt-day-header) {
      --days: 4;
    }
    &:has(.pt-day-header ~ .pt-day-header ~ .pt-day-header ~ .pt-day-header ~ .pt-day-header) {
      --days: 5;
    }
    &:has(.pt-day-header ~ .pt-day-header ~ .pt-day-header ~ .pt-day-header ~ .pt-day-header ~ .pt-day-header) {
      --days: 6;
    }
    &:has(.pt-day-header ~ .pt-day-header ~ .pt-day-header ~ .pt-day-header ~ .pt-day-header ~ .pt-day-header ~ .pt-day-header) {
      --days: 7;
    }
  }

  .pt-time-gutter {
    display: flex;
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-end: auto;
    grid-row-start: 2;

      /*
      old (but new) nested css freeze chrome 2025-02-13 :-)
      Array.from({ length: 24 }, (_, i) => i).reduce((all, c, idx, array) => `
      ~.pt-time-gutter {
          grid-row-start: ${array.length - c + 2};
          ${all}
      }`, ``);
      */
      /*
      Array.from({ length: 24 }, (_, i) => i).reduce((all, c, idx, array) => `
      ${' ~.pt-time-gutter'.repeat(array.length - c)} {
          grid-row-start: ${array.length - c + 2};
      }${all}`, ``);
      */
      ~.pt-time-gutter {
          grid-row-start: 3;
      }
      ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 4;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 5;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 6;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 7;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 8;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 9;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 10;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 11;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 12;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 13;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 14;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 15;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 16;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 17;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 18;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 19;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 20;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 21;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 22;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 23;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 24;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 25;
      }
      ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter ~.pt-time-gutter {
          grid-row-start: 26;
      }

    }
  }

  .pt-time-slot {
    display: flex;
    grid-column-start: 2;
    grid-column-end: span 100;
    grid-row-end: auto;
    grid-row-start: 2;

    /*
    Array.from({ length: 24 }, (_, i) => i).reduce((all, c, idx, array) => `
      ${' ~.pt-time-slot'.repeat(array.length - c)} {
          grid-row-start: ${array.length - c + 2};
      }${all}`, ``);
    */
    ~.pt-time-slot {
        grid-row-start: 3;
    }
    ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 4;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 5;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 6;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 7;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 8;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 9;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 10;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 11;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 12;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 13;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 14;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 15;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 16;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 17;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 18;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 19;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 20;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 21;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 22;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 23;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 24;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 25;
    }
    ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot ~.pt-time-slot {
        grid-row-start: 26;
    }

  }

.pt-event-calendar {

  .pt-calendar-events {
    pointer-events: none;
    > * {
      pointer-events: initial;
    }
  }

  .pt-daily-calendar {
    display: grid;
    grid-template-columns: 1fr 100fr;
    .pt-calendar-events {
      grid-area: 2 / 2 / span 100 / span 100;
    }
  }

  .pt-weekly-calendar {
    .pt-calendar-events {
      border-right: 1px solid #cac7c1;
    }
  }

  .pt-weekly-calendar, .pt-daily-calendar {
    .pt-calendar-events {
      display: inline-block;
      position: relative !important;
      > li {
        cursor: pointer;
        padding: 1rem;
        border: 1px solid #cac7c1;
        background-color: #fff;
        box-shadow: -4px 4px 0px 0px rgba(0,0,0,0.2);
        overflow: hidden;
      }
    }
  }

  .pt-monthly-calendar {
    .day {
      overflow: initial;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: .1fr 1fr;
      padding: 0;
      min-height: 117px;
      .date-label {
        position: relative;
        top: initial;
        left: initial;
      }
      .pt-calendar-events {
        grid-area: 2 / 1 / span 100 / span 100;
      }
      .pt-calendar-events:empty {
        display: none;
      }
      .pt-calendar-events:not(:empty) {
        position: relative !important;
        background-color: #fff;
        list-style: none;
        padding: 0;
        margin: 4px;
        width: auto !important;
        top: initial !important;
        height: 90px !important;
        overflow: auto;
        border: 1px solid #cac7c1;
        box-shadow: -4px 4px 0px 0px rgba(0,0,0,0.2);
        li {
          cursor: pointer;
          position: relative !important;
          left: initial !important;
          top: initial !important;
          height: auto !important;
          width: 100% !important;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          padding: 0 5px;
          cursor: pointer;
          border-bottom: 1px solid #cac7c1;
        }
      }
    }
  }

  .pt-daily-calendar, .pt-weekly-calendar {
    --day-header-row: 1;
    --day-header-offset: 0;
    &:has(.pt-time-gutter) {
      --day-header-offset: 1;
    }
    .pt-day-header {
      grid-row-start: var(--day-header-row);
      grid-column-start: calc(1 + var(--day-header-offset));
      & ~ .pt-day-header {
        grid-column-start: calc(1 + var(--day-header-offset) + 1);
        & ~ .pt-day-header {
          grid-column-start: calc(1 + var(--day-header-offset) + 2);
          & ~ .pt-day-header {
            grid-column-start: calc(1 + var(--day-header-offset) + 3);
            & ~ .pt-day-header {
              grid-column-start: calc(1 + var(--day-header-offset) + 4);
              & ~ .pt-day-header {
                grid-column-start: calc(1 + var(--day-header-offset) + 5);
                & ~ .pt-day-header {
                  grid-column-start: calc(1 + var(--day-header-offset) + 6);
                  & ~ .pt-day-header {
                    grid-column-start: calc(1 + var(--day-header-offset) + 7);
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  --event-grid-start: 2;
  --event-grid-offset: 1;
  .pt-calendar-events {
    grid-column-start: calc(var(--event-grid-start));
    grid-column-end: calc(var(--event-grid-start));
    grid-row-start: calc(1 + var(--event-grid-offset));
    grid-row-end: span 100;
    & ~ .pt-calendar-events {
      grid-column-start: calc(var(--event-grid-start) + 1);
      grid-column-end: calc(var(--event-grid-start) + 1);
      & ~ .pt-calendar-events {
        grid-column-start: calc(var(--event-grid-start) + 2);
        grid-column-end: calc(var(--event-grid-start) + 2);
        & ~ .pt-calendar-events {
          grid-column-start: calc(var(--event-grid-start) + 3);
          grid-column-end: calc(var(--event-grid-start) + 3);
          & ~ .pt-calendar-events {
            grid-column-start: calc(var(--event-grid-start) + 4);
            grid-column-end: calc(var(--event-grid-start) + 4);
            & ~ .pt-calendar-events {
              grid-column-start: calc(var(--event-grid-start) + 5);
              grid-column-end: calc(var(--event-grid-start) + 5);
              & ~ .pt-calendar-events {
                grid-column-start: calc(var(--event-grid-start) + 6);
                grid-column-end: calc(var(--event-grid-start) + 6);
                & ~ .pt-calendar-events {
                  grid-column-start: calc(var(--event-grid-start) + 7);
                  grid-column-end: calc(var(--event-grid-start) + 7);
                }
              }
            }
          }
        }
      }
    }
  }
}

.pt-resource-calendar {

  .pt-day-header {
    grid-area: 1 / 1 / 1 / 1;
  }

  --slot-column-start: 2;
  --slot-column-end: 2;
  .pt-resource-header {
    & ~ .pt-calendar-resource-time-slot {
      grid-column-start: calc(var(--slot-column-start));
      grid-column-end: calc(var(--slot-column-end));
    }
    /*
    Array.from({ length: 24 }, (_, i) => i).reduce((all, c, idx, array) => `
    & ~ .pt-resource-header {
        ~ .pt-calendar-resource-time-slot {
            grid-column-start: ${array.length - c + 2};
            grid-column-end: ${array.length - c + 2};
        }
        ${all}
    }`, ``);
    */
    & ~ .pt-resource-header {
      ~ .pt-calendar-resource-time-slot {
        grid-column-start: calc(var(--slot-column-start) + 1);
        grid-column-end: calc(var(--slot-column-end) + 1);
      }
    }
    & ~ .pt-resource-header ~ .pt-resource-header {
      ~ .pt-calendar-resource-time-slot {
        grid-column-start: calc(var(--slot-column-start) + 2);
        grid-column-end: calc(var(--slot-column-end) + 2);
      }
    }
    & ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header {
      ~ .pt-calendar-resource-time-slot {
        grid-column-start: calc(var(--slot-column-start) + 3);
        grid-column-end: calc(var(--slot-column-end) + 3);
      }
    }
    & ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header {
      ~ .pt-calendar-resource-time-slot {
        grid-column-start: calc(var(--slot-column-start) + 4);
        grid-column-end: calc(var(--slot-column-end) + 4);
      }
    }
    & ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header {
      ~ .pt-calendar-resource-time-slot {
        grid-column-start: calc(var(--slot-column-start) + 5);
        grid-column-end: calc(var(--slot-column-end) + 5);
      }
    }
    & ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header {
      ~ .pt-calendar-resource-time-slot {
        grid-column-start: calc(var(--slot-column-start) + 6);
        grid-column-end: calc(var(--slot-column-end) + 6);
      }
    }
    & ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header {
      ~ .pt-calendar-resource-time-slot {
        grid-column-start: calc(var(--slot-column-start) + 7);
        grid-column-end: calc(var(--slot-column-end) + 7);
      }
    }
  }

  .pt-calendar-resource-time-slot {
    pointer-events: none;
    > div {
      pointer-events: initial;
      display: grid;
      left: 0;
      right: 0;
    }
    

    /*
    Array.from({ length: 48 }, (_, i) => `&.slot-start-${i} {
            grid-row-start: ${i + 2};
          }`).reduce((all, c) => `${all}
    ${c}`, ``);
    */
    &.slot-start-0 {
      grid-row-start: 2;
    }
    &.slot-start-1 {
      grid-row-start: 3;
    }
    &.slot-start-2 {
      grid-row-start: 4;
    }
    &.slot-start-3 {
      grid-row-start: 5;
    }
    &.slot-start-4 {
      grid-row-start: 6;
    }
    &.slot-start-5 {
      grid-row-start: 7;
    }
    &.slot-start-6 {
      grid-row-start: 8;
    }
    &.slot-start-7 {
      grid-row-start: 9;
    }
    &.slot-start-8 {
      grid-row-start: 10;
    }
    &.slot-start-9 {
      grid-row-start: 11;
    }
    &.slot-start-10 {
      grid-row-start: 12;
    }
    &.slot-start-11 {
      grid-row-start: 13;
    }
    &.slot-start-12 {
      grid-row-start: 14;
    }
    &.slot-start-13 {
      grid-row-start: 15;
    }
    &.slot-start-14 {
      grid-row-start: 16;
    }
    &.slot-start-15 {
      grid-row-start: 17;
    }
    &.slot-start-16 {
      grid-row-start: 18;
    }
    &.slot-start-17 {
      grid-row-start: 19;
    }
    &.slot-start-18 {
      grid-row-start: 20;
    }
    &.slot-start-19 {
      grid-row-start: 21;
    }
    &.slot-start-20 {
      grid-row-start: 22;
    }
    &.slot-start-21 {
      grid-row-start: 23;
    }
    &.slot-start-22 {
      grid-row-start: 24;
    }
    &.slot-start-23 {
      grid-row-start: 25;
    }
    &.slot-start-24 {
      grid-row-start: 26;
    }
    &.slot-start-25 {
      grid-row-start: 27;
    }
    &.slot-start-26 {
      grid-row-start: 28;
    }
    &.slot-start-27 {
      grid-row-start: 29;
    }
    &.slot-start-28 {
      grid-row-start: 30;
    }
    &.slot-start-29 {
      grid-row-start: 31;
    }
    &.slot-start-30 {
      grid-row-start: 32;
    }
    &.slot-start-31 {
      grid-row-start: 33;
    }
    &.slot-start-32 {
      grid-row-start: 34;
    }
    &.slot-start-33 {
      grid-row-start: 35;
    }
    &.slot-start-34 {
      grid-row-start: 36;
    }
    &.slot-start-35 {
      grid-row-start: 37;
    }
    &.slot-start-36 {
      grid-row-start: 38;
    }
    &.slot-start-37 {
      grid-row-start: 39;
    }
    &.slot-start-38 {
      grid-row-start: 40;
    }
    &.slot-start-39 {
      grid-row-start: 41;
    }
    &.slot-start-40 {
      grid-row-start: 42;
    }
    &.slot-start-41 {
      grid-row-start: 43;
    }
    &.slot-start-42 {
      grid-row-start: 44;
    }
    &.slot-start-43 {
      grid-row-start: 45;
    }
    &.slot-start-44 {
      grid-row-start: 46;
    }
    &.slot-start-45 {
      grid-row-start: 47;
    }
    &.slot-start-46 {
      grid-row-start: 48;
    }
    &.slot-start-47 {
      grid-row-start: 49;
    }


    /*
    Array.from({ length: 48 }, (_, i) => `&.slot-length-${i} {
            grid-row-end: span ${i};
          }`).reduce((all, c) => `${all}
    ${c}`, ``);
    */
    &.slot-length-0 {
      grid-row-end: span 0;
    }
    &.slot-length-1 {
      grid-row-end: span 1;
    }
    &.slot-length-2 {
      grid-row-end: span 2;
    }
    &.slot-length-3 {
      grid-row-end: span 3;
    }
    &.slot-length-4 {
      grid-row-end: span 4;
    }
    &.slot-length-5 {
      grid-row-end: span 5;
    }
    &.slot-length-6 {
      grid-row-end: span 6;
    }
    &.slot-length-7 {
      grid-row-end: span 7;
    }
    &.slot-length-8 {
      grid-row-end: span 8;
    }
    &.slot-length-9 {
      grid-row-end: span 9;
    }
    &.slot-length-10 {
      grid-row-end: span 10;
    }
    &.slot-length-11 {
      grid-row-end: span 11;
    }
    &.slot-length-12 {
      grid-row-end: span 12;
    }
    &.slot-length-13 {
      grid-row-end: span 13;
    }
    &.slot-length-14 {
      grid-row-end: span 14;
    }
    &.slot-length-15 {
      grid-row-end: span 15;
    }
    &.slot-length-16 {
      grid-row-end: span 16;
    }
    &.slot-length-17 {
      grid-row-end: span 17;
    }
    &.slot-length-18 {
      grid-row-end: span 18;
    }
    &.slot-length-19 {
      grid-row-end: span 19;
    }
    &.slot-length-20 {
      grid-row-end: span 20;
    }
    &.slot-length-21 {
      grid-row-end: span 21;
    }
    &.slot-length-22 {
      grid-row-end: span 22;
    }
    &.slot-length-23 {
      grid-row-end: span 23;
    }
    &.slot-length-24 {
      grid-row-end: span 24;
    }
    &.slot-length-25 {
      grid-row-end: span 25;
    }
    &.slot-length-26 {
      grid-row-end: span 26;
    }
    &.slot-length-27 {
      grid-row-end: span 27;
    }
    &.slot-length-28 {
      grid-row-end: span 28;
    }
    &.slot-length-29 {
      grid-row-end: span 29;
    }
    &.slot-length-30 {
      grid-row-end: span 30;
    }
    &.slot-length-31 {
      grid-row-end: span 31;
    }
    &.slot-length-32 {
      grid-row-end: span 32;
    }
    &.slot-length-33 {
      grid-row-end: span 33;
    }
    &.slot-length-34 {
      grid-row-end: span 34;
    }
    &.slot-length-35 {
      grid-row-end: span 35;
    }
    &.slot-length-36 {
      grid-row-end: span 36;
    }
    &.slot-length-37 {
      grid-row-end: span 37;
    }
    &.slot-length-38 {
      grid-row-end: span 38;
    }
    &.slot-length-39 {
      grid-row-end: span 39;
    }
    &.slot-length-40 {
      grid-row-end: span 40;
    }
    &.slot-length-41 {
      grid-row-end: span 41;
    }
    &.slot-length-42 {
      grid-row-end: span 42;
    }
    &.slot-length-43 {
      grid-row-end: span 43;
    }
    &.slot-length-44 {
      grid-row-end: span 44;
    }
    &.slot-length-45 {
      grid-row-end: span 45;
    }
    &.slot-length-46 {
      grid-row-end: span 46;
    }
    &.slot-length-47 {
      grid-row-end: span 47;
    }
  }

  .pt-day {
    display: grid;

    grid-template-columns: 1fr;
    &:has(.pt-resource-header) {
      grid-template-columns: repeat(var(--resources), 1fr);
      &:has(.pt-time-gutter) {
        grid-template-columns: 1fr repeat(var(--resources), 10fr);
      }
    }
    &:not(:has(.pt-resource-header)) {
      .pt-time-slot {
        display: none;
      }
    }
    &:has(.pt-resource-header) {
      --resources: 1;
    }
    &:has(.pt-resource-header ~ .pt-resource-header) {
      --resources: 2;
    }
    &:has(.pt-resource-header ~ .pt-resource-header ~ .pt-resource-header) {
      --resources: 3;
    }
    &:has(.pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header) {
      --resources: 4;
    }
    &:has(.pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header) {
      --resources: 5;
    }
    &:has(.pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header) {
      --resources: 6;
    }
    &:has(.pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header) {
      --resources: 7;
    }

    .pt-day-header {
      grid-row-start: 1;
      grid-row-end: 1;
      grid-column-start: 1;
      grid-column-end: auto;
    }
    --resource-header-grid-start: 1;
    --resource-header-grid-end: 2;
    .pt-resource-header {
      grid-area: calc(var(--resource-header-grid-start)) / calc(var(--resource-header-grid-end));

      /*
      Array.from({ length: 24 }, (_, i) => i).reduce((all, c, idx, array) => `
      ~.pt-resource-header {
          grid-area: 1 / ${array.length - c + 2};
          ${all}
      }`, ``);
      */
      ~ .pt-resource-header {
        grid-area: calc(var(--resource-header-grid-start)) / calc(var(--resource-header-grid-end) + 1);
      }
      ~ .pt-resource-header ~ .pt-resource-header {
        grid-area: calc(var(--resource-header-grid-start)) / calc(var(--resource-header-grid-end) + 2);
      }
      ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header {
        grid-area: calc(var(--resource-header-grid-start)) / calc(var(--resource-header-grid-end) + 3);
      }
      ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header {
        grid-area: calc(var(--resource-header-grid-start)) / calc(var(--resource-header-grid-end) + 4);
      }
      ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header {
        grid-area: calc(var(--resource-header-grid-start)) / calc(var(--resource-header-grid-end) + 5);
      }
      ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header {
        grid-area: calc(var(--resource-header-grid-start)) / calc(var(--resource-header-grid-end) + 6);
      }
      ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header ~ .pt-resource-header {
        grid-area: calc(var(--resource-header-grid-start)) / calc(var(--resource-header-grid-end) + 7);
      }
    }
  }
}

.pt-time-gutter, .pt-time-slot, .pt-calendar-resource-time-slot {
  padding: 1rem;
  white-space: nowrap;
  border-right: 1px solid #cac7c1;
  border-bottom: 1px solid #cac7c1;
}
.program-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 1.2em;
    padding: 0 1em;
}

.program-menu a {
    text-decoration: none;
    color: #041f26;
    background-color: #fff;
    border: 1px solid #000000;
    padding: 0.5em 1em;
    font-size: clamp(1rem, calc(1.1vw), 2rem);
    /*font-size: calc(1.25vw);*/
    text-align: center;
    flex: 1;
}

.program-menu a.active {
    background-color: #e86b2d;
    color:#fff
}

.program-menu a:not(.active):hover {
    background-color: #afdee1;
    color: #565653;
}

.program-cards {
    padding: 1em;
    @media only screen and (max-width: 460px) {
        padding: 0;
    }
}

.program-card, .booking-card, .event-card {
    display: grid;
    grid-template-areas: "agegroup image name" "time image description" "location_info image actions";
    grid-template-columns: 1fr 1fr 3fr;
    margin: 2em 0;
    padding: 2em 5em 2.25em 1em;
    background-color: #eeedeb;
    grid-column-gap: 1em;
    border-radius: 0.75em;
    @media screen and (max-width: 460px) {
        padding: 2em 1em 2.25em 1em;
        grid-template-areas: "image image image"
                            "name name name"    
                            "description description description"
                            "location_info agegroup actions";
        align-items: end;
        grid-template-columns: 1fr 1fr 1fr;
        font-size:0.8em;
        .location-info, .agegroup, .button {
            margin-bottom: 0!important;
        }
    }
    .cover_image {
        display: grid;
        grid-area: image;
        width: 200px;
        margin-bottom: .5rem;
        @media screen and (max-width: 425px) {
            width: 100%;
        }
    }
    .cover_image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .name, .pt-card-title {
        display: grid;
        grid-area: name;
        font-size: 1.5rem;
        color: #1c6e7b;
        text-transform: uppercase;
    }
    .name a, .pt-card-title a {
        text-decoration: none;
        color: #1c6e7b;
    }
    .name a:hover, .pt-card-title a:hover {
        color: #e86b2d;
    }
    .description {
        display: grid;
        grid-area: description;
    }
    .date-time {
        grid-area: time;
        align-content: center;
    }
    .button, .show-details {
        display: grid;
        grid-area: actions;
        display: block;
        background-color: #e86b2d;
        color: #eeedeb;
        padding: 0.5em 0.5em;
        cursor: pointer;
        border-radius: 3px;
        width: fit-content;
        text-transform: uppercase;
        font-weight: bold;
        text-decoration: none;
        justify-self: end;
        align-self: end;
    }
    .button:hover, .show-details:hover {
        background-color: #f3b371;
    }
    .pt-card-actions {
        grid-area: actions;
        justify-self: end;
        align-self: end;
    }
    .age-group {
        display: flow;
        grid-area: agegroup;
        text-align: center;
        background-image: url(../../pagony.hu/programok/assets/age.png);
        background-repeat: no-repeat;
        background-size: 3.6em;
        background-position: top center;
        align-content: end;
        padding-top: 2.0em;
        margin-bottom: .5rem;
    }
    .location-info {
        display: grid;
        grid-area: location_info;
        text-align: center;
        color: #fff;
        font-size: 1.125em;
        border-radius: 3px;
        padding: 0.5em;
        width: fit-content;
        margin-bottom: .5rem;
        justify-self: center;
        @media screen and (max-width: 425px) {
            width: 100%;
        }
    }
}

.pt-calendar {
    .pt-calendar-header {
        align-items: center;
        display: grid;
        grid-template-areas: "pager header legend";
        grid-template-columns: 1fr 8fr 3fr;
        gap: 1rem;
        @media screen and (max-width: 768px) {
            grid-template-areas: "header" "legend" "pager";
            grid-template-columns: 1fr;
        }
        margin: 1rem 0;
    }
    .pt-calendar-title {
        grid-area: header;
        display: grid;
        align-items: center;
        font-size: 1.25rem;
    }
    .pt-calendar-pager {
        grid-area: pager;
        white-space: nowrap;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        gap: 1rem;
        button {
            display: grid;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 50%;
            padding: .5rem;
            text-align: center;
            text-decoration: none;
            min-width: 40px;
            background-color: #8BB5C6;
            color: #fff;
            min-height: 40px;
            .fa {
                display: none;
            }
            span {
                display: none;
            }
        }
        button:nth-child(1) {
            &::after {
                content: "\f104";
                font: normal normal normal 14px / 1 FontAwesome;
                font-size: inherit;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
            }
        }
        button:nth-child(2) {
            &:after {
                content: "\f015";
                font: normal normal normal 14px / 1 FontAwesome;
                font-size: inherit;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
            }
        }
        button:nth-child(3) {
            &:after {
                content: "\f105";
                font: normal normal normal 14px / 1 FontAwesome;
                font-size: inherit;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
            }
        }
        button[disabled] {
            border-color: #cac7c1;
        }
    }
    .day {
        display: flex;
        flex-direction: column;
        padding: 35px 5px 30px 5px;
        text-decoration: none;
        border: 0;
        border-bottom: 1px solid #cac7c1;
        border-right: 1px solid #cac7c1;
        .day-text {
            padding: .25rem;
            text-align: left;
            @media screen and (max-width: 768px) {
                font-size: .75rem;
                padding-bottom: 2.5rem;
            }
        }
        .open-day-text, .empty-day-text {
            padding: 2rem 1rem;
            padding-top: 1.25rem;
            @media screen and (max-width: 768px) {
                display: none;
            }
        }
    }
    .pt-calendar-resource-time-slot {
        button, span {
            text-decoration: none;
            &.self.occupied {
                background-color: rgba(146, 161, 67, .3);
            }
            &.occupied:not(.self) {
                background-color: rgba(245, 98, 93, .2);
            }
        }
    }
}

.pagination {
    display: flex;
    gap: .5rem;
    a, span {
        background-color: #eeedeb;
        padding: .6rem 1rem;
        color: #212529;
        text-decoration: none;
        &.active {
            background-color: #e86b2d;
            color: #eeedeb;
        }
    }
}