body {
  font-family: "Source Sans Pro", sans-serif;
  -webkit-font-smoothing: auto;
  line-height: 1.6;
  font-weight: normal !important;
  width: min(100%,max(1200px, 75vw));
  margin: 0 auto;
}

.info-box {
  padding: 20px 20px 20px 20px;
  background-color: #fbfbfb;
  border: 1px solid lightgrey;
  border-radius: 10px;
  margin-bottom: 20px;
}

.hello {
  display: none;
  gap: 10px;
  /* background-color: yellowgreen; */
  padding: 5px 20px 5px 20px;
  /* border-style: solid;
  border-width: 1px;
  align-items: center; */
  /* border-color: black; */
  visibility: hidden;
}

.select-sample {
  display: flex;
  align-items: center;
  padding: 5px 20px 5px 20px;
  gap: 10px;
  /* background-color: lightblue; */
  /* border-style: solid;
  border-width: 1px;
  align-items: center; */
}

.select-pollination-project {
  display: none;
  /* background-color: chocolate; */
  padding: 5px 20px 20px 20px;
  justify-content: space-between;
  /* border-style: solid;
  border-width: 1px; */
}

.select-pollination-project:empty {
  display: none;
}

.pollination-dropdown {
  width: 30%;
  /* padding: 20px; */
  /* background-color: limegreen; */
}

.pollination-dropdown:empty {
  display: hidden;
}

.images-container {
  display: flex;
  margin: 5px 20px 50px 20px;
}

.images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5%, 1fr));
  justify-content: space-between;
  grid-gap: 7px;
  grid-row-gap: 7px;
  width: 100%;
  max-height: 75vh;
  overflow-y: auto;
  grid-auto-rows: min-content;
  transition: width 0.3s;
}

.image-grid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  border-radius: 50%;
  border-style: solid;
  border-width: 0.2cqw;
  overflow: hidden;
  box-sizing: border-box;
}

.image-grid:hover {
  transform: scale(1.5);
  z-index: 2;
  transition: transform 500ms;
}

.selected-image-container {
  display: flex;
  width: 0;
  /* overflow: hidden; */
  /* background-color: burlywood; */
  /* align-items: center; */
  /* padding: 20px; */
  gap: 20px;
  transition: width 0.3s;
}

.selected-image-wrapper {
  flex: 1 1 auto;
  /* align-items: center; */
  /* justify-content: center; */
  /* box-sizing: border-box; */
  overflow: hidden;
}

.selected-image {
  max-width: 100%;
  max-height: 75vh;
  /* width: auto; */
  /* flex-shrink: 1; */
  cursor: pointer;
  /* border-style: solid; */
  /* border-width: 0.2cqw; */
  /* border-color: black; */
  /* padding: 20px; */
}

.selected-image-info {
  flex: 0 1 auto;
  /* padding: 20px; */
  white-space: nowrap;
}

.radio-items {
  display: flex;
  align-items: center;
  padding: 5px 20px 5px 20px;
  gap: 10px;
  /* background-color: mediumaquamarine; */
  /* border-style: solid;
  border-width: 1px;
  align-items: center; */
}

.color-by {
  display: flex;
  align-items: center;
  padding: 5px 20px 5px 20px;
  gap: 10px;
  /* background-color: lightblue; */
  /* border-style: solid;
  border-width: 1px;
  align-items: center; */
}

.color-by-label {
  font-weight: bold;
}

.sort-by {
  display: flex;
  align-items: center;
  padding: 5px 20px 5px 20px;
  gap: 10px;
  /* background-color: lightblue; */
  /* border-style: solid;
  border-width: 1px;
  align-items: center; */
}

.sort-by-label {
  font-weight: bold;
}

.sort-by-button {
  display: flex;
  align-items: center;
  gap: 5px;
}

.label-bold {
  font-weight: bold;
}

.logo-title {
  display: flex;
  padding: 20px;
  gap: 10px;
  align-items: center;
  /* border-style: solid; */
  /* border-width: 1px; */
}

.logo {
  height: 2em;
}

.app-name {
  font-size: 2em;
  font-weight: bold;
}

.hi-user {
  font-size: 1.5em;
  font-weight: bold;
}

.justify-text {
  text-align: justify;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.custom-spinner .dash-spinner {
  display: none;
}

.custom-spinner::before {
  content: url('./pollination.svg');
  display: block;
  width: 10vmin;
  margin: auto;
  animation: spin 1s ease-in-out infinite;
}

._dash-loading {
  margin: auto;
  color: transparent;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

._dash-loading::after {
  content: url('./pollination.svg');
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  translate: -20vmin -20vmin;
  width: 40vmin;
  height: auto;
  -webkit-animation: spin 1.5s ease-in-out infinite;
  animation: spin 1.5s ease-in-out infinite;
}