.form-block {
  background: #fff;
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 15px;
  position: relative;

  input[type="text"] {
    width: 100%;
    margin-bottom: 10px;
  }

  textarea {
    width: 100%;
    height: 150px;
  }

  .checkbox-group {
    margin-bottom: 10px;

    label {
      margin-right: 15px;
    }
  }

  .hidden {
    display: none;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;

    th {
      background: #f5f5f5;
      text-align: center;
      vertical-align: middle;

    }

    th, td {
      border: 1px solid #ccc;
      padding: 5px;
    }

    th {
      background: #f5f5f5;
    }
  }
}

.big-letter {
  text-transform: uppercase;
}

.hz-discord-bot-tiny-message-ctrl {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-style: italic;

  li {
    position: relative;
    background: #ddd;
    padding: 3px;
    color: #3b3b3b;
    cursor: pointer;

    div {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateY(-110%) translateX(-50%);
      padding: 3px 5px;
      background: rgba(43, 43, 43, 1);
      color: #fff;
      display: none;

      &:before {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(-2px);
        border-width: 5px;
        border-style: solid;
        border-color: rgba(43, 43, 43, 1) transparent transparent transparent;
      }
    }

    &:hover {
      > div {
        display: block;
      }
    }
  }
}

.alert-container {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  background: rgba(43, 43, 43, 1);
  z-index: 9999;
  color: #fff;
  padding: 10px 10px;
  display: none;
}

.debug,.interactions-url{
  background: #ddd;
  padding: 3px;
  color: #3b3b3b;
  font-style: italic;
}

i.command{
  background: #ddd;
  padding: 3px;
  color: #3b3b3b;
  font-style: italic;
  font-weight: bold;
}