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

html {
  font-family: "Inter", sans-serif;
}

[data-column="country"] {
  white-space: nowrap;
}

.code {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #ea580c;
}

.status-tag {
  @apply mb-0.5;
}

.font-montagu-slab {
  font-family: "Montagu Slab", serif;
}

.font-poppins {
  font-family: "Poppins", sans-serif;
}

.has-many-fields ol {
  @apply grid grid-cols-2 gap-x-4;
}

.has-many-fields-title {
  @apply mt-4 border-none mb-0;
}

.has-many-add {
  @apply !mt-4;
}

h1.ce-header {
  @apply text-3xl font-bold;
}
h2.ce-header {
  @apply text-2xl font-semibold;
}
h3.ce-header {
  @apply text-xl font-semibold;
}
h4.ce-header {
  @apply text-lg font-semibold;
}
h5.ce-header {
  @apply text-base font-semibold;
}
h6.ce-header {
  @apply text-base font-semibold;
}

.editorjs-wrapper :where([type="submit"], [type="button"], button) {
  padding: initial !important;
  background: initial !important;
  color: initial !important;
  border-radius: initial !important;
  font-weight: initial !important;
}

.dark .ce-toolbar__settings-btn,
.dark .ce-toolbar__plus {
  @apply text-white;
}

.dark .cdx-search-field__input {
  @apply text-black;
}

.dark .cdx-notify {
  @apply text-black;
}

.dark .ce-toolbar__settings-btn:hover,
.dark .ce-toolbar__plus:hover {
  @apply text-black;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .label {
    @apply block mb-2 text-sm font-medium text-white;
  }
  .mandatory {
    @apply after:content-['*'] after:ml-0.5 after:text-blue-500;
  }
  .input {
    @apply border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500;
  }
  .btn-primary {
    @apply text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-blue-600 hover:bg-blue-700 focus:ring-blue-800 transition ease-in-out cursor-pointer;
  }
  .btn-secondary {
    @apply px-5 py-2.5 text-sm font-medium text-gray-400 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none  focus:ring-4 focus:ring-gray-700 hover:text-white hover:bg-gray-700 transition ease-in-out cursor-pointer;
  }
  .checkbox {
    @apply w-4 h-4 text-blue-600 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-600;
  }
  .table-label {
    @apply p-4 text-xs font-semibold text-gray-300 uppercase;
  }
  .table-data {
    @apply p-4 font-light text-white bg-gray-900;
  }
  .table-row {
    @apply bg-gray-800 border-b border-gray-700/50;
  }
  .section-title {
    @apply text-xl font-semibold tracking-tight text-gray-100 mb-6 font-poppins;
  }
  .btn-flash {
    @apply ml-1 -my-1.5 rounded-lg focus:ring-2 focus:ring-gray-300 p-2.5 inline-flex items-center justify-center h-7 w-7 text-gray-200 hover:text-white bg-blue-600 hover:bg-blue-500;
  }
  .flash {
    @apply fixed left-0 right-0 z-10 flex items-center w-full max-w-xs px-3 py-4 mx-auto text-white bg-gray-800/70 border border-gray-600/50 backdrop-blur rounded-lg shadow-lg top-7;
  }
  .flash_message {
    @apply text-sm font-normal whitespace-break-spaces mr-auto ml-1;
  }
  .navbar-item {
    @apply block px-3 py-2 text-sm font-medium text-white transition ease-in-out rounded md:border-0 md:p-0 md:hover:text-blue-600 hover:bg-gray-700 hover:text-white md:hover:bg-transparent;
  }
  .form-label {
    @apply block mb-2 text-sm font-medium text-white;
  }
  .form-input {
    @apply border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.animate-marquee {
  animation: marquee 10s linear infinite;
}
/* General content styles */
.tinymce-content body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

/* Headings */
.tinymce-content h1 {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.tinymce-content h2 {
  font-size: 1.75em;
  font-weight: bold;
  margin-bottom: 0.75em;
}

.tinymce-content h3 {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 0.75em;
}

.tinymce-content h4 {
  font-size: 1.25em;
  font-weight: bold;
  margin-bottom: 0.75em;
}

.tinymce-content h5 {
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 0.75em;
}

.tinymce-content h6 {
  font-size: 0.875em;
  font-weight: bold;
  margin-bottom: 0.75em;
}

/* Paragraph */
.tinymce-content p {
  margin: 1em 0;
}

/* Blockquotes */
.tinymce-content blockquote {
  margin: 1em 40px;
  padding: 0.5em 10px;
  border-left: 4px solid #ccc;
  color: #555;
  font-style: italic;
}

/* Lists */
.tinymce-content ul,
.tinymce-content ol {
  margin: 1em 0;
  padding-left: 40px;
}

.tinymce-content ul li,
.tinymce-content ol li {
  margin-bottom: 0.5em;
}

/* Links */
.tinymce-content a {
  color: #007bff;
  text-decoration: none;
}

.tinymce-content a:hover {
  text-decoration: underline;
}

/* Code and Pre */
.tinymce-content code {
  background-color: #f5f5f5;
  padding: 2px 4px;
  font-size: 0.875em;
  color: #d63384;
}

.tinymce-content pre {
  background-color: #f5f5f5;
  padding: 10px;
  overflow: auto;
  font-size: 0.875em;
  line-height: 1.4;
}

/* Tables */
.tinymce-content table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1em;
}

.tinymce-content table th,
.tinymce-content table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.tinymce-content table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* Images */
.tinymce-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1em;
}
/*
 * 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.
 *



 */