* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  background-repeat: no-repeat;
}

*, *::before, *::after {
  box-sizing: border-box;
  background-repeat: no-repeat;
}

*:not(dialog) {
  margin: 0;
}

button {
  background: none;
  font: inherit;
  background-repeat: no-repeat;
}

input {
  background: none;
  font: inherit;
  background-repeat: no-repeat;
}

textarea {
  background: none;
  font: inherit;
  background-repeat: no-repeat;
}

a {
  text-decoration: none;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
  border: 0;
  outline: 0;
  box-shadow: none;
  font: inherit;
  color: inherit;
}

select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
  cursor: pointer;
}

button {
  -webkit-appearance: none;
          appearance: none;
  -moz-appearance: none;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

body p, body span, body th, body td {
  font-size: 1em;
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 1em;
  color: #16261E;
  background-color: #EFF1E2;
}

h1, h2, h3, span.title {
  font-family: "Fraunces", serif;
}

div#app {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
}

header.page {
  flex: 0 0 240px;
  background-color: #16261E;
  padding-top: 1em;
}
header.page a, header.page button {
  display: flex;
  align-items: center;
  padding: 0.25em 1em;
  flex: 0 0 100%;
}
header.page nav {
  padding-top: 1em;
  display: flex;
  flex-wrap: wrap;
}
header.page nav a, header.page nav button {
  color: #F6EFDB;
  gap: 1em;
  font-size: 0.9375em;
  min-height: 36px;
  align-items: center;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}
header.page nav a[aria-current], header.page nav button[aria-current] {
  background-color: #2C4338;
  border-left: 3px solid #B08429;
  color: #fff;
}
header.page nav button.avatar {
  flex-wrap: wrap;
  display: flex;
  gap: 1em;
  align-items: center;
  position: fixed;
  bottom: 16px;
  width: 240px;
}
header.page nav button.avatar abbr {
  display: flex;
  flex: 0 0 36px;
  height: 36px;
  color: #fff;
  background-color: #B08429;
  border-radius: 18px;
  align-items: center;
  justify-content: center;
  padding: 0;
}
header.page nav button.avatar span {
  flex: 0 0 auto;
}
header.page nav div.menu {
  position: fixed;
  border-radius: 4px;
  background-color: #FDFCF6;
  display: flex;
  flex-wrap: wrap;
  left: 24px;
  bottom: 64px;
  width: 240px;
}
header.page nav div.menu span, header.page nav div.menu button {
  flex: 0 0 100%;
  padding: 1em;
}
header.page nav div.menu button {
  color: #16261E;
  font-size: 1em;
}

