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

@layer base {
  :root {
    --color-charcoal: 31 40 55;
  }

  @font-face {
    src: url(/assets/gilroy-bold-efc43ab20eaf92c32f0b592225cb0b6adf2813adc9331de489c20da63448a66c.ttf) format('truetype');
    font-family: 'Gilroy Bold';
    font-style: normal;
  }

  .font-logo {
    font-family: 'Gilroy Bold';
    font-size: 44px;
    line-height: 44px;
  }

  .font-regular-1 {
    font-family: 'Inter var';
    font-size: 10px;
    line-height: 20px;
  }

  .font-regular-2 {
    font-family: 'Inter var';
    font-size: 12px;
    line-height: 20px;
  }

  .font-regular-3 {
    font-family: 'Inter var';
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
  }

  .font-regular-4 {
    font-family: 'Inter var';
    font-size: 16px;
    line-height: 24px;
    font-style: normal;
    font-weight: 500;
  }

  .font-regular-5 {
    font-family: 'Inter var';
    font-size: 18px;
    line-height: 32px;
  }

  .font-regular-6 {
    font-family: 'Inter var';
    font-size: 20px;
    line-height: 36px;
    font-weight: 400;
  }

  .font-regular-7 {
    font-family: 'Inter var';
    font-size: 28px;
    line-height: 36px;
  }

  .font-regular-8 {
    font-family: 'Inter var';
    font-size: 32px;
    line-height: 36px;
  }

  .font-regular-9 {
    font-family: 'Inter var';
    font-size: 36px;
    line-height: 36px;
  }

  .font-bold-1 {
    font-family: 'Inter var';
    font-weight: bold;
    font-size: 10px;
    line-height: 20px;
  }

  .font-bold-2 {
    font-family: 'Inter var';
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
  }

  .font-bold-3 {
    font-family: 'Inter var';
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
  }

  .font-bold-4 {
    font-family: 'Inter var';
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
  }

  .font-bold-5 {
    font-family: 'Inter var';
    font-weight: bold;
    font-size: 18px;
    line-height: 32px;
  }

  .font-bold-6 {
    font-family: 'Inter var';
    font-size: 20px;
    line-height: 36px;
    font-weight: 700;
  }

  .font-bold-6-5 {
    font-family: 'Inter var';
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
  }

  .font-bold-7 {
    font-family: 'Inter var';
    font-weight: bold;
    font-size: 28px;
    line-height: 36px;
  }

  .font-bold-8 {
    font-family: 'Inter var';
    font-weight: bold;
    font-size: 36px;
    line-height: 36px;
  }
}

.borders {
  @apply border border-black;
}

@layer components {
  #main-content-area {
    @apply bg-gray-100;
  }

  .btn {
    @apply font-regular-4 rounded-md text-white py-2 px-4 min-w-[148px];
  }

  .btn-primary {
    @apply btn bg-orange-500 hover:bg-orange-700 text-center disabled:btn-disable disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply btn bg-white hover:bg-gray-50;
    @apply text-gray-700;
  }

  .btn-disable {
    @apply btn bg-gray-300 text-white;
  }

  .btn-alert {
    @apply btn bg-red-600 hover:bg-red-500;
  }

  .link {
    @apply text-gray-500 no-underline;
  }

  .link-active {
    @apply link font-bold;
  }

  .input {
    @apply block w-full rounded-md py-1.5;
    @apply border-0 border-gray-300  text-gray-900 ;
    @apply ring-1 ring-inset ring-gray-300;
    @apply sm:text-sm sm:leading-6;
  }

  .input-primary {
    @apply input;
    @apply focus:ring-orange-400;
  }

  .label {
    @apply font-bold-2 w-fit font-semibold rounded-lg inline-flex justify-center py-1 px-2 my-auto line-clamp-1;
  }

  .flash {
    @apply flex p-4 mb-4 border-l-4 w-full;
  }

  .flash-dismiss {
    @apply ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8;
  }

  .flash-message {
    @apply ml-3 mr-2 text-sm font-medium text-left;
  }

  .info {
    @apply text-blue-800 border-blue-300 bg-blue-50;
  }

  .info button.flash-dismiss {
    @apply bg-blue-50 text-blue-500 focus:ring-blue-400 hover:bg-blue-200;
  }

  .notice {
    @apply text-green-800 border-green-300 bg-green-50;
  }

  .notice button.flash-dismiss {
    @apply bg-green-50 text-green-500 focus:ring-green-400 hover:bg-green-200;
  }

  .alert {
    @apply text-red-800 border-red-300 bg-red-50;
  }

  .alert button.flash-dismiss {
    @apply bg-red-50 text-red-500 focus:ring-red-400 hover:bg-red-200;
  }

  .navbar-icon {
    @apply p-3 border text-gray-300 border-gray-500 rounded-md transition-all
      hover:bg-gray-300/[.05];
  }

  .navbar-icon-active {
    @apply navbar-icon text-orange-500 border-orange-500 stroke-orange-500 transition-all
      hover:bg-orange-700/[.15] hover:stroke-orange-700;
  }

  .navbar-button {
    @apply py-2 px-4 text-gray-300 bg-gray-600 rounded flex flex-row items-center font-regular-4 font-normal
      hover:bg-gray-300/[.09];
  }

  .navbar-button-active {
    @apply py-2 px-4 text-orange-500 bg-gray-600 border border-orange-500 rounded flex flex-row items-center
      font-regular-4 font-normal hover:bg-orange-700/[.15];
  }

  input[type="search"]::-webkit-search-cancel-button {
    display: none;
  }

  .clear-search {
    @apply text-gray-500 absolute cursor-pointer inset-y-0 right-0 mr-3;
  }

  @media print {
    * {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      color-adjust: exact !important;
    }
  }
}
/*
 * 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.
 *


 */