/*----------------------
		variables
----------------------*/

:root {

	/* https://colorkit.co/color-palette-generator/B24A1D-f86b23-D9641A-FF9F1C-121212-2A2A2A-3A3A3A-1E242C-F4F1EC-E6E3DE/ */
	--dark-orange: #D9641A;
	--tiger-orange: #f86b23;
	--rust: #AB3D24;
	--amber: #FF9F1C;

	--charcoal:#121212;
	--graphite: #2A2A2A;
	--dark-grey: #3A3A3A;
	--midnight: #1E242C;

	--purple: #505A8F;
	--teal: #4BC0C0;

	--almond: #E6E3DE;
	--cream: #F4F1EC;

  --primary-font-family: "Helvetica Neue", Inter, Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--chart-colors: var(--dark-orange),var(--tiger-orange),var(--rust),var(--amber),color-mix(in srgb,var(--dark-orange) 80%, black),color-mix(in srgb,var(--tiger-orange) 80%, black)color-mix(in srgb,var(--rust) 80%, black)color-mix(in srgb,var(--amber) 80%, black),color-mix(in srgb,var(--dark-orange) 80%, white)color-mix(in srgb,var(--tiger-orange) 80%, white)color-mix(in srgb,var(--rust) 80%, white)color-mix(in srgb,var(--amber) 80%, white);
}

/*----------------------
		themes
----------------------*/

.theme-dark {
  background-color: var(--charcoal);
  color: var(--cream);
	.secondary-content{
  	background-color: var(--graphite);
  	color: var(--almond);
	}
	.flex-item {
		background-color: color-mix(in srgb, var(--graphite) 65%, black);
	}
	.tertiary-content{
  	background-color: var(--cream);
  	color: var(--midnight);
	}
	.highlight {
		color: var(--tiger-orange);
	}
	.lowlight {
		color:  color-mix(in srgb, var(--almond) 65%, black);
	}
	.highlight-container {
  	color: var(--charcoal);
		background-color: var(--tiger-orange);
	}
	.highlight-fade{
		background: linear-gradient(90deg, var(--tiger-orange), var(--amber));
	}
	.lowlight-fade{
		background: linear-gradient(90deg, var(--graphite), var(--dark-grey));
	}
	.light-only{
		display:none;
	}
}

.theme-light {
  background-color: var(--cream);
  color: var(--midnight);
	.highlight-fade{
		background-color: linear-gradient(90deg, var(--rust), var(--dark-orange));
	}
	.main-logo{
		content:url("images/tiger_logo_black.png");
	}
	.dark-only{
		display:none;
	}
}

/*----------------------
				tags
----------------------*/

html {
  height: 100%;
}

body {
  font-size: 14px;
	height: 100dvh;
  font-family: var(--primary-font-family);
  margin: 0;
  padding: 0;
}
a:link,a:active,a:visited,a:hover {
  color: inherit;
  margin: 0 !important;
  text-decoration: none;
}

/*----------------------
			classes
----------------------*/

.sidebar {
	overflow-y: auto;
	transition: transform 0.2s ease;
	/* transition: width 0.2s ease; */
	transition: max-width 0.2s ease;
	white-space: nowrap;
}
.large-only, .med-only, .small-only, .not-small {
    display: none;
    visibility: hidden;
}
.rounded-small {
  border-radius: 8px;
}
.rounded-med {
  border-radius: 14px;
}
.rounded-large {
  border-radius: 22px;
}
.clickable{
  cursor: pointer;
}
.sub, .sup { 
	font-size: .83em;
}
.sub {
	vertical-align: sub;
}
.sup {
	vertical-align: super;
}
.footer {
	position:fixed;
	bottom:0;
	text-align:center;
  align-items: center;
}
.circle-text {
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  text-align: center;
  display: flex;
}
.region {
	gap: 1em;
	margin: 1em;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}
.table {
	border-collapse: collapse;
	width:100%;
	font-size: clamp(10px, 3vw, 16px);
	text-align:left;
}
.table thead th {
  padding: 15px;
}
.table tbody td {
  padding: 5px 15px;
}

