/* dont import. I don't think versionify will work here. */
/* @import url('/css/loading-animation.css'); */
/* uniform colors in charts and tables, hopefully? */
/* redo this jeff. its wrong. */
:root {
  --indicator-architect:              #2196f3; /* blue */
  --indicator-engineer:               #963c1b; /* rusty */
  --indicator-contractor:             #404040; /* grey */
  --indicator-landscape-architect:    #1abc9c; /* light green */
  --indicator-product-specifier:      #aa3309; /* brown */
  --indicator-specifier:              #aa3309; /* brown */
  --indicator-facility-manager-owner: #ff5722; /* orange */
  --indicator-interior-designer:      #6E62AA; /* violet */

  --indicator-view-only:        #3a5a40; /* green */
  --indicator-viewed:           #3a5a40; /* green */
  --indicator-untested:         #9dc3c2; /* light-blue-grey */
  --indicator-no-attempt:       #9dc3c2; /* light-blue-grey */
  --indicator-waitlisted:       #9dc3c2; /* light-blue-grey */
  --indicator-failed:           #a3b18a; /* light-light-green */
  --indicator-passed:           #4d7298; /* blue-grey */
  --indicator-did-not-attend:   #4d7298; /* blue-grey */
  --indicator-inactive:         #4d7298; /* blue-grey */
  --indicator-attended:         #3a5a40; /* green */
  --indicator-active:           #3a5a40; /* green */
  --indicator-generic:          #444444; /* grey */
  --indicator-incomplete:       #dad7cd; /* barely-green-at-all */
  --indicator-not-shared:       #dcdcdc; /* lightest grey. need font color adjustment */


  --font-family-archivo:        'Archivo Narrow', Arial, sans-serif;
  --font-family-poppins:        'Poppins', sans-serif;
}
:root .architect              { background-color: var(--indicator-architect) }
:root .engineer               { background-color: var(--indicator-engineer) }
:root .contractor             { background-color: var(--indicator-contractor) }
:root .landscape-architect    { background-color: var(--indicator-landscape-architect) }
:root .product-specifier      { background-color: var(--indicator-product-specifier) }
:root .specifier              { background-color: var(--indicator-specifier) }
:root .facility-manager-owner { background-color: var(--indicator-facility-manager-owner) }
:root .interior-designer      { background-color: var(--indicator-interior-designer) }

/* somethings have two names */
:root .viewed,
:root .view-only        { background-color: var(--indicator-view-only) }

:root .untested,
:root .no-attempt       { background-color: var(--indicator-no-attempt) }

:root .passed,
:root .help             { background-color: var(--indicator-passed); color: #fff;}

:root .failed           { background-color: var(--indicator-failed) }
:root .incomplete       { background-color: var(--indicator-incomplete) }
:root .not-shared       { background-color: var(--indicator-not-shared); color: #333;}
:root .attended         { background-color: var(--indicator-attended) }
:root .did-not-attend   { background-color: var(--indicator-view-only) }
:root .waitlisted       { background-color: var(--indicator-waitlisted) }
:root .generic          { background-color: var(--indicator-generic) }
:root .active           { background-color: var(--indicator-view-only) }
:root .inactive         { background-color: var(--indicator-passed) }

.status-pill,
.little-button {
    border: 1px solid transparent;
    border-radius: 2px;
    text-transform: uppercase;
    background-color: #dcdcdc;
    color: #fff;
    font-size:11px;
    padding: 3px;
    white-space: nowrap;
    cursor: default;
}
.little-button:hover {
    text-decoration: none !important;
}
.list-horizontal,
.list-vertical {
    margin: 10px 0;
    padding: 0 0 0 0;
}
.list-horizontal li {
    display: inline-block;
    vertical-align: middle;
    list-style-type: none;
    font-size: 15px;
    margin: 3px 0; /* line seperation when horizontal list wraps */
}
.list-vertical li {
    display: block;
    list-style-type: none;
    font-size: 15px;
    margin: 10px 0;
    line-height: 20px;
}
#report-help {
    max-height:75%;
    overflow-y: inherit;
    overflow-x: hidden;
}
canvas.chart-canvas {
    max-height:35px;
    max-width:35px;
    z-index: 1 !important;
    position: relative;
}
canvas.large-chart-canvas {
    max-height:300px;
    z-index: 1 !important;
    position: relative;
}
/* custom tooltip styling here */
/* see landing page doughnuts. */
#chartjs-tooltip {
    z-index: 9999 !important;
    background-color: rgba(0, 0, 0, 0.75);
    padding: 5px;
    border-radius: 5px;
    transition: all .5s;
}
/* The label for tooltip data */
#chartjs-tooltip th {
    padding: 5px;
    font-family: var(--font-family-archivo);
    color:#fff;
}
/* the color coded span around the value */
#chartjs-tooltip span {
    padding:3px 6px;
    border-radius: 2px;
    font-family: 'Oswald';
    font-size:15px;
    color:#fff;
}
/* new container style */
.flex-container {
  display: flex;
  justify-content: space-between;
}
/* everything within container */
.flex-container > * {
  flex: 1;
}
.flex-container:not(:first-of-type) {
  margin-top: 10px;
}
.box {
  flex-grow: 1;
  padding: 5px;
  border: 1px dashed #333;
  margin: 0 10px;
}
.box:first-of-type {
  margin-left: 0; /* remove left padding on first box */
}
.box:last-of-type {
  margin-right: 0; /* remove right padding on last box */
}
.flex-container:first-of-type .box:first-of-type {
  margin-left: 0;
}
.flex-container:last-of-type .box:last-of-type {
  margin-right: 0;
}
.flex-container:last-of-type {
  margin: 10px 0;
}
#online-chart,
#live-chart {
  max-width:50%;
  max-height:250px;
}
/* .summary-link {
  text-decoration: none !important;
} */
small {
  font-size: .65em;
  color: #777;

}
small.slightly-bigger {
  font-size: 0.8rem;
}
/* override modal css for close button */
.modal a.close-modal {
  top: 5px !important;
  right:5px !important;
}
/* back to top button styling */
.scroll-to-top {
  display: none;
  position: fixed;
  bottom: 130px;
  right: 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 50%;
  padding: 10px 15px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.scroll-to-top a {
  text-decoration: none;
  color: #fff;
}
/* /marketing/artwork "gallery" */
.gallery-container {
	display: grid;
	height: 100%;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	padding: 10px;
  margin: 20px 0;
}
.gallery-container > .box {
  margin: 0;
  padding: 5px;
  border: 1px solid #dcdcdc;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.gallery-container > .box p {
  margin: 7px 0;
}
.gallery-container > .box p:last-child {
    margin-top: auto;
}