:root {
/*------------------------------------------------------------
    Calendar Group - Modern Corporate (Colour declerations
  ------------------------------------------------------------*/
  --cal-grp-ba6c-bg-headerBackground-mode: solid;
  --cal-grp-ba6c-bg-headerBackground-color1: #0a4d8c;
  --cal-grp-ba6c-bg-barHeaderText: #ffffff;
  --cal-grp-ba6c-bg-barLocationText: #a9c7e2;
  --cal-grp-ba6c-bg-barTimeText: #d6e8f7;
  --cal-grp-ba6c-bg-cardBodyBackground-mode: solid;
  --cal-grp-ba6c-bg-cardBodyBackground-color1: #ffffff;
  --cal-grp-ba6c-bg-headerText: #0a4d8c;
  --cal-grp-ba6c-bg-secondaryHeaderText: #1a6fb3;
  --cal-grp-ba6c-bg-bodyText: #333333;
  --cal-grp-ba6c-bg-timeText: #0a4d8c;
  --cal-grp-ba6c-bg-linkText: #0a4d8c;
  --cal-grp-ba6c-bg-linkHoverText: #083b6a;
  --cal-grp-ba6c-bg-highlightBackground: #1a6fb3;
  --cal-grp-ba6c-bg-highlightText: #ffffff;
  --cal-grp-ba6c-bg-borderColour: #d0d7df;
  --cal-grp-ba6c-bg-shadowColour1: rgb(0, 0, 0);
  --cal-grp-ba6c-bg-shadowColour2: #000000;
/*------------------------------------------------------------
    Calendar Group - Warm & Friendly (Colour declerations
  ------------------------------------------------------------*/
  --cal-grp-c98c-bg-headerBackground-mode: solid;
  --cal-grp-c98c-bg-headerBackground-color1: #f28c28;
  --cal-grp-c98c-bg-barHeaderText: #ffffff;
  --cal-grp-c98c-bg-barTimeText: #ffe3c2;
  --cal-grp-c98c-bg-barLocationText: #ffd4a3;
  --cal-grp-c98c-bg-cardBodyBackground-mode: solid;
  --cal-grp-c98c-bg-cardBodyBackground-color1: #fff8f0;
  --cal-grp-c98c-bg-headerText: #c45a00;
  --cal-grp-c98c-bg-secondaryHeaderText: #d66f1a;
  --cal-grp-c98c-bg-bodyText: #5a4633;
  --cal-grp-c98c-bg-timeText: #c45a00;
  --cal-grp-c98c-bg-locationText: #7a5e47;
  --cal-grp-c98c-bg-linkText: #c45a00;
  --cal-grp-c98c-bg-linkHoverText: #9e4800;
  --cal-grp-c98c-bg-highlightBackground: #f28c28;
  --cal-grp-c98c-bg-highlightText: #ffffff;
  --cal-grp-c98c-bg-shadowColour1: rgb(0, 0, 0);
  --cal-grp-c98c-bg-shadowColour2: rgb(0, 0, 0);
  --cal-grp-c98c-bg-borderColour: #e6d5c2;
/*------------------------------------------------------------
    Calendar Group - Dark Mode Pro (Colour declerations
  ------------------------------------------------------------*/
  --cal-grp-0051-bg-headerBackground-mode: solid;
  --cal-grp-0051-bg-headerBackground-color1: #1c1c1e;
  --cal-grp-0051-bg-barHeaderText: #ffffff;
  --cal-grp-0051-bg-barTimeText: #bfbfbf;
  --cal-grp-0051-bg-barLocationText: #8f8f8f;
  --cal-grp-0051-bg-headerText: #ffffff;
  --cal-grp-0051-bg-cardBodyBackground-mode: solid;
  --cal-grp-0051-bg-cardBodyBackground-color1: #2a2a2d;
  --cal-grp-0051-bg-secondaryHeaderText: #d0d0d0;
  --cal-grp-0051-bg-bodyText: #e5e5e5;
  --cal-grp-0051-bg-timeText: #ffffff;
  --cal-grp-0051-bg-locationText: #afafaf;
  --cal-grp-0051-bg-linkText: #4da3ff;
  --cal-grp-0051-bg-linkHoverText: #1e7fe6;
  --cal-grp-0051-bg-highlightBackground: #4da3ff;
  --cal-grp-0051-bg-highlightText: #000000;
  --cal-grp-0051-bg-borderColour: #3a3a3d;
  --cal-grp-0051-bg-shadowColour1: rgb(0, 0, 0);
  --cal-grp-0051-bg-shadowColour2: rgb(0, 0, 0);
/*------------------------------------------------------------
    Calendar Group - Fresh Mint (Colour declerations
  ------------------------------------------------------------*/
  --cal-grp-12fe-bg-headerBackground-mode: solid;
  --cal-grp-12fe-bg-headerBackground-color1: #2ecc71;
  --cal-grp-12fe-bg-barHeaderText: #ffffff;
  --cal-grp-12fe-bg-barTimeText: #e8fff2;
  --cal-grp-12fe-bg-barLocationText: #c8f7dc;
  --cal-grp-12fe-bg-cardBodyBackground-mode: solid;
  --cal-grp-12fe-bg-cardBodyBackground-color1: #fff7f2;
  --cal-grp-12fe-bg-headerText: #1e8c4a;
  --cal-grp-12fe-bg-secondaryHeaderText: #27ae60;
  --cal-grp-12fe-bg-bodyText: #2e2e2e;
  --cal-grp-12fe-bg-linkText: #27ae60;
  --cal-grp-12fe-bg-timeText: #1e8c4a;
  --cal-grp-12fe-bg-locationText: #6a6a6a;
  --cal-grp-12fe-bg-linkHoverText: #1e8c4a;
  --cal-grp-12fe-bg-highlightBackground: #2ecc71;
  --cal-grp-12fe-bg-borderColour: #d6ede1;
  --cal-grp-12fe-bg-shadowColour1: rgb(0, 0, 0);
  --cal-grp-12fe-bg-shadowColour2: rgb(0, 0, 0);
/*------------------------------------------------------------
    Calendar Group - Sunset Gradient (Colour declerations
  ------------------------------------------------------------*/
  --cal-grp-0ba9-bg-headerBackground-mode: gradient;
  --cal-grp-0ba9-bg-headerBackground-color1: #ff7e5f;
  --cal-grp-0ba9-bg-headerBackground-color2: #000000;
  --cal-grp-0ba9-bg-headerBackground-gradientDirection: to right;
  --cal-grp-0ba9-bg-barHeaderText: #ffffff;
  --cal-grp-0ba9-bg-barTimeText: #ffe8d6;
  --cal-grp-0ba9-bg-barLocationText: #ffd5b8;
  --cal-grp-0ba9-bg-cardBodyBackground-mode: solid;
  --cal-grp-0ba9-bg-cardBodyBackground-color1: #ffffff;
  --cal-grp-0ba9-bg-headerText: #c45a00;
  --cal-grp-0ba9-bg-secondaryHeaderText: #d66f1a;
  --cal-grp-0ba9-bg-bodyText: #5a4633;
  --cal-grp-0ba9-bg-timeText: #c45a00;
  --cal-grp-0ba9-bg-locationText: #7a5e47;
  --cal-grp-0ba9-bg-linkText: #ff7e5f;
  --cal-grp-0ba9-bg-linkHoverText: #e86a4c;
  --cal-grp-0ba9-bg-highlightBackground: #feb47b;
  --cal-grp-0ba9-bg-highlightText: #000000;
  --cal-grp-0ba9-bg-borderColour: #e6d5c2;
  --cal-grp-0ba9-bg-shadowColour1: rgb(0, 0, 0);
  --cal-grp-0ba9-bg-shadowColour2: rgb(0, 0, 0);
/*------------------------------------------------------------
    Calendar Group - Minimal Grey (Colour declerations
  ------------------------------------------------------------*/
  --cal-grp-928e-bg-headerBackground-mode: solid;
  --cal-grp-928e-bg-headerBackground-color1: #f2f2f2;
  --cal-grp-928e-bg-barHeaderText: #333333;
  --cal-grp-928e-bg-barTimeText: #666666;
  --cal-grp-928e-bg-barLocationText: #999999;
  --cal-grp-928e-bg-cardBodyBackground-mode: solid;
  --cal-grp-928e-bg-cardBodyBackground-color1: #ffffff;
  --cal-grp-928e-bg-headerText: #222222;
  --cal-grp-928e-bg-secondaryHeaderText: #444444;
  --cal-grp-928e-bg-bodyText: #555555;
  --cal-grp-928e-bg-timeText: #333333;
  --cal-grp-928e-bg-locationText: #777777;
  --cal-grp-928e-bg-linkText: #0078d4;
  --cal-grp-928e-bg-linkHoverText: #005a9e;
  --cal-grp-928e-bg-highlightBackground: #e0e0e0;
  --cal-grp-928e-bg-highlightText: #c8c8c8;
  --cal-grp-928e-bg-borderColour: #dddddd;
  --cal-grp-928e-bg-shadowColour1: rgb(0, 0, 0);
  --cal-grp-928e-bg-shadowColour2: rgb(0, 0, 0);
}
/*------------------------------------------------------------
    Calendar Group — Common Styles
------------------------------------------------------------*/

/* Event cards */
.calendar-card {
  position: relative;
  padding: 2px 4px;
  transition: all 0.2s ease;
}

.calendar-card .calendar-grid-header {
    padding: 8px 12px;
    border-radius: 4px;
}

.calendar-card .header {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
}

.calendar-card .secondary-header {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.9;
    margin-bottom: 4px;
}

