@color0: #4aceb0;
@color1: #47b092;
@color2: #43987c;
@color3: rgb(67, 141, 179);
@color4: rgba(218, 22, 45, 0.84);

div.react-mailer-overlay{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.20);
  padding-top: 77px;
  z-index: 3;
  div.react-mailer{
    box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
    margin: 16px;
    padding: 20px;
  }
}
div.react-mailer{
  h3{
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 10px !important;
    color: rgba(0,0,0,0.87) !important;
    font-size: 24px !important;
  }
  .error{
    color: @color4;
  }
  .users-block{
    .react-autosuggest{
      padding-left: 0;
      border-bottom: 1px solid #e2e2e2;
      margin-bottom: 5px;
      #users-autosuggest{
        padding-left: 0 !important;
        padding-bottom: 3px !important;
      }
    }
  }
  .mui-text-field{
    width: 100%;
  }
  textarea{
    font-size: 16px !important;
    border-bottom: 0 !important;
  }
  .pydio-mailer-users{

    .pydio-mailer-user{

      display: inline-block;
      padding: 5px 12px;
      margin-right: 4px;
      margin-bottom: 4px;
      color: white;
      border-radius: 2px;
      font-weight: 500;
      background-color: @color0;
      cursor: pointer;
      &.user-type-email{
        background-color: @color3;
      }
      &:hover{
        background-color: @color4;
      }

      span.avatar{
        color: white;
        display: inline-block;
        margin-right: 5px;
      }
    }
  }
}
