@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300&display=swap");
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* class applies to select element itself, not a wrapper element */
select {
  display: block;
  font-size: 16px;
  padding: 0.6em 1.4em 0.5em 0.8em;
  width: 100%;
  max-width: 100%;
  /* useful when width is set to anything other than 100% */
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #aaa;
  border-radius: 3px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #dfe3e3;
  /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient.
    for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference

  */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
  background-repeat: no-repeat, repeat;
  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
  background-position: right 0.7em top 50%, 0 0;
  /* icon size, then gradient */
  background-size: 0.65em auto, 100%;
}

/* Hide arrow icon in IE browsers */
select::-ms-expand {
  display: none;
}

/* Hover style */
select:hover {
  border-color: #888;
}

/* Focus style */
select:focus {
  border-color: #aaa;
  /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
  color: #222;
  outline: none;
}

/* Set options to normal weight */
select option {
  font-weight: normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir=rtl] select, :root:lang(ar) select, :root:lang(iw) select {
  background-position: left 0.7em top 50%, 0 0;
  padding: 0.6em 0.8em 0.5em 1.4em;
}

/* Disabled styles */
select:disabled, select[aria-disabled=true] {
  color: graytext;
}

select:disabled:hover, select[aria-disabled=true] {
  border-color: #aaa;
}

body.dark-theme select {
  background-color: #dfe3e3;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #dfe3e3 0%, #dfe3e3 100%);
}

html {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
}

body {
  color: #586161;
  background-color: #cfd5d5;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: auto;
  line-height: 1.15em;
}
body p:not(:last-child) {
  margin-bottom: 1em;
}
body a {
  color: #85408f;
}
body a:hover {
  cursor: pointer;
}
body a.button {
  background: transparent;
  border: 1px solid #cfd5d5;
  color: #586161;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
}
body a.button:hover {
  background-color: #b4baba;
  border-color: transparent;
}

header nav {
  height: 4em;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 0.5em 1em;
  margin: 0 1rem 1rem 1rem;
}
header nav .nav-description {
  font-size: 0.8em;
}
header nav a {
  color: inherit;
  text-decoration: none;
  padding: 0 0.75em;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
header nav a:hover {
  background-color: initial;
  text-decoration: none !important;
}

main {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
}

section {
  padding: 2em 1em;
  background-color: whitesmoke;
  border-radius: 1em;
  margin-bottom: 2em;
  overflow-x: auto;
}

nav {
  padding: 1em;
  font-size: 16px;
}
nav ul {
  padding: 0;
  list-style: none;
}
nav ul li {
  margin-bottom: 1em;
}

h1, h2, h3, h4 {
  margin-bottom: 1em;
  text-transform: uppercase;
  letter-spacing: 2px;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-weight: 300;
  font-size: 1.25em;
}

a {
  color: #586161;
  text-decoration: none;
}
a:hover {
  background-color: rgba(190, 160, 195, 0.4);
}

dl dt {
  font-weight: 100;
}
dl dd {
  margin-bottom: 0.75em;
  margin-inline-start: 2em;
}

table {
  display: table;
  overflow-x: auto;
  width: 100%;
}
table thead {
  margin-bottom: 1em;
}
table thead th {
  font-weight: bold;
  text-align: left;
  padding: 0 0.5em 1em;
}
table thead th a {
  color: inherit;
  font-weight: inherit;
}
table tbody tr:nth-child(odd) {
  background: #cfd5d53d;
}
table tbody .clickable {
  cursor: pointer;
}
table tbody .clickable:hover {
  background-color: rgba(190, 160, 195, 0.4) !important;
}
table tbody td {
  padding: 1em 0.5em;
  vertical-align: middle;
}
table tbody td:first-child {
  text-align: left;
}

#image-set-form {
  height: 30em;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
#image-set-form li {
  margin: 0 0.5em 1em;
}

@media (max-width: 1920px) {
  #image-set-form {
    height: 35em;
  }
}
@media (max-width: 1650px) {
  #image-set-form {
    height: 40em;
  }
}
@media (max-width: 1375px) {
  #image-set-form {
    height: 60em;
  }
}
@media (max-width: 1075px) {
  #image-set-form {
    height: auto;
    width: 100%;
  }
}
.knockout {
  font-weight: 700;
  background: linear-gradient(90deg, #b90000, #c5c500, #02c102, #02c7c7, #0000d5, #bf00bf);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.home-title-container {
  width: 100%;
  background: #323232;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1em;
  height: 4em;
}
.home-title-container h1 {
  margin: 0;
  font-size: 4em;
  font-weight: 300;
  color: #cfd5d5;
  text-align: center;
}

#home-image-strip {
  display: flex;
  overflow: hidden;
  max-width: 100%;
  justify-content: center;
}
#home-image-strip img {
  margin: 1px;
}

