[data-palette="App"] {
--Active-Primary:rgba(31,84,6,1);
--Active-Secondary:rgb(246, 246, 246);
--Alert:rgba(200,0,0,1);
--Available:rgba(0,160,65,1);
--Avatar-Border-Size:0px;
--Avatar-Radius:50%;
--Avatar-Shadow:0px 5px 20px rgba(0,0,0,0.25);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(220,220,220,1);
--Badge-Background:rgba(200,0,0,1);
--Badge-Box-Shadow:0px 2px 5px rgba(0,0,0,0.3);
--Badge-Overlay:rgba(255,255,255,1);
--Badge-Shadow:0px 2px 5px rgba(0,0,0,0.3);
--Body:var(--px16) "App Typeface 3";
--Button:var(--px15) "App Typeface 3";
--Button-Case:none;
--Button-Highlight-Radius:7px;
--Button-Line-Thickness:4px;
--Button-Radius:7px;
--Byline:var(--px13) "App Typeface 3";
--Byline-Case:none;
--Caption:var(--px13) "App Typeface 3";
--Caption-Case:none;
--Card-Padding-Top:15px;
--Card-Radius:3px;
--Card-Vertical-Offset:0px;
--Central-Divider:1px solid rgb(238,238,238);
--Cover-Background:rgba(255,255,255,1);
--Cover-Overlay:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
--Dialog-Shade:rgba(0,0,0,0.3);
--Divider-Narrow:1px solid rgba(240,240,240,1);
--Divider-Regular:2px solid rgba(125,193,168,1);
--Divider-Wide:1px solid rgba(0,134,85,1);
--Focus-Box-Shadow:0px 0px 0px 1px rgba(0,100,255,0.5), 0px 0px 0px 3px rgba(0,100,255,0.2);
--Focus-Highlight:rgba(255,255,255,0.5);
--Focus-Radius:5px;
--Focus-Shade:rgba(255,255,255,0.3);
--Footnote:var(--px12) "App Typeface 3";
--Footnote-Case:none;
--Header-Primary:rgb(37, 38, 40);
--Header-Secondary:rgb(37, 38, 40);
--Heading:var(--px22) "App Typeface 1";
--Heading-Case:uppercase;
--Hint-Box-Shadow:0px 0px 0px 1px rgba(0,100,255,0.5), 0px 0px 0px 3px rgba(0,100,255,0.2);
--Hovered-Filter:contrast(70%) brightness(110%);
--Icon-Scale:1;
--Image-Border-Size:0px;
--Image-Radius:3px;
--Image-Shadow:none;
--Line-Spacing:170%;
--Link-Decoration:none;
--Link-Weight:bold;
--Logo-Scale:1.4;
--Nominal:0.3s;
--On-Alert:rgba(255,255,255,1);
--Overlay-Filter:blur(3px);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Radius:15px;
--Overlay-Secondary:rgba(255,255,255,0.8);
--Pressed-Filter:contrast(50%) brightness(120%);
--Quick:0.2s;
--Quote-Radius:3px;
--Selected:rgba(0,0,0,0.2);
--Shadow:0px 5px 20px rgba(0,0,0,0.2);
--Shadow-Primary:rgba(0,0,0,0.5);
--Shadow-Secondary:rgba(0,0,0,0.1);
--Slow:0.5s;
--Smallprint:var(--px10) "App Typeface 3";
--Smallprint-Case:none;
--Spacing-Narrow:5px;
--Spacing-Regular:10px;
--Spacing-Wide:15px;
--Sub-Subheading:var(--px16) "App Typeface 1";
--Sub-Subheading-Case:normal;
--Subeading-Case:uppercase;
--Subheading:var(--px17) "App Typeface 1";
--Subtitle:var(--px15) "App Typeface 3";
--Subtitle-Case:normal;
--Surface-Primary:rgb(37, 38, 40);
--Surface-Secondary:rgba(151,151,151,1);
--Title:var(--px20) "App Typeface 3";
--Title-Case:normal;
--Unavailable:rgba(150,150,150,1);
--Very-Quick:0.1s;
--Very-Slow:0.8s;

}
[data-palette="App Logo"] {
--Active:rgba(255,255,255,1);
--Background-Primary:rgba(31,84,6,1);;
--Background-Secondary:rgba(31,84,6,1);;
--Highlight:rgba(255,255,255,0.1);
--Overlay:rgba(255,255,255,1);
--Surface-Primary:rgba(255,255,255,1);
--Surface-Secondary:rgba(255,255,255,0.9);

}
[data-palette="App Menu"] {
--Active:rgba(255,255,255,1);
--Active-Primary:rgba(255,255,255,1);
--Active-Secondary:transparent;
--Background-Primary:linear-gradient(var(--Nav-Background-Angle,180deg), rgba(36,170,13,1) 0%,rgba(36,170,13,1) 2px,rgba(21,21,21,1) 2px,rgba(21,21,21,1) 100%);
--Background-Secondary:rgba(36,170,13,1);
--Button-Line-Thickness:2px;
--Highlight:rgba(255,255,255,1);
--Overlay:rgba(255,255,255,1);
--Overlay-Primary:rgba(0,0,0,1);
--Overlay-Secondary:rgba(66,66,66,1);
--Surface-Primary:rgba(255,255,255,0.8);
--Surface-Secondary:rgba(255,255,255,0.7);

}
[data-palette="App Header"] {
--Active-Primary:rgba(255,255,255,1);
--Active-Secondary:rgba(31,84,6,1);
--Background-Primary:rgba(31,84,6,1);
--Background-Secondary:rgba(255,255,255,0.9);
--Header-Primary:rgba(0,134,85,1);
--Header-Secondary:rgba(37,38,40,1);
--Overlay-Primary:rgba(160,59,147,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(255,255,255,1);
--Surface-Secondary:rgba(170,170,170,0.9);
--Title:var(--px18) "App Typeface 2";
--Title-Case:uppercase;

}
[data-palette="App Footer"] {
--Active-Primary:transparent;
--Active-Secondary:rgba(0,134,85,1);
--Background-Primary:#bb423e;
--Background-Secondary:transparent;
--Header-Primary:rgba(0,134,85,1);
--Header-Secondary:rgba(37,38,40,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(255,255,255,1);
--Surface-Secondary:rgba(255,255,255,0.9);

}
[data-palette="Overlay"] {
--Active-Secondary:#eee;

}
[data-palette="Overlay Header"] {
--Background-Primary:linear-gradient(0deg, rgba(235,235,235,1)
0%,rgba(235,235,235,1) 1px,rgba(255,255,255,1) 1px,rgba(255,255,255,1)
100%);;
--Title:var(--px18) "App Typeface 2";
--Title-Case:uppercase;

}
[data-palette="Editor"] {
--Active-Primary:rgba(31,84,6,1);
--Active-Secondary:rgba(246,246,246,1);
--Avatar-Border-Size:0px;
--Avatar-Radius:50%;
--Avatar-Shadow:0px 5px 20px rgba(0,0,0,0.25);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(240,240,240,1);
--Badge-Background:rgba(200,0,0,1);
--Badge-Box-Shadow:0px 2px 5px rgba(0,0,0,0.3);
--Badge-Overlay:rgba(255,255,255,1);
--Badge-Shadow:0px 2px 5px rgba(0,0,0,0.3);
--Body:var(--px16) "Editor Typeface 3";
--Button:var(--px13) "Editor Typeface 3";
--Button-Case:none;
--Button-Highlight-Radius:7px;
--Button-Line-Thickness:4px;
--Button-Radius:100px;
--Byline:var(--px13) "Editor Typeface 3";
--Byline-Case:none;
--Caption:var(--px13) "Editor Typeface 3";
--Caption-Case:none;
--Card-Padding-Top:15px;
--Card-Radius:0px;
--Card-Vertical-Offset:0px;
--Central-Divider:1px solid rgb(238,238,238);
--Cover-Background:rgba(0,0,0,1);
--Cover-Overlay:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
--Dialog-Shade:rgba(0,0,0,0.3);
--Divider-Narrow:1px solid rgba(240,240,240,1);
--Divider-Regular:1px solid rgba(151,151,151,1);
--Divider-Wide:1px solid rgba(0,134,85,1);
--Focus-Box-Shadow:0px 0px 0px 1px rgba(0,100,255,0.5), 0px 0px 0px 3px rgba(0,100,255,0.2);
--Focus-Highlight:rgba(255,255,255,0.5);
--Focus-Radius:5px;
--Focus-Shade:rgba(255,255,255,0.3);
--Footnote:var(--px12) "Editor Typeface 3";
--Footnote-Case:none;
--Header-Primary:rgba(22,22,22,1);
--Header-Secondary:rgba(176,176,176,1);
--Heading:var(--px22) "Editor Typeface 1";
--Heading-Case:uppercase;
--Hint-Box-Shadow:0px 0px 0px 1px rgba(0,100,255,0.5), 0px 0px 0px 3px rgba(0,100,255,0.2);
--Hovered-Filter:contrast(70%) brightness(110%);
--Icon-Scale:1;
--Image-Border-Size:0px;
--Image-Radius:3px;
--Image-Shadow:0px 0px 0px 1px rgba(0,0,0,0.1);
--Line-Spacing:170%;
--Link-Decoration:none;
--Link-Weight:bold;
--Logo-Scale:1;
--Nominal:0.3s;
--Overlay-Filter:blur(3px);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Radius:15px;
--Overlay-Secondary:rgba(255,255,255,0.8);
--Pressed-Filter:contrast(50%) brightness(120%);
--Quick:0.2s;
--Quote-Radius:3px;
--Shadow:0px 5px 20px rgba(0,0,0,0.2);
--Shadow-Primary:rgba(0,0,0,0.5);
--Shadow-Secondary:rgba(0,0,0,0.1);
--Slow:0.5s;
--Smallprint:var(--px10) "Editor Typeface 3";
--Smallprint-Case:none;
--Spacing-Narrow:5px;
--Spacing-Regular:10px;
--Spacing-Wide:15px;
--Sub-Subheading:var(--px12) "Editor Typeface 2";
--Sub-Subheading-Case:normal;
--Subeading-Case:uppercase;
--Subheading:var(--px18) "Editor Typeface 1";
--Subtitle:var(--px17) "Editor Typeface 2";
--Subtitle-Case:normal;
--Surface-Primary:rgba(22,22,22,1);
--Surface-Secondary:rgba(176,176,176,1);
--Title:var(--px20) "Editor Typeface 3";
--Title-Case:normal;
--Very-Quick:0.1s;
--Very-Slow:0.8s;

}
[data-palette="Editor Logo"] {
--Background-Primary:rgba(37,38,40,1);
--Background-Secondary:transparent;
--Surface-Primary:rgba(255,255,255,1);
--Surface-Secondary:rgba(255,255,255,0.9);

}
[data-palette="Editor Menu"] {
--Active-Primary:rgba(31,84,6,1);
--Active-Secondary:rgba(246,246,246,1);
--Background-Primary:transparent;
--Background-Secondary:rgba(248,248,248,1);
--Surface-Primary:rgba(22,22,22,1);
--Surface-Secondary:rgba(136,136,136,1);

}
[data-palette="Editor Banner"] {
--Active-Primary:rgba(88,88,88,1);
--Active-Secondary:rgba(236,236,236,1);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(248,248,248,1);
--Header-Primary:rgba(0,134,85,1);
--Header-Secondary:rgba(37,38,40,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(30,30,30,1);
--Surface-Secondary:rgba(110,110,110,1);

}
[data-palette="Editor Header"] {
--Active-Primary:rgba(40,160,220,1);
--Active-Secondary:rgba(246,246,246,1);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(248,248,248,1);
--Header-Primary:rgba(22,22,22,1);
--Header-Secondary:rgba(176,176,176,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(22,22,22,1);
--Surface-Secondary:rgba(110,110,110,1);

}
[data-palette="Editor Footer"] {
--Active-Primary:rgba(0,134,85,1);
--Active-Secondary:rgba(0,134,85,1);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(248,248,248,1);
--Header-Primary:rgba(0,134,85,1);
--Header-Secondary:rgba(37,38,40,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(30,30,30,1);
--Surface-Secondary:rgba(110,110,110,1);

}
[data-palette="Editor Popover"] {
--Active-Primary:rgba(0,134,85,1);
--Active-Secondary:rgba(120,120,120,1);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(240,240,240,1);
--Header-Primary:rgba(30,30,30,1);
--Header-Secondary:rgba(110,110,110,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(30,30,30,1);
--Surface-Secondary:rgba(248,248,248,1);

}
[data-palette="Editor Popover Banner"] {
--Background-Primary:rgba(246,246,246,1);

}


@font-face {font-family:"App Typeface 1"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/kjpywehi-70zf76/assets/kqh8oduo-mmeqqr/original") format("truetype");}
@font-face {font-family:"App Typeface 2"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/kjpywehi-70zf76/assets/kqh8p0cy-7n5pe9/original") format("truetype");}
@font-face {font-family:"App Typeface 3"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/kjpywehi-70zf76/assets/kqh8oq1f-jlwj0i/original") format("truetype");}
@font-face {font-family:"Editor Typeface 1"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/kjpywehi-70zf76/assets/kqh8oduo-mmeqqr/original") format("truetype");}
@font-face {font-family:"Editor Typeface 2"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/kjpywehi-70zf76/assets/kqh8p0cy-7n5pe9/original") format("truetype");}
@font-face {font-family:"Editor Typeface 3"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/kjpywehi-70zf76/assets/kqh8oq1f-jlwj0i/original") format("truetype");}


.Product-Purchase-D1 > .Card { display: block; }
.Product-Purchase-D1 > .Card > [data-field="Created On"],
.Product-Purchase-D1 > .Card > [data-field="User"],
.Product-Purchase-D1 > .Card > [data-field="Status"],
.Product-Purchase-D1 > .Card > [data-field="Profile"],
.Product-Purchase-D1 > .Card > [data-field="Shirt Size"],
.Product-Purchase-D1 > .Card > [data-field="Preferred Position"],
.Product-Purchase-D1 > .Card > [data-field="Strollers Team"],
.Product-Purchase-D1 > .Card > [data-field="Costume Preference"] {
    display: block;
    margin: var(--Spacing-Narrow) var(--Page-Gutter);
}
.Product-Purchase-D1 > .Card > [data-field].collection { margin:0;  }

.Product-Purchase-D1 > .Card > [data-field]:before, .Product-Purchase-D1 > .Card >  [data-field] [data-entity="_User"] [data-field]:before,
.Product-Purchase-D1 > .Card >  [data-field] [data-entity="Profile"] [data-field]:before{
    display: block; content:attr(data-field);
    font: var(--Caption);
    color: var(--Surface-Primary);
}
.Product-Purchase-D1 > .Card > [data-field].collection:before { display: none; content:'';  }
.Product-Purchase-D1 > .Card > [data-field="User"] [data-field="Email"],
.Product-Purchase-D1 > .Card > [data-field="Profile"] [data-field="First Name"],
.Product-Purchase-D1 > .Card > [data-field="Profile"] [data-field="Last Name"] {
    display:block; 
    margin: var(--Spacing-Narrow) var(--Page-Gutter);
}
.Product-Purchase-D1 > .Card > [data-field].collection[data-collection="Actions"] { display:block; 
    margin: var(--Spacing-Narrow) var(--Page-Gutter);
}
.Product-Purchase-D1 > .Card > [data-field] { font:var(--Body); }

.Product-Purchase-D1 > .Card > [data-field].collection[data-collection="Actions"] [data-name="Edit"] { display:none; }
.Event-E1 {display:grid;
grid-template-areas:
  'title buy   '
  'price cancel   '
  'price manage';
grid-template-columns:1fr auto; grid-template-rows:auto 1fr; border-top: var(--Divider-Narrow); padding-top:var(--Spacing-Narrow); grid-gap:var(--Spacing-Narrow) var(--Spacing-Narrow);}

.LG.Event-E1 {
grid-template-areas:
  'title manage cancel buy'
  'price manage cancel buy';
grid-template-columns:1fr auto auto auto;}

.XL.Event-E1 {
grid-template-areas:
  'title manage cancel buy'
  'price manage cancel buy';
grid-template-columns:1fr auto auto auto;}

.Event-E1 > [data-field="Title"] {grid-area: title; display:flex; font: var(--Sub-Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary); align-self:start; justify-self:start;}
.Event-E1 > [data-field="Picture"] {--Picture-Aspect-Ratio:1/1; grid-area:picture; align-self: flex-start; display:block;}
.Event-E1 > [data-field="Start Date"] {grid-area:price; display:block; font:var(--Caption); color:var(--Surface-Secondary); align-self:start;}
.Event-E1 > [data-field="Start Date"] *:before {content:"";}
.Event-E1 > [data-field="Attend"] {grid-area:buy; display:block; justify-self:end;}
.Event-E1 > [data-field="Attend"] .Action {min-width:80px;}
.Event-E1 > [data-field="Open"] {grid-area:buy; display:block; width:30px;}
.Event-E1 > [data-field="Manage Attendees"] {grid-area:manage; display:block; }
.Event-E1 > [data-field="Cannot Attend"] {grid-area:cancel; display:block; justify-self:end;}
.Event-E1 > [data-field="Cannot Attend"] .Action {min-width:80px;}

.Event-D6 > .Card {display:grid; grid-template-columns:[card-start content-start] auto [content-end card-end]; grid-template-rows: [card-start content-start] 1fr [content-end] var(--Spacing-Wide) [card-end]; min-height:100%;}
.Event-D6 > .Card:before {grid-area:card; position:relative; z-index:1; top:0; display:block; content:""; border-radius:var(--Card-Radius) var(--Card-Radius) 0 0; background:var(--Background-Primary);}
.Event-D6 > .Card > [data-field="Attendees"] {grid-area:content; display:block; margin-top:25px;}

.Product-Addon-L1 { display:flex; padding:5px; align-items:center; }
.Product-Addon-L1 > .Operator-Check { order:0; min-width:40px; max-width: 40px; padding:10px; }
.Product-Addon-L1 > [data-field="Title"] { flex:1; order:1; display:block;  }
.Product-Addon-L1 > [data-field="Price"] { flex:1; order:2; max-width:80px; display:block;}
.Product-Addon-L1 > [data-field="Price"] p {text-align: right;}
.Event-L1 {--Focus-Radius: 5px; --Focus-Highlight-Width: 1px; --Focus-Shade-Width: 5px; --Focus-Margin: -4px; display:grid; grid-template-columns: [focus-start title-start date-start location-start] 3fr [location-end date-end title-end focus-end]; grid-template-rows: [focus-start title-start] auto [title-end date-start] auto [date-end location-start] 1fr [location-end focus-end]; grid-gap: var(--Spacing-Narrow) var(--Spacing-Wide); align-items: flex-start;}
.Event-L1 > [data-field="Title"] {grid-area: title; display:block; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary);}
.Event-L1 > [data-field="Location Title"] {grid-area: location; display:block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary);}
.Event-L1 > [data-field="Start Date"] {grid-area: date; display:block; font: var(--Byline); color: var(--Surface-Primary);}
.Event-L1 > [data-field="Start Date"] p:last-child {padding-bottom: 0;}

.LG.Event-L1 {--Focus-Radius: 5px; --Focus-Highlight-Width: 1px; --Focus-Shade-Width: 5px; --Focus-Margin: -4px; display:grid; grid-template-columns: [focus-start title-start] auto [title-end location-start] 1fr [location-end date-start] max-content [date-end focus-end]; grid-template-rows: [focus-start title-start date-start location-start] minmax(auto, 1fr) [location-end date-end title-end focus-end]; border-bottom: var(--Divider-Narrow); grid-gap: var(--Spacing-Narrow) var(--Spacing-Wide); padding-bottom:var(--Spacing-Regular); border-bottom: var(--Divider-Narrow); align-items:end;}
.LG.Event-L1 > [data-field="Start Date"] {width:200px; justify-items:end;}
.LG.Event-L1 > [data-field="Start Date"] time {display:grid; grid-template-columns:1fr 50px auto auto auto; justify-items:end; grid-gap:var(--Spacing-Narrow);}

.XL.Event-L1 {--Focus-Radius: 5px; --Focus-Highlight-Width: 1px; --Focus-Shade-Width: 5px; --Focus-Margin: -4px; display:grid; grid-template-columns: [focus-start title-start] auto [title-end location-start] 1fr [location-end date-start] max-content [date-end focus-end]; grid-template-rows: [focus-start title-start date-start location-start] minmax(auto, 1fr) [location-end date-end title-end focus-end]; border-bottom: var(--Divider-Narrow); grid-gap: var(--Spacing-Narrow) var(--Spacing-Wide); padding-bottom:var(--Spacing-Regular); border-bottom: var(--Divider-Narrow); align-items:end;}
.XL.Event-L1 > [data-field="Start Date"] {width:200px; justify-items:end;}
.XL.Event-L1 > [data-field="Start Date"] time {display:grid; grid-template-columns:1fr 50px auto auto auto; justify-items:end; grid-gap:var(--Spacing-Narrow);}
.Workflow-List-1 {
  display: grid; 
  grid-template-columns: auto minmax(100px, 1fr) 140px; 
  grid-template-rows: 23px; 
  gap: 0px 0px; 
  grid-template-areas: 
    "check title status" "check detail status";
  width:100%;
}
.Workflow-List-1 > .Operator-Check { grid-area: check; min-width:40px; max-width: 40px; padding:10px; }
.Workflow-List-1 [data-field="Workflow Title"] { 
  display:block; grid-area: title;  
font: var(--Body);
color: var(--Surface-Primary);
  padding:0px 2px;
}
.Workflow-List-1 [data-field="Workflow Title"] p { 
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;  
}

.Workflow-List-1 [data-field="Workflow Detail"] { 
  display:block; grid-area: detail;  
font: var(--Caption);
color: var(--Surface-Secondary);
  padding:0px 2px;
}
.Workflow-List-1 [data-field="Workflow Detail"] p { 
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;  
}
.Workflow-List-1 [data-field="Workflow Detail"] .Option-Badge p { display: inline; padding: 1px 9px; }

.Workflow-List-1 [data-field="Workflow Detail"] .Label-Badge p { padding:0px 2px; }

.Workflow-List-1 [data-field="Status"] { display:block; text-align:right; grid-area: status;
font: var(--Body);
color: var(--Surface-Primary);
}

.Workflow-List-1 [data-field="Status"] p { padding:10px; color:var(--Overlay-Primary); border-radius:5px; min-width:120px; text-align:center; background: var(--Option-Color,#777); }

.Workflow-List-1.Is-Current { 
background: var(--Active-Secondary);
box-shadow: 0px 0 0px 3px var(--Active-Secondary);
}
.Profile-D7 > .Card {display:grid; grid-template-columns:[card-start content-start title-start] auto [content-end card-end title-end]; grid-template-rows: [card-start title-start] auto [title-end content-start] 1fr [content-end] var(--Spacing-Wide) [card-end]; min-height:100%;}
.Profile-D7 > .Card:before {grid-area:card; position:relative; z-index:1; top:0; display:block; content:""; border-radius:var(--Card-Radius) var(--Card-Radius) 0 0; background:var(--Background-Primary);}
.Profile-D7 > .Card > [data-field="Attendance"] {grid-area:content; display:block;}
.Profile-D7 > .Card > [data-field="User"] {grid-area:title; display:block;}
.Profile-D7 > .Card > [data-field="User"] [data-field="Email"] {display:block;padding:15px;}

#App .richtext {-webkit-touch-callout: auto; -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto;}
.PayOptions-F1 > data[data-field] { display:block; }


.Order-Item-L1 {
  font: var(--Body);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto 1fr;
  gap: var(--Spacing-Narrow) 0;
  grid-template-areas:
    "picture title qty"
    "picture subtitle price"
    "picture status .";
  padding:var(--Spacing-Regular) 0;
  border-bottom:var(--Divider-Narrow);
}
.Order-Item-L1 [data-field="Product Title"] { grid-area: title; display: block; font: var(--Sub-Subheading); }
.Order-Item-L1 [data-field="Variant Title"] { grid-area: subtitle; display: block; font: var(--Byline); }
.Order-Item-L1 [data-field="Picture"] {grid-area: picture; display: block; width:60px; --Picture-Aspect-Ratio:1/1; margin-right:var(--Spacing-Regular);}
.Order-Item-L1 [data-field="Picture"]:empty {display:none;}
.Order-Item-L1 [data-field="Status"] { grid-area: status; display: block; }
.Order-Item-L1 [data-field="Quantity"] { grid-area: qty; display: block; text-align:right; font:bold var(--Body);}
.Order-Item-L1 [data-field="Quantity"] p:before { content:'x '; }
.Order-Item-L1 [data-field="Subtotal"] { grid-area: price; display: block; text-align:right; font:var(--Byline);}
/*
@Name: Article Extended 5
@Summary: No title subtitle or cover 
*/
.Article-E5 {display:grid; grid-template-columns:[content-start] auto [content-end]; grid-template-rows:[content-start] auto [content-end];}
.Article-E5 > [data-field="Content"] {grid-area: content; display:block; font: var(--Body); color: var(--Surface-Primary);}

.Product-Variant-F1 { 
  padding: 10px; 
  display:flex;
}

.Product-Variant-F1 > * { display:none; }

.Product-Variant-F1 > [data-field="Title"] { display:grid; flex:1;order:1;}

.Product-Variant-F1 > [data-field="Price"] { display:grid; flex:1; max-width:70px; order:2;}

.Product-Variant-F1 > [data-field="Picture"] { display:grid; max-width:120px; flex:1; order:0; padding-right:10px;}

.Product-Variant-F1 > .Operator-Menu { display:grid; order:3; }

.Product-Variant-F1 > .Import-Status { display:block; order:-1; flex:1; max-width:80px;}
/*
@Name: Location Listing 1
@Summary: Image on left, title, subtitle and summary on right.
*/
.Location-L1 {--Focus-Radius: 5px; --Focus-Highlight-Width: 1px; --Focus-Shade-Width: 5px; --Focus-Margin: -4px; display:grid; grid-template-columns: [focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 3fr [summary-end subtitle-end title-end focus-end]; grid-template-rows: [focus-start picture-start title-start] auto [title-end subtitle-start] auto [subtitle-end summary-start] 1fr [summary-end picture-end focus-end]; border-bottom: var(--Divider-Narrow); grid-gap: var(--Spacing-Narrow) var(--Spacing-Wide); border-bottom: var(--Divider-Narrow); align-items: flex-start;}
.Location-L1 > [data-field="Title"] {grid-area: title; display:block; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary);}
.Location-L1 > [data-field="Subtitle"] {grid-area: subtitle; display:block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary);}
.Location-L1 > [data-field="Picture"] {grid-area: picture; align-self: flex-start; display:block;}
.Location-L1 > [data-field="Summary"] {grid-area: summary; display:block; font: var(--Body); color: var(--Surface-Primary);}
.Location-L1 > [data-field="Summary"] p:last-child {padding-bottom: 0;}


/* XL */
.XL.Location-L1 {grid-template-columns:[focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 5fr [summary-end subtitle-end title-end focus-end];}

/* LG */
.LG.Location-L1 {grid-template-columns:[focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 4fr [summary-end subtitle-end title-end focus-end];}

/* MD */
.MD.Location-L1 {grid-gap: var(--Spacing-Narrow) var(--Spacing-Regular);}
.MD.Location-L1 > [data-field="Summary"] {font: var(--Body);}

/* SM */
.SM.Location-L1 {--Picture-Aspect-Ratio:16/9; grid-template-columns:[focus-start picture-start title-start subtitle-start summary-start] 1fr [summary-end subtitle-end title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] auto [title-end subtitle-start] auto [subtitle-end focus-end];}
.SM.Location-L1 > [data-field="Title"] {font: var(--Sub-Subheading);}
.SM.Location-L1 > [data-field="Summary"] {display: none;}

/* XS */
.XS.Location-L1 {--Picture-Aspect-Ratio:16/9; grid-template-columns:[focus-start picture-start title-start subtitle-start summary-start] 1fr [summary-end subtitle-end title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] auto [title-end subtitle-start] auto [subtitle-end focus-end];}
.XS.Location-L1 > [data-field="Title"] {font: var(--Sub-Subheading); text-transform: var(--Sub-Subheading-Case);}
.XS.Location-L1 > [data-field="Subtitle"] {display: none;}
.XS.Location-L1 > [data-field="Summary"] {display: none;}
.Tab-D2 > .Card {display:grid; grid-template-columns:[card-start body-start] 1fr [body-end card-end]; grid-template-rows:[card-start body-start] max-content [body-end] var(--Spacing-Wide) [card-end];}
.Tab-D2 > .Card:before {grid-area:card; position:relative; top:var(--Card-Vertical-Offset); display:block; content:""; z-index:-1; border-radius:var(--Card-Radius); background:var(--Background-Primary);}
.Tab-D2 > .Card > [data-field="Body"] {grid-area:body; display:block; font:var(--Body); color:var(--Surface-Primary);}


.Product-Purchase-E1 {}
.Product-Purchase-E1 > [data-field="Created On"] {
display:block;
}
.Product-Purchase-E1 > [data-field="Status"] {
display:block;
}
.Product-Purchase-E1 > [data-field="Created On"] p:before {
content:'Purchased on:';
}
.Product-Purchase-E1 > [data-field="Status"] p:before {
content:'Status:';
}
/*
@Name: Location Detail 1
@Summary: Cover picture at top with Title and Address overlayed on the cover. Rest of content below in a card.
*/
.Location-D1 > .Card {display:grid; grid-template-columns:[card-start title-start subtitle-start actions-start content-start] 1fr [content-end actions-end subtitle-end title-end card-end]; grid-template-rows: [title-start] auto [title-end subtitle-start] var(--Header-Height) [subtitle-end card-start] var(--Card-Padding-Top) [actions-start] auto [actions-end content-start] max-content [content-end meta-start] auto [meta-end] var(--Spacing-Wide) [card-end];}
.Location-D1 > .Card:before {grid-area:card; position:relative; top:var(--Card-Vertical-Offset); display:block; content:""; border-radius:var(--Card-Radius) var(--Card-Radius) 0 0; background:var(--Background-Primary);}
.Location-D1 > .Card > [data-field="Title"] {grid-area:title; align-self: end; justify-self: start; display:block; padding:var(--Spacing-Wide) var(--Page-Gutter); font:var(--Title); text-transform:var(--Title-Case); color:var(--Body);}
.Location-D1 > .Card > [data-field="Address"] {grid-area:subtitle; align-self: start; justify-self: start; display:block; padding:0 var(--Page-Gutter) 0 var(--Page-Gutter); font:var(--Subtitle); text-transform:var(--Subtitle-Case); color:var(--Body);}

/* Actions */
.Location-D1 > .Card > [data-collection="Actions"] {grid-area: actions;}
.Location-D1  > .Card > [data-field="Content"] {grid-area: content; display: block; font: var(--Body); color: var(--Surface-Primary); border-bottom: var(--Divider-Narrow); margin: 0 var(--Page-Gutter);}

.Event-Attendee-D1 > .Card { display: block; }
.Event-Attendee-D1 > .Card > [data-field] {
    xdisplay: block;
    margin: var(--Spacing-Narrow) var(--Page-Gutter);
    font: var(--Body);
}
.Event-Attendee-D1 > .Card > [data-field].collection { margin:0;  }

.Event-Attendee-D1 > .Card > [data-field]:before {
    display: block; content:attr(data-field);
    font: var(--Caption);
    color: var(--Surface-Primary);
}
.Event-Attendee-D1 > .Card > [data-field].collection:before { display: none; content:'';  }


.Event-Attendee-D1 > .Card > [data-collection="Actions"],
.Event-Attendee-D1 > .Card > [data-field="Created On"],
.Event-Attendee-D1 > .Card > [data-field="User"],
.Event-Attendee-D1 > .Card > [data-field="Event"],
.Event-Attendee-D1 > .Card > [data-field="Status"],
.Event-Attendee-D1 > .Card > [data-field="Variant"],
.Event-Attendee-D1 > .Card > [data-field="Purchase"],
.Event-Attendee-D1 > .Card > [data-field="Request"],
.Event-Attendee-D1 > .Card > [data-field="Attendee Audiences"],
.Event-Attendee-D1 > .Card > [data-field="Profile"] {
    display: block;
}

.Event-Attendee-D1 > .Card > [data-field="Profile"] [data-field="First Name"],
.Event-Attendee-D1 > .Card > [data-field="Profile"] [data-field="Last Name"] {
    display: block;
}
.Event-Attendee-D1 > .Card > [data-field="User"] [data-field="Email"] {
    display: block;
  margin: var(--Spacing-Narrow) var(--Page-Gutter);
}

.Event-Attendee-D1 > .Card > [data-field="Purchase"] [data-field="Stripe Intent"] {
  display: block; 
  margin: var(--Spacing-Narrow) var(--Page-Gutter);
}

.Event-Attendee-D1 > .Card > [data-field="Team"], .Event-Attendee-D1 > .Card > [data-field="Team"] [data-field="Title"] {
  display: block; 
  margin: var(--Spacing-Narrow) var(--Page-Gutter);
}
.Event-Attendee-D1 > .Card > [data-field="Position"], .Event-Attendee-D1 > .Card > [data-field="Position"] [data-field="Title"] {
  display: block; 
  margin: var(--Spacing-Narrow) var(--Page-Gutter);
}
.Event-Attendee-E6 { 
  display: grid;
  grid-template-columns: auto 1fr 100px;
  grid-template-rows: auto auto auto;


  border-bottom:var(--Divider-Narrow);
  font: var(--Body);
}
.Event-Attendee-E6.SM {
  grid-template-areas:
  "check name name"
  "check email email"
  "check date status"
  "check actions actions"; 
}
.Event-Attendee-E6.LG {
  grid-template-columns: auto 1fr 1fr 100px;
  grid-template-areas:
  "check name email status actions"; 
}
.Event-Attendee-E6 > .Operator-Check { grid-area: check; width:40px; padding:6px; }
.Event-Attendee-E6 > [data-field="XCreated On"] { display:block; grid-area: date; font-size:smaller; color:#aaa; }
.Event-Attendee-E6 > [data-field="XCreated On"]:before { content:"Requested: " }
.Event-Attendee-E6 > [data-field="User"] { display:block; grid-area: email; }
.Event-Attendee-E6 > [data-field="User"] [data-field="Email"] { display:block; font-size:smaller; }
.Event-Attendee-E6 > [data-field="Status"] { display:block; grid-area: status; text-align:center; }
.Event-Attendee-E6 > [data-field="Status"] p { padding:5px; background:#666; color:#fff; display:inline-block; font: var(--Caption); }
.Event-Attendee-E6[data-values-status] > [data-field="Status"] p  {border-radius:5px;}
.Event-Attendee-E6[data-values-status="accepted"] > [data-field="Status"] p { background:#51c151; }
.Event-Attendee-E6[data-values-status="waitlisted"] > [data-field="Status"] p { background:#aaa; }
.Event-Attendee-E6[data-values-status="requested"] > [data-field="Status"] p {background:#6868d5;}

.Event-Attendee-E6 > [data-field="Profile"] { display:block; grid-area: name; }

/*.Event-Attendee-E6 > [data-collection="Actions"] { display:block; grid-area: actions; }
.Event-Attendee-E6 > [data-collection="Actions"] [data-name="Edit"] { display:none; }*/

.Event-Attendee-E6 > [data-field="Attendance History"] { display:block; grid-area: actions; }
.Order-Item-E1 {
  font: var(--Body);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--Spacing-Narrow) 0;
  grid-template-areas:
    "picture title    qty   amend"
    "picture subtitle price amend"
    "picture addons   .     amend"
    "picture status   .     amend"
    "picture shopnote .     amend";
  border-bottom:var(--Divider-Narrow);
}
.Order-Item-E1 [data-field="Product Title"] { grid-area: title; display: block; font: var(--Sub-Subheading); align-self:end;}
.Order-Item-E1 [data-field="Variant Title"] { grid-area: subtitle; display: block; font: var(--Byline); }
.Order-Item-E1 [data-field="Addon Titles"] { grid-area: addons; display: block; font: var(--Byline); }
.Order-Item-E1 [data-field="Addon Titles"] p:empty { display:none; }
.Order-Item-E1 [data-field="Addon Titles"] p:before { content:'Add: '; }
.Order-Item-E1 [data-field="Picture"] {grid-area: picture; display: block; width:50px; --Picture-Aspect-Ratio:1/1; margin-right:var(--Spacing-Regular); align-self:start;}
.Order-Item-E1 [data-field="Picture"]:empty {display:none;}
.Order-Item-E1 [data-field="Status"] { grid-area: status; display: block; }
.Order-Item-E1 [data-field="Quantity"] { grid-area: qty; display: block; text-align:right; font:bold var(--Body);}
.Order-Item-E1 [data-field="Quantity"] p:before { content:'x '; }

.Order-Item-E1 [data-field="Approved Quantity"] { grid-area: status; display: block; text-align:left; font:bold var(--Body);}
.Order-Item-E1 [data-field="Approved Quantity"] p:before { content:'Approved Quantity: '; }
.Order-Item-E1 [data-field="Approved Quantity"] p:empty { display:none; }

.Order-Item-E1 [data-field="Shop Adjusted Details"] { grid-area: shopnote; display: block; text-align:left; font:var(--Body);}
.Order-Item-E1 [data-field="Shop Adjusted Details"] p:before { content:'Shop Note: '; }
.Order-Item-E1 [data-field="Shop Adjusted Details"] p:empty { display:none; }


.Order-Item-E1 [data-field="Subtotal"] { grid-area: price; display: block; text-align:right; font:var(--Byline);}
.Order-Item-E1 [data-field="Amend"] { grid-area: amend; display: flex; max-width:60px; justify-items:center; align-items:center; }
.Order-Item-E1 [data-field="Amend"] > div { margin-left:10px; max-width:60px; width: 60px; }
.Order-Item-E1 [data-field="Adjust"] { grid-area: amend; display: flex; max-width:60px; justify-items:center; align-items:center; }
.Order-Item-E1 [data-field="Adjust"] > div { margin-left:10px; max-width:60px; width: 60px; }
/*
@Name: Product Extended Listing 2
@Summary: Square picture post. Followed by title and description with right aligned buy button.
*/
.Product-E2 {
  display:grid;
  grid-template-areas:
  "picture picture"
  "title   title"
  "price   buy"
  ;  
  grid-template-columns:2fr max-content;
  grid-template-rows:auto auto 1fr; border-bottom: var(--Divider-Narrow);}
.Product-E2 > [data-field="Title"] {grid-area: title; display:flex; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary); align-self:start; justify-self:start;}
.XS.Product-E2 > [data-field="Title"] {font:bold  var(--Caption);}
.Product-E2 > [data-field="Picture"] {--Picture-Aspect-Ratio:1/1; grid-area:picture; align-self: flex-start; display:block;}
.Product-E2 > [data-field="Price"] {grid-area:price; display:block; font:var(--Caption); color:var(--Surface-Secondary); align-self:center;}
.Product-E2 > [data-field="Price"] *:before {content:"From ";}
.Product-E2 > [data-field="Buy"] {grid-area:buy; display:block;} 
.Product-E2 > [data-field="Buy"] .Action {width:100%; height:100%; font:var(--Body);}
.Product-E2 > [data-field="Buy"] .Action  > [data-field^="Label"] {font:var(--Body); text-transform:uppercase;}
/*
@Name: Product Extended Listing 1
@Summary: Shop listing above square picture post. Followed by title and description with right aligned buy button.
*/
.Product-E1 {display:grid; grid-template-columns: [shop-start title-start picture-start description-start] 1fr [title-end buy-start] 120px [buy-end description-end picture-end title-end shop-end]; grid-template-rows:[shop-start] auto [shop-end picture-start] auto [picture-end title-start buy-start] 40px [buy-end title-end description-start] 1fr [description-end]; grid-gap: var(--Spacing-Regular) var(--Spacing-Narrow); border-bottom: var(--Divider-Narrow);}
.Product-E1 > [data-field="Title"] {grid-area: title; display:flex; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary); align-items:center;}
.Product-E1 > [data-field="Picture"] {--Picture-Aspect-Ratio:1/1; grid-area:picture; align-self: flex-start; display:block;}
.Product-E1 > [data-field="Description"] {grid-area:description; display:block; font: var(--Footnote); color: var(--Surface-Secondary);}
.Product-E1 > [data-field="Shop"] {grid-area:shop; display:block;} 
.Product-E1 > [data-field="Buy"] {grid-area:buy; display:block;} 
.Product-E1 > [data-field="Buy"] .Action {width:100%; height:100%; font:var(--Body);}
.Product-E1 > [data-field="Buy"] .Action  > [data-field^="Label"] {font:var(--Body); text-transform:uppercase;}
/*
@Name: Article Listing 5
@Summary: Large feature image with title overlay.
*/
.Article-L5 {--Overlay-Background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); --Picture-Aspect-Ratio: 4/1; --Picture-Radius: 0px; --Focus-Radius: 5px; --Focus-Highlight-Width: 1px; --Focus-Shade-Width: 5px; --Focus-Margin: 0px;}
.Article-L5 {display: grid; grid-template-columns: [focus-start overlay-start picture-start] var(--Page-Gutter) [title-start subtitle-start] 1fr [subtitle-end title-end] var(--Page-Gutter) [picture-end overlay-end focus-end]; grid-template-rows: [focus-start picture-start] 6fr [overlay-start] var(--Spacing-Wide) [title-start] max-content [title-end subtitle-start] min-content [subtitle-end] minmax(var(--Spacing-Regular), 1fr) [picture-end overlay-end focus-end]; grid-gap: 0;}
.Article-L5:after {grid-area: overlay; z-index: 1;  content: ""; background: var(--Overlay-Background);}
.Article-L5 > [data-field="Title"] {grid-area: title; z-index: 2; display: flex; font: var(--Title); text-transform: var(--Title-Case); color: var(--Overlay-Primary);}
.Article-L5 > [data-field="Subtitle"] {grid-area: subtitle; z-index: 2; display: flex; font: var(--Subtitle); text-transform: var(--Subtitle-Case); color: var(--Overlay-Secondary);}
.Article-L5 > [data-field="Picture"] {grid-area: picture; z-index: 0; display: block; box-shadow: none; border-radius: 0px;}

/* XL */
.XL.Article-L5 {--Picture-Aspect-Ratio: 5/1; font-size: 1.3rem;}

/* LG */
.LG.Article-L5 {--Picture-Aspect-Ratio: 4/1; font-size: 1.1rem;}

/* MD */
/* SM */
.SM.Article-L5 {--Picture-Aspect-Ratio: 3/1; font-size: 0.9rem;}

/* XS */
.XS.Article-L5 {--Picture-Aspect-Ratio: 2/1; font-size: 0.8rem;}
.Payment-Request-D1 > .Card { display: flex; flex-direction:column; }
.Payment-Request-D1 > .Card > [data-field] {
    margin: var(--Spacing-Narrow) var(--Page-Gutter);
    font: var(--Body);
}
.Payment-Request-D1 > .Card > [data-field].collection { margin:0;  }
.Payment-Request-D1 > .Card > [data-field]:before {
    display: block; content:attr(data-field);
    font: var(--Caption);
    color: var(--Surface-Primary);
}
.Payment-Request-D1 > .Card > [data-field].collection:before { display: none; content:'';  }
.Payment-Request-D1 > .Card > [data-collection="Actions"] { order:10; }
.Payment-Request-D1 > .Card > [data-collection="Actions"],
.Payment-Request-D1 > .Card > [data-field="Created On"],
.Payment-Request-D1 > .Card > [data-field="Note"],
.Payment-Request-D1 > .Card > [data-field="Status"],
.Payment-Request-D1 > .Card > [data-field="Amount"] {
    display: block;
}
.Profile-S3 {display:flex; flex-flow:row nowrap;}
.Profile-S3 * {margin-right:var(--Spacing-Very-Narrow);}
.Profile-S3 [data-field="First Name"] {display:block;}
.Profile-S3 [data-field="Last Name"] {display:block;}

/*
@Name: Product Extended Listing 3
@Summary: Shop row listing, with Text layout. Title and description with right aligned buy button.
*/
.Product-E3 {display:grid;
grid-template-areas:
  'title buy   '
  'price manage';
grid-template-columns:1fr auto; grid-template-rows:auto 1fr; border-top: var(--Divider-Narrow); padding-top:var(--Spacing-Narrow); grid-gap:var(--Spacing-Narrow) 0;}

.LG.Product-E3 {
grid-template-areas:
  'title manage buy'
  'price manage buy';
grid-template-columns:1fr 100px auto;}

.XL.Product-E3 {
grid-template-areas:
  'title manage buy'
  'price manage buy';
grid-template-columns:1fr 100px auto;}

.Product-E3 > [data-field="Title"] {grid-area: title; display:flex; font: var(--Sub-Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary); align-self:start; justify-self:start;}
.Product-E3 > [data-field="Picture"] {--Picture-Aspect-Ratio:1/1; grid-area:picture; align-self: flex-start; display:block;}
.Product-E3 > [data-field="Price"] {grid-area:price; display:block; font:var(--Caption); color:var(--Surface-Secondary); align-self:center;}
.Product-E3 > [data-field="Price"] *:before {content:"Prices from ";}
.Product-E3 > [data-field="Buy"] {grid-area:buy; display:block; text-align:right;}
.Product-E3 > [data-field="Buy"] .Action {min-width:80px;}
.Product-E3 > [data-field="Open"] {grid-area:buy; display:block; width:30px;}
.Product-E3 > [data-field="Manage Purchases"] {grid-area:manage; display:block; }

.Product-E3[data-values-status="active"] > [data-field="Title"]:after {display:flex; align-items:center; justify-content:center; content:'Paid'; padding:0 var(--Spacing-Wide); font:var(--Caption); margin:0 0 var(--Spacing-Regular) var(--Spacing-Regular); background:rgb(44,160,11); color:var(--Overlay-Primary); border-radius:4px;}
.Product-L1 {display: flex; flex-direction: column; font: var(--Body); color: var(--Surface-Primary); padding:10px; }
.Product-L1 > [data-field="Title"] { display: block; order: 1; font:var(--Heading); }
.Product-L1 > [data-field="Picture"] { display: block; order: 3; border-radius:10px; }
.Product-L1 > [data-field="Description"] { display: block; order: 4; font:var(--Byline); margin-top:10px; }
.Product-L1 > [data-field="Shop"] { display: block; order: 0;}
/*
@Name: Plan Extended Listing 1
@Summary: Shop listing above square picture post. Followed by title and description with right aligned buy button.
*/
._Plan-E1 {display:grid; grid-template-columns: [shop-start title-start picture-start description-start] 1fr [title-end buy-start] 170px [buy-end description-end picture-end title-end shop-end]; grid-template-rows:[shop-start] auto [shop-end picture-start] auto [picture-end title-start buy-start] 40px [buy-end title-end description-start] 1fr [description-end]; grid-gap: var(--Spacing-Regular) var(--Spacing-Narrow); border-bottom: var(--Divider-Narrow);}
._Plan-E1 > [data-field="Title"] {grid-area: title; display:flex; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary); align-items:center;}
._Plan-E1 > [data-field="Picture"] {--Picture-Aspect-Ratio:2/1; grid-area:picture; align-self: flex-start; display:block;}
._Plan-E1 > [data-field="Description"] {grid-area:description; display:block; font: var(--Footnote); color: var(--Surface-Secondary);}
._Plan-E1 > [data-field="Shop"] {grid-area:shop; display:block;} 
._Plan-E1 > [data-field="Buy"] {grid-area:buy; display:block;} 
._Plan-E1 > [data-field="Buy"] .Action {width:100%; height:100%; font:var(--Body);}
._Plan-E1 > [data-field="Buy"] .Action  > [data-field^="Label"] {font:var(--Body); text-transform:uppercase;} 

._Plan-E1 > [data-field="Open"] {grid-area:buy; display:block;} 
._Plan-E1 > [data-field="Open"] .Action {width:100%; height:100%; font:var(--Body);}
._Plan-E1 > [data-field="Open"] .Action  > [data-field^="Label"] {font:var(--Body); text-transform:uppercase;}
/*
@Name: Product Extended Listing 4
@Summary: Shop row listing, with Text layout. Title and description with right aligned buy button.
*/
.Product-E4 {display:grid; --Focus-Margin:0px;
grid-template-areas:
"title       buy"
"description buy";
grid-template-columns:1fr auto; grid-template-rows:auto 1fr; border-top: var(--Divider-Narrow); padding-top:var(--Spacing-Narrow)}
.Product-E4 > [data-field="Title"] {grid-area: title; display:flex; font: var(--Sub-Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary);}
.Product-E4 > [data-field="Picture"] {--Picture-Aspect-Ratio:1/1; grid-area:picture; align-self: flex-start; display:none;}
.Product-E4 > [data-field="Short Description"] {grid-area:description; display:block; font:var(--Caption); color:var(--Surface-Secondary); align-self:center;}
.Product-E4 > [data-field="Price"] {grid-area:price; display:none; font:var(--Caption); color:var(--Surface-Secondary); align-self:center;}
.Product-E4 > [data-field="Price"] *:before {content:"From ";}
.Product-E4 > [data-field="Buy"] {grid-area:buy; display:block; width:30px;}
/*
@Name: Article Listing 2
@Summary: Image abvove title and subtitle.
*/
.Article-L2 {--Picture-Aspect-Ratio:16/9; --Focus-Radius: 5px; --Focus-Highlight-Width: 1px; --Focus-Shade-Width: 5px; --Focus-Margin: -4px; display:grid;  grid-template-columns:[focus-start picture-start title-start subtitle-start] 1fr [subtitle-end title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] auto [title-end subtitle-start] 1fr [subtitle-end focus-end]; grid-gap: 0px 0px; align-items: flex-start;}
.Article-L2 > [data-field="Title"] {grid-area: title; display:block; font: var(--Subheading); justify-self:start; text-transform: var(--Subheading-Case); color: var(--Surface-Primary);}
.Article-L2 > [data-field="Subtitle"] {grid-area: subtitle; display:block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary);}
.Article-L2 > [data-field="Picture"] {grid-area: picture; align-self: flex-start; display:block;}


/* XL */
.XL.Article-L2 {--Picture-Aspect-Ratio:4/3; grid-gap: var(--Spacing-Narrow) var(--Spacing-Wide);}

/* LG */
.XL.Article-L2 {--Picture-Aspect-Ratio:4/3; grid-gap: var(--Spacing-Narrow) 0px;}


/* SM */
.SM.Article-L2 {grid-gap:var(--Spacing-Narrow) 0; grid-template-columns:[focus-start picture-start title-start] 1fr [title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] 1fr [title-end focus-end];}
.SM.Article-L2 > [data-field="Title"] {font:bold var(--Byline);}
.SM.Article-L2 > [data-field="Subtitle"] {display: none;}

/* XS */
.XS.Article-L2 {grid-gap:var(--Spacing-Narrow) 0; grid-template-columns:[focus-start picture-start title-start] 1fr [title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] 1fr [title-end focus-end];}
.XS.Article-L2 > [data-field="Title"] {font:bold var(--Caption);}
.XS.Article-L2 > [data-field="Subtitle"] {display: none;}
/*
@Name: Product Extended Listing 1
@Summary: Shop listing above square picture post. Followed by title and description with right aligned buy button.
*/
.Product-E1 {display:grid; grid-template-columns: [shop-start title-start picture-start description-start] 1fr [title-end buy-start] 170px [buy-end description-end picture-end title-end shop-end]; grid-template-rows:[shop-start] auto [shop-end picture-start] auto [picture-end title-start buy-start] 40px [buy-end title-end description-start] 1fr [description-end]; grid-gap: var(--Spacing-Regular) var(--Spacing-Narrow); border-bottom: var(--Divider-Narrow);}
.Product-E1 > [data-field="Title"] {grid-area: title; display:flex; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary); align-items:center;}
.Product-E1 > [data-field="Picture"] {--Picture-Aspect-Ratio:2/1; grid-area:picture; align-self: flex-start; display:block;}
.Product-E1 > [data-field="Description"] {grid-area:description; display:block; font: var(--Footnote); color: var(--Surface-Secondary);}
.Product-E1 > [data-field="Shop"] {grid-area:shop; display:block;} 
.Product-E1 > [data-field="Purchase"] {grid-area:buy; display:block;} 
.Product-E1 > [data-field="Purchase"] .Action {width:100%; height:100%; font:var(--Body);}
.Product-E1 > [data-field="Purchase"] .Action  > [data-field^="Label"] {font:var(--Body); text-transform:uppercase;} 


.Event-D1 > .Card {display:grid; grid-template-columns:[title-start subtitle-start card-start actions-start content-start location-start] auto [content-end actions-end card-end subtitle-end title-end location-end]; grid-template-rows: [title-start] calc( var(--Cover-Height) - var(--Header-Height) - var(--Header-Height) - var(--Card-Radius) ) [title-end subtitle-start] var(--Header-Height) [subtitle-end card-start] var(--Card-Padding-Top) [actions-start] auto [actions-end location-start] auto [location-end content-start] max-content [content-end  meta-start] auto [meta-end] var(--Spacing-Wide) [card-end];--Header-Height: 30px;}
.Event-D1 > .Card:before {grid-area:card; position:relative; top:var(--Card-Vertical-Offset); display:block; content:""; border-radius:var(--Card-Radius) var(--Card-Radius) 0 0; background:var(--Background-Primary);}
.Event-D1 > .Card > [data-field="Title"] {grid-area:title; align-self: end; justify-self: start; display:block; padding:var(--Spacing-Wide) var(--Page-Gutter); font:var(--Title); text-transform:var(--Title-Case); color:var(--Overlay-Primary);}
.Event-D1 > .Card > [data-field="Start Date"] {grid-area:subtitle; align-self: start; justify-self: start; display:block; padding:0 var(--Page-Gutter) 0 var(--Page-Gutter); font:var(--Subtitle); text-transform:var(--Subtitle-Case); color:var(--Overlay-Primary);}
.Event-D1 > .Card > [data-field="Body"] {grid-area:body; display:block; font:var(--Body); color:var(--Surface-Primary);}
.Event-D1 > .Card > [data-collection="Actions"] {grid-area: actions; display:block;}
.Event-D1  > .Card > [data-field="Content"] {grid-area: content; display: block; font: var(--Body); color: var(--Surface-Primary); border-bottom: var(--Divider-Narrow); margin: 0 var(--Page-Gutter);}
.Event-D1 > .Card > [data-field="Location"] {grid-area:location; display:block;}
.Event-D1  > .Card > [data-collection="Actions"] [data-name="Invite"] { display:none; }

.Order-E2 {
  display:grid;
  grid-template-columns:[time-start] 80px [time-end delivery-start id-start variants-start notes-start] auto [delivery-end status-start] 1fr [status-end variants-end notes-end id-end actions-start] 180px [actions-end];
  grid-template-rows:[time-start delivery-start status-start actions-start] auto [delivery-end status-end variants-start] auto [variants-end id-start] 1fr [id-end time-end actions-end notes-start] auto [notes-end];
  grid-gap:0 var(--Spacing-Regular);
}

.Order-E2 > [data-field="_ID"] {
  grid-area:id;
  display:block;
  font:var(--Footnote);
  color:var(--Surface-Secondary);
}
.Order-E2 > [data-field="_ID"] p:before {
  content:"Order #";
}

.Order-E2 > [data-field="Subtotal"] {grid-area:status; display:block; font:var(--Caption); color:var(--Surface-Primary); align-self:right;}
.Order-E2 > [data-field="Subtotal"] p:before {content:"Total: ";}

.Order-E2 > [data-field="Created On"] {grid-area:time; display:block; color:var(--Surface-Primary);}
.Order-E2 > [data-field="Created On"] time {display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start;}
.Order-E2 > [data-field="Created On"] time span {display:none;}
{data-format-h-mm-a}
.Order-E2 > [data-field="Created On"] time [data-subset="Time"]:before {font:var(--Body); content:attr(data-format-h-mm-a);}
.Order-E2 > [data-field="Created On"] time [data-subset="Day"]:before {font:var(--Footnote); color:var(--Surface-Secondary); content:attr(data-format-ddd); margin-right:var(--Spacing-Narrow);}
.Order-E2 > [data-field="Created On"] time [data-subset="Day Of Month"]:before {font:var(--Footnote); color:var(--Surface-Secondary); content:attr(data-format-do);}

.Order-E2 > [data-field="Status"] {
  grid-area:status;
  align-self:center;
  justify-self:start;
  display:inline-block;
  font:var(--Caption);
  color:var(--Surface-Primary);
  background:var(--Background-Secondary);
  padding:1px var(--Spacing-Regular) 2px;
  border-radius:1000px;
}


.Order-E2 > [data-field="Delivery Notes"] {
  grid-area:delivery;
  display:block;
  font:var(--Sub-Subheading);
  color:var(--Surface-Primary);
}

.Order-E2 > [data-field="Items"] { 
  grid-area:variants;
  display:block;
}

.Order-E2 > [data-field="Subtotal"] { display:none; color:var(--Surface-Primary);}
.Order-E2 > [data-field="Subtotal"] p:before { content:"Total: "; }

.Order-E2 > [data-collection="Actions"] {
  grid-area:actions;
  justify-self:start;
  align-self:start;
  display:block;
}
.Order-E2 > [data-collection="Actions"] .Action {max-width:70px;}

.SM.Order-E2 {
  grid-template-columns:[time-start] 80px [time-end actions-start delivery-start id-start variants-start notes-start] auto [delivery-end status-start] 1fr [status-end variants-end id-end actions-end notes-end];
  grid-template-rows:[time-start delivery-start status-start] auto [delivery-end status-end variants-start] auto [variants-end id-start] auto [id-end time-end notes-start] auto [notes-end actions-start] 1fr [actions-end];
  grid-gap:0 var(--Spacing-Regular);
}
.SM.Order-E2 > [data-collection="Actions"] .Action {max-width:auto; width:120px;}

.Order-E2 > [data-collection="Actions"] [data-name="Edit"] { display: none; }
.Order-E2 > [data-collection="Actions"] [data-name="Print Order"] { display: none; }

.Order-E2 > [data-field="Notes"] { 
  grid-area:notes;
  display:block;
  font: var(--Footnote);
}
.Order-E2 > [data-field="Notes"] p:empty { 
  display:none;
}
.Order-E2 > [data-field="Notes"] p:before { 
  content:"Customer Notes: ";
  color: var(--Surface-Secondary);
  font-weight:bold;
}
.Order-E2 > [data-field="Notes"] p {
  text-overflow: ellipsis;
  word-wrap: anywhere;
  overflow: hidden;
  max-height: 80px;
}
.Product-D1 .Card {--Image-Size:200px; display:grid;
grid-template-areas:
". .           .           ."
". picture     picture     ."
". description description ."
". summary     summary     ."
". price       buy         ."
". actions     actions     ."
". content     content     ."
". purchases   purchases   ."
". .           .           ."
;  
  
  min-height:100%; grid-template-columns:var(--Page-Gutter) 8fr auto var(--Page-Gutter); 
    grid-template-rows:var(--Spacing-Wide) auto auto auto auto auto auto minmax(var(--Spacing-Wide), 1fr);}
.Product-D1 .Card:before {grid-area:1 / 1 / -1 / -1; display:block; background:var(--Background-Primary); content:"";}
.Product-D1 .Card > [data-field="Picture"] {--Picture-Aspect-Ratio:1/1; grid-area:picture; display:block; margin:0 0 var(--Spacing-Regular); max-width:300px;}
.Product-D1 .Card > [data-field="Picture"]:empty {display:none;}
.Product-D1 .Card > [data-field="XVariants"] { grid-area:image; display:block;}


.Product-D1 .Card > [data-field="Short Description"] {grid-area:description; display:block; font:var(--Body); color:var(--Surface-Secondary);}
.Product-D1 .Card > [data-field="Price"] {grid-area:price; display:block; align-self:center; font:var(--Sub-Subheading); color:var(--Surface-Primary);}
.Product-D1 .Card > [data-field="Price"] *:before {content:"Price ";}
.Product-D1 .Card > [data-field="Buy"] {grid-area:buy; display:block; align-self:end;}
.Product-D1 .Card > [data-field="Buy"] .Action {width:80px; grid-template-columns:minmax(var(--Action-Left-Padding),1fr) auto auto auto auto minmax(var(--Action-Right-Padding),1fr);}
.Product-D1 .Card > [data-collection="Actions"] {grid-area:actions; display:block; }
.Product-D1 .Card > [data-collection="Actions"] [data-name="Buy"] {display:none;}
.Product-D1 .Card > [data-collection="Actions"] [data-name="Open"] {display:none;}
.Product-D1 .Card > [data-field="Content"] {grid-area:content; display:block; font:var(--Body); color:var(--Surface-Secondary);}
.Product-D1 .Card > [data-field="Your Purchases"] {display:block;grid-area:purchases;}

._UserPurchase-L1 { padding:10px 20px; }
._UserPurchase-L1 > [data-field="Created On"] { display:block; }
._UserPurchase-L1 > [data-field="Product"] { display:block; }
._UserPurchase-L1 > [data-field="Variant"] { display:block; }

.Product-S1 [data-field="Title"] { 
  display:block; 
  font-weight:bold;
}

._UserPurchase-L1 [data-field="User"] { display:block; }
._UserPurchase-L1 ._User-S1 [data-field="Email"] { display:block; }
.Order-Item-S1 {
  display: grid;
  grid-template-columns:[quantity-start] 30px [quantity-end title-start] auto [title-end variant-start] auto [variant-end addons-start] 1fr [addons-end price-start] 80px [price-end];
  grid-template-rows:[quantity-start title-start variant-start price-start addons-start] auto [price-end variant-end title-end quantity-end addons-end];
  grid-gap:var(--Spacing-Regular) var(--Spacing-Regular);
}
.Order-Item-S1 [data-field="Picture"] { display: none; }
.Order-Item-S1 [data-field="Product Title"] { grid-area: title; display: block; font: var(--Caption);}
.Order-Item-S1 [data-field="Variant Title"] { grid-area: variant; display: block; font: var(--Caption);}
.Order-Item-S1 [data-field="Addon Titles"] { grid-area: addons; display: block; font: var(--Caption);}
.Order-Item-S1 [data-field="Status"] { grid-area: status; display: block; font:var(--Footnote); background:var(--Background-Secondary); border-radius:1000px; padding:1px var(--Spacing-Narrow);}
.Order-Item-S1 [data-field="Quantity"] { grid-area: quantity; display: flex; flex-flow:row nowrap; justify-content:space-between; font:var(--Caption); font-weight:bold;}
.Order-Item-S1 [data-field="Quantity"]:after {content:"x"; font-weight:normal;}
.Order-Item-S1 [data-field="Subtotal"] { grid-area: price; display: block; text-align:right; font:var(--Caption);}
.ProductVariant-L1 { display:flex; padding:5px; align-items:center; }
.ProductVariant-L1 > .Operator-Check { order:0; min-width:40px; max-width: 40px; padding:10px; }
.ProductVariant-L1 > [data-field="Title"] { flex:1; order:1; display:block;  }
.ProductVariant-L1 > [data-field="Price"] { flex:1; order:2; max-width:80px; display:block;}
.ProductVariant-L1 > [data-field="Price"] p {text-align: right;}
.ProductVariant-L1 > [data-field="Quantity"] { display:none;}
.Order-D1 { font:var(--Body); }
.Order-D1 .Card > data { margin:var(--Spacing-Narrow) var(--Spacing-Regular); }

#App .Order-D1, #App .Order-D1 *, #App .Order-D1 .Card, #App .Order-D1 .Card > data, #App .Order-D1 .Card > data * , #App .Order-D1 .Card > data p , #App .Order-D1 .Card > data p * {-webkit-touch-callout: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;}

.Order-D1 .Card [data-field="Items"] { display:block; }
.Order-D1 .Card [data-field="Status"] { display:block; }
.Order-D1 .Card [data-field="Status"] p:before { content:"Status: "; color:#888; }
.Order-D1 .Card [data-collection="Actions"] { display:block; }
.Order-D1 .Card [data-collection="Actions"] [data-name="Problem"] { display:none; }
.Order-D1 .Card [data-collection="Actions"] [data-name="Edit"] { display: none; }

.Order-D1 .Card > [data-field="_ID"] { display:block; }
.Order-D1 .Card > [data-field="_ID"] p:before { content:"Order #"; }
.Order-D1 .Card > [data-field="Created On"] { display:block;  }
.Order-D1 .Card > [data-field="Delivery Notes"] { display:block; color:#888; order:5;}
.Order-D1 .Card > [data-field="Delivery Notes"] p:before { content:"For: "; color:#333; }
.Order-D1 .Card > [data-field="Subtotal"] { display:block; color:#888; order:9; }
.Order-D1 .Card > [data-field="Subtotal"] p:before { content:"Total: "; color:#888; }


.Order-D1 .Card > [data-field="Refund Request Details"] { display:block; color:#888; }
.Order-D1 .Card > [data-field="Refund Request Details"] p:before { content:"Refund Request Details: "; color:#888; }
.Order-D1 .Card > [data-field="Refund Request Details"] p:empty { display:none; }

.Order-D1 .Card > [data-field="Shop Cancel Details"] { display:block; color:#888; }
.Order-D1 .Card > [data-field="Shop Cancel Details"] p:before { content:"Order Cancellation Details: "; color:#888; }
.Order-D1 .Card > [data-field="Shop Cancel Details"] p:empty { display:none; }
.Order-L1 { display: flex; }
.Order-L1 > [data-field="_ID"] { display: block; order: 1; font:var(--Byline); flex: 1; }
.Order-L1 > [data-field="_ID"]:before { content:'Order #'; color:#888; }
.Order-L1 > [data-field="Created On"] { display: block; order: 3; font:var(--Byline); margin:5px; }
.Order-L1 > [data-field="Status"] { display: block; order: 4; font:var(--Byline); margin:5px; background:#666; color: #fff; padding:5px; min-width:80px; text-align:center; }
.Product-Variant-E1 > * { display:block; }
/*
@Name: Location Extended 1
@Summary:...
*/
.Location-E1 {display:grid; grid-template-rows:[title-start] auto [title-end address-start] auto [address-end content-start] auto [content-end]; grid-template-columns:[title-start content-start address-start] auto [title-end content-end address-end];}
.Location-E1 > [data-field="Title"] {grid-area: title; display:block; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary);}
.Location-E1 > [data-field="Address"] {grid-area: address; display:block; font: var(--Body); color: var(--Surface-Primary);}
.Location-E1 > [data-field="Content"] {grid-area: content; display:block; font: var(--Body); color: var(--Surface-Primary); background:#FEE; outline:1px dotted red;}
.Location-E1 > [data-field="Content"] img { max-width:380px; }

/* --- --- */
.Order-E1 {
	display:grid;
	grid-template-areas:
    "shop        shop       "
    "ticket      status     "
	"deliver     time       "
    "order-items order-items"
	"id          total      "
    "actions     actions    ";
	border-bottom:var(--Divider-Narrow);
}

/* --- Order ID --- */
.Order-E1 > [data-field="_ID"] {
	grid-area:id;
	display:block;
	font:var(--Caption);
	color:var(--Surface-Secondary);
}
.Order-E1 > [data-field="_ID"] p:before {
	content:"Order ID: ";
	font-weight:bold;
}

/* --- Ticket Number --- */
.Order-E1 > [data-field="Ticket"] {
  grid-area:ticket;
  display:block;
  font:var(--Subheading);
  color:var(--Surface-Primary);
  font-weight:normal;
}
.Order-E1 > [data-field="Ticket"] p:before {
	content:"Order: ";
}
.Order-E1 > [data-field="Ticket"] p:empty {
	display:none;
}

/* --- Time --- */
/* TODO: Add last updated status time + add mins ago */
.Order-E1 > [data-field="Created On"] {
	grid-area:time;
	display:block;
	font:var(--Caption);
	text-align:right;
	color:var(--Surface-Secondary);
}

/* --- Shop --- */
.Order-E1 > [data-field="Shop"] {
	grid-area:shop;
	display:block;
}

/* --- Status --- */
.Order-E1 > [data-field="Status"] {
	grid-area:status;
  	display:inline-block;
	align-self:start;
	justify-self:end;
	color:var(--Overlay-Primary);
	font:var(--Caption);
	text-transform:capitalize;
	background:var(--Status-Color);
	border-radius:4px;
	min-width:90px;
	padding:0 var(--Spacing-Narrow);
	text-align:center;
	line-height:18px;
}

/* === STATUS COLORS - Move To Theme === */
:root {
--Status-Red:rgb(208,53,19);
--Status-Orange:rgb(233,113,12);
--Status-Yellow:rgb(240,173,2);
--Status-Green:rgb(44,160,11);
--Status-Turquoise:rgb(37,196,184);
--Status-Blue:rgb(27,141,195);
--Status-Purple:rgb(160,11,136);
--Status-Gray:rgb(175,175,175);
}
/* === STATUS States - Move To CSS === */
[data-values-status="placed"] {
  --Status-Color:var(--Status-Blue);
}
[data-values-status="confirmed"] {
  --Status-Color:var(--Status-Orange);
}
[data-values-status="cancelled"] {
  --Status-Color:var(--Status-Red);
}
[data-values-status="collected"] {
  --Status-Color:var(--Status-Green);
}
[data-values-status="delivered"] {
  --Status-Color:var(--Status-Green);
}

/* --- Deliver To --- */
.Order-E1 > [data-field="Delivery Notes"] {
	grid-area:deliver;
  	display:block;
	font:var(--Body);
	color:var(--Surface-Primary);
}
.Order-E1 > [data-field="Delivery Notes"] p:before { content:"Deliver to: ";}


/* --- Order Items --- */
.Order-E1 > [data-field="Items"] {
	grid-area:order-items;
	display:block;
}

/* --- Total --- */
.Order-E1 > [data-field="Subtotal"] {
	grid-area:total;
	align-self:end;
	display:block;
	font:var(--Body);
	font-weight:bold;
	color:var(--Surface-Primary);
	text-align:right;
}
.Order-E1 > [data-field="Subtotal"] p:before { content:"Total: ";}

/* --- Actions --- */
.Order-E1 > [data-collection="Actions"] {
	grid-area:actions;
	display:block; 
}
/*
@Name: Location List 2
@Summary:...
*/
.Location-L2 {display:grid; grid-template-columns:[title-start address-start] auto [title-end address-end]; grid-template-rows:[title-start] auto [title-end address-start] auto [address-end];}
.Location-L2 > [data-field="Title"] {grid-area: title; display:block; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary);}
.Location-L2 > [data-field="Address"] {grid-area: address; display:block; font: var(--Body); color: var(--Surface-Primary);}


/*
@Name: Article Listing 1
@Summary: Image on left, title, subtitle and summary on right.
*/
.Article-L1 {--Focus-Radius: 5px; --Focus-Highlight-Width: 1px; --Focus-Shade-Width: 5px; --Focus-Margin: -4px; display:grid; grid-template-columns: [focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 3fr [summary-end subtitle-end title-end focus-end]; grid-template-rows: [focus-start picture-start title-start] auto [title-end subtitle-start] auto [subtitle-end summary-start] 1fr [summary-end picture-end focus-end]; border-bottom: var(--Divider-Narrow); grid-gap: var(--Spacing-Narrow) var(--Spacing-Wide); border-bottom: var(--Divider-Narrow); align-items: flex-start;}
.Article-L1 > [data-field="Title"] {grid-area: title; display:block; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary);}
.Article-L1 > [data-field="Subtitle"] {grid-area: subtitle; display:block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary);}
.Article-L1 > [data-field="Picture"] {grid-area: picture; align-self: flex-start; display:block;}
.Article-L1 > [data-field="Summary"] {grid-area: summary; display:block; font: var(--Body); color: var(--Surface-Primary);}
.Article-L1 > [data-field="Summary"] p:last-child {padding-bottom: 0;}


/* XL */
.XL.Article-L1 {grid-template-columns:[focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 5fr [summary-end subtitle-end title-end focus-end];}

/* LG */
.LG.Article-L1 {grid-template-columns:[focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 4fr [summary-end subtitle-end title-end focus-end];}

/* MD */
.MD.Article-L1 {grid-gap: var(--Spacing-Narrow) var(--Spacing-Regular);}
.MD.Article-L1 > [data-field="Summary"] {font: var(--Body);}

/* SM */
.SM.Article-L1 {--Picture-Aspect-Ratio:16/9; grid-template-columns:[focus-start picture-start title-start subtitle-start summary-start] 1fr [summary-end subtitle-end title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] auto [title-end subtitle-start] auto [subtitle-end focus-end];}
.SM.Article-L1 > [data-field="Title"] {font: var(--Sub-Subheading);}
.SM.Article-L1 > [data-field="Summary"] {display: none;}

/* XS */
.XS.Article-L1 {--Picture-Aspect-Ratio:16/9; grid-template-columns:[focus-start picture-start title-start subtitle-start summary-start] 1fr [summary-end subtitle-end title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] auto [title-end subtitle-start] auto [subtitle-end focus-end];}
.XS.Article-L1 > [data-field="Title"] {font: var(--Sub-Subheading); text-transform: var(--Sub-Subheading-Case);}
.XS.Article-L1 > [data-field="Subtitle"] {display: none;}
.XS.Article-L1 > [data-field="Summary"] {display: none;}
/*
@Name: Article Detail 1
@Summary: Cover picture at top with Title and Subtitle overlayed on the cover. Rest of content below in a card.
*/
.Article-D1 > .Card {display:grid; grid-template-columns:[card-start title-start subtitle-start actions-start content-start] 1fr [content-end actions-end subtitle-end title-end card-end]; grid-template-rows: [title-start] calc( var(--Cover-Height) - var(--Header-Height) - var(--Header-Height) - var(--Card-Radius) ) [title-end subtitle-start] var(--Header-Height) [subtitle-end card-start] var(--Card-Padding-Top) [actions-start] auto [actions-end content-start] max-content [content-end meta-start] auto [meta-end] var(--Spacing-Wide) [card-end];}
.Article-D1 > .Card:before {grid-area:card; position:relative; top:var(--Card-Vertical-Offset); display:block; content:""; border-radius:var(--Card-Radius) var(--Card-Radius) 0 0; background:var(--Background-Primary);}
.Article-D1 > .Card > [data-field="Title"] {grid-area:title; align-self: end; justify-self: start; display:block; padding:var(--Spacing-Wide) calc( var(--Page-Gutter) + var(--Inset-Right) ) var(--Spacing-Wide) calc( var(--Page-Gutter) + var(--Inset-Left) ); font:var(--Title); text-transform:var(--Title-Case); color:var(--Overlay-Primary);}
.Article-D1 > .Card > [data-field="Subtitle"] {grid-area:subtitle; align-self: start; justify-self: start; display:block; padding:0 calc( var(--Page-Gutter) + var(--Inset-Right) ) var(--Spacing-Wide) calc( var(--Page-Gutter) + var(--Inset-Left) ); font:var(--Subtitle); text-transform:var(--Subtitle-Case); color:var(--Overlay-Primary);}
.Article-D1 > .Card > [data-field="Body"] {grid-area:body; display:block; font:var(--Body); color:var(--Surface-Primary);}

/* Actions */
.Article-D1 > .Card > [data-collection="Actions"] {grid-area: actions;}

/* Meta */
.Article-D1 > .Card > [data-field="Meta"] {grid-area: meta; padding: 0 var(--Page-Gutter);}
.Article-D1  > .Card >[data-field="Meta"] [data-field="Duration"] {display: inline-block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary);}
.Article-D1 > .Card > [data-field="Meta"] [data-field="Updated"] {display: inline-block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary); padding-right: var(--Spacing-Regular);}

/* Content */
.Article-D1  > .Card > [data-field="Content"] {grid-area: content; display: block; font: var(--Body); color: var(--Surface-Primary); border-bottom: var(--Divider-Narrow); padding:0 calc( var(--Page-Gutter) + var(--Inset-Right) ) var(--Spacing-Wide) calc( var(--Page-Gutter) + var(--Inset-Left) );}

.Article-D1  > .Card > [data-field="Content"] p a {text-decoration:underline; color:var(--Active-Primary);}
.Article-D1  > .Card > [data-field="Content"] p strong {font-weight:bold;}
.Article-D1  > .Card > [data-field="Content"] p em {font-style:italic;}
.Article-D1  > .Card > [data-field="Content"] .Group-Type-Grid {max-width: var(--Max-Content-Width, none); margin:0 auto;}
.Event-Attendee-E7 { 
  display: grid;
  grid-template-columns: auto 1fr 100px;
  grid-template-rows: auto auto auto;
  border-bottom:var(--Divider-Narrow);
  font: var(--Body);
}
.Event-Attendee-E7 {
  grid-template-areas:
  "check event status"; 
}
.Event-Attendee-E7 > .Operator-Check { grid-area: check; width:40px; padding:6px; }
/*.Event-Attendee-E7 > [data-field="Created On"] { display:block; grid-area: date; font-size:smaller; color:#aaa; } */
.Event-Attendee-E7 > [data-field="Created On"]:before { content:"Requested: " }
.Event-Attendee-E7 > [data-field="Status"] { display:block; grid-area: status; text-align:center; }
.Event-Attendee-E7 > [data-field="Status"] p { padding:5px; background:#666; color:#fff; display:inline-block; font: var(--Caption); }
.Event-Attendee-E7[data-values-status] > [data-field="Status"] p  {border-radius:5px;}
.Event-Attendee-E7[data-values-status="accepted"] > [data-field="Status"] p { background:#51c151; }
.Event-Attendee-E7[data-values-status="waitlisted"] > [data-field="Status"] p { background:#aaa; }
.Event-Attendee-E7[data-values-status="requested"] > [data-field="Status"] p { background:#6868d5; }

.Event-Attendee-E7 > [data-field="Event"] { display:block; grid-area: event; }