main {
  flex: 0 0 calc(100% - 240px);
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
main h1 {
  font-size: 1.875em;
  font-weight: 700;
  text-transform: capitalize;
  gap: 0.5em;
  position: relative;
  top: 14px;
}
main h1 span {
  font-size: 0.625em;
  font-weight: 400;
  background-color: #DCEED8;
  padding: 0.125em 0.75em;
  border-radius: 12px;
  align-self: center;
  font-family: "Inter", sans-serif;
}
main header {
  flex-wrap: wrap;
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
}
main header div {
  flex-wrap: wrap;
}
main header div.breadcrumbs ~ div {
  margin-bottom: 2em;
  justify-content: space-between;
  display: flex;
  flex: 0 0 980px;
  gap: 0.5em;
}
main header div.breadcrumbs ~ div h1, main header div.breadcrumbs ~ div p, main header div.breadcrumbs ~ div a, main header div.breadcrumbs ~ div button {
  display: flex;
}
main header div.breadcrumbs ~ div h1 {
  flex: 0 0 100%;
  line-height: 1;
}
main header div.breadcrumbs ~ div p {
  align-items: flex-end;
  flex-grow: 1;
  min-height: 36px;
  color: #5f675a;
}
main header div.breadcrumbs ~ div a, main header div.breadcrumbs ~ div button {
  padding: 0.5em 1em;
  align-items: center;
  gap: 0.5em;
  border-radius: 4px;
  text-transform: capitalize;
  flex: 0 0 auto;
}
main header div.breadcrumbs ~ div button {
  background-color: #16261E;
  color: #fff;
  border: 1px solid #16261E;
}
main header div.breadcrumbs ~ div button:disabled {
  background-color: transparent;
  color: #cecbb7;
  border: 1px solid #DEDBC6;
}
main header div.breadcrumbs ~ div button:disabled svg path {
  fill: #cecbb7;
}
main header div.breadcrumbs {
  padding: 1em 1.5em;
  flex: 0 0 100%;
  display: flex;
  border-bottom: 1px solid #cecbb7;
  margin-bottom: 2em;
  align-items: center;
  align-content: center;
}
main header div.breadcrumbs a {
  color: #7F927A;
  font-size: 0.875em;
  padding-right: 1em;
}
main header div.breadcrumbs a + a {
  background-image: url("data:image/svg+xml,%3Csvg width='5' height='11' viewBox='0 0 5 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10.024L3.486 0H4.893L1.421 10.024H0Z' fill='%237A7C91'/%3E%3C/svg%3E%0A");
  background-position: left center;
  padding-left: 1em;
}
main header div.breadcrumbs a.selected {
  font-weight: 600;
  color: #16261E;
}
main div.search {
  display: flex;
  margin-bottom: 0.75em;
  flex: 0 0 980px;
  gap: 1em;
  position: relative;
}
main div.search input, main div.search select, main div.search div {
  background-color: #FDFCF6;
  display: flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid #DEDBC6;
  border-radius: 4px;
  padding-left: 1em;
  padding-right: 1em;
}
main div.search input:focus, main div.search input:hover, main div.search select:focus, main div.search select:hover, main div.search div:focus, main div.search div:hover {
  border: 1px solid #B08429;
  outline: none;
}
main div.search span.clear {
  position: absolute;
  left: calc(100% - 492px);
  font-size: 0.75em;
  top: 8px;
  background-color: #EFF1E2;
  padding: 0.25em 1em;
  border-radius: 12px;
}
main div.search div {
  flex: 0 0 200px;
  display: flex;
  flex-wrap: wrap;
}
main div.search div span {
  flex-grow: 1;
}
main div.search div button {
  padding-left: 0.625em;
  padding-right: 0.625em;
  flex: 0 0 auto;
  display: flex;
}
main div.search div button:hover {
  cursor: pointer;
}
main div.search div button[disabled] {
  opacity: 0.3;
}
main div.search div button[disabled]:hover {
  cursor: default;
}
main div.search select {
  padding-right: 2em;
  flex: 0 0 200px;
}
main div.search input {
  background-position: 16px center;
  flex: 0 0 calc(100% - 400px - 2em);
  text-indent: 30px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7C12 4.23858 9.76142 2 7 2C4.23858 2 2 4.23858 2 7C2 9.76142 4.23858 12 7 12C9.76142 12 12 9.76142 12 7ZM14 7C14 8.57659 13.4781 10.031 12.5986 11.2012C12.636 11.2293 12.673 11.2589 12.707 11.293L15.707 14.293C16.0976 14.6835 16.0976 15.3165 15.707 15.707C15.3165 16.0976 14.6835 16.0976 14.293 15.707L11.293 12.707C11.2589 12.673 11.2293 12.636 11.2012 12.5986C10.031 13.4781 8.57659 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7Z' fill='%2382838C'/%3E%3C/svg%3E%0A");
}
main div.results {
  flex: 0 0 980px;
  background-color: #FDFCF6;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2em;
  padding-bottom: 2em;
  padding-top: 2em;
  border: 1px solid #DEDBC6;
  flex-direction: column;
  align-items: center;
}
main div.results button {
  border: 1px solid #7F927A;
  padding: 0.25em 1em;
  font-size: 0.9375em;
  border-radius: 4px;
}
main div.results strong {
  padding-top: 1em;
}
main div.results p {
  padding: 0 25%;
  text-align: center;
  margin-bottom: 1em;
  margin-top: 0.5em;
}
main table {
  flex: 0 0 980px;
  background-color: #FDFCF6;
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
  padding-bottom: 1em;
  border: 1px solid #DEDBC6;
}
main table tbody, main table thead {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 100%;
}
main table tbody tr, main table thead tr {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 100%;
  border-bottom: 1px solid #DCEED8;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
}
main table thead {
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  background-color: #E7E9D8;
}
main table th {
  font-size: 0.75em;
  color: #7F927A;
  font-weight: 500;
  text-transform: uppercase;
  gap: 0.5em;
}
main table th[aria-selected=true] {
  color: #16261E;
}
main table th:hover {
  cursor: pointer;
}
main table th:first-child:hover {
  cursor: default;
}
main table td, main table th {
  align-content: center;
  align-items: center;
  display: flex;
  justify-content: flex-start;
  line-height: 1.5;
  position: relative;
}
main table td.name, main table th.name {
  flex: 0 0 calc(50% - 150px);
  display: flex;
  flex-wrap: wrap;
}
main table td.name strong, main table td.name span, main table th.name strong, main table th.name span {
  flex: 0 0 100%;
  position: relative;
}
main table td.name strong, main table th.name strong {
  font-weight: 500;
  font-size: 0.9375em;
}
main table td.name span, main table th.name span {
  font-size: 0.875em;
  color: #5f675a;
}
main table td.scientific, main table th.scientific {
  flex: 0 0 30%;
  flex-padding-left: 1em;
  flex-padding-right: 1em;
  flex-font-size: 0.9375em;
}
main table td.habitat, main table th.habitat {
  flex: 0 0 20%;
  padding-right: 1em;
  font-size: 0.9375em;
}
main table td.preview, main table th.preview {
  flex: 0 0 32px;
  justify-content: center;
}
main table td.action, main table th.action {
  flex: 0 0 32px;
  font-size: 0.875em;
}
main table td.action svg path, main table th.action svg path {
  fill: #16261E;
}
main table td.photo, main table th.photo {
  flex: 0 0 68px;
  padding-left: 16px;
}
main table td.photo img, main table th.photo img {
  border-radius: 4px;
}
main section {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
main div.profile {
  flex: 0 0 980px;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
main div.profile div.content {
  flex: 0 0 calc(100% - 320px - 1em);
  background-color: #FDFCF6;
  border-radius: 12px;
  border: 1px solid #DEDBC6;
}
main div.profile div.content div.tabs {
  flex: 0 0 100%;
  display: flex;
  gap: 0.5em;
  padding: 0 1.5em;
  border-bottom: 1px solid #cecbb7;
  margin-bottom: 1em;
}
main div.profile div.content div.tabs button {
  flex: 0 0 auto;
  padding: 1em 1em;
  font-size: 0.9375em;
  font-weight: 500;
  color: #5f675a;
  border-bottom: 3px solid transparent;
}
main div.profile div.content div.tabs button[aria-selected=true], main div.profile div.content div.tabs button:hover {
  color: #16261E;
  border-bottom: 3px solid #B08429;
}
main div.profile div.content div.tabs button:hover {
  cursor: pointer;
}
main div.profile div.content div.section {
  padding: 1em 1.5em;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
main div.profile div.content div.section h3, main div.profile div.content div.section ul {
  flex: 0 0 100%;
}
main div.profile div.content div.section h3 {
  font-weight: 600;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
}
main div.profile div.content div.section ul {
  list-style-type: none;
  line-height: 1.325;
}
main div.profile div.content div.section ul li {
  list-style: none outside none;
  padding-left: 1em;
  padding-bottom: 0.5em;
  background-repeat: no-repeat;
  font-size: 0.9375em;
  background-position: 0 8px;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3C6 4.65685 4.65685 6 3 6C1.34315 6 0 4.65685 0 3C0 1.34315 1.34315 0 3 0C4.65685 0 6 1.34315 6 3Z' fill='%236FA79A'/%3E%3C/svg%3E%0A");
}
main div.profile div.sidebar {
  flex: 0 0 320px;
  background-color: #FDFCF6;
  border-radius: 12px;
  border: 1px solid #DEDBC6;
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
}
main div.profile div.sidebar svg {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
main div.profile div.sidebar img {
  width: 100%;
  border-radius: 12px;
}
main div.profile div.sidebar dl {
  padding: 1em;
}
main div.profile div.sidebar dl dt {
  text-transform: uppercase;
  font-size: 0.75em;
  padding-bottom: 1em;
  color: #5f675a;
}
main div.profile div.sidebar dl dd {
  font-size: 0.9375em;
}
main div.profile div.sidebar dl div {
  margin-bottom: 1.5em;
}
main div.profile div.sidebar.stacked {
  background-color: transparent;
  border: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-content: flex-start;
  align-items: flex-start;
}
main div.profile div.sidebar.stacked div.summary, main div.profile div.sidebar.stacked div.photo, main div.profile div.sidebar.stacked div.info {
  background-color: #FDFCF6;
  border-radius: 12px;
  border: 1px solid #DEDBC6;
  flex: 0 0 100%;
  display: flex;
}
main div.profile div.sidebar.stacked div.summary h3, main div.profile div.sidebar.stacked div.photo h3, main div.profile div.sidebar.stacked div.info h3 {
  font-weight: 500;
  margin-bottom: 1em;
  text-transform: capitalize;
}
main div.profile div.sidebar.stacked div.summary {
  padding: 1.25em;
  display: flex;
  flex-wrap: wrap;
}
main div.profile div.sidebar.stacked div.summary div.entries {
  flex-wrap: wrap;
  display: flex;
  flex: 0 0 100%;
}
main div.profile div.sidebar.stacked div.summary div.entries div {
  margin-bottom: 1em;
  display: flex;
  flex: 0 0 100%;
}
main div.profile div.sidebar.stacked div.summary div.entries div span {
  flex: 0 0 50%;
  font-size: 0.9375em;
}
main div.profile div.sidebar.stacked div.summary div.entries div span:first-child {
  flex: 0 0 40%;
}
main div.profile div.sidebar.stacked div.summary div.entries div span + span {
  justify-content: flex-end;
  flex: 0 0 60%;
}
main div.profile div.sidebar.stacked div.photo {
  min-height: 240px;
  justify-content: center;
  align-content: flex-start;
}
main div.profile div.sidebar.stacked div.photo svg, main div.profile div.sidebar.stacked div.photo img {
  max-width: 100%;
  height: auto;
}

form.edit {
  padding: 1em 1.5em;
  display: flex;
  flex-wrap: wrap;
}
form.edit span.title {
  font-weight: 600;
  padding-top: 1em;
  padding-bottom: 1em;
}
form.edit div.fieldset {
  border-bottom: 1px solid #cecbb7;
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
  justify-content: space-between;
}
form.edit div.fieldset textarea {
  margin-bottom: 0.25em;
  flex: 0 0 calc(100% - 46px);
  border-radius: 4px;
}
form.edit div.fieldset textarea:focus, form.edit div.fieldset textarea:hover {
  position: relative;
  z-index: 100;
}
form.edit div.fieldset textarea:disabled {
  border: 1px solid #DEDBC6;
  color: #16261E;
}
form.edit div.fieldset textarea:disabled:focus, form.edit div.fieldset textarea:disabled:hover {
  border: 1px solid #DEDBC6;
  outline: none;
}
form.edit div {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.5em;
}
form.edit div.row {
  flex: 0 0 100%;
  position: relative;
}
form.edit div.row div:not(.actions) {
  flex: 0 0 100%;
  display: flex;
  position: relative;
}
form.edit div.col-6 {
  flex: 0 0 calc(60% - 1em);
}
form.edit div.col-4 {
  flex: 0 0 40%;
}
form.edit div.col-6, form.edit div.col-4 {
  padding-bottom: 1.5em;
}
form.edit input, form.edit textarea, form.edit select {
  display: flex;
  border: 1px solid #cdc9b4;
  flex: 0 0 100%;
  border-radius: 4px;
  flex: 0 0 100%;
}
form.edit input:focus, form.edit input:hover, form.edit textarea:focus, form.edit textarea:hover, form.edit select:focus, form.edit select:hover {
  border-color: #B08429;
  outline: none;
}
form.edit input, form.edit select {
  padding: 0.375em 1em;
}
form.edit textarea {
  overflow-y: hidden;
  resize: none;
  padding: 0.5em 1em;
  line-height: 1.5;
}
form.edit label {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875em;
  font-weight: 500;
  margin-bottom: 0.25em;
}
form.edit span.title {
  font-size: 1.25em;
  flex-grow: 1;
  display: flex;
  align-items: center;
}
form.edit span.title ~ button {
  min-height: 32px;
  flex: 0 0 auto;
  font-size: 0.875em;
  padding: 0 1em;
  align-items: center;
  display: flex;
  border-radius: 4px;
  align-self: center;
  gap: 0.5em;
}
form.edit span.title + button {
  border: 1px solid #DEDBC6;
  background-color: #FDFCF6;
}
form.edit span.title + button + button {
  border: 1px solid #DEDBC6;
  background-color: #EFF1E2;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.29289 0.292893C9.68342 -0.0976311 10.3164 -0.0976311 10.707 0.292893C11.0975 0.683417 11.0975 1.31643 10.707 1.70696L6.20696 6.20696C5.81643 6.59748 5.18342 6.59748 4.79289 6.20696L0.292893 1.70696C-0.0976311 1.31643 -0.0976311 0.683417 0.292893 0.292893C0.683417 -0.0976311 1.31643 -0.0976311 1.70696 0.292893L5.49992 4.08586L9.29289 0.292893Z' fill='%23242748'/%3E%3C/svg%3E%0A");
  background-position: calc(100% - 16px) center;
}

div[role=alert] {
  width: 340px;
  position: fixed;
  bottom: 12px;
  background-color: #16261E;
  padding: 0.75em 1em;
  left: calc(50% - 170px);
  border-radius: 4px;
}
div[role=alert] p {
  color: #fff;
}

.dashboard {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 980px;
  justify-content: space-between;
}
.dashboard div.stats {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 calc(50% - 1em);
  gap: 1em;
  background-color: #FDFCF6;
  border-radius: 8px;
  border: 1px solid #DEDBC6;
  padding: 1em 1.5em;
  align-content: flex-start;
  align-items: flex-start;
}
.dashboard div.stats h3 {
  flex: 0 0 100%;
  margin-bottom: 1em;
  font-weight: 500;
}
.dashboard div.stats div {
  flex: 0 0 calc(50% - 1em);
  flex-wrap: wrap;
  display: flex;
  background-color: #EFF1E2;
  justify-content: center;
  padding: 1em;
  border-radius: 4px;
}
.dashboard div.stats div span, .dashboard div.stats div small, .dashboard div.stats div p {
  flex: 0 0 100%;
  justify-content: center;
  display: flex;
}
.dashboard div.stats div span {
  font-weight: 500;
  padding-bottom: 0.25em;
  font-size: 1.25em;
  font-family: "Fraunces", serif;
}
.dashboard div.stats div small {
  padding-bottom: 0.5em;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #5f675a;
}
.dashboard div.stats div p {
  font-size: 0.875em;
  color: #16261E;
  text-align: center;
  opacity: 0.8;
}
.dashboard div.bar {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 50%;
  gap: 0.5em;
  padding: 1em 1.5em;
  background-color: #FDFCF6;
  border-radius: 8px;
  border: 1px solid #DEDBC6;
  align-content: flex-start;
  align-items: flex-start;
}
.dashboard div.bar h3 {
  font-weight: 500;
  font-size: 1.125em;
  flex: 0 0 100%;
  margin-bottom: 1em;
  font-weight: 500;
}
.dashboard div.bar div {
  flex: 0 0 100%;
  padding-bottom: 0.25em;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
}
.dashboard div.bar div span, .dashboard div.bar div small {
  display: flex;
}
.dashboard div.bar div span {
  background-color: #5f675a;
  border-radius: 2px;
  height: 12px;
}
.dashboard div.bar div small {
  font-size: 0.9375em;
  flex: 0 0 200px;
}
.dashboard div.metrics {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 100%;
  gap: 1em;
  margin-bottom: 1em;
}
.dashboard div.metrics div.tooltip {
  position: absolute;
  left: 0;
  top: 0;
}
.dashboard div.metrics div {
  flex: 0 0 calc(33.3333333% - 0.66666667em);
  display: flex;
  flex-wrap: wrap;
  background-color: #FDFCF6;
  border-radius: 8px;
  border: 1px solid #DEDBC6;
  padding: 1em;
  position: relative;
}
.dashboard div.metrics div span, .dashboard div.metrics div h3, .dashboard div.metrics div small {
  flex: 0 0 100%;
}
.dashboard div.metrics div span {
  padding: 1em 0 0.5em 0;
}
.dashboard div.metrics div h3 {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 1em;
  color: #5f675a;
}
.dashboard div.metrics div span {
  font-weight: 700;
  font-size: 1.75em;
  font-family: "Fraunces", serif;
}
.dashboard div.metrics div small {
  color: #5f675a;
}

textarea {
  field-sizing: content;
  resize: none;
}

div.inputs {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 100%;
}
div.inputs div, div.inputs textarea {
  margin-bottom: 1em;
  border: 1px solid #DEDBC6;
  flex: 0 0 100%;
  border-radius: 4px;
  padding: 0.5em 1em;
  line-height: 1.425;
}
div.inputs div:focus, div.inputs div:hover, div.inputs textarea:focus, div.inputs textarea:hover {
  border-color: #16261E;
  outline: none;
}

div.actions {
  position: absolute;
  right: 0;
  top: 0;
  border: 1px solid #DEDBC6;
  width: 34px;
  text-align: center;
  display: flex;
  justify-content: center;
  background-color: #FDFCF6;
  z-index: 10;
  border-radius: 4px;
  flex-wrap: wrap;
}
div.actions button {
  flex: 0 0 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.actions button:hover {
  cursor: default;
  background-color: #EFF1E2;
  cursor: pointer;
}
div.actions button.remover {
  min-height: 32px;
}
div.actions button.sorter {
  min-height: 20px;
  border-radius: 4px 4px 0 0;
}
div.actions button.sorter + button {
  border-top: 1px solid #cecbb7;
  border-radius: 0 0 4px 4px;
}
div.actions button.sorter:disabled svg path {
  fill: #cecbb7;
}
div.actions button.sorter:disabled:hover {
  cursor: default;
  background-color: #FDFCF6;
}

dialog {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1000;
  align-items: flex-start;
}

dialog.modal {
  background-color: rgba(22, 38, 30, 0.6);
}
dialog.modal div {
  background-color: #FDFCF6;
  border-radius: 8px;
  padding: 1.5em;
  margin-top: 1em;
  gap: 1em;
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 400px;
}
dialog.modal div h2, dialog.modal div p {
  flex: 0 0 100%;
}
dialog.modal div p {
  margin: 1em 0;
  line-height: 1.5;
}
dialog.modal div h2 {
  font-size: 1.25em;
}
dialog.modal div button[type=submit] {
  background-color: #bf2525;
  color: #fff;
  padding: 0.625em 1em;
  border-radius: 4px;
  border: 1px solid #bf2525;
}
dialog.modal div button[type=button] {
  background-color: #FDFCF6;
  color: #16261E;
  border: 1px solid #7F927A;
  padding: 0.625em 1em;
  border-radius: 4px;
}

dialog.page {
  background-color: #eff1e2;
}
dialog.page div.layout {
  background-image: url("./../img/dividors.png");
  background-repeat: repeat-y;
  margin-top: 0.5em;
  background-color: #FDFCF6;
  border-radius: 8px;
  background-color: #FAF6EF;
  width: 297mm;
  height: 210mm;
  align-content: flex-start;
  display: flex;
  flex-wrap: wrap;
}
dialog.page div.layout div.titles div.title {
  padding-left: 10mm;
}
dialog.page div.layout div.titles + div.titles div.title {
  padding-right: 10mm;
  padding-left: 0;
}
dialog.page div.layout div.titles {
  flex: 0 0 50%;
}
dialog.page div.layout div.titles div.title {
  height: 35mm;
  display: flex;
  flex-wrap: wrap;
  background-color: #16261E;
  align-content: flex-start;
  justify-content: space-between;
}
dialog.page div.layout div.titles div.title div {
  flex: 0 0 calc(100% - 124px);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
dialog.page div.layout div.titles div.title img {
  width: 100px;
  height: 100px;
  margin-top: 4mm;
  border-radius: 2px;
  border: 1px solid #416239;
}
dialog.page div.layout div.titles div.title h1, dialog.page div.layout div.titles div.title span {
  flex: 0 0 100%;
  color: #fff;
}
dialog.page div.layout div.titles div.title h1 {
  font-size: 13.5pt;
  font-weight: 600;
  padding-top: 4mm;
  line-height: 1.125;
}
dialog.page div.layout div.titles div.title span.english {
  font-weight: 400;
  padding-top: 1.5mm;
  padding-bottom: 1.5mm;
  font-size: 10.5pt;
  line-height: 1.125;
}
dialog.page div.layout div.titles div.title span.scientific {
  font-size: 8.5pt;
  flex: 0 0 auto;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 1px;
}
dialog.page div.layout div.titles div.title span.habitat {
  padding-top: 1mm;
  font-size: 9pt;
  font-size-align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  align-self: center;
  padding-left: 12px;
  position: relative;
  top: -2px;
}
dialog.page div.layout div.titles + div.descriptions {
  padding-left: 10mm;
}
dialog.page div.layout div.titles + div.descriptions + div.descriptions {
  padding-right: 10mm;
}
dialog.page div.layout div.titles + div.descriptions + div.descriptions div.description {
  position: relative;
  left: 10px;
}
dialog.page div.layout div.descriptions {
  flex: 0 0 50%;
}
dialog.page div.layout div.descriptions div.description {
  height: 175mm;
  -moz-column-fill: auto;
       column-fill: auto;
  -moz-column-count: 3;
       column-count: 3;
  -moz-column-gap: 0px;
       column-gap: 0px;
  padding-top: 4mm;
  padding-bottom: 6mm;
}
dialog.page div.layout div.descriptions div.description h2, dialog.page div.layout div.descriptions div.description p {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 1em 0;
}
dialog.page div.layout div.descriptions div.description h2 {
  -moz-column-break-after: avoid;
       break-after: avoid;
  font-family: "Spectral", serif;
  font-weight: 600;
  font-size: 12pt;
  margin-bottom: 8pt;
  color: #16261E;
  margin-bottom: 4pt;
  padding-left: 20px;
  background-repeat: no-repeat;
  background-position: 0 center;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='1' viewBox='0 0 16 1' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='1' fill='%232C3E28'/%3E%3C/svg%3E%0A");
}
dialog.page div.layout div.descriptions div.description p {
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 10pt;
  margin-bottom: 8pt;
  margin-right: 20px;
  color: #101A0E;
  font-weight: 400;
}

div[data-muted=true], button[data-muted=true] {
  opacity: 0.4;
}

div[data-muted=true] *, button[data-muted=true] {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

div[data-muted=true] *, button[data-muted=true] {
  pointer-events: none;
}

dialog.page > button {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
dialog.page > button.dialogAction {
  background-color: #16261E;
  top: 24px;
}
dialog.page > button.dialogAction.close {
  left: 24px;
}
dialog.page > button.dialogAction.downloadPdf {
  right: 24px;
}
dialog.page > button.pager {
  top: calc(50% - 12px);
  background-color: #FDFCF6;
}
dialog.page > button.pager.next {
  right: 24px;
}
dialog.page > button.pager.previous {
  left: 24px;
}
dialog.page > button.pager:hover {
  background-color: #16261E;
}
dialog.page > button.pager:hover svg path {
  fill: #fff;
}
dialog.page > button.pager:disabled svg path {
  fill: rgba(22, 38, 30, 0.4);
}
dialog.page > button.pager:disabled:hover {
  background-color: #FDFCF6;
  cursor: default;
}

main.auth {
  flex: 0 0 100%;
}
main.auth > div {
  flex: 0 0 380px;
  display: flex;
  flex-wrap: wrap;
  background-color: #FDFCF6;
  padding: 2em;
  border-radius: 12px;
  border: 1px solid #DEDBC6;
  margin-top: 2em;
}
main.auth > div header {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
}
main.auth > div header h1, main.auth > div header p {
  flex: 0 0 100%;
}
main.auth > div header h1 {
  top: 0;
  padding: 1em 0 0.25em 0;
}
main.auth > div header svg path {
  fill: #16261E;
}
main.auth > div form {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 2em;
}
main.auth > div form div {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.5em;
}
main.auth > div form div label, main.auth > div form div input {
  flex: 0 0 100%;
  display: flex;
}
main.auth > div form div label {
  font-size: 0.875em;
  font-weight: 500;
  padding-bottom: 0.25em;
}
main.auth > div form div input {
  border: 1px solid #cdc9b4;
  padding: 0.5em 1em;
  border-radius: 4px;
}
main.auth > div form div input:focus, main.auth > div form div input:hover {
  border: 1px solid #B08429;
  outline: none;
}
main.auth > div form button[type=submit] {
  border: 1px solid #16261E;
  padding: 0.75em 1em;
  border-radius: 4px;
  color: #fff;
  flex: 0 0 100%;
  display: flex;
  background-color: #16261E;
  text-align: center;
  justify-content: center;
}

div.loading {
  background-color: #FDFCF6;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}
div.loading div {
  height: 80px;
  display: flex;
  align-items: center;
  flex: 0 0 104px;
  flex-wrap: wrap;
  justify-content: center;
}
div.loading div svg {
  display: flex;
}
div.loading div svg:first-child {
  flex: 0 0 102px;
}
div.loading div svg:first-child path {
  fill: #16261E;
}
div.loading div svg + svg {
  flex: 0 0 36px;
  height: auto;
}/*# sourceMappingURL=style.css.map */