.calendar-card .body {
    font-size: 14px;
    line-height: 1.6;
}

.calendar-card .highlight {
    padding: 2px 4px;
    border-radius: 2px;
}

.calendar-card table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.calendar-card table td {
    padding: 6px;
    border: 1px solid var(--uui-color-border);
}

/* Buttons styled like calendar previews */

.group-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.group-option[class*="cal-grp-"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 600;
  text-align: left;
  transition: all 0.2s ease;
}

.group-option[class*="cal-grp-"] .time {
  font-size: 13px;
  font-weight: 500;
}

.group-option[class*="cal-grp-"] .title {
  color: var(--cal-grp-bg-barHeaderText);
  font-size: 15px;
  font-weight: 700;
}

.group-option[class*="cal-grp-"] .location {
  color: var(--cal-grp-bg-barLocationText);
  font-size: 12px;
  opacity: 0.9;
}

button.group-option.group-option[class*="cal-grp-"]:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

button.group-option.group-option {
  position: relative;
  cursor: pointer;
}

button.group-option::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid;
  background-color: transparent;
  transition: all 0.2s ease;
}

button.group-option:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

button.group-option.selected {
  outline: 2px solid var(--cal-grp-bg-barHeaderText);
}

.calendar-event {
    display: block;
    padding: 4px 6px;
    margin: 2px 0;
    border-radius: 4px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.calendar-event:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.calendar .calendar-event[class*="cal-grp-"],
.calendar-card-wrapper[class*="cal-grp-"] .calendar-event {
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;

    background: var(--cal-grp-bg-headerBackground-color1);
    color: var(--cal-grp-bg-bodyText);
    border: 1px solid var(--cal-grp-bg-borderColour);
}

.calendar-card-wrapper[class*="cal-grp-"] .calendar-card {
    background: var(--cal-grp-bg-cardBodyBackground-color1);
    color: var(--cal-grp-bg-bodyText);
    border: 1px solid var(--cal-grp-bg-borderColour);
    box-shadow:
        0 4px 8px var(--cal-grp-bg-shadowColour1),
        0 8px 16px var(--cal-grp-bg-shadowColour2);
}

.calendar .calendar-event .event-title {
    font-size: 14px;
    font-weight: 600;
}

.calendar .calendar-event .event-time {
    font-size: 12px;
    opacity: 0.8;
}

.calendar .calendar-event .event-location {
    font-size: 12px;
    opacity: 0.8;
}

.calendar .calendar-event a {
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
}

/* ============================================================
   Card (Calendar Card)
   ============================================================ */

.event-view .calendar-card {
   padding: 0px;
}

.event-view:not(.has-borders),
.event-view:not(.has-borders) .calendar-card .calendar-card-footer .calendar-bttn {
    border: none;
}

.event-view:not(.has-border-radius),
.event-view:not(.has-border-radius) .calendar-card .calendar-card-footer .calendar-bttn {
    border-radius: 0px;
}

.event-view.has-borders {
    border-width: var(--base-border-width);
    border-style: solid;
}

.event-view.has-border-radius {
    border-radius: var(--base-border-radius);
}

/* ============================================================
   Card (Calendar Card) - Header
   ============================================================ */

.event-view .calendar-card .calendar-card-header {
   display: flex;
   flex-direction: column;  /* stack items vertically */
   align-items: flex-start; /* align text to the left */
   padding: 0.75rem 1.5rem;
   gap: 0.05rem;            /* small spacing between rows */
}
.event-view .calendar-card .calendar-card-header p {
   margin: 0px;            /* override bootstrap defaults */
}

.event-view.has-border-radius .calendar-card .calendar-card-header{
    border-top-left-radius: calc(var(--base-border-radius) - var(--base-border-width));
    border-top-right-radius: calc(var(--base-border-radius) - var(--base-border-width));
}

/* ============================================================
   Card (Calendar Card) - Body
   ============================================================ */

.event-view .calendar-card .calendar-card-body {
   display: flex;
   flex-direction: column;  /* stack items vertically */
   align-items: flex-start; /* align text to the left */
   padding: 0.75rem 1.5rem;
   gap: 0.05rem;            /* small spacing between rows */
}

.event-view .calendar-card .calendar-card-body p {
   margin: 0px;            /* override bootstrap defaults */
}

/* ============================================================
   Card (Calendar Card) - Footer
   ============================================================ */

.event-view .calendar-card .calendar-card-footer {
   display: flex;
   flex-direction: column;  /* stack items vertically */
   align-items: flex-start; /* align text to the left */
   padding: 0.75rem 1.5rem;
   gap: 0.05rem;            /* small spacing between rows */
   width: 100%;                /* REQUIRED for right alignment to work */
}

.event-view .calendar-card .calendar-card-footer p {
   margin: 0px;            /* override bootstrap defaults */
}

.event-view.has-border-radius .calendar-card .calendar-card-footer {
    border-bottom-left-radius: calc(var(--base-border-radius) - var(--base-border-width));
    border-bottom-right-radius: calc(var(--base-border-radius) - var(--base-border-width));
}

/* ============================================================
   Card (Calendar Card) - Button
   ============================================================ */

.event-view .calendar-card .calendar-bttn {
    display: inline-flex;       /* makes align-self work properly */
    padding: var(--btn-padding_top) var(--btn-padding_right);
   
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.event-view .calendar-card .calendar-bttn.align-left {
    align-self: flex-start; 
}

.event-view .calendar-card .calendar-bttn.align-right {
    align-self: flex-end; 
}

.event-view .calendar-card .calendar-bttn.align-center {
    align-self: center;
}

.event-view .calendar-card .calendar-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.event-view.has-borders .calendar-card .calendar-card-footer .calendar-bttn {
    border-width: var(--btn-border-width);
    border-style: solid;
}

.event-view.has-border-radius .calendar-card .calendar-card-footer .calendar-bttn {
    border-radius: var(--btn-border-radius); /* soften corners */
}

/* ============================================================
   Card Tooltip (Calendar Card)
   ============================================================ */

.calendar-card .calendar-card-tooltip {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 6px;
  padding: 8px 12px;
  width: 220px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 999;
}

/* Show tooltip on hover */
.calendar-card:hover .calendar-card-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* Tooltip content */
.calendar-card .calendar-card-tooltip .tooltip-header {
  font-weight: 700;
  margin-bottom: 4px;
}

.calendar-tooltip-header .time {
  margin-bottom: 4px;
}

.calendar-tooltip-body {
  font-size: 12px;
}
/*------------------------------------------------------------
    Calendar Group Background — Modern Corporate
------------------------------------------------------------*/

/* ============================================================
   VARIABLE ALIASES FOR BUTTONS (Theme-Aware)
   ============================================================ */

/* Solid header */
.calendar-card .calendar-card-footer.cal-grp-ba6c-bg .calendar-bttn {
    color: var(--cal-grp-ba6c-bg-barHeaderText);
}

/* Solid header */
.calendar-card .calendar-card-footer.cal-grp-ba6c-bg .calendar-bttn {
    background: var(--cal-grp-ba6c-bg-headerBackground-color1);
}

.event-view.has-border .calendar-card .calendar-card-footer.cal-grp-ba6c-bg .calendar-bttn {
    border-color: var(--cal-grp-ba6c-bg-borderColour)
}

.event-view.cal-grp-ba6c-bg.has-box-shadow {
    box-shadow:
        var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) var(--cal-grp-ba6c-bg-shadowColour1),
        calc(var(--btn-box-shadow_h) * 2) calc(var(--btn-box-shadow_v) * 2) calc(var(--btn-box-shadow_b) * 2) var(--cal-grp-ba6c-bg-shadowColour2);
}


/* ============================================================
   Card (Calendar Card)
   ============================================================ */

.event-view:not(.has-borders) {
    border: none;
}

.event-view:not(.has-border-radius) {
    border-radius: 0px;
}

.event-view.cal-grp-ba6c-bg.has-borders {
    border-colour: var(--cal-grp-ba6c-bg-borderColour);
}

.event-view.cal-grp-ba6c-bg.has-borders {
    border-colour: var(--cal-grp-ba6c-bg-borderColour);
}

.event-view.cal-grp-ba6c-bg.has-box-shadow {
    box-shadow:
        0 4px 8px var(--cal-grp-ba6c-bg-shadowColour1),
        0 8px 16px var(--cal-grp-ba6c-bg-shadowColour2);
}

/* ============================================================
   HEADER (Calendar Card Header)
   ============================================================ */

/* Solid header */

button.group-option.cal-grp-ba6c-bg, 
.calendar-card .calendar-card-header.cal-grp-ba6c-bg h3,
.calendar-card.cal-grp-ba6c-bg.calendar-card-grid {
    color: var(--cal-grp-ba6c-bg-barHeaderText);
}

/* Solid header */
button.group-option.cal-grp-ba6c-bg.solid, 
.calendar-card .calendar-card-header.cal-grp-ba6c-bg.solid,
.calendar-card.cal-grp-ba6c-bg.solid.calendar-card-grid {
    background: var(--cal-grp-ba6c-bg-headerBackground-color1);
}

/* Gradient header (direction applied via class) */
button.group-option.cal-grp-ba6c-bg.gradient-to-right, 
.calendar-card .calendar-card-header.cal-grp-ba6c-bg.gradient-to-right, 
.calendar-card.cal-grp-ba6c-bg.gradient-to-right.calendar-card-grid {
    background: linear-gradient(
        to right,
        var(--cal-grp-ba6c-bg-headerBackground-color1),
        var(--cal-grp-ba6c-bg-headerBackground-color2)
    );
}

button.group-option.cal-grp-ba6c-bg.gradient-to-left,
.calendar-card .calendar-card-header.cal-grp-ba6c-bg.gradient-to-left, 
.calendar-card.cal-grp-ba6c-bg.gradient-to-left.calendar-card-grid {
    background: linear-gradient(
        to left,
        var(--cal-grp-ba6c-bg-headerBackground-color1),
        var(--cal-grp-ba6c-bg-headerBackground-color2)
    );
    color: var(--cal-grp-ba6c-bg-barHeaderText);
}

button.group-option.cal-grp-ba6c-bg.gradient-to-bottom,
.calendar-card .calendar-card-header.cal-grp-ba6c-bg.gradient-to-bottom,
.calendar-card.cal-grp-ba6c-bg.gradient-to-bottom.calendar-card-grid {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-ba6c-bg-headerBackground-color1),
        var(--cal-grp-ba6c-bg-headerBackground-color2)
    );
    color: var(--cal-grp-ba6c-bg-barHeaderText);
}

