.ttb-widget {display:grid;grid-template-columns: 30% 70%;column-gap:20px}
.ttb-host h4 {margin-bottom:0}

.ttb-widget{border:0px solid #eee;border-radius:3px;padding:16px;max-width:760px}
.ttb-host{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.ttb-host-photo{width:80px;height:80px;border-radius:50%;object-fit:cover}
.ttb-step.ttb-step--calendar {max-width:400px !important}
.event .tte-form,
.ttb-step.ttb-step--form {border: 0px solid #eee;border-radius:3px;padding:30px 15px;background:var(--bg-light);position:relative}
.event .tte-form {padding:30px 0}
.ttb-step.ttb-step--done {border: 0px solid #eee;border-radius:3px;padding:40px 30px;background:var(--brand-2)}
.ttb-datepicker{margin:8px 0}
.ttb-slots{display:flex;flex-wrap:wrap;gap:8px;}
.ttb-slot{font-size:0.9em;padding:8px 12px;border:2px solid #d9f0e4;border-radius:30px;cursor:pointer;color:#1a1a1a;background:#d9f0e4}
.ttb-slot:hover{border-color:var(--brand-2);background:var(--brand-2)}
.ttb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.ttb-grid .ttb-colspan{grid-column:1/-1}
.ttb-grid label {font-size:0.9em}
.ttb-grid div:not(.ttb-colspan) {display:grid;grid-template-columns:33% 67%;min-width:0} 
.ttb-honeypot{display:none}
.ttb-back {border:2px solid var(--brand-1);background:transparent;color:var(--brand-1);padding:10px 30px;border-radius:30px;line-height:1.5;margin-right:5px}
.ttb-back:hover {border:2px solid var(--brand-3);background:var(--brand-3);color:var(--text);}
.ttb-confirm {border:2px solid var(--brand-1)}
.ttb-confirm:hover {border:2px solid var(--brand-2)}
.ttb-header .desc p {margin-bottom:0}
.ttb-header .duration {margin-top:20px;padding-left:25px;background:url('../icons/icon-clock.svg') left center no-repeat;background-size:18px}
.ttb-header .video {padding-left:25px;background:url('../icons/icon-video.svg') left center no-repeat;background-size:18px}
.event .tte-form {margin-top:20px}
.event .tte-occ-btn {font-size:0.9em;border:2px solid var(--brand-1);padding:10px 25px;background:transparent;color:var(--brand-1);border-radius:30px;margin:0 10px 10px 0;display:inline-flex;align-items:center;cursor:pointer}
.event .tte-occ-btn:hover {background:var(--brand-3);color:var(--text);border:2px solid var(--brand-3)}
.event .tte-occ-btn.active {background:var(--brand-1);color:var(--diap);border:2px solid var(--brand-1)}
.event .tte-occ-btn .tte-badge {margin-left: 10px;font-size:small;padding: 3px  15px 0;border-radius: 15px;background: var(--brand-2);color: var(--text);}
.event .tte-ok {padding:30px 40px;background:var(--brand-2);color:var(--text);}
.event .tte-series-book {margin-top:20px !important}
.event .tte-series-book:hover,.event .tte-series-book:focus {color:var(--text) !important}
.event .notice {padding:10px 0;background:var(--bg-light);color:var(--text);font-size:1.2em;font-family:var(--highlight-font-family)}
.ttb-widget.event {padding:100px 40px;background:var(--bg-light);max-width: calc(100vw - 30px) !important;width: calc(100vw - 30px) !important;margin-left: calc(((50vw - 50%) * -1) + 15px) !important;justify-content:center;grid-template-columns: 25% 60%;row-gap:20px}
.formtitle {color:var(--brand-1);text-align: center;}
form input:focus {outline:none}

@media only screen and (max-width: 1160px) {
  .ttb-widget.event {grid-template-columns: unset}
  .ttb-widget.event .gridcol {display:inline-flex;flex-direction:column}
}
@media only screen and (max-width: 768px) {
  .ttb-widget.event {grid-template-columns: unset;padding:80px 15px;}
  .ttb-widget.event .gridcol,
   .ttb-widget.event .ttb-host {display:inline-flex;flex-direction:column}
}

/* Kalender */
.ttb-cal{border:1px solid #eee;border-radius:3px;padding:8px}
.ttb-cal__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ttb-cal__nav{display:flex;gap:6px}
.ttb-cal__nav button{border:none;color:#1a1a1a;background:#fff;border-radius:3px;padding:4px 8px;cursor:pointer}
.ttb-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.ttb-cal__dow{text-align:center;font-size:12px;color:#666;padding:4px}
.ttb-day{height:36px;border:1px solid #eee;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#444;background:#fafafa}
.ttb-day.is-out{opacity:.35}
.ttb-day.is-disabled{opacity:.4;background:#f6f6f6;cursor:not-allowed}
.ttb-day.is-available{background:var(--diap);border-color:#cfe9d8;cursor:pointer}
.ttb-day.is-available:hover{background:var(--brand-3)}
.ttb-day.is-today{outline:2px solid #cfe9d8}
.ttb-day.is-selected{background:#d9f0e4;border-color:#9ed0bb;font-weight:600}

@media only screen and (max-width: 768px) {
.ttb-widget {grid-template-columns: 100%;row-gap:20px}
.ttb-step.ttb-step--form {padding:20px}
.ttb-grid, .ttb-grid div:not(.ttb-colspan) {grid-template-columns: 100%}
.ttb-back {margin-top:10px}
.ttb-confirm {margin:10px 0 20px}
}

/* confirmation panel */
.ttb-modal__overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:999999;opacity:0;pointer-events:none;transition:opacity .15s ease}
.ttb-modal__overlay.is-open{opacity:1;pointer-events:auto}
.ttb-modal__panel {background: var(--brand-2);color:var(--text);max-width: min(640px, 90vw);max-height: 90vh;overflow: auto;box-shadow: 0 20px 60px rgba(0, 0, 0, .25);padding: 30px;position: relative;}
.ttb-modal__close {position: absolute;right:0;top:0;display:flex;justify-content:center;align-items:center;border: 0;border-radius:0;background: var(--bg-dark);color:var(--diap);font-size: 24px;font-weight:600;line-height: 1;cursor: pointer;padding: 0;width: 30px;height: 30px;}
.ttb-modal__panel h4{margin-top:0}

@media (max-width: 599px) {
  .event .tte-occ-btn {font-size:0.8em;}
}

/* Groups Tabs */
.tte-group h4#event-signup {display:none !important}
.tte-group-tabs {margin-bottom:0 !important}
.tte-group-panel {padding: 0 !important;border-color:var(--brand-1) !important}
.tte-group .ttb-widget.event .notice,
.tte-group .ttb-widget.event .tte-form {background: transparent !important}
.tte-group .ttb-widget.event {max-width:unset;width:100% !important;margin-left:0 !important;padding:40px !important;background: var(--bg-light)}
.tte-group-tab {color: var(--brand-1) !important;position:relative;top:1px;border:1px solid var(--bg-light) !important;border-bottom: 1px solid var(--brand-1) !important;background:#fff !important}
.tte-group-tab.is-active {color:var(--accent) !important;border-color:var(--brand-1) !important;border-bottom: 1px solid var(--bg-light) !important;}
.tte-group .tte-occ-row:hover {background:var(--brand-3) !important}
.tte-group .tte-multi-book {margin-top:20px}
@media (max-width: 599px) {
  .tte-group-tab {display:block !important;width:100%;top:0;border-bottom: 0 !important;border-radius:0 !important;border-color:var(--brand-1) !important;background: rgba(122,126,99,0.05) !important}
  .tte-group-tab.is-active {background: #fff !important}
  .ttb-widget.event {padding: 40px 15px !important}
  .tte-occ-row {font-size:0.9rem}
  .event .notice {font-size:1.1rem}
}


/* spinner */
.ttb-spinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.65);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.ttb-spinner-inner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--brand-1);
  border-top-color: var(--brand-2);
  border-radius: 50%;
  animation: ttb-spin 0.8s linear infinite;
}

@keyframes ttb-spin {
  to {
    transform: rotate(360deg);
  }
}
