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


@layer components {
  .text-input {
    @apply mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md;
  }

  .input-label {
    @apply block text-sm font-medium text-gray-700;
  }

  .date-select {
    @apply mt-1 focus:ring-indigo-500 focus:border-indigo-500 block shadow-sm sm:text-sm border-gray-300 rounded-md grow;
  }

  .regular-button {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
  }

  .funding-content {
    @apply flex flex-col h-screen bg-linkBlue-900 overflow-y-auto
  }

  .funding-title {
    @apply text-[23px] md:text-[28px] font-semibold text-white
  }

  .funding-form-group {
    @apply flex flex-col gap-[10px]
  }

  .funding-label {
    @apply  text-lg md:text-[22px] text-white font-medium
  }

  .funding-card-label {
    @apply  text-lg md:text-[22px] text-black font-medium
  }

  .funding-sub-label {
    @apply text-linkGray-700 text-[18px]
  }

  .funding-field {
    @apply w-full bg-transparent block border-0 border-b border-slate-300 outline-none ring-0 bg-linkBlue-900 focus:border-0 focus:border-b focus:ring-0 focus:outline-none px-0 text-lg md:text-[22px] text-white font-medium
  }

  .funding-regular-button {
    @apply w-full inline-flex justify-center py-[16px] px-4 border border-transparent shadow-sm text-lg md:text-[23px] text-white font-medium rounded-md bg-linkBlue hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
  }

  .funding-ghost-button {
    @apply w-full inline-flex justify-center py-[16px] px-4 border-[1px] border-slate-300 text-lg md:text-[23px] rounded-md bg-white hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-300
  }
}

.dragging {
  background-color: #4F46E5;
}

.document-icon {
  content: url(/assets/document-715813d71a9cdfd6266b3f28437db4e3223ecdab89268bd2ddda8e8f40a298c3.svg);
  height: 20px;
  margin-right: 10px;
}
.test {
  color: red;
}
.test2 {
  color: yellow;
}
/* Update Funding Request V2 Calendar Icon */
.funding-date::-webkit-calendar-picker-indicator {
  filter: invert(1);
  border-radius: 4px;
  color: '#FFFFFF';
  cursor: pointer;
}
.tox.readonly .tox-bottom-anchorbar {
  display: none;
}

.mce-content-body h1,
.mce-content-body h2,
.mce-content-body h3,
.mce-content-body p,
.mce-content-body a {
  color: #0f172a;
}

.mce-content-body p {
  font-weight: 400;
}

.mce-content-body.mce-content-readonly h1,
.mce-content-body.mce-content-readonly h2,
.mce-content-body.mce-content-readonly h3,
.mce-content-body.mce-content-readonly p,
.mce-content-body.mce-content-readonly a {
  color: #334155;
}

.mce-content-body.mce-content-readonly p {
  font-weight: 400;
}
/*
 * 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.
 *


 */