.radial-knockout {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

input, select {
  border-radius: 3px;
  font-family: "Roboto Condensed", sans-serif;
  outline: none;
  display: block;
}
input:focus, select:focus {
  outline-color: rgba(190, 160, 195, 0.4);
}
input[type=submit], select[type=submit] {
  height: 3em;
  border: none;
  color: white;
  background-color: #586161;
  font-weight: bold;
  width: 100%;
  margin: 0.25em 0;
  font-size: 1rem;
  border-radius: 6px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
input[type=submit]:hover, select[type=submit]:hover {
  box-shadow: 4px 4px 8px #a1a1a1, -9px -9px 18px #ffffff;
}
input:not([multiple]) option, select:not([multiple]) option {
  padding: 0.5em;
  margin-top: 0.5em;
}
input:not([type=checkbox]):not([type=submit]):not([type=file]):disabled, select:not([type=checkbox]):not([type=submit]):not([type=file]):disabled {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background-color: transparent;
  color: #1e1e1e;
}
input:not([type=checkbox]):not([type=submit]):not([type=file]):disabled::-webkit-inner-spin-button, input:not([type=checkbox]):not([type=submit]):not([type=file]):disabled::-webkit-outer-spin-button, select:not([type=checkbox]):not([type=submit]):not([type=file]):disabled::-webkit-inner-spin-button, select:not([type=checkbox]):not([type=submit]):not([type=file]):disabled::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input:not([type=checkbox]):not([type=submit]):not([type=file]), select {
  padding: 0.75em;
  font-size: 1em;
  margin-top: 0.25rem;
  background: #dfe3e3;
  border: none;
  width: auto;
  box-shadow: inset 0 0 10px #cfd5d5;
}
input:not([type=checkbox]):not([type=submit]):not([type=file]):disabled, select:disabled {
  background-color: transparent;
  color: #1e1e1e;
  box-shadow: none;
}
input:not([type=checkbox]):not([type=submit]):not([type=file]):disabled option, select:disabled option {
  background-color: transparent;
  color: #1e1e1e;
}
input:not([type=checkbox]):not([type=submit]):not([type=file])[type=number], select[type=number] {
  width: 4em;
  -moz-appearance: textfield;
}
input:not([type=checkbox]):not([type=submit]):not([type=file])[type=number]::-webkit-inner-spin-button, select[type=number]::-webkit-inner-spin-button {
  display: none;
}

.form-full-page {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}
.form-full-page label {
  font-weight: 400;
  text-decoration: none;
  margin-bottom: 0.25rem;
  display: block;
  font-size: 0.85rem;
}
.form-full-page input:not([type=checkbox]):not([type=submit]):not([type=file]), .form-full-page select {
  width: 100%;
  width: -moz-available;
  /* WebKit-based browsers will ignore this. */
  width: -webkit-fill-available;
  /* Mozilla-based browsers will ignore this. */
  width: fill-available;
}
.form-full-page ul {
  list-style: none;
}
.form-full-page ul li {
  margin-bottom: 1em;
}
.form-full-page .button {
  width: 100%;
}

.helptext {
  color: #3c3c3c;
  font-size: 0.8em;
}

.horizontal-container {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  padding: 0 2em;
}

.vertical-container {
  display: flex;
  flex-direction: column;
}

.main-container {
  flex-grow: 1;
}
.center {
  justify-content: center;
  align-items: center;
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: 300px;
  margin-left: 2em;
  padding-top: 1em;
}
.sidebar .selected-filter {
  font-weight: 700;
}
.sidebar a {
  color: black;
}
.sidebar ul {
  list-style: none;
  margin-bottom: 2em;
}
.sidebar ul li {
  margin-bottom: 0.15em;
}
.sidebar h1, .sidebar h2 {
  font-size: 1rem;
}
.sidebar h2 {
  font-weight: 300;
}

.button {
  height: 3em;
  border: none;
  color: white;
  background-color: #586161;
  border-radius: 3px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.25em 0;
  text-decoration: none;
}
.button:hover {
  background-color: #313535;
}
.button.add-button {
  background-color: transparent;
  border: none;
  color: #586161;
  width: auto;
}
.button.add-button:hover {
  color: rgba(190, 160, 195, 0.4);
}
.button.add-button .material-icons {
  margin-right: 1rem;
}

textarea {
  width: 100%;
  resize: none;
  background-color: #dfe3e3;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  border: none;
  padding: 0.5em;
}

input[type=file]::-webkit-file-upload-button, input[type=file]::file-selector-button {
  height: 3em;
  border: solid 1px transparent;
  padding: 0.5em 1em;
  background-color: #cfd5d5;
  transition: 0.25s;
  font-size: 1em;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: bold;
  color: #586161;
  border-radius: 3px;
}
input[type=file]::-webkit-file-upload-button:hover, input[type=file]::file-selector-button:hover {
  border: solid 1px #586161;
}
input[type=file]::-webkit-file-upload-button:disabled, input[type=file]::file-selector-button:disabled {
  display: none;
}

.file-remove-checkbox:disabled {
  display: none;
}

.file-input-file-link {
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
}

.container {
  padding: 0 2em;
}

.text-container {
  max-width: 60rem;
}

.v-centered-line {
  display: flex;
  align-items: center;
}

.errorlist {
  color: #bc0000;
}

input + label {
  display: inline-block !important;
}

.table-container {
  overflow-x: auto;
}

#image-set-search-form select, #image-set-search-form input {
  width: 100%;
  margin-bottom: 1em;
}

#image-set-search-results {
  margin: 2em 0 0 0;
  border: 1px solid #cfd5d5;
  padding: 1em;
}

#dark-mode-toggle-btn {
  background-color: transparent;
  color: #586161;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  outline: none;
  border: none;
}

body.dark-theme {
  color: #e6e6e6;
  background-color: #262626;
}
body.dark-theme ::-webkit-scrollbar {
  width: 1em;
}
body.dark-theme ::-webkit-scrollbar-track {
  background-color: #262626;
  border-radius: 0.5em;
}
body.dark-theme ::-webkit-scrollbar-thumb {
  background-color: #777;
  outline: none;
  border-radius: 0.5em;
}
body.dark-theme header nav a {
  color: #ac881e;
}
body.dark-theme section {
  background-color: #515151;
}
body.dark-theme a {
  color: #ac881e;
}
body.dark-theme a:hover {
  background-color: inherit;
  text-decoration: underline;
}
body.dark-theme table tbody .clickable:hover {
  background-color: rgba(170, 135, 30, 0.3) !important;
}
body.dark-theme table tbody tr {
  transition: background-color 0.25s;
}
body.dark-theme table tbody tr:nth-child(odd) {
  background: #5f5f5f;
}
body.dark-theme .sidebar ul li {
  margin-bottom: 0.5rem;
}
body.dark-theme .sidebar a {
  color: #ac881e;
}
body.dark-theme .sidebar a:hover {
  background-color: inherit;
  text-decoration: underline;
}
body.dark-theme .home-title-container {
  background-color: transparent;
}
body.dark-theme input:not([type=submit]):not([type=file]), body.dark-theme select, body.dark-theme textarea {
  background: #777;
  box-shadow: inset 0 0 3px #515151;
}
body.dark-theme input:not([type=submit]):not([type=file]):disabled, body.dark-theme select:disabled, body.dark-theme textarea:disabled {
  box-shadow: none;
  color: #e6e6e6 !important;
}
body.dark-theme input[type=file]::-webkit-file-upload-button, body.dark-theme input[type=file]::file-selector-button {
  border: none;
  background-color: #6d6d6d;
  color: #e6e6e6;
  padding: 0.75em;
  height: auto;
}
body.dark-theme input[type=file]::-webkit-file-upload-button:hover, body.dark-theme input[type=file]::file-selector-button:hover {
  background-color: black;
}
body.dark-theme input[type=submit], body.dark-theme select[type=submit] {
  background-color: #6d6d6d;
}
body.dark-theme input[type=submit], body.dark-theme button {
  border: none;
  color: gainsboro;
  background-color: #262626;
}
body.dark-theme input[type=submit]:hover, body.dark-theme button:hover {
  border: none;
  box-shadow: none;
  background-color: black;
  color: gainsboro;
}
body.dark-theme button.add-button {
  color: #e6e6e6;
}
body.dark-theme button.add-button:focus {
  outline: none;
}
body.dark-theme button.add-button:hover {
  color: #262626;
  background: transparent;
}
body.dark-theme .helptext {
  color: #e1e1e1;
}
body.dark-theme #dark-mode-toggle-btn {
  color: #ac881e;
}
body.dark-theme a.button {
  border: 1px solid #262626;
  color: #262626;
}
body.dark-theme a.button:hover {
  background-color: #585858;
}

.checkbox-label {
  display: flex;
  align-items: center;
}
.checkbox-label input {
  display: inline;
}

.form-section {
  margin-bottom: 2em;
  padding: 0 1em 0 0;
}

#list-field-options input {
  display: inline;
}

.inline-form-group {
  display: flex;
  flex-direction: row;
}

/*# sourceMappingURL=styles.css.map */