BODY,
BODY.skin-dark {
  --helper-color: #0B0B0F;
  --helper-background: #FFF;
  --helper-border: #F18F34;
  --helper-shadow: rgba(255, 255, 255, .3);
}

BODY.skin-light {
  --helper-color: #F7F7F7;
  --helper-background: #000;
  --helper-border: #F18F34;
  --helper-shadow: rgba(96, 96, 96, .6);
}

#helper {
  position: absolute;
  width: 90vw;
  max-width: 90vw;
  padding: 10px;
  visibility: hidden;
  left: calc((100vw - 90vw) / 2);
  top: -1000px;
  background-color: var(--helper-background);
  color: var(--helper-color);
  border: solid 2px var(--helper-border);
  border-radius: 15px;
  box-shadow: 10px 10px 30px var(--helper-shadow);
}
#helper.show {
  visibility: visible;
  opacity: 0;
  animation: helper-fadeIn 0.5s forwards;
}
#helper.hidden {
  visibility: visible;
  opacity: 1;
  animation: helper-fadeOut 0.5s forwards;
}
#helper > DIV {
  background-color: inherit;
  color: inherit;
}
#helper > DIV.helper-arrow {
  position: absolute;
  border: 20px solid transparent;
  background-color: transparent;
  display: none;
}
#helper > DIV.helper-arrow.show {
  display: block;
}
#helper > DIV#helperArrowTop {
  top: -20px;
  border-bottom-color: var(--helper-border);
  border-top: 0;
}
#helper > DIV#helperArrowBottom {
  bottom: -20px;
  border-top-color: var(--helper-border);
  border-bottom: 0;
}
#helper > DIV#helperBody > #helperIcon {
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: cover;
  display: none;
  margin-right: 10px;
  margin-bottom: 5px;
}
#helper > DIV#helperBody > #helperIcon.show {
  display: inline-block;
}
#helper > DIV#helperBody > #helperIcon.bell {
  background-image: url(/assets/skins/common/helper/bell.svg);
}
#helper > DIV#helperBody > #helperIcon.exclamation {
  background-image: url(/assets/skins/common/helper/exclamation.svg);
}
#helper > DIV#helperBody > #helperIcon.information {
  background-image: url(/assets/skins/common/helper/information.svg);
}
#helper > DIV#helperBody > #helperIcon.question {
  background-image: url(/assets/skins/common/helper/question.svg);
}
#helper > DIV#helperBody > #helperIcon.lightbulb {
  background-image: url(/assets/skins/common/helper/lightbulb.svg);
}
#helper > DIV#helperBody > #helperText {
  background-color: transparent;
  color: inherit;
}
#helper > DIV#helperBody > #helperText > SPAN {
  background-color: transparent;
  color: inherit;
}
#helper > DIV#helperBody > #helperText > SPAN.orange {
  color: #F18F34;
}
#helper > DIV#helperBody > #helperText A {
  color: inherit;
}
#helper > DIV#helperFooter {
  display: none;
  margin-top: 20px;
  padding-top: 10px;
  border-top: solid 1px var(--helper-border);
  flex-direction: row-reverse;
}
#helper > DIV#helperFooter.show {
  display: flex;
}
#helper > DIV#helperFooter > * {
  display: none;
}
#helper > DIV#helperFooter > *.show {
  display: inline;
}
#helper > DIV#helperFooter > BUTTON {
  margin-left: 10px;
}
#helper > DIV#helperFooter > LABEL {
  color: var(--helper-color);
  flex-grow: 1;
}
#helper > DIV#helperFooter > LABEL > IMG {
  width: 25px;
  height: 25px;
  margin-right: 5px;
  margin-left: 5px;
  vertical-align: middle;
}

@keyframes helper-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes helper-fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.helper-blink {
  animation: helper-blink-animation 1300ms ease-in-out infinite;
}

@keyframes helper-blink-animation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}