@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .simple-form-wrapper {
    @apply mb-3;
  }

  .simple-form-input {
    @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
  }

  .simple-form-input--is-invalid {
    @apply pr-10 ring-red-300 placeholder:text-red-300 focus:ring-red-500;
  }

  .simple-form-label {
    @apply block text-sm font-medium leading-6 text-gray-900;
  }

  .simple-form-error {
    @apply mt-2 text-sm text-red-600;
  }

  .btn {
    @apply block rounded-md bg-white px-3 py-2 text-center text-sm font-semibold text-gray-600 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-100 cursor-pointer;
  }

  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-500 focus-visible:outline-primary-500;
  }

  [data-popover-target="card"] {
    @apply max-w-xs rounded shadow-lg bg-gray-50 absolute mt-3 p-2 font-normal text-gray-800 text-xs z-50;
  }

  [x-cloak] {
    @apply hidden;
  }
}
.diff{
  overflow:auto;
}

.diff ul{
  background:#fff;
  overflow:auto;
  font-size:13px;
  list-style:none;
  margin:0;
  padding:0;
  display:table;
  width:100%;
}

.diff del, .diff ins{
  display:block;
  text-decoration:none;
}

.diff li{
  padding: 0;
  display: table-row;
  margin: 0;
  height:1em;
}

.diff li.ins{
  background: #F0FDF4;
  color: #14532D;
}

.diff li.del{
  background: #fee2e2;
  color: #b91c1c
}

/* .diff li:hover{background:#ffc} */
/* try 'whitespace:pre;  ' if you don't want lines to wrap */
.diff del, .diff ins, .diff span{
  white-space:pre-wrap;
}

.diff del strong{
  font-weight:normal;
  background: #fca5a5;
}

.diff ins strong{
  font-weight:normal;

  background:#86efac;
}

.diff li.diff-comment {
  display: none;
}

.diff li.diff-block-info {
  background: none repeat scroll 0 0 gray;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */