.help__container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  transition-duration: 0.3s;
  -moz-transition-property: all;
  opacity: 0; }
  .help__container--show {
    opacity: 1; }
.help__modal {
  padding: 40px;
  background-color: #e5d9ff;
  color: #000;
  border-radius: 3px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
  width: 400px;
  text-align: center;
  position: relative; }
.help__dismiss {
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  text-shadow: 0 0 15px black;
  cursor: pointer; }

.btn-help {
  height: 38px;
  width: 38px;
  border-radius: 5px;
  background-color: #e5d9ff;
  color: #7A40FF;
  font-family: sans-serif;
  font-weight: 900;
  font-size: 20px;
  cursor: pointer;
  display: inline-block;
  border: none;
  outline: none;
  position: relative;
  border: solid 1px #7A40FF;
  transition-duration: 0.3s;
  -moz-transition-property: all; }
  .btn-help--tick-left::before, .btn-help--tick-right::before, .btn-help--tick-up::before, .btn-help--tick-down::before {
    content: '';
    background-color: #e5d9ff;
    height: 20px;
    width: 20px;
    position: absolute;
    transform: rotate(45deg);
    border: solid 1px #7A40FF;
    transition-duration: 0.3s;
    -moz-transition-property: all; }
  .btn-help--tick-left::before {
    top: 7px;
    left: -6px; }
  .btn-help--tick-right::before {
    top: 7px;
    right: -6px; }
  .btn-help--tick-up::before {
    top: -6px;
    right: 7px; }
  .btn-help--tick-down::before {
    bottom: -6px;
    right: 7px; }
  .btn-help--abs-left, .btn-help--abs-top, .btn-help--abs-bottom, .btn-help--abs-right {
    position: absolute; }
  .btn-help--abs-left {
    left: -38px; }
  .btn-help--abs-top {
    top: -38px; }
  .btn-help--abs-bottom {
    bottom: -38px; }
  .btn-help--abs-right {
    right: -38px; }
  .btn-help::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f129';
    background-color: #e5d9ff;
    position: absolute;
    display: block;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 36px;
    border-radius: 5px;
    vertical-align: middle;
    transition-duration: 0.3s;
    -moz-transition-property: all; }
  .btn-help:hover {
    background-color: #7A40FF; }
    .btn-help:hover::before, .btn-help:hover::after {
      background-color: #7A40FF;
      color: white; }

/*# sourceMappingURL=help.css.map */
