body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
	display: flex;
  flex-direction: column;
	align-items: center;
}

.button {
  background-color: #5db16c;;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 4px;
  cursor: pointer;
  border-radius: 15px;
}

.button-disabled {
  background-color: #eee !important;
  cursor: default;
  pointer-events: none;
}

.button-radio { 
  background-color: #888; 
}
.button-radio.checked { 
  background-color: #5db16c;
}
.button-radio:hover { background-color: #5db16c; }

.line {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
  align-items: center;
  width: 98%;
}

.line-text {
  color: #888 !important;
  text-align: center;
  padding: 5px;
}

.swatch {
  position: absolute; 
  z-index: 10;
  border: solid;
  border-radius: 12px;
  margin: 2.5%; /* A space between clicked pixel and swatch display */
  justify-content: center;
  align-items: center;
  display: flex;
  /*font-size: 70%;*/
  color: white;
}

.swatch-hue {
  position: absolute; 
  z-index: 11;
  border: solid;
  border-radius: 12px;
  margin: 2.5%; /* A space between clicked pixel and swatch display */
  justify-content: center;
  align-items: center;
  display: flex;
  font-size: 70%;
  color: white;
}

.swatch_target {
  position: absolute; 
  z-index: 10;
  border: solid;
  border-radius: 8px;
  border-color: white;
  transform: translate(-50%, -50%); /* Center on pointer */
  padding: 3px; /* size of hole in target donut */
  pointer-events: none; /* Allow click behind swatch target */
}

#result_line {
  flex-direction: column;
}

.radio-line {
  margin-left: 7px;
}

.result-img {
  max-width: 100%;
  cursor: crosshair;
}

.hidden { display: none !important }

.spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
  /*background-color: #ffffffbb;*/
}
.loader {
  border: 8px solid #f3f3f3; /* Light grey border */
  border-top: 8px solid #3498db; /* Blue border for the spinning part */
  border-radius: 50%; /* Makes it a circle */
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite; /* Animation for rotation */
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}