button.group-option.cal-grp-ba6c-bg.gradient-to-top,
.calendar-card .calendar-card-header.cal-grp-ba6c-bg.gradient-to-top,
.calendar-card.cal-grp-ba6c-bg.gradient-to-top.calendar-card-grid {
    background: linear-gradient(
        to top,
        var(--cal-grp-ba6c-bg-headerBackground-color1),
        var(--cal-grp-ba6c-bg-headerBackground-color2)
    );
}

/* Time + location text */
.calendar-card .calendar-card-header.cal-grp-ba6c-bg .time,
.calendar-card.cal-grp-ba6c-bg.calendar-card-grid .time {
    color: var(--cal-grp-ba6c-bg-barTimeText);
}

.calendar-card .calendar-card-header.cal-grp-ba6c-bg .location,
.calendar-card.cal-grp-ba6c-bg.calendar-card-grid .location{
    color: var(--cal-grp-ba6c-bg-barLocationText);
}


/* ============================================================
   CARD BODY
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-ba6c-bg {
    color: var(--cal-grp-ba6c-bg-bodyText);
}

/* Solid card body */
.calendar-card .calendar-card-body.cal-grp-ba6c-bg.solid {
    background: var(--cal-grp-ba6c-bg-cardBodyBackground-color1);
}

