#emailbutler {
  #dashboard {
    padding-top: 1rem;
    display: flex;

    .summary {
      list-style: none;
      flex: 1;
      display: flex;
      flex-direction: row;
      padding: .75rem 1rem;
      background: #e5e7eb;
      border-radius: .125rem;
      margin: 0;

      li {
        flex: 1;
        text-align: center;

        a {
          text-decoration: none;
        }
      }

      .status-summary {
        display: flex;
        flex-direction: column;
        color: #000;
        padding: .5rem 0;

        &:hover {
          background: #d1d5db;
        }

        span:nth-of-type(1) {
          margin-bottom: .25rem;
          font-weight: 600;
        }
      }
    }

    .search-form {
      width: 20rem;
      padding-right: 2rem;

      .form-field {
        display: flex;
        flex-direction: column;
        margin-bottom: .5rem;

        label {
          margin-bottom: .25rem;
        }

        input {
          padding: .25rem;
        }
      }
    }

    .messages {
      flex: 1;
      height: 100%;

      // styles for backcompability with gem pagy < 7.0
      .pagination {
        margin-bottom: 1rem;

        .page {
          padding: .25rem .5rem;
          background: #bbf7d0;
          color: #000;

          a {
            color: #000;
          }
        }
      }

      // styles for gem pagy >= 7.0
      nav.pagy.nav {
        margin-bottom: 1rem;

        a {
          padding: .25rem .5rem;
          margin-right: .25rem;
          background: #bbf7d0;
          color: #000;
          border-radius: .125rem;
        }
      }

      table {
        width: 100%;

        thead {
          tr {
            th {
              text-align: left;
              padding: .125rem .25rem;
            }
          }
        }

        tbody {
          tr {
            &:nth-of-type(odd) {
              background: #e5e7eb;
            }

            &:hover {
              background: #d1d5db;
            }

            td {
              padding: .125rem .25rem;

              &.actions {
                display: flex;

                button {
                  &:nth-of-type(1) {
                    margin-right: .5rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .button {
    box-shadow: none;
    border: none;
    cursor: pointer;
    padding: .25rem;
    background: #bbf7d0;

    &:hover {
      background: #86efac;
    }

    &.warning {
      background: #fecaca;

      &:hover {
        background: #fca5a5;
      }
    }
  }
}