.pagination {
	display:grid;
	grid-template-columns: auto 1fr auto;
	padding:0.5em;
	text-align:center;
	background-color: color-mix(in srgb, currentColor 20%, black);
	box-shadow: 0 0 2px black;

	> div:first-child, > div:last-child {
		margin:auto 1em;
	}

	> div:nth-child(2) {
		overflow-x:auto;
		white-space:nowrap;
	}
}

.display-table {
    display: table; 
}
.display-table > div { 
    display: table-row; 
}
.display-table > div > div { 
    display: table-cell;
    padding: 5px;
}

.error {
	box-shadow: 0 0 10px var(--tiger-orange);
}
.header{
	text-align:center;
	width:100%;
	font-weight: 600;
	font-size: clamp(1.1em, 2vw, 2em);
}
.button {
  font-size:1.2em;
  margin:0.5em;
  display: inline-block;
  min-width:70px;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  padding:0.2em 0.7em;
}
.form-field input, .form-field textarea, .form-field select{
  width:100%;
  margin-bottom:1em;
  display: block;
  padding:1em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  font-family: inherit;
  min-width:15em;
}
/*----------------------
				ids
----------------------*/
#search_results_banner{
  border: 1px solid #aaa;
  display:none; /* can't use visibility because it conflicts with @media that hides content via visibility:hidden, could have used !important maybe? */
  position: absolute;
	right: 0;
  z-index: 1;
  padding:1em;
  margin:1em;
}
@media (max-width: 640px) { /* small only */
	#right {
	margin-bottom:calc(50px);
	}
}
/*----------------------
			flex layouts
----------------------*/

.full-width-flex {
/*
	width: 100vw;
*/
	width: 100%;
	display: flex; 
	flex-flow: row; 
}
.full-height-flex {
	height: 100dvh;
	display: flex; 
	flex-flow: column; 
}
.flex-item {
  flex: 1 1 0px;
	max-width: 100%;
}
.flex-item-50{
	min-width: 100px; 
	min-height: 180px; 
}
.flex-item-100{
	min-width: 40%;
	min-height: 380px;
}

/*----------------------
			grid layouts
----------------------*/

.sidebar-main-grid {
	width:100%;
	display: grid; 
	grid-template-columns: min-content minmax(min-content, 1fr);
}

/*----------------------
				modals
----------------------*/

.modal {
  display: none;
  position: fixed;
  z-index: 100;
  padding-top: 1.5em;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
  max-width:calc(100% - 80px);
  max-height:calc(100vh - 5em);
  position: relative;
  overflow-y:auto;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  /*   border: 1px solid #888; */
  width: 300px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}
.modal-slide-content {
  height: 100%;
  position: fixed;
  z-index: 200;
  top: 0;
  right: 0;
  overflow:auto;
  animation-name: animateside;
  animation-duration: 0.4s;
}
/*----------------------
			animations
----------------------*/

@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
@-webkit-keyframes animateside {
    from {right:-300px; opacity:0}
    to {right:0; opacity:1}
}

@keyframes animateside {
    from {right:-300px; opacity:0}
    to {right:0; opacity:1}
}


/*----------------------
		media queries
----------------------*/

@media (max-width: 640px) { /* small only */
	.full-width-grid {
		grid-template-columns: min-content auto;
	}
	.sidebar {
		max-width: 0px;
	}
	.sidebar.active {
		max-width: 100vw;
	}
	.right.inactive {
		width: 0px;
	}
  .small-only {
    display: revert;
    visibility: visible;
  }
  .flex-item-100 {
    flex-basis: 100%;
		min-height: initial;
  }
  .flex-item-50 {
    flex-basis: calc(50% - 50px);
  }
}

@media (640px < width <= 1200px) { /* med only */
	.sidebar {
		max-width:60px;
		overflow-x: hidden;
	}
	.sidebar.active {
		/* https://css-tricks.com/using-css-transitions-auto-dimensions/ */
		width: auto;
		max-width: 500px;
		.expand{
    	display: none;
    	visibility: hidden;
		}
	}
  .med-only {
    display: revert;
    visibility: visible;
	}
}
@media ( width > 1200px) { /* large only */
  .large-only {
    display: revert;
    visibility: visible;
	}
}
@media (width > 640px) { /* not small */
  .not-small {
    display: revert;
    visibility: visible;
	}
}