/* Gradient card body */
.calendar-card .calendar-card-body.cal-grp-ba6c-bg.gradient-to-right {
    background: linear-gradient(
        to right,
        var(--cal-grp-ba6c-bg-cardBodyBackground-color1),
        var(--cal-grp-ba6c-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-ba6c-bg.gradient-to-left {
    background: linear-gradient(
        to left,
        var(--cal-grp-ba6c-bg-cardBodyBackground-color1),
        var(--cal-grp-ba6c-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-ba6c-bg.gradient-to-bottom {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-ba6c-bg-cardBodyBackground-color1),
        var(--cal-grp-ba6c-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-ba6c-bg.gradient-to-top {
    background: linear-gradient(
        to top,
        var(--cal-grp-ba6c-bg-cardBodyBackground-color1),
        var(--cal-grp-ba6c-bg-cardBodyBackground-color2)
    );
}

/* ============================================================
   CARD Footer
   ============================================================ */

.calendar-card .calendar-card-footer.cal-grp-ba6c-bg {
    color: var(--cal-grp-ba6c-bg-bodyText);
}

/* Solid card body */
.calendar-card .calendar-card-footer.cal-grp-ba6c-bg.solid {
    background: var(--cal-grp-ba6c-bg-cardBodyBackground-color1);
}

/* Gradient card body */
.calendar-card .calendar-card-footer.cal-grp-ba6c-bg.gradient-to-right {
    background: linear-gradient(
        to right,
        var(--cal-grp-ba6c-bg-cardBodyBackground-color1),
        var(--cal-grp-ba6c-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-ba6c-bg.gradient-to-left {
    background: linear-gradient(
        to left,
        var(--cal-grp-ba6c-bg-cardBodyBackground-color1),
        var(--cal-grp-ba6c-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-ba6c-bg.gradient-to-bottom {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-ba6c-bg-cardBodyBackground-color1),
        var(--cal-grp-ba6c-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-ba6c-bg.gradient-to-top {
    background: linear-gradient(
        to top,
        var(--cal-grp-ba6c-bg-cardBodyBackground-color1),
        var(--cal-grp-ba6c-bg-cardBodyBackground-color2)
    );
}


/* ============================================================
   HEADINGS
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-ba6c-bg .header {
    color: var(--cal-grp-ba6c-bg-headerText);
}

.calendar-card .calendar-card-body.cal-grp-ba6c-bg .secondary-header {
    color: var(--cal-grp-ba6c-bg-secondaryHeaderText);
}

.calendar-card .calendar-card-body.cal-grp-ba6c-bg .time {
    color: var(--cal-grp-ba6c-bg-secondaryHeaderText);
}

/* ============================================================
   Card Tooltip Header (Calendar Card)
   ============================================================ */

.calendar-card .calendar-card-tooltip .tooltip-header.cal-grp-ba6c-bg.solid {
    background: var(--cal-grp-ba6c-bg-headerBackground-color1);
}

/* ============================================================
   Card Tooltip Body (Calendar Card)
   ============================================================ */

.calendar-card-tooltip .tooltip-body.cal-grp-ba6c-bg.solid {
    background: var(--cal-grp-ba6c-bg-cordBodyBackground-color1);
}

/* ============================================================
   LINKS
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-ba6c-bg a {
    color: var(--cal-grp-ba6c-bg-linkText);
}

.calendar-card .calendar-card-body.cal-grp-ba6c-bg a:hover {
    color: var(--cal-grp-ba6c-bg-linkHoverText);
}


/* ============================================================
   HIGHLIGHTS
   ============================================================ */

.calendar-card.cal-grp-ba6c-bg .calendar-card-body .highlight {
    background: var(--cal-grp-ba6c-bg-highlightBackground-color1);
    color: var(--cal-grp-ba6c-bg-highlightText);
}


/* ============================================================
   BORDERS
   ============================================================ */

.calendar-card.cal-grp-ba6c-bg.has-border {
    border: 1px solid var(--cal-grp-ba6c-bg-borderColour);
}

.calendar-card.cal-grp-ba6c-bg.has-border:hover {
    border-color: var(--cal-grp-ba6c-bg-hoverBorderColour);
}


/* ============================================================
   SHADOWS
   ============================================================ */

.calendar-card.cal-grp-ba6c-bg.has-shadow{
    box-shadow: 0 4px 8px var(--cal-grp-ba6c-bg-boxShadowColour);
}

.calendar-card.cal-grp-ba6c-bg.has-shadow:hover {
    box-shadow: 0 4px 8px var(--cal-grp-ba6c-bg-hoverBoxShadowColour);
}

/* ============================================================
   Event Editor Calendar Group indicator
   ============================================================ */
button.group-option.cal-grp-ba6c-bg::after {
    border-color: var(--cal-grp-ba6c-bg-borderColour);
}

button.group-option.cal-grp-ba6c-bg.selected::after {
  background-color: var(--cal-grp-ba6c-bg-barHeaderText);
  border-color: var(--cal-grp-ba6c-bg-barHeaderText);
}

/*------------------------------------------------------------
    Calendar Group Background — Warm & Friendly
------------------------------------------------------------*/

/* ============================================================
   VARIABLE ALIASES FOR BUTTONS (Theme-Aware)
   ============================================================ */

/* Solid header */
.calendar-card .calendar-card-footer.cal-grp-c98c-bg .calendar-bttn {
    color: var(--cal-grp-c98c-bg-barHeaderText);
}

/* Solid header */
.calendar-card .calendar-card-footer.cal-grp-c98c-bg .calendar-bttn {
    background: var(--cal-grp-c98c-bg-headerBackground-color1);
}

.event-view.has-border .calendar-card .calendar-card-footer.cal-grp-c98c-bg .calendar-bttn {
    border-color: var(--cal-grp-c98c-bg-borderColour)
}

.event-view.cal-grp-c98c-bg.has-box-shadow {
    box-shadow:
        var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) var(--cal-grp-c98c-bg-shadowColour1),
        calc(var(--btn-box-shadow_h) * 2) calc(var(--btn-box-shadow_v) * 2) calc(var(--btn-box-shadow_b) * 2) var(--cal-grp-c98c-bg-shadowColour2);
}


/* ============================================================
   Card (Calendar Card)
   ============================================================ */

.event-view:not(.has-borders) {
    border: none;
}

.event-view:not(.has-border-radius) {
    border-radius: 0px;
}

.event-view.cal-grp-c98c-bg.has-borders {
    border-colour: var(--cal-grp-c98c-bg-borderColour);
}

.event-view.cal-grp-c98c-bg.has-borders {
    border-colour: var(--cal-grp-c98c-bg-borderColour);
}

.event-view.cal-grp-c98c-bg.has-box-shadow {
    box-shadow:
        0 4px 8px var(--cal-grp-c98c-bg-shadowColour1),
        0 8px 16px var(--cal-grp-c98c-bg-shadowColour2);
}

/* ============================================================
   HEADER (Calendar Card Header)
   ============================================================ */

/* Solid header */

button.group-option.cal-grp-c98c-bg, 
.calendar-card .calendar-card-header.cal-grp-c98c-bg h3,
.calendar-card.cal-grp-c98c-bg.calendar-card-grid {
    color: var(--cal-grp-c98c-bg-barHeaderText);
}

/* Solid header */
button.group-option.cal-grp-c98c-bg.solid, 
.calendar-card .calendar-card-header.cal-grp-c98c-bg.solid,
.calendar-card.cal-grp-c98c-bg.solid.calendar-card-grid {
    background: var(--cal-grp-c98c-bg-headerBackground-color1);
}

/* Gradient header (direction applied via class) */
button.group-option.cal-grp-c98c-bg.gradient-to-right, 
.calendar-card .calendar-card-header.cal-grp-c98c-bg.gradient-to-right, 
.calendar-card.cal-grp-c98c-bg.gradient-to-right.calendar-card-grid {
    background: linear-gradient(
        to right,
        var(--cal-grp-c98c-bg-headerBackground-color1),
        var(--cal-grp-c98c-bg-headerBackground-color2)
    );
}

button.group-option.cal-grp-c98c-bg.gradient-to-left,
.calendar-card .calendar-card-header.cal-grp-c98c-bg.gradient-to-left, 
.calendar-card.cal-grp-c98c-bg.gradient-to-left.calendar-card-grid {
    background: linear-gradient(
        to left,
        var(--cal-grp-c98c-bg-headerBackground-color1),
        var(--cal-grp-c98c-bg-headerBackground-color2)
    );
    color: var(--cal-grp-c98c-bg-barHeaderText);
}

button.group-option.cal-grp-c98c-bg.gradient-to-bottom,
.calendar-card .calendar-card-header.cal-grp-c98c-bg.gradient-to-bottom,
.calendar-card.cal-grp-c98c-bg.gradient-to-bottom.calendar-card-grid {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-c98c-bg-headerBackground-color1),
        var(--cal-grp-c98c-bg-headerBackground-color2)
    );
    color: var(--cal-grp-c98c-bg-barHeaderText);
}

button.group-option.cal-grp-c98c-bg.gradient-to-top,
.calendar-card .calendar-card-header.cal-grp-c98c-bg.gradient-to-top,
.calendar-card.cal-grp-c98c-bg.gradient-to-top.calendar-card-grid {
    background: linear-gradient(
        to top,
        var(--cal-grp-c98c-bg-headerBackground-color1),
        var(--cal-grp-c98c-bg-headerBackground-color2)
    );
}

/* Time + location text */
.calendar-card .calendar-card-header.cal-grp-c98c-bg .time,
.calendar-card.cal-grp-c98c-bg.calendar-card-grid .time {
    color: var(--cal-grp-c98c-bg-barTimeText);
}

.calendar-card .calendar-card-header.cal-grp-c98c-bg .location,
.calendar-card.cal-grp-c98c-bg.calendar-card-grid .location{
    color: var(--cal-grp-c98c-bg-barLocationText);
}


/* ============================================================
   CARD BODY
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-c98c-bg {
    color: var(--cal-grp-c98c-bg-bodyText);
}

/* Solid card body */
.calendar-card .calendar-card-body.cal-grp-c98c-bg.solid {
    background: var(--cal-grp-c98c-bg-cardBodyBackground-color1);
}

/* Gradient card body */
.calendar-card .calendar-card-body.cal-grp-c98c-bg.gradient-to-right {
    background: linear-gradient(
        to right,
        var(--cal-grp-c98c-bg-cardBodyBackground-color1),
        var(--cal-grp-c98c-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-c98c-bg.gradient-to-left {
    background: linear-gradient(
        to left,
        var(--cal-grp-c98c-bg-cardBodyBackground-color1),
        var(--cal-grp-c98c-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-c98c-bg.gradient-to-bottom {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-c98c-bg-cardBodyBackground-color1),
        var(--cal-grp-c98c-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-c98c-bg.gradient-to-top {
    background: linear-gradient(
        to top,
        var(--cal-grp-c98c-bg-cardBodyBackground-color1),
        var(--cal-grp-c98c-bg-cardBodyBackground-color2)
    );
}

/* ============================================================
   CARD Footer
   ============================================================ */

.calendar-card .calendar-card-footer.cal-grp-c98c-bg {
    color: var(--cal-grp-c98c-bg-bodyText);
}

/* Solid card body */
.calendar-card .calendar-card-footer.cal-grp-c98c-bg.solid {
    background: var(--cal-grp-c98c-bg-cardBodyBackground-color1);
}

/* Gradient card body */
.calendar-card .calendar-card-footer.cal-grp-c98c-bg.gradient-to-right {
    background: linear-gradient(
        to right,
        var(--cal-grp-c98c-bg-cardBodyBackground-color1),
        var(--cal-grp-c98c-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-c98c-bg.gradient-to-left {
    background: linear-gradient(
        to left,
        var(--cal-grp-c98c-bg-cardBodyBackground-color1),
        var(--cal-grp-c98c-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-c98c-bg.gradient-to-bottom {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-c98c-bg-cardBodyBackground-color1),
        var(--cal-grp-c98c-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-c98c-bg.gradient-to-top {
    background: linear-gradient(
        to top,
        var(--cal-grp-c98c-bg-cardBodyBackground-color1),
        var(--cal-grp-c98c-bg-cardBodyBackground-color2)
    );
}


/* ============================================================
   HEADINGS
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-c98c-bg .header {
    color: var(--cal-grp-c98c-bg-headerText);
}

.calendar-card .calendar-card-body.cal-grp-c98c-bg .secondary-header {
    color: var(--cal-grp-c98c-bg-secondaryHeaderText);
}

.calendar-card .calendar-card-body.cal-grp-c98c-bg .time {
    color: var(--cal-grp-c98c-bg-secondaryHeaderText);
}

/* ============================================================
   Card Tooltip Header (Calendar Card)
   ============================================================ */

.calendar-card .calendar-card-tooltip .tooltip-header.cal-grp-c98c-bg.solid {
    background: var(--cal-grp-c98c-bg-headerBackground-color1);
}

/* ============================================================
   Card Tooltip Body (Calendar Card)
   ============================================================ */

.calendar-card-tooltip .tooltip-body.cal-grp-c98c-bg.solid {
    background: var(--cal-grp-c98c-bg-cordBodyBackground-color1);
}

/* ============================================================
   LINKS
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-c98c-bg a {
    color: var(--cal-grp-c98c-bg-linkText);
}

.calendar-card .calendar-card-body.cal-grp-c98c-bg a:hover {
    color: var(--cal-grp-c98c-bg-linkHoverText);
}


/* ============================================================
   HIGHLIGHTS
   ============================================================ */

.calendar-card.cal-grp-c98c-bg .calendar-card-body .highlight {
    background: var(--cal-grp-c98c-bg-highlightBackground-color1);
    color: var(--cal-grp-c98c-bg-highlightText);
}


/* ============================================================
   BORDERS
   ============================================================ */

.calendar-card.cal-grp-c98c-bg.has-border {
    border: 1px solid var(--cal-grp-c98c-bg-borderColour);
}

.calendar-card.cal-grp-c98c-bg.has-border:hover {
    border-color: var(--cal-grp-c98c-bg-hoverBorderColour);
}


/* ============================================================
   SHADOWS
   ============================================================ */

.calendar-card.cal-grp-c98c-bg.has-shadow{
    box-shadow: 0 4px 8px var(--cal-grp-c98c-bg-boxShadowColour);
}

.calendar-card.cal-grp-c98c-bg.has-shadow:hover {
    box-shadow: 0 4px 8px var(--cal-grp-c98c-bg-hoverBoxShadowColour);
}

/* ============================================================
   Event Editor Calendar Group indicator
   ============================================================ */
button.group-option.cal-grp-c98c-bg::after {
    border-color: var(--cal-grp-c98c-bg-borderColour);
}

button.group-option.cal-grp-c98c-bg.selected::after {
  background-color: var(--cal-grp-c98c-bg-barHeaderText);
  border-color: var(--cal-grp-c98c-bg-barHeaderText);
}

/*------------------------------------------------------------
    Calendar Group Background — Dark Mode Pro
------------------------------------------------------------*/

/* ============================================================
   VARIABLE ALIASES FOR BUTTONS (Theme-Aware)
   ============================================================ */

/* Solid header */
.calendar-card .calendar-card-footer.cal-grp-0051-bg .calendar-bttn {
    color: var(--cal-grp-0051-bg-barHeaderText);
}

/* Solid header */
.calendar-card .calendar-card-footer.cal-grp-0051-bg .calendar-bttn {
    background: var(--cal-grp-0051-bg-headerBackground-color1);
}

.event-view.has-border .calendar-card .calendar-card-footer.cal-grp-0051-bg .calendar-bttn {
    border-color: var(--cal-grp-0051-bg-borderColour)
}

.event-view.cal-grp-0051-bg.has-box-shadow {
    box-shadow:
        var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) var(--cal-grp-0051-bg-shadowColour1),
        calc(var(--btn-box-shadow_h) * 2) calc(var(--btn-box-shadow_v) * 2) calc(var(--btn-box-shadow_b) * 2) var(--cal-grp-0051-bg-shadowColour2);
}


/* ============================================================
   Card (Calendar Card)
   ============================================================ */

.event-view:not(.has-borders) {
    border: none;
}

.event-view:not(.has-border-radius) {
    border-radius: 0px;
}

.event-view.cal-grp-0051-bg.has-borders {
    border-colour: var(--cal-grp-0051-bg-borderColour);
}

.event-view.cal-grp-0051-bg.has-borders {
    border-colour: var(--cal-grp-0051-bg-borderColour);
}

.event-view.cal-grp-0051-bg.has-box-shadow {
    box-shadow:
        0 4px 8px var(--cal-grp-0051-bg-shadowColour1),
        0 8px 16px var(--cal-grp-0051-bg-shadowColour2);
}

/* ============================================================
   HEADER (Calendar Card Header)
   ============================================================ */

/* Solid header */

button.group-option.cal-grp-0051-bg, 
.calendar-card .calendar-card-header.cal-grp-0051-bg h3,
.calendar-card.cal-grp-0051-bg.calendar-card-grid {
    color: var(--cal-grp-0051-bg-barHeaderText);
}

/* Solid header */
button.group-option.cal-grp-0051-bg.solid, 
.calendar-card .calendar-card-header.cal-grp-0051-bg.solid,
.calendar-card.cal-grp-0051-bg.solid.calendar-card-grid {
    background: var(--cal-grp-0051-bg-headerBackground-color1);
}

/* Gradient header (direction applied via class) */
button.group-option.cal-grp-0051-bg.gradient-to-right, 
.calendar-card .calendar-card-header.cal-grp-0051-bg.gradient-to-right, 
.calendar-card.cal-grp-0051-bg.gradient-to-right.calendar-card-grid {
    background: linear-gradient(
        to right,
        var(--cal-grp-0051-bg-headerBackground-color1),
        var(--cal-grp-0051-bg-headerBackground-color2)
    );
}

button.group-option.cal-grp-0051-bg.gradient-to-left,
.calendar-card .calendar-card-header.cal-grp-0051-bg.gradient-to-left, 
.calendar-card.cal-grp-0051-bg.gradient-to-left.calendar-card-grid {
    background: linear-gradient(
        to left,
        var(--cal-grp-0051-bg-headerBackground-color1),
        var(--cal-grp-0051-bg-headerBackground-color2)
    );
    color: var(--cal-grp-0051-bg-barHeaderText);
}

button.group-option.cal-grp-0051-bg.gradient-to-bottom,
.calendar-card .calendar-card-header.cal-grp-0051-bg.gradient-to-bottom,
.calendar-card.cal-grp-0051-bg.gradient-to-bottom.calendar-card-grid {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-0051-bg-headerBackground-color1),
        var(--cal-grp-0051-bg-headerBackground-color2)
    );
    color: var(--cal-grp-0051-bg-barHeaderText);
}

button.group-option.cal-grp-0051-bg.gradient-to-top,
.calendar-card .calendar-card-header.cal-grp-0051-bg.gradient-to-top,
.calendar-card.cal-grp-0051-bg.gradient-to-top.calendar-card-grid {
    background: linear-gradient(
        to top,
        var(--cal-grp-0051-bg-headerBackground-color1),
        var(--cal-grp-0051-bg-headerBackground-color2)
    );
}

/* Time + location text */
.calendar-card .calendar-card-header.cal-grp-0051-bg .time,
.calendar-card.cal-grp-0051-bg.calendar-card-grid .time {
    color: var(--cal-grp-0051-bg-barTimeText);
}

.calendar-card .calendar-card-header.cal-grp-0051-bg .location,
.calendar-card.cal-grp-0051-bg.calendar-card-grid .location{
    color: var(--cal-grp-0051-bg-barLocationText);
}


/* ============================================================
   CARD BODY
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-0051-bg {
    color: var(--cal-grp-0051-bg-bodyText);
}

/* Solid card body */
.calendar-card .calendar-card-body.cal-grp-0051-bg.solid {
    background: var(--cal-grp-0051-bg-cardBodyBackground-color1);
}

/* Gradient card body */
.calendar-card .calendar-card-body.cal-grp-0051-bg.gradient-to-right {
    background: linear-gradient(
        to right,
        var(--cal-grp-0051-bg-cardBodyBackground-color1),
        var(--cal-grp-0051-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-0051-bg.gradient-to-left {
    background: linear-gradient(
        to left,
        var(--cal-grp-0051-bg-cardBodyBackground-color1),
        var(--cal-grp-0051-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-0051-bg.gradient-to-bottom {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-0051-bg-cardBodyBackground-color1),
        var(--cal-grp-0051-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-0051-bg.gradient-to-top {
    background: linear-gradient(
        to top,
        var(--cal-grp-0051-bg-cardBodyBackground-color1),
        var(--cal-grp-0051-bg-cardBodyBackground-color2)
    );
}

/* ============================================================
   CARD Footer
   ============================================================ */

.calendar-card .calendar-card-footer.cal-grp-0051-bg {
    color: var(--cal-grp-0051-bg-bodyText);
}

/* Solid card body */
.calendar-card .calendar-card-footer.cal-grp-0051-bg.solid {
    background: var(--cal-grp-0051-bg-cardBodyBackground-color1);
}

/* Gradient card body */
.calendar-card .calendar-card-footer.cal-grp-0051-bg.gradient-to-right {
    background: linear-gradient(
        to right,
        var(--cal-grp-0051-bg-cardBodyBackground-color1),
        var(--cal-grp-0051-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-0051-bg.gradient-to-left {
    background: linear-gradient(
        to left,
        var(--cal-grp-0051-bg-cardBodyBackground-color1),
        var(--cal-grp-0051-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-0051-bg.gradient-to-bottom {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-0051-bg-cardBodyBackground-color1),
        var(--cal-grp-0051-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-0051-bg.gradient-to-top {
    background: linear-gradient(
        to top,
        var(--cal-grp-0051-bg-cardBodyBackground-color1),
        var(--cal-grp-0051-bg-cardBodyBackground-color2)
    );
}


/* ============================================================
   HEADINGS
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-0051-bg .header {
    color: var(--cal-grp-0051-bg-headerText);
}

.calendar-card .calendar-card-body.cal-grp-0051-bg .secondary-header {
    color: var(--cal-grp-0051-bg-secondaryHeaderText);
}

.calendar-card .calendar-card-body.cal-grp-0051-bg .time {
    color: var(--cal-grp-0051-bg-secondaryHeaderText);
}

/* ============================================================
   Card Tooltip Header (Calendar Card)
   ============================================================ */

.calendar-card .calendar-card-tooltip .tooltip-header.cal-grp-0051-bg.solid {
    background: var(--cal-grp-0051-bg-headerBackground-color1);
}

/* ============================================================
   Card Tooltip Body (Calendar Card)
   ============================================================ */

.calendar-card-tooltip .tooltip-body.cal-grp-0051-bg.solid {
    background: var(--cal-grp-0051-bg-cordBodyBackground-color1);
}

/* ============================================================
   LINKS
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-0051-bg a {
    color: var(--cal-grp-0051-bg-linkText);
}

.calendar-card .calendar-card-body.cal-grp-0051-bg a:hover {
    color: var(--cal-grp-0051-bg-linkHoverText);
}


/* ============================================================
   HIGHLIGHTS
   ============================================================ */

.calendar-card.cal-grp-0051-bg .calendar-card-body .highlight {
    background: var(--cal-grp-0051-bg-highlightBackground-color1);
    color: var(--cal-grp-0051-bg-highlightText);
}


/* ============================================================
   BORDERS
   ============================================================ */

.calendar-card.cal-grp-0051-bg.has-border {
    border: 1px solid var(--cal-grp-0051-bg-borderColour);
}

.calendar-card.cal-grp-0051-bg.has-border:hover {
    border-color: var(--cal-grp-0051-bg-hoverBorderColour);
}


/* ============================================================
   SHADOWS
   ============================================================ */

.calendar-card.cal-grp-0051-bg.has-shadow{
    box-shadow: 0 4px 8px var(--cal-grp-0051-bg-boxShadowColour);
}

.calendar-card.cal-grp-0051-bg.has-shadow:hover {
    box-shadow: 0 4px 8px var(--cal-grp-0051-bg-hoverBoxShadowColour);
}

/* ============================================================
   Event Editor Calendar Group indicator
   ============================================================ */
button.group-option.cal-grp-0051-bg::after {
    border-color: var(--cal-grp-0051-bg-borderColour);
}

button.group-option.cal-grp-0051-bg.selected::after {
  background-color: var(--cal-grp-0051-bg-barHeaderText);
  border-color: var(--cal-grp-0051-bg-barHeaderText);
}

/*------------------------------------------------------------
    Calendar Group Background — Fresh Mint
------------------------------------------------------------*/

/* ============================================================
   VARIABLE ALIASES FOR BUTTONS (Theme-Aware)
   ============================================================ */

/* Solid header */
.calendar-card .calendar-card-footer.cal-grp-12fe-bg .calendar-bttn {
    color: var(--cal-grp-12fe-bg-barHeaderText);
}

/* Solid header */
.calendar-card .calendar-card-footer.cal-grp-12fe-bg .calendar-bttn {
    background: var(--cal-grp-12fe-bg-headerBackground-color1);
}

.event-view.has-border .calendar-card .calendar-card-footer.cal-grp-12fe-bg .calendar-bttn {
    border-color: var(--cal-grp-12fe-bg-borderColour)
}

.event-view.cal-grp-12fe-bg.has-box-shadow {
    box-shadow:
        var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) var(--cal-grp-12fe-bg-shadowColour1),
        calc(var(--btn-box-shadow_h) * 2) calc(var(--btn-box-shadow_v) * 2) calc(var(--btn-box-shadow_b) * 2) var(--cal-grp-12fe-bg-shadowColour2);
}


/* ============================================================
   Card (Calendar Card)
   ============================================================ */

.event-view:not(.has-borders) {
    border: none;
}

.event-view:not(.has-border-radius) {
    border-radius: 0px;
}

.event-view.cal-grp-12fe-bg.has-borders {
    border-colour: var(--cal-grp-12fe-bg-borderColour);
}

.event-view.cal-grp-12fe-bg.has-borders {
    border-colour: var(--cal-grp-12fe-bg-borderColour);
}

.event-view.cal-grp-12fe-bg.has-box-shadow {
    box-shadow:
        0 4px 8px var(--cal-grp-12fe-bg-shadowColour1),
        0 8px 16px var(--cal-grp-12fe-bg-shadowColour2);
}

/* ============================================================
   HEADER (Calendar Card Header)
   ============================================================ */

/* Solid header */

button.group-option.cal-grp-12fe-bg, 
.calendar-card .calendar-card-header.cal-grp-12fe-bg h3,
.calendar-card.cal-grp-12fe-bg.calendar-card-grid {
    color: var(--cal-grp-12fe-bg-barHeaderText);
}

/* Solid header */
button.group-option.cal-grp-12fe-bg.solid, 
.calendar-card .calendar-card-header.cal-grp-12fe-bg.solid,
.calendar-card.cal-grp-12fe-bg.solid.calendar-card-grid {
    background: var(--cal-grp-12fe-bg-headerBackground-color1);
}

/* Gradient header (direction applied via class) */
button.group-option.cal-grp-12fe-bg.gradient-to-right, 
.calendar-card .calendar-card-header.cal-grp-12fe-bg.gradient-to-right, 
.calendar-card.cal-grp-12fe-bg.gradient-to-right.calendar-card-grid {
    background: linear-gradient(
        to right,
        var(--cal-grp-12fe-bg-headerBackground-color1),
        var(--cal-grp-12fe-bg-headerBackground-color2)
    );
}

button.group-option.cal-grp-12fe-bg.gradient-to-left,
.calendar-card .calendar-card-header.cal-grp-12fe-bg.gradient-to-left, 
.calendar-card.cal-grp-12fe-bg.gradient-to-left.calendar-card-grid {
    background: linear-gradient(
        to left,
        var(--cal-grp-12fe-bg-headerBackground-color1),
        var(--cal-grp-12fe-bg-headerBackground-color2)
    );
    color: var(--cal-grp-12fe-bg-barHeaderText);
}

button.group-option.cal-grp-12fe-bg.gradient-to-bottom,
.calendar-card .calendar-card-header.cal-grp-12fe-bg.gradient-to-bottom,
.calendar-card.cal-grp-12fe-bg.gradient-to-bottom.calendar-card-grid {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-12fe-bg-headerBackground-color1),
        var(--cal-grp-12fe-bg-headerBackground-color2)
    );
    color: var(--cal-grp-12fe-bg-barHeaderText);
}

button.group-option.cal-grp-12fe-bg.gradient-to-top,
.calendar-card .calendar-card-header.cal-grp-12fe-bg.gradient-to-top,
.calendar-card.cal-grp-12fe-bg.gradient-to-top.calendar-card-grid {
    background: linear-gradient(
        to top,
        var(--cal-grp-12fe-bg-headerBackground-color1),
        var(--cal-grp-12fe-bg-headerBackground-color2)
    );
}

/* Time + location text */
.calendar-card .calendar-card-header.cal-grp-12fe-bg .time,
.calendar-card.cal-grp-12fe-bg.calendar-card-grid .time {
    color: var(--cal-grp-12fe-bg-barTimeText);
}

.calendar-card .calendar-card-header.cal-grp-12fe-bg .location,
.calendar-card.cal-grp-12fe-bg.calendar-card-grid .location{
    color: var(--cal-grp-12fe-bg-barLocationText);
}


/* ============================================================
   CARD BODY
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-12fe-bg {
    color: var(--cal-grp-12fe-bg-bodyText);
}

/* Solid card body */
.calendar-card .calendar-card-body.cal-grp-12fe-bg.solid {
    background: var(--cal-grp-12fe-bg-cardBodyBackground-color1);
}

/* Gradient card body */
.calendar-card .calendar-card-body.cal-grp-12fe-bg.gradient-to-right {
    background: linear-gradient(
        to right,
        var(--cal-grp-12fe-bg-cardBodyBackground-color1),
        var(--cal-grp-12fe-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-12fe-bg.gradient-to-left {
    background: linear-gradient(
        to left,
        var(--cal-grp-12fe-bg-cardBodyBackground-color1),
        var(--cal-grp-12fe-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-12fe-bg.gradient-to-bottom {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-12fe-bg-cardBodyBackground-color1),
        var(--cal-grp-12fe-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-12fe-bg.gradient-to-top {
    background: linear-gradient(
        to top,
        var(--cal-grp-12fe-bg-cardBodyBackground-color1),
        var(--cal-grp-12fe-bg-cardBodyBackground-color2)
    );
}

/* ============================================================
   CARD Footer
   ============================================================ */

.calendar-card .calendar-card-footer.cal-grp-12fe-bg {
    color: var(--cal-grp-12fe-bg-bodyText);
}

/* Solid card body */
.calendar-card .calendar-card-footer.cal-grp-12fe-bg.solid {
    background: var(--cal-grp-12fe-bg-cardBodyBackground-color1);
}

/* Gradient card body */
.calendar-card .calendar-card-footer.cal-grp-12fe-bg.gradient-to-right {
    background: linear-gradient(
        to right,
        var(--cal-grp-12fe-bg-cardBodyBackground-color1),
        var(--cal-grp-12fe-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-12fe-bg.gradient-to-left {
    background: linear-gradient(
        to left,
        var(--cal-grp-12fe-bg-cardBodyBackground-color1),
        var(--cal-grp-12fe-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-12fe-bg.gradient-to-bottom {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-12fe-bg-cardBodyBackground-color1),
        var(--cal-grp-12fe-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-12fe-bg.gradient-to-top {
    background: linear-gradient(
        to top,
        var(--cal-grp-12fe-bg-cardBodyBackground-color1),
        var(--cal-grp-12fe-bg-cardBodyBackground-color2)
    );
}


/* ============================================================
   HEADINGS
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-12fe-bg .header {
    color: var(--cal-grp-12fe-bg-headerText);
}

.calendar-card .calendar-card-body.cal-grp-12fe-bg .secondary-header {
    color: var(--cal-grp-12fe-bg-secondaryHeaderText);
}

.calendar-card .calendar-card-body.cal-grp-12fe-bg .time {
    color: var(--cal-grp-12fe-bg-secondaryHeaderText);
}

/* ============================================================
   Card Tooltip Header (Calendar Card)
   ============================================================ */

.calendar-card .calendar-card-tooltip .tooltip-header.cal-grp-12fe-bg.solid {
    background: var(--cal-grp-12fe-bg-headerBackground-color1);
}

/* ============================================================
   Card Tooltip Body (Calendar Card)
   ============================================================ */

.calendar-card-tooltip .tooltip-body.cal-grp-12fe-bg.solid {
    background: var(--cal-grp-12fe-bg-cordBodyBackground-color1);
}

/* ============================================================
   LINKS
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-12fe-bg a {
    color: var(--cal-grp-12fe-bg-linkText);
}

.calendar-card .calendar-card-body.cal-grp-12fe-bg a:hover {
    color: var(--cal-grp-12fe-bg-linkHoverText);
}


/* ============================================================
   HIGHLIGHTS
   ============================================================ */

.calendar-card.cal-grp-12fe-bg .calendar-card-body .highlight {
    background: var(--cal-grp-12fe-bg-highlightBackground-color1);
    color: var(--cal-grp-12fe-bg-highlightText);
}


/* ============================================================
   BORDERS
   ============================================================ */

.calendar-card.cal-grp-12fe-bg.has-border {
    border: 1px solid var(--cal-grp-12fe-bg-borderColour);
}

.calendar-card.cal-grp-12fe-bg.has-border:hover {
    border-color: var(--cal-grp-12fe-bg-hoverBorderColour);
}


/* ============================================================
   SHADOWS
   ============================================================ */

.calendar-card.cal-grp-12fe-bg.has-shadow{
    box-shadow: 0 4px 8px var(--cal-grp-12fe-bg-boxShadowColour);
}

.calendar-card.cal-grp-12fe-bg.has-shadow:hover {
    box-shadow: 0 4px 8px var(--cal-grp-12fe-bg-hoverBoxShadowColour);
}

/* ============================================================
   Event Editor Calendar Group indicator
   ============================================================ */
button.group-option.cal-grp-12fe-bg::after {
    border-color: var(--cal-grp-12fe-bg-borderColour);
}

button.group-option.cal-grp-12fe-bg.selected::after {
  background-color: var(--cal-grp-12fe-bg-barHeaderText);
  border-color: var(--cal-grp-12fe-bg-barHeaderText);
}

/*------------------------------------------------------------
    Calendar Group Background — Sunset Gradient
------------------------------------------------------------*/

/* ============================================================
   VARIABLE ALIASES FOR BUTTONS (Theme-Aware)
   ============================================================ */

/* Solid header */
.calendar-card .calendar-card-footer.cal-grp-0ba9-bg .calendar-bttn {
    color: var(--cal-grp-0ba9-bg-barHeaderText);
}

/* Solid header */
.calendar-card .calendar-card-footer.cal-grp-0ba9-bg .calendar-bttn {
    background: var(--cal-grp-0ba9-bg-headerBackground-color1);
}

.event-view.has-border .calendar-card .calendar-card-footer.cal-grp-0ba9-bg .calendar-bttn {
    border-color: var(--cal-grp-0ba9-bg-borderColour)
}

.event-view.cal-grp-0ba9-bg.has-box-shadow {
    box-shadow:
        var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) var(--cal-grp-0ba9-bg-shadowColour1),
        calc(var(--btn-box-shadow_h) * 2) calc(var(--btn-box-shadow_v) * 2) calc(var(--btn-box-shadow_b) * 2) var(--cal-grp-0ba9-bg-shadowColour2);
}


/* ============================================================
   Card (Calendar Card)
   ============================================================ */

.event-view:not(.has-borders) {
    border: none;
}

.event-view:not(.has-border-radius) {
    border-radius: 0px;
}

.event-view.cal-grp-0ba9-bg.has-borders {
    border-colour: var(--cal-grp-0ba9-bg-borderColour);
}

.event-view.cal-grp-0ba9-bg.has-borders {
    border-colour: var(--cal-grp-0ba9-bg-borderColour);
}

.event-view.cal-grp-0ba9-bg.has-box-shadow {
    box-shadow:
        0 4px 8px var(--cal-grp-0ba9-bg-shadowColour1),
        0 8px 16px var(--cal-grp-0ba9-bg-shadowColour2);
}

/* ============================================================
   HEADER (Calendar Card Header)
   ============================================================ */

/* Solid header */

button.group-option.cal-grp-0ba9-bg, 
.calendar-card .calendar-card-header.cal-grp-0ba9-bg h3,
.calendar-card.cal-grp-0ba9-bg.calendar-card-grid {
    color: var(--cal-grp-0ba9-bg-barHeaderText);
}

/* Solid header */
button.group-option.cal-grp-0ba9-bg.solid, 
.calendar-card .calendar-card-header.cal-grp-0ba9-bg.solid,
.calendar-card.cal-grp-0ba9-bg.solid.calendar-card-grid {
    background: var(--cal-grp-0ba9-bg-headerBackground-color1);
}

/* Gradient header (direction applied via class) */
button.group-option.cal-grp-0ba9-bg.gradient-to-right, 
.calendar-card .calendar-card-header.cal-grp-0ba9-bg.gradient-to-right, 
.calendar-card.cal-grp-0ba9-bg.gradient-to-right.calendar-card-grid {
    background: linear-gradient(
        to right,
        var(--cal-grp-0ba9-bg-headerBackground-color1),
        var(--cal-grp-0ba9-bg-headerBackground-color2)
    );
}

button.group-option.cal-grp-0ba9-bg.gradient-to-left,
.calendar-card .calendar-card-header.cal-grp-0ba9-bg.gradient-to-left, 
.calendar-card.cal-grp-0ba9-bg.gradient-to-left.calendar-card-grid {
    background: linear-gradient(
        to left,
        var(--cal-grp-0ba9-bg-headerBackground-color1),
        var(--cal-grp-0ba9-bg-headerBackground-color2)
    );
    color: var(--cal-grp-0ba9-bg-barHeaderText);
}

button.group-option.cal-grp-0ba9-bg.gradient-to-bottom,
.calendar-card .calendar-card-header.cal-grp-0ba9-bg.gradient-to-bottom,
.calendar-card.cal-grp-0ba9-bg.gradient-to-bottom.calendar-card-grid {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-0ba9-bg-headerBackground-color1),
        var(--cal-grp-0ba9-bg-headerBackground-color2)
    );
    color: var(--cal-grp-0ba9-bg-barHeaderText);
}

button.group-option.cal-grp-0ba9-bg.gradient-to-top,
.calendar-card .calendar-card-header.cal-grp-0ba9-bg.gradient-to-top,
.calendar-card.cal-grp-0ba9-bg.gradient-to-top.calendar-card-grid {
    background: linear-gradient(
        to top,
        var(--cal-grp-0ba9-bg-headerBackground-color1),
        var(--cal-grp-0ba9-bg-headerBackground-color2)
    );
}

/* Time + location text */
.calendar-card .calendar-card-header.cal-grp-0ba9-bg .time,
.calendar-card.cal-grp-0ba9-bg.calendar-card-grid .time {
    color: var(--cal-grp-0ba9-bg-barTimeText);
}

.calendar-card .calendar-card-header.cal-grp-0ba9-bg .location,
.calendar-card.cal-grp-0ba9-bg.calendar-card-grid .location{
    color: var(--cal-grp-0ba9-bg-barLocationText);
}


/* ============================================================
   CARD BODY
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-0ba9-bg {
    color: var(--cal-grp-0ba9-bg-bodyText);
}

/* Solid card body */
.calendar-card .calendar-card-body.cal-grp-0ba9-bg.solid {
    background: var(--cal-grp-0ba9-bg-cardBodyBackground-color1);
}

/* Gradient card body */
.calendar-card .calendar-card-body.cal-grp-0ba9-bg.gradient-to-right {
    background: linear-gradient(
        to right,
        var(--cal-grp-0ba9-bg-cardBodyBackground-color1),
        var(--cal-grp-0ba9-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-0ba9-bg.gradient-to-left {
    background: linear-gradient(
        to left,
        var(--cal-grp-0ba9-bg-cardBodyBackground-color1),
        var(--cal-grp-0ba9-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-0ba9-bg.gradient-to-bottom {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-0ba9-bg-cardBodyBackground-color1),
        var(--cal-grp-0ba9-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-0ba9-bg.gradient-to-top {
    background: linear-gradient(
        to top,
        var(--cal-grp-0ba9-bg-cardBodyBackground-color1),
        var(--cal-grp-0ba9-bg-cardBodyBackground-color2)
    );
}

/* ============================================================
   CARD Footer
   ============================================================ */

.calendar-card .calendar-card-footer.cal-grp-0ba9-bg {
    color: var(--cal-grp-0ba9-bg-bodyText);
}

/* Solid card body */
.calendar-card .calendar-card-footer.cal-grp-0ba9-bg.solid {
    background: var(--cal-grp-0ba9-bg-cardBodyBackground-color1);
}

/* Gradient card body */
.calendar-card .calendar-card-footer.cal-grp-0ba9-bg.gradient-to-right {
    background: linear-gradient(
        to right,
        var(--cal-grp-0ba9-bg-cardBodyBackground-color1),
        var(--cal-grp-0ba9-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-0ba9-bg.gradient-to-left {
    background: linear-gradient(
        to left,
        var(--cal-grp-0ba9-bg-cardBodyBackground-color1),
        var(--cal-grp-0ba9-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-0ba9-bg.gradient-to-bottom {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-0ba9-bg-cardBodyBackground-color1),
        var(--cal-grp-0ba9-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-0ba9-bg.gradient-to-top {
    background: linear-gradient(
        to top,
        var(--cal-grp-0ba9-bg-cardBodyBackground-color1),
        var(--cal-grp-0ba9-bg-cardBodyBackground-color2)
    );
}


/* ============================================================
   HEADINGS
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-0ba9-bg .header {
    color: var(--cal-grp-0ba9-bg-headerText);
}

.calendar-card .calendar-card-body.cal-grp-0ba9-bg .secondary-header {
    color: var(--cal-grp-0ba9-bg-secondaryHeaderText);
}

.calendar-card .calendar-card-body.cal-grp-0ba9-bg .time {
    color: var(--cal-grp-0ba9-bg-secondaryHeaderText);
}

/* ============================================================
   Card Tooltip Header (Calendar Card)
   ============================================================ */

.calendar-card .calendar-card-tooltip .tooltip-header.cal-grp-0ba9-bg.solid {
    background: var(--cal-grp-0ba9-bg-headerBackground-color1);
}

/* ============================================================
   Card Tooltip Body (Calendar Card)
   ============================================================ */

.calendar-card-tooltip .tooltip-body.cal-grp-0ba9-bg.solid {
    background: var(--cal-grp-0ba9-bg-cordBodyBackground-color1);
}

/* ============================================================
   LINKS
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-0ba9-bg a {
    color: var(--cal-grp-0ba9-bg-linkText);
}

.calendar-card .calendar-card-body.cal-grp-0ba9-bg a:hover {
    color: var(--cal-grp-0ba9-bg-linkHoverText);
}


/* ============================================================
   HIGHLIGHTS
   ============================================================ */

.calendar-card.cal-grp-0ba9-bg .calendar-card-body .highlight {
    background: var(--cal-grp-0ba9-bg-highlightBackground-color1);
    color: var(--cal-grp-0ba9-bg-highlightText);
}


/* ============================================================
   BORDERS
   ============================================================ */

.calendar-card.cal-grp-0ba9-bg.has-border {
    border: 1px solid var(--cal-grp-0ba9-bg-borderColour);
}

.calendar-card.cal-grp-0ba9-bg.has-border:hover {
    border-color: var(--cal-grp-0ba9-bg-hoverBorderColour);
}


/* ============================================================
   SHADOWS
   ============================================================ */

.calendar-card.cal-grp-0ba9-bg.has-shadow{
    box-shadow: 0 4px 8px var(--cal-grp-0ba9-bg-boxShadowColour);
}

.calendar-card.cal-grp-0ba9-bg.has-shadow:hover {
    box-shadow: 0 4px 8px var(--cal-grp-0ba9-bg-hoverBoxShadowColour);
}

/* ============================================================
   Event Editor Calendar Group indicator
   ============================================================ */
button.group-option.cal-grp-0ba9-bg::after {
    border-color: var(--cal-grp-0ba9-bg-borderColour);
}

button.group-option.cal-grp-0ba9-bg.selected::after {
  background-color: var(--cal-grp-0ba9-bg-barHeaderText);
  border-color: var(--cal-grp-0ba9-bg-barHeaderText);
}

/*------------------------------------------------------------
    Calendar Group Background — Minimal Grey
------------------------------------------------------------*/

/* ============================================================
   VARIABLE ALIASES FOR BUTTONS (Theme-Aware)
   ============================================================ */

/* Solid header */
.calendar-card .calendar-card-footer.cal-grp-928e-bg .calendar-bttn {
    color: var(--cal-grp-928e-bg-barHeaderText);
}

/* Solid header */
.calendar-card .calendar-card-footer.cal-grp-928e-bg .calendar-bttn {
    background: var(--cal-grp-928e-bg-headerBackground-color1);
}

.event-view.has-border .calendar-card .calendar-card-footer.cal-grp-928e-bg .calendar-bttn {
    border-color: var(--cal-grp-928e-bg-borderColour)
}

.event-view.cal-grp-928e-bg.has-box-shadow {
    box-shadow:
        var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) var(--cal-grp-928e-bg-shadowColour1),
        calc(var(--btn-box-shadow_h) * 2) calc(var(--btn-box-shadow_v) * 2) calc(var(--btn-box-shadow_b) * 2) var(--cal-grp-928e-bg-shadowColour2);
}


/* ============================================================
   Card (Calendar Card)
   ============================================================ */

.event-view:not(.has-borders) {
    border: none;
}

.event-view:not(.has-border-radius) {
    border-radius: 0px;
}

.event-view.cal-grp-928e-bg.has-borders {
    border-colour: var(--cal-grp-928e-bg-borderColour);
}

.event-view.cal-grp-928e-bg.has-borders {
    border-colour: var(--cal-grp-928e-bg-borderColour);
}

.event-view.cal-grp-928e-bg.has-box-shadow {
    box-shadow:
        0 4px 8px var(--cal-grp-928e-bg-shadowColour1),
        0 8px 16px var(--cal-grp-928e-bg-shadowColour2);
}

/* ============================================================
   HEADER (Calendar Card Header)
   ============================================================ */

/* Solid header */

button.group-option.cal-grp-928e-bg, 
.calendar-card .calendar-card-header.cal-grp-928e-bg h3,
.calendar-card.cal-grp-928e-bg.calendar-card-grid {
    color: var(--cal-grp-928e-bg-barHeaderText);
}

/* Solid header */
button.group-option.cal-grp-928e-bg.solid, 
.calendar-card .calendar-card-header.cal-grp-928e-bg.solid,
.calendar-card.cal-grp-928e-bg.solid.calendar-card-grid {
    background: var(--cal-grp-928e-bg-headerBackground-color1);
}

/* Gradient header (direction applied via class) */
button.group-option.cal-grp-928e-bg.gradient-to-right, 
.calendar-card .calendar-card-header.cal-grp-928e-bg.gradient-to-right, 
.calendar-card.cal-grp-928e-bg.gradient-to-right.calendar-card-grid {
    background: linear-gradient(
        to right,
        var(--cal-grp-928e-bg-headerBackground-color1),
        var(--cal-grp-928e-bg-headerBackground-color2)
    );
}

button.group-option.cal-grp-928e-bg.gradient-to-left,
.calendar-card .calendar-card-header.cal-grp-928e-bg.gradient-to-left, 
.calendar-card.cal-grp-928e-bg.gradient-to-left.calendar-card-grid {
    background: linear-gradient(
        to left,
        var(--cal-grp-928e-bg-headerBackground-color1),
        var(--cal-grp-928e-bg-headerBackground-color2)
    );
    color: var(--cal-grp-928e-bg-barHeaderText);
}

button.group-option.cal-grp-928e-bg.gradient-to-bottom,
.calendar-card .calendar-card-header.cal-grp-928e-bg.gradient-to-bottom,
.calendar-card.cal-grp-928e-bg.gradient-to-bottom.calendar-card-grid {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-928e-bg-headerBackground-color1),
        var(--cal-grp-928e-bg-headerBackground-color2)
    );
    color: var(--cal-grp-928e-bg-barHeaderText);
}

button.group-option.cal-grp-928e-bg.gradient-to-top,
.calendar-card .calendar-card-header.cal-grp-928e-bg.gradient-to-top,
.calendar-card.cal-grp-928e-bg.gradient-to-top.calendar-card-grid {
    background: linear-gradient(
        to top,
        var(--cal-grp-928e-bg-headerBackground-color1),
        var(--cal-grp-928e-bg-headerBackground-color2)
    );
}

/* Time + location text */
.calendar-card .calendar-card-header.cal-grp-928e-bg .time,
.calendar-card.cal-grp-928e-bg.calendar-card-grid .time {
    color: var(--cal-grp-928e-bg-barTimeText);
}

.calendar-card .calendar-card-header.cal-grp-928e-bg .location,
.calendar-card.cal-grp-928e-bg.calendar-card-grid .location{
    color: var(--cal-grp-928e-bg-barLocationText);
}


/* ============================================================
   CARD BODY
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-928e-bg {
    color: var(--cal-grp-928e-bg-bodyText);
}

/* Solid card body */
.calendar-card .calendar-card-body.cal-grp-928e-bg.solid {
    background: var(--cal-grp-928e-bg-cardBodyBackground-color1);
}

/* Gradient card body */
.calendar-card .calendar-card-body.cal-grp-928e-bg.gradient-to-right {
    background: linear-gradient(
        to right,
        var(--cal-grp-928e-bg-cardBodyBackground-color1),
        var(--cal-grp-928e-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-928e-bg.gradient-to-left {
    background: linear-gradient(
        to left,
        var(--cal-grp-928e-bg-cardBodyBackground-color1),
        var(--cal-grp-928e-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-928e-bg.gradient-to-bottom {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-928e-bg-cardBodyBackground-color1),
        var(--cal-grp-928e-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-body.cal-grp-928e-bg.gradient-to-top {
    background: linear-gradient(
        to top,
        var(--cal-grp-928e-bg-cardBodyBackground-color1),
        var(--cal-grp-928e-bg-cardBodyBackground-color2)
    );
}

/* ============================================================
   CARD Footer
   ============================================================ */

.calendar-card .calendar-card-footer.cal-grp-928e-bg {
    color: var(--cal-grp-928e-bg-bodyText);
}

/* Solid card body */
.calendar-card .calendar-card-footer.cal-grp-928e-bg.solid {
    background: var(--cal-grp-928e-bg-cardBodyBackground-color1);
}

/* Gradient card body */
.calendar-card .calendar-card-footer.cal-grp-928e-bg.gradient-to-right {
    background: linear-gradient(
        to right,
        var(--cal-grp-928e-bg-cardBodyBackground-color1),
        var(--cal-grp-928e-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-928e-bg.gradient-to-left {
    background: linear-gradient(
        to left,
        var(--cal-grp-928e-bg-cardBodyBackground-color1),
        var(--cal-grp-928e-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-928e-bg.gradient-to-bottom {
    background: linear-gradient(
        to bottom,
        var(--cal-grp-928e-bg-cardBodyBackground-color1),
        var(--cal-grp-928e-bg-cardBodyBackground-color2)
    );
}

.calendar-card .calendar-card-footer.cal-grp-928e-bg.gradient-to-top {
    background: linear-gradient(
        to top,
        var(--cal-grp-928e-bg-cardBodyBackground-color1),
        var(--cal-grp-928e-bg-cardBodyBackground-color2)
    );
}


/* ============================================================
   HEADINGS
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-928e-bg .header {
    color: var(--cal-grp-928e-bg-headerText);
}

.calendar-card .calendar-card-body.cal-grp-928e-bg .secondary-header {
    color: var(--cal-grp-928e-bg-secondaryHeaderText);
}

.calendar-card .calendar-card-body.cal-grp-928e-bg .time {
    color: var(--cal-grp-928e-bg-secondaryHeaderText);
}

/* ============================================================
   Card Tooltip Header (Calendar Card)
   ============================================================ */

.calendar-card .calendar-card-tooltip .tooltip-header.cal-grp-928e-bg.solid {
    background: var(--cal-grp-928e-bg-headerBackground-color1);
}

/* ============================================================
   Card Tooltip Body (Calendar Card)
   ============================================================ */

.calendar-card-tooltip .tooltip-body.cal-grp-928e-bg.solid {
    background: var(--cal-grp-928e-bg-cordBodyBackground-color1);
}

/* ============================================================
   LINKS
   ============================================================ */

.calendar-card .calendar-card-body.cal-grp-928e-bg a {
    color: var(--cal-grp-928e-bg-linkText);
}

.calendar-card .calendar-card-body.cal-grp-928e-bg a:hover {
    color: var(--cal-grp-928e-bg-linkHoverText);
}


/* ============================================================
   HIGHLIGHTS
   ============================================================ */

.calendar-card.cal-grp-928e-bg .calendar-card-body .highlight {
    background: var(--cal-grp-928e-bg-highlightBackground-color1);
    color: var(--cal-grp-928e-bg-highlightText);
}


/* ============================================================
   BORDERS
   ============================================================ */

.calendar-card.cal-grp-928e-bg.has-border {
    border: 1px solid var(--cal-grp-928e-bg-borderColour);
}

.calendar-card.cal-grp-928e-bg.has-border:hover {
    border-color: var(--cal-grp-928e-bg-hoverBorderColour);
}


/* ============================================================
   SHADOWS
   ============================================================ */

.calendar-card.cal-grp-928e-bg.has-shadow{
    box-shadow: 0 4px 8px var(--cal-grp-928e-bg-boxShadowColour);
}

.calendar-card.cal-grp-928e-bg.has-shadow:hover {
    box-shadow: 0 4px 8px var(--cal-grp-928e-bg-hoverBoxShadowColour);
}

/* ============================================================
   Event Editor Calendar Group indicator
   ============================================================ */
button.group-option.cal-grp-928e-bg::after {
    border-color: var(--cal-grp-928e-bg-borderColour);
}

button.group-option.cal-grp-928e-bg.selected::after {
  background-color: var(--cal-grp-928e-bg-barHeaderText);
  border-color: var(--cal-grp-928e-bg-barHeaderText);
}