:root {

	--themehue: 0;
	--themesat: 87%;

	--themedark: hsl(var(--themehue), var(--themesat), 35%);
	--themelight: hsl(var(--themehue), var(--themesat), 50%);
	--themeaccent: hsl(var(--themehue), var(--themesat), 76%);
	--themehighlight: hsl(var(--themehue), var(--themesat), 85%);

	--lastViewedBorderTopColor: var(--themedark);
	--lastViewedBorderBottomColor: var(--themelight);
	--lastViewedBackgroundColor: var(--themehighlight);
	--lastViewedBackgroundColorOdd: var(--themeaccent);
	--lastViewedBorderBottom: solid 1px var(--themedark);
	--lastViewedBorderTop: solid 1px var(--themelight);

	--summaryLineBackground: transparent;
	--summaryLineBackgroundOdd: rgba(0,0,0,.15);
	--summaryLineHover: rgba(255,255,255,.1);
	
}


* {
	scrollbar-color: var(--themedark) var(--themeaccent);
}

#header,
#collageEditor .header {
	background-color: var(--themelight);
	border-bottom-color: var(--themedark);
}

div.dropMenuButton.as_button:hover,
div.dropMenuButton.as_button.showing {
	background-color: var(--themelight);
}

div.dropMenuItem:hover {
	background-color: var(--themelight);
	color: white;
}

#exifData {
	background-color: hsla(var(--themehue), var(--themesat), 76%, 0.85);
	color: var(--textcolor);
}

div.tagContainer span.tag,
div.tagContainer.meta span.tag {
	color: white;
}

div.tagContainer span.tag:hover,
div.tagContainer.meta span.tag:hover {
	background-color: var(--themeaccent);
	border-color: black;
	color: black;
}

.thumbNail.selected div.body {
	background-color: var(--themeaccent);
}

.thumbNail.imagePackages .body {
	background-color: var(--themeaccent);
}

#clubPhotoListSummaryContainer,
#clubPhotoOrderSummaryContainer {
	--summaryLineBackground: hsla(197, 32%, 47%, 0.452);
	--summaryLineBackgroundOdd: hsla(197, 28%, 36%, 0.452);
	--summaryLineBorder: hsl(197, 38%, 46%);
	--summaryLineBorderOdd: hsl(196, 43%, 33%);
	--summaryLineHover: hsla(34, 86%, 67%, 0.377);
}

#orderSummaryContainer div.summaryLine.paid:hover,
#orderSummaryContainer div.summaryLine.paid {
	--summaryLineBackground: hsla(118, 44%, 57%, 0.175);
	--summaryLineBackgroundOdd: hsla(118, 44%, 57%, 0.125);
	--summaryLineBorder: hsla(118, 44%, 57%, 0.5);
	--summaryLineBorderOdd: var(--summaryLineBorder);
	--summaryLineHover: hsl(118deg 94.98% 71.58% / 30%);
}

#orderSummaryContainer div.summaryLine.unpaid,
#orderSummaryContainer div.summaryLine.unpaid:hover,
div.paymentSummaryContainer div.summaryLine.unpaid {
	--summaryLineBackground: hsla(210 44% 52% / 0.175 );
	--summaryLineBackgroundOdd: hsla(210 44% 52% / 0.125 );
	--summaryLineBorder: hsla(210 44% 52% / 0.5 );;
	--summaryLineBorderOdd: var(--summaryLineBorder);
	--summaryLineHover: var(--summaryLineBackground);
}

 div.requestPaymentSummaryLine.unpaid div.rowheader,
 div.paymentSummaryLegend div.legend {
  --summaryLineBackground: hsla(210 44% 52% / 50% );
  --summaryLineBackgroundOdd: hsla(210 44% 35% / 12.5% );
  --summaryLineBorder: hsla(210 44% 35% / 12.5% );
	--summaryLineBorderOdd: var(--summaryLineBorder);
  --summaryLineHover: var(--summaryLineBackground);
 }

 div.orderSummary-orderline.cancelled,
 div.orderSummary-orderline.cancelled:hover,
 div.requestPaymentSummaryLine.cancelled div.rowheader {
  --summaryLineBackground: hsla(1 41% 61% / 0.125);
  --summaryLineBackgroundOdd: hsla(1 41% 61% / 0.0625);
  --summaryLineBorder: hsla(1 41% 61% / 0.5);
  --summaryLineBorderOdd: hsla(1 41% 61% / 0.25);
  --summaryLineHover: hsl(1deg 100% 79.08% / 41%);
 }

div.orderSummaryLegend div.legend,
div.paymentSummaryLegend div.legend {
   color: white;
   background: none;
   background-color: var(--summaryLineBackground);
   border-bottom: solid 1px var(--summaryLineBorder);
}

div.orderSummaryLegend div.legend.unpaid,
div.paymentSummaryLegend div.legend.unpaid {
  --summaryLineBackground: hsla(210 44% 52% );
}

div.orderSummaryLegend div.legend.paid,
div.paymentSummaryLegend div.legend.paid {
	--summaryLineBackground: hsl(118, 44%, 57%);
}

div.orderSummaryLegend div.legend.cancelled,
div.paymentSummaryLegend div.legend.cancelled {
  --summaryLineBackground: hsl(1 41% 61%);	
}


.--staffvisible,
.staffVisible {
	display: block;
}

i.fa.--staffvisible.--inline,
.--staffvisible.--inline,
i.fa.staffVisible-inline,
.staffVisible-inline {
	display: inline;
}

i.fa.--staffvisible.--inlineblock,
.--staffvisible.--inlineblock,
i.fa.staffVisible.inlineblock,
.staffVisible.inlineblock {
	display: inline-block;
}

/* HIDE CONTROLS FOR CHANGING ASPECT RATIO, COLOR AND BORDER WIDTH ON FIXED IMAGES*/
div.image.editable.fixed i.fa.staffVisible-inline.aspectratio,
div.image.editable.fixed i.fa.staffVisible-inline.color,
div.image.editable.fixed i.fa.staffVisible-inline.borderwidth {
	display: none;
}

div.collagePreview div.draggable div.tools.vertical {
	display: block;
}

div.collagePreview div.draggable i.fa.staffVisible.inline {
	display: inline;
}

div.collagePreview div.draggable i.fa.staffVisible.inlineblock {
	display: inline-block;
}

/* SHOW TOOLS WHEN HOVERING OVER ELEMENT IN COLLAGE WITH ASSIGNED IMAGE WHICH IS EDITABLE AND DRAGGABLE */
#collageEditor div.image.editable.draggable:hover div.tools.vertical {
	display: block;
}

#collageEditor div.image:hover i.alignapply,
#collageEditor div.image:hover i.distributeapply {
	display: none;
}

#collageEditor div.collagePreview.alignelement div.image:hover i.alignapply,
#collageEditor div.collagePreview.distributeelement div.image:hover i.distributeapply {
	display: inline-block;
}