BODY,
BODY.skin-dark {
  --survey-color: #0B0B0F;
  --survey-background: #FFF;
  --survey-border: #F18F34;
  --survey-shadow: rgba(255, 255, 255, .3);
  --survey-start-empty: url(/assets/skins/light/icons/star-empty.svg);
  --survey-start-fill: url(/assets/skins/light/icons/star-fill.svg);
}

BODY.skin-light {
  --survey-color: #F7F7F7;
  --survey-background: #000;
  --survey-border: #F18F34;
  --survey-shadow: rgba(96, 96, 96, .6);
  --survey-start-empty: url(/assets/skins/dark/icons/star-empty.svg);
  --survey-start-fill: url(/assets/skins/dark/icons/star-fill.svg);
}

#survey {
  position: absolute;
  width: 90vw;
  max-width: 90vw;
  padding: 10px;
  visibility: hidden;
  left: calc((100vw - 90vw) / 2);
  top: 25vh;
  background-color: var(--survey-background);
  color: var(--survey-color);
  border: solid 2px var(--survey-border);
  border-radius: 15px;
  box-shadow: 10px 10px 30px var(--survey-shadow);
}
#survey > DIV {
  background-color: inherit;
  color: inherit;
}
#survey > DIV > DIV {
  background-color: inherit;
  color: inherit;
}
#survey > DIV > DIV.body > DIV {
  background-color: transparent;
  color: inherit;
}
#survey > DIV > DIV.body > DIV > SPAN.orange {
  color: #F18F34;
}
#survey > DIV > DIV.body > DIV.title {
  text-align: center;
  margin-bottom: 20px;
  color: #F18F34;
}
#survey > DIV > DIV.body > DIV.text {
  text-align: center;
  margin-bottom: 20px;
}
#survey > DIV > DIV.footer {
  margin-top: 20px;
  padding-top: 10px;
  border-top: solid 1px var(--survey-border);
  text-align: center;
}
#survey > DIV.surveyScore {
  display: block;
}
#survey > DIV.surveyScore .score > DIV:first-child {
  display: flex;
  justify-content: space-around;
}
#survey > DIV.surveyScore .score > DIV:first-child > BUTTON {
  background-image: var(--survey-start-empty);
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: 10px 10px;
  transition: background-image 0.5s ease-in-out, border-color 0.5s ease-in-out;
}
#survey > DIV.surveyScore .score > DIV:last-child {
  display: flex;
  justify-content: space-between;
}
#survey > DIV.surveyScore .score > DIV:last-child > IMG {
  height: 25px;
  width: 25px;
  margin: 0px 5vw;
}
#survey > DIV.surveyScore .score > DIV:last-child > SPAN {
  text-align: center;
  color: #F18F34;
  opacity: 0;
  flex-grow: 1;
  transition: opacity 0.5s ease-in-out;
}
#survey > DIV.surveyScore .score.end-1 .btn[data-value="1"], #survey > DIV.surveyScore .score.end-2 .btn[data-value="1"], #survey > DIV.surveyScore .score.end-2 .btn[data-value="2"], #survey > DIV.surveyScore .score.end-3 .btn[data-value="1"], #survey > DIV.surveyScore .score.end-3 .btn[data-value="2"], #survey > DIV.surveyScore .score.end-3 .btn[data-value="3"], #survey > DIV.surveyScore .score.end-4 .btn[data-value="1"], #survey > DIV.surveyScore .score.end-4 .btn[data-value="2"], #survey > DIV.surveyScore .score.end-4 .btn[data-value="3"], #survey > DIV.surveyScore .score.end-4 .btn[data-value="4"], #survey > DIV.surveyScore .score.end-5 .btn[data-value="1"], #survey > DIV.surveyScore .score.end-5 .btn[data-value="2"], #survey > DIV.surveyScore .score.end-5 .btn[data-value="3"], #survey > DIV.surveyScore .score.end-5 .btn[data-value="4"], #survey > DIV.surveyScore .score.end-5 .btn[data-value="5"] {
  background-image: var(--survey-start-fill);
}
#survey > DIV.surveyComment {
  display: none;
}
#survey > DIV.surveyComment > DIV.body {
  margin-bottom: 10px;
}
#survey > DIV.surveyComment > DIV.body > DIV:last-child {
  overflow: hidden;
  height: 0px;
  text-align: center;
  color: #F18F34;
  opacity: 0;
  flex-grow: 1;
  transition: opacity 0.5s ease-in-out;
}
#survey.show {
  visibility: visible;
  opacity: 0;
  animation: survey-fadeIn 0.5s forwards;
}
#survey.hidden {
  visibility: visible;
  opacity: 1;
  animation: survey-fadeOut 0.5s forwards;
}
#survey.thank-score > DIV.surveyScore > DIV.body {
  margin-bottom: 10px;
}
#survey.thank-score > DIV.surveyScore > DIV.body > DIV > DIV#surveyScoreThank > IMG {
  display: none;
}
#survey.thank-score > DIV.surveyScore > DIV.body > DIV > DIV#surveyScoreThank > SPAN {
  opacity: 1;
}
#survey.thank-score > DIV.surveyScore > DIV.footer {
  display: none;
}
#survey.comment > DIV.surveyScore {
  display: none;
}
#survey.comment > DIV.surveyComment {
  display: block;
}
#survey.thank-comment > DIV.surveyComment > DIV.body {
  margin-bottom: 10px;
}
#survey.thank-comment > DIV.surveyComment > DIV.body > DIV.form-group {
  display: none;
}
#survey.thank-comment > DIV.surveyComment > DIV.body > DIV:last-child {
  height: auto;
  opacity: 1;
}
#survey.thank-comment > DIV.surveyComment > DIV.footer {
  display: none;
}

@keyframes survey-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes survey-fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}