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

html {
  font-size: 15px;
}

.formatted-text p, .formatted-text ul, .formatted-text ol, .formatted-text h1, .formatted-text h2, .formatted-text h3, .formatted-text h4, .formatted-text h5, .formatted-text h6 {
  @apply mb-3 text-neutral-600;
}

.formatted-text h2,
.formatted-text h3,
.formatted-text h4,
.formatted-text h5,
.formatted-text h6 {
  @apply mt-6;
}

.formatted-text h2 {
  @apply text-xl font-semibold text-neutral-900;
}

.formatted-text h3 {
  @apply font-medium text-neutral-900;
}

.formatted-text h4 {
  @apply font-semibold text-neutral-900;
}

.formatted-text h5 {
  @apply font-semibold text-neutral-900;
}

.formatted-text h6 {
  @apply text-sm font-semibold;
}

.formatted-text ul {
  @apply list-disc list-outside ms-8;
}

.formatted-text ol {
  @apply list-decimal list-outside ms-8;
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * 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.
 *


 */

 .translation_missing {
  background: rgb(239 68 68 / 1);
  border-radius: 0.25rem;
  padding: 0.25rem;
}

 .hiddenCanvasElement {
  display: none;
 }

 .pdf-page {
  position: relative;
 }

.textLayer{
  position:absolute;
  text-align:initial;
  inset:0;
  overflow:hidden;
  opacity:0.25;
  line-height:1;
  -webkit-text-size-adjust:none;
     -moz-text-size-adjust:none;
          text-size-adjust:none;
  forced-color-adjust:none;
  transform-origin:0 0;
  z-index:2;
}

.textLayer :is(span, br){
    color:transparent;
    position:absolute;
    white-space:pre;
    cursor:text;
    transform-origin:0% 0%;
  }

.textLayer span.markedContent{
    top:0;
    height:0;
  }

.textLayer .highlight{
    --highlight-bg-color:rgb(180 0 170);
    --highlight-selected-bg-color:rgb(0 100 0);

    margin:-1px;
    padding:1px;
    background-color:var(--highlight-bg-color);
    border-radius:4px;
  }

@media screen and (forced-colors: active){
    .textLayer .highlight{
          --highlight-bg-color:Highlight;
          --highlight-selected-bg-color:ButtonText;
      }
    }

.textLayer .highlight.appended{
      position:initial;
    }

.textLayer .highlight.begin{
      border-radius:4px 0 0 4px;
    }

.textLayer .highlight.end{
      border-radius:0 4px 4px 0;
    }

.textLayer .highlight.middle{
      border-radius:0;
    }

.textLayer .highlight.selected{
      background-color:var(--highlight-selected-bg-color);
    }

.textLayer ::-moz-selection{
    background:blue;
    background:AccentColor;
  }

.textLayer ::selection{
    background:blue;
    background:AccentColor;
  }

.textLayer br::-moz-selection{
    background:transparent;
  }

.textLayer br::selection{
    background:transparent;
  }

.textLayer .endOfContent{
    display:block;
    position:absolute;
    inset:100% 0 0;
    z-index:-1;
    cursor:default;
    -webkit-user-select:none;
       -moz-user-select:none;
            user-select:none;
  }

.textLayer .endOfContent.active{
      top:0;
    }