/* This file is reserved for overriding and extending the template styles. */
.customSol {
  border: 1px solid #ff7507 !important;
}

.top-gradient {
  z-index: -10;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    45deg,
       hsl(0deg 0% 100%) 14%,
    hsl(28deg 100% 98%) 47%,
    hsl(28deg 100% 95%) 61%,
    hsl(28deg 100% 93%) 70%,
    hsl(28deg 100% 90%) 77%,
    hsl(28deg 100% 88%) 83%,
    hsl(28deg 100% 85%) 87%,
    hsl(28deg 100% 83%) 91%,
    hsl(28deg 100% 80%) 94%,
    hsl(28deg 100% 78%) 97%,
    hsl(28deg 100% 76%) 99%,
    hsl(28deg 100% 73%) 100%,
    hsl(28deg 100% 71%) 101%,
    hsl(28deg 100% 69%) 102%,
    hsl(28deg 98% 66%) 101%
  );
}

.btn-great {
  background-color: #fff; /* Light gray */
  color: #0FD45E;
  border: 1px solid #0FD45E;
}

.btn-good {
  background-color: #fff; /* Slightly darker gray */
  color: #95D40F;
  border: 1px solid #95D40F;
}

.btn-average {
  background-color: #fff; /* Even darker gray */
  color: #E9D632;
  border: 1px solid #E9D632;
}

.btn-bad {
  background-color: #fff; /* Dark gray */
  color: #D03301;
  border: 1px solid #D03301;
}

/* Selected styles for each button */
.btn-great-selected {
  background-color: #0FD45E26; /* Blue */
  color: #0FD45E;
  border: 1px solid #0FD45E;
}

.btn-good-selected {
  background-color: #95D40F26; /* Green */
  color: #95D40F;
  border: 1px solid #95D40F;
}

.btn-average-selected {
  background-color: #E9D63226; /* Red */
  color: #E9D632;
  border: 1px solid #E9D632;
}

.btn-bad-selected {
  background-color: #D0330126; /* Yellow */
  color: #D03301;
  border: 1px solid #D03301;
}

/* Common button styles */
.survey-button {
  width: 100px !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 6x;
  border-radius: 4px;
  padding: 6px ;
  transition: background-color 0.3s, color 0.3s;
}

.separator {
  margin-top: 14px;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  height: 1px;
  background-color:  #E8E8E8;
}

.col-cen {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.submit-button {
  background-color: #0116CB;
  font-size: 16px;
  color: #fff !important;  
  border-radius: 6x !important;
  border-radius: 4px !important;
  padding: 20px 48px !important;
}

.submit-button:hover {
  background-color: #142ae3;
}