@import "./serviceturk";
@import "./components/base.css";
@import "./components/actiontext.css";
@import "./components/alert.css";
@import "./components/animation.css";
@import "./components/announcements.css";
@import "./components/avatars.css";
@import "./components/buttons.css";
@import "./components/code.css";
@import "./components/connected_accounts.css";
@import "./components/direct_uploads.css";
@import "./components/docs.css";
@import "./components/forms.css";
@import "./components/icons.css";
@import "./components/iframe.css";
@import "./components/nav.css";
@import "./components/pagination.css";
@import "./components/tabs.css";
@import "./components/trix.css";
@import "./components/typography.css";
@import "./components/util.css";

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

@layer components {
  .label {
    @apply text-xs uppercase m-0 ml-2;
  }

  .text_field {
    @apply border border-gray-300 rounded-full text-gray-600 h-10 pl-5 pr-10 bg-white hover:border-gray-400 focus:outline-none appearance-none;
  }

  .text_area {
    @apply border border-gray-300 rounded-2xl text-gray-600 min-h-[2rem] pl-5 pr-10 bg-white hover:border-gray-400 focus:outline-none appearance-none;
  }

  .datepicker:not(.datepicker-dropdown) {
      @apply border border-gray-300 rounded-full text-gray-600 h-10 pl-5 pr-10 bg-white hover:border-gray-400 focus:outline-none shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 appearance-none;
  }

  .select {
    @apply border border-gray-300 rounded-full text-gray-600 h-10 pl-5 pr-10 bg-white hover:border-gray-400 focus:outline-none appearance-none;
  }

  .sidebar-section {
    @apply flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-white hover:text-white hover:bg-primary-700 focus:outline-none focus:bg-primary-700 active:bg-primary-700 active:text-white transition ease-in-out duration-150;
  }
  
  .sidebar-section-svg {
    @apply mr-4 h-6 w-6 text-gray-300 group-hover:text-white group-focus:text-white transition ease-in-out duration-150;
  }
  
  .sidebar-collapsible-arrow-svg {
    @apply ml-auto h-5 w-5 transform group-hover:text-gray-400 group-focus:text-gray-400 transition-colors ease-in-out duration-150;
  }
  
  .sidebar-report-link {
    @apply w-full flex items-center pl-5 pr-2 py-2 text-xs leading-5 font-medium rounded-md text-white hover:text-white hover:bg-primary-700 focus:outline-none focus:bg-white active:bg-white active:text-primary-700;
  }
  
  .sidebar-report-link-active {
    @apply text-primary-700 bg-white hover:text-primary-700 hover:bg-yellow-300;
  }
  
  
  .active-content {
    @apply mt-8 px-4 py-4 grid gap-4;
  }
  .active-content-col-1 {
    @apply sm:grid-cols-1;
  }
  .active-content-col-2 {
    @apply md:grid-cols-2 sm:grid-cols-1;
  }
  .active-content-col-6 {
    @apply md:grid-cols-6 grid-cols-1;
  }
  
  .report-div {
    @apply my-4 pb-1 border-b border-gray-200 space-y-2;
  }
  
  .report-div-new {
    @apply pb-1 border-gray-200 space-y-2;
  }
  
  .report-title {
    @apply text-xl leading-6 font-medium text-gray-900;
  }
  .report-description {
    @apply max-w-4xl text-sm leading-5 text-gray-500;
  }
  
  /* overwrite the avatar background color */
  .avatar {
    @apply bg-secondary-500;
  }
  
  /* overwrite the button colors earlier specified in button.css */
  .btn-primary {
    @apply bg-primary-600 text-white;
  
    &:hover,
    &:focus {
      @apply bg-primary-500 text-white;
    }
  
    &.outline {
      @apply bg-transparent border border-primary-500 text-primary-500 shadow-none;
  
      &:hover,
      &:focus {
        @apply bg-primary-500 text-white;
      }
    }
  }
  
  .btn-secondary {
    @apply bg-secondary-700 text-white;
  
    &:hover,
    &:focus {
      @apply bg-secondary-600 text-white;
    }
  
    &.outline {
      @apply bg-transparent border border-secondary-700 text-secondary-700 shadow-none;
  
      &:hover,
      &:focus {
        @apply bg-secondary-600 text-white;
      }
    }
  }
  
  .btn-tertiary {
    @apply bg-tertiary-800 text-white;
  
    &:hover,
    &:focus {
      @apply bg-tertiary-500 text-white;
    }
  
    &.outline {
      @apply bg-transparent border border-tertiary-500 text-tertiary-500 shadow-none;
  
      &:hover,
      &:focus {
        @apply bg-tertiary-500 text-white;
      }
    }
  }
  
  .apikey-valid {
    @apply bg-green-700;
  }

  .apikey-invalid {
    @apply bg-red-700;
  }

  .apikey-checking {
    @apply bg-yellow-500;
  }
  
  .category {
    @apply text-primary-600 bg-white hover:bg-primary-50;
  }
  
  .category.active {
    @apply text-white bg-primary-600 hover:bg-primary-400;
  }
  
  .glass {
    @apply relative before:absolute before:z-[-1] before:bg-white before:shadow-md before:inset-0 before:w-full before:h-full;
  }

  .safari .glass {
    @apply before:backdrop-blur-md before:bg-transparent before:shadow-none;
  }
}
/* We need to override trix.css’s image gallery styles to accommodate the
  <action-text-attachment> element we wrap around attachments. Otherwise,
  images in galleries will be squished by the max-width: 33%; rule.
*/

.link_to_embed {
  white-space: normal;

  @apply mt-4 md:ml-4;

  [data-behavior='embed_url'] {
    @apply block md:ml-3 md:inline-block;
  }
}

.trix-content {
  img {
    display: inline-block;
    max-width: 100%;
    height: auto;
  }

  .attachment-gallery {
    > action-text-attachment,
    > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }

    &.attachment-gallery--2,
    &.attachment-gallery--4 {
      > action-text-attachment,
      > .attachment {
        flex-basis: 50%;
        max-width: 50%;
      }
    }
  }

  .embed {
    display: inline-block;
    line-height: 1;
    margin: 1em 0 !important;
    padding: 0 !important;
    width: 100%;
  }

  iframe, twitter-widget {
    display: inline-block !important;
  }
}

/* Trix attachment formatting */
.attachment--preview {
  margin: 0.6em 0;
  text-align: center;
  width: 100%;
}

/* Tribute styles */
.tribute-container {
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 0 4px rgba(0,0,0,0.1), 0 5px 20px rgba(0,0,0,0.05);

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  li {
    background: #fff;
    padding: 0.2em 1em;
    min-width: 15em;
    max-width: 100%;
  }

  .highlight {
    @apply bg-blue-500;
    color: #fff;

    span {
      font-weight: bold;
    }
  }
}

/* Tweet embeds */
blockquote.twitter-tweet {
    display: inline-block;
    font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 16px;
    border-color: #eee #ddd #bbb;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    margin: 10px 5px;
    padding: 0 16px 16px;
    max-width: 468px
}

blockquote.twitter-tweet p {
    font-size: 16px;
    font-weight: normal;
    line-height: 20px
}

blockquote.twitter-tweet a {
    color: inherit;
    font-weight: normal;
    text-decoration: none;
    outline: 0 none
}

blockquote.twitter-tweet a:hover,blockquote.twitter-tweet a:focus {
    text-decoration: underline
}

blockquote.twitter-tweet {
    position: relative;
    background: white;
    padding: 72px 20px 28px !important;
    box-shadow: none;
    border: 1px solid #e1e8ed;
    border-radius: 4px;
    margin: 0;
    font-style: normal;
    text-align: left;
    width: 500px;
    max-width: 100%
}

@media (max-width: 369px) {
    blockquote.twitter-tweet {
        padding:60px 17.5px 21.5px !important
    }
}

blockquote.twitter-tweet:before {
    content: 'Follow';
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 5.5px 12px 6.5px 33px;
    background: url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18.89 7.012c.808-.496 1.343-1.173 1.605-2.034-.786.417-1.569.703-2.351.861-.703-.756-1.593-1.14-2.66-1.14-1.043 0-1.924.366-2.643 1.078-.715.717-1.076 1.588-1.076 2.605 0 .309.039.585.117.819-3.076-.105-5.622-1.381-7.628-3.837-.34.601-.51 1.213-.51 1.846 0 1.301.549 2.332 1.645 3.089-.625-.053-1.176-.211-1.645-.47 0 .929.273 1.705.82 2.388.549.676 1.254 1.107 2.115 1.291-.312.08-.641.118-.979.118-.312 0-.533-.026-.664-.083.23.757.664 1.371 1.291 1.841.625.472 1.344.721 2.152.743-1.332 1.045-2.855 1.562-4.578 1.562-.422 0-.721-.006-.902-.038 1.697 1.102 3.586 1.649 5.676 1.649 2.139 0 4.029-.542 5.674-1.626 1.645-1.078 2.859-2.408 3.639-3.974.784-1.564 1.172-3.192 1.172-4.892v-.468c.758-.57 1.371-1.212 1.84-1.921-.68.293-1.383.492-2.11.593z' fill='%23ccc'/%3E%3C/svg%3E") 9px center no-repeat;
    background-size: 21px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #ccc;
    font-size: 14px
}

@media (max-width: 369px) {
    blockquote.twitter-tweet:before {
        display:none
    }
}

blockquote.twitter-tweet:after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    width: 36px;
    height: 36px;
    background: #eee url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 12c2.21 0 4-1.795 4-4 0-2.21-1.79-4-4-4s-4 1.79-4 4c0 2.205 1.79 4 4 4zm0 2c-2.665 0-8 1.335-8 4v2h16v-2c0-2.665-5.335-4-8-4z' fill='%23444'/%3E%3C/svg%3E") center center no-repeat;
    border-radius: 4px
}

@media (max-width: 369px) {
    blockquote.twitter-tweet:after {
        top:17.5px;
        left: 17.5px
    }
}

blockquote.twitter-tweet p {
    white-space: pre-wrap;
    margin: 0 0 28px
}

@media (max-width: 369px) {
    blockquote.twitter-tweet p {
        font-size:14px;
        margin-bottom: 16px
    }
}

blockquote.twitter-tweet a {
    border: 0;
    box-shadow: none;
    color: #2b7bb9
}

blockquote.twitter-tweet>a {
    color: #888
}
.alert {
  @apply bg-gray-100 text-gray-700 p-4 rounded text-sm font-sans;

  svg {
    @apply text-gray-400;
  }

  &.alert-info {
    @apply bg-blue-50 text-blue-700;

    svg {
      @apply text-blue-400;
    }
  }

  &.alert-success {
    @apply bg-green-50 text-green-700;

    svg {
      @apply text-green-400;
    }
  }

  &.alert-error {
    @apply bg-red-50 text-red-600;

    svg {
      @apply text-red-400;
    }
  }

  &.alert-warning {
    @apply bg-yellow-50 text-yellow-600;

    svg {
      @apply text-yellow-400;
    }
  }

  a {
    @apply font-semibold;
  }
}

.notice {
  @apply flex items-center text-sm justify-center font-medium p-4;

  &.notice-info {
    @apply bg-blue-50 text-blue-700;

    svg {
      @apply text-blue-400;
    }
  }

  &.notice-success {
    @apply bg-green-50 text-green-700;

    svg {
      @apply text-green-400;
    }
  }

  &.notice-error {
    @apply bg-red-50 text-red-700;

    svg {
      @apply text-red-400;
    }
  }

  &.notice-warning {
    @apply bg-yellow-50 text-yellow-700;

    svg {
      @apply text-yellow-400;
    }
  }
}
.animated {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
.announcement-new {
  @apply bg-blue-100 text-blue-600;
}

.announcement-fix {
  @apply bg-red-100 text-red-600;
}

.announcement-update {
  @apply bg-green-100 text-green-600;
}

.announcement-improvement {
  @apply bg-purple-100 text-purple-600;
}

.unread-announcements span:before {
  @apply inline-block w-2 h-2 mr-1.5 rounded-full bg-red-500 content-[''];
}
.avatar {
  font-size: 13px;
  font-weight: 600;
  position: relative;
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  min-width: 14px;
  color: #fff;
  align-items: center;
  justify-content: center;

  .avatar-small {
    position: absolute;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    bottom: 0;
    right: 0;
    box-shadow: 0 0 0 2px #fff;
  }
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}
.main {
  flex: 1;
}

ul {
  @apply list-disc list-inside;
}

ol {
  @apply list-decimal list-inside;
}

.table {
  @apply w-full;
  th, td {
    @apply align-top;
  }

}

.table-responsive {
  @apply block w-full overflow-x-auto;
}
/* Hotwire's version of data-disable-with */
button                  .when-disabled { display: none; }
button[disabled]        .when-disabled { display: initial; }
button                  .when-enabled { display: initial; }
button[disabled]        .when-enabled { display: none; }

@layer components {
  .btn {
    @apply inline-flex text-sm font-semibold text-center px-4 py-0 rounded-md no-underline items-center justify-between shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2;

    height: 40px;
    line-height: 40px;
    transition: ease 0.3s background, ease 0.3s transform, ease 0.2s color;

    &:hover,
    &:focus {
      @apply cursor-pointer;
    }

    &:disabled {
      @apply opacity-75 cursor-not-allowed;
    }
  }

  .btn-small {
    @apply px-3 text-sm;

    height: 32px;
    line-height: 32px;
  }

  .btn-large {
    @apply text-base px-6;

    height: 48px;
    line-height: 48px;
  }

  .btn-primary {
    @apply bg-blue-600 text-white focus:ring-blue-500;

    &:hover,
    &:focus {
      @apply bg-blue-500 text-white;
    }

    &.outline {
      @apply bg-transparent outline-1 text-blue-500 shadow-none;

      &:hover,
      &:focus {
        @apply bg-blue-500 text-white;
      }
    }
  }

  .btn-secondary {
    @apply bg-green-600 text-white focus:ring-green-500;

    &:hover,
    &:focus {
      @apply bg-green-500 text-white;
    }

    &.outline {
      @apply bg-transparent outline-1 text-green-600 shadow-none;

      &:hover,
      &:focus {
        @apply bg-green-500 text-white;
      }
    }
  }

  .btn-tertiary {
    @apply bg-gray-700 text-white focus:ring-gray-600;

    &:hover,
    &:focus {
      @apply bg-gray-600 text-white;
    }

    &.outline {
      @apply bg-transparent outline-1 text-gray-700 shadow-none;

      &:hover,
      &:focus {
        @apply bg-gray-600 text-white;
      }
    }
  }

  .btn-danger {
    @apply bg-red-600 text-white focus:ring-red-500;

    &:hover,
    &:focus {
      @apply bg-red-500 text-white;
    }

    &.outline {
      @apply bg-transparent outline-1 text-red-500 shadow-none;

      &:hover,
      &:focus {
        @apply bg-red-500 text-white;
      }
    }
  }

  .btn-gray {
    @apply bg-gray-100 text-gray-800 hover:bg-gray-200 hover:text-gray-800 focus:ring-gray-600;
  }

  .btn-light-gray {
    @apply bg-gray-100 text-gray-800 hover:bg-gray-200 hover:text-gray-800 focus:ring-gray-600;
  }

  .btn-white {
    @apply bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 hover:text-gray-700 focus:ring-blue-500;

    &.primary {
      @apply text-blue-600;
    }

    &.secondary {
      @apply text-green-600;
    }

    &.tertiary {
      @apply text-gray-600;
    }

    &.gray {
      @apply text-gray-700;
    }
  }

  .btn-link {
    @apply text-blue-500 bg-transparent shadow-none;

    &:hover,
    &:focus {
      @apply text-blue-600;

      transform: none;
    }
  }

  .btn-light-blue {
    @apply text-blue-700 bg-blue-100 focus:ring-blue-700;
  }

  .btn-light-green {
    @apply text-green-700 bg-green-100 focus:ring-green-700;
  }

  .btn-light-red {
    @apply text-red-700 bg-red-100 focus:ring-red-700;
  }

  .btn-expanded, .btn-block {
    @apply block w-full;
  }
}
pre {
  @apply text-sm mb-6;

  code.hljs {
    @apply rounded p-4;
  }

}

code {
  @apply text-red-500 text-sm;
}
@layer components {
  .bg-twitter { background: #4099ff; }
  .bg-facebook { background: #3B5998; }
  .bg-google_oauth2 { background: #D34836; }

  .text-twitter { color: #4099ff; }
  .text-facebook { color: #3B5998; }
  .text-google_oauth2 { color: #D34836; }
}

.btn-twitter {
  @apply bg-twitter text-white;
}

.btn-facebook {
  @apply bg-facebook text-white;
}

.btn-github {
  @apply bg-gray-500 text-white;
}

.btn-google_oauth2 {
  @apply bg-google_oauth2 text-white;
}

.btn-microsoft_graph {
  @apply bg-white text-slate-900 border border-slate-900;
}
tr td.gridjs-td{
    padding: 24px 5px;
}
.direct-upload {
  display: inline-block;
  position: relative;
  padding: 2px 4px;
  margin: 0 3px 3px 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  font-size: 11px;
  line-height: 13px;
}

.direct-upload--pending {
  opacity: 0.6;
}

.direct-upload__progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  opacity: 0.2;
  background: #0076ff;
  transition: width 120ms ease-out, opacity 60ms 60ms ease-in;
  transform: translate3d(0, 0, 0);
}

.direct-upload--complete .direct-upload__progress {
  opacity: 0.4;
}

.direct-upload--error {
  border-color: red;
}

input[type=file][data-direct-upload-url][disabled] {
  display: none;
}
.docs-main {
  min-height: calc(100vh - 64px);
}

.image-placeholder {
  height: 180px;

  @apply bg-gray-300 flex items-center justify-center;
}
.form-group {
  @apply mb-6 relative;
}

.form-input {
  &[disabled] {
    @apply bg-gray-200;
  }
}

/* non-input elements (like the Stripe card form) can be styled to look like an input */
div.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border-width: 1px;
  padding-top: .5rem;
  padding-right: .75rem;
  padding-bottom: .5rem;
  padding-left: .75rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

@layer components {
  .form-control {
    @apply form-input block w-full rounded-md border-gray-300 shadow-sm sm:text-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50;

    &[disabled], &[readonly] {
      @apply bg-gray-200;
    }

    &.error {
      @apply border-red-300;
    }
  }
}

select {
  @apply sm:text-sm;
}

select:not([multiple]) {
  @apply block w-full mt-1 rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50;

  &[disabled] {
    @apply bg-gray-200;
  }
}

select[multiple] {
  @apply block w-full mt-1 rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50;

  &[disabled] {
    @apply bg-gray-200;
  }
}

label,
.label {
  @apply block text-sm font-medium leading-5 text-gray-700 mb-1;
}

.form-hint {
  @apply text-gray-600 text-xs italic;

  &.error {
    @apply text-red-500 text-sm italic leading-normal mt-1;
  }
}

.caret {
  @apply pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-800;
}

form.inline {
  .form-group {
    @apply flex justify-start items-center;
  }

  .form-group .input {
    @apply flex-1;
  }

  .form-group .label {
    @apply w-1/4;
  }
}

/* Fix flatpickr */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  display: inline-block;
}

.form-checkbox {
  @apply rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50;

  &[disabled] {
    @apply bg-gray-200;
  }
}

.input-file {
  height: auto;
  z-index: 2;
  cursor: pointer;

  @apply opacity-0 inline-block pl-0 pr-0 py-3 px-3 overflow-hidden absolute border-none;

  + label {
    @apply inline-flex text-sm font-bold text-center px-4 py-0 rounded no-underline items-center justify-between cursor-pointer;

    height: 40px;
    line-height: 40px;
    transition: ease 0.3s background, ease 0.3s transform, ease 0.2s color;

    @apply btn;
    @apply btn-tertiary;

    &:focus {
      outline: 1px dotted #000;
      outline: -webkit-focus-ring-color auto 5px;
    }
  }
}

[type='checkbox'] {
  @apply form-checkbox;
  @apply rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50;

  &[disabled] {
    @apply bg-gray-200;
  }
}

[type='radio']:not(.three-state-input) {
  @apply form-radio;
}
.icon-xs {
  width: 12px;
  height: auto;
}

.icon-sm {
  width: 16px;
  height: auto;
}

.icon {
  width: 20px;
  height: auto;
}

.icon-lg {
  width: 32px;
  height: auto;
}

.icon-xl {
  width: 36px;
  height: auto;
}

.icon-2xl {
  width: 48px;
  height: auto;
}

.icon-3xl {
  width: 64px;
  height: auto;
}

/* A couple handy classes for responsive YouTube and other iframe embeds */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.nav-link {
  @apply block no-underline text-gray-500 hover:text-gray-800 px-2 py-1 text-base font-medium whitespace-nowrap;
  line-height: 30px;

  &.active {
    @apply font-semibold;
  }

  &:focus {
    @apply text-gray-900;
  }
}

@media (min-width: 1024px) {
  .nav-link {
    @apply inline-flex my-0 mr-3;
    line-height: 40px;
  }
}

/* Highlights unread notifications with background color */
[data-notifications-target="notification"]:not([data-read-at]) {
  @apply bg-gray-100;
}

/* Highlights uninteracted notifications with blue dot */
[data-notifications-target="notification"]:not([data-interacted-at]) {
  [uninteracted] {
    @apply block;
  }
}

.dropdown-menu {
  min-width: 100%;

  @screen lg {
    min-width: 200px;
  }
}
.pagy {
  display: flex;
  font-family: sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: #6b7280;
}
.pagy > :not([hidden]) ~ :not([hidden]) {
  --space-reverse: 0;
  margin-right: calc(0.25rem * var(--space-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--space-reverse)));
}
.pagy a:not(.gap) {
  display: block;
  text-decoration: none;
  border-radius: 0.5rem;
  background-color: #e5e7eb;
  padding: 0.25rem 0.75rem;
  color: inherit;
}
.pagy a:not(.gap):hover {
  background-color: #d1d5db;
}
.pagy a:not(.gap):not([href]) { /* disabled links */
  cursor: default;
  background-color: #f3f4f6;
  color: #d1d5db;
}
.pagy a:not(.gap).current {
  background-color: #9ca3af;
  color: white;
}
.pagy label {
  white-space: nowrap;
  display: inline-block;
  border-radius: 0.5rem;
  background-color: #e5e7eb;
  padding: 0.125rem 0.75rem;
}
.pagy label input {
  line-height: 1.5rem;
  border-radius: 0.375rem;
  border-style: none;
  background-color: #f3f4f6;
}
.tab-active {
  background: linear-gradient(116deg, #3957F4 22%, #2F87EE 90%);
  border-radius: 4px 4px 0px 0px;

  a {
    @apply text-white;

    &:hover,
    &:focus {
      background: linear-gradient(308deg, #3957F4 24%, #2F87EE 80%);
      border-radius: 4px 4px 0px 0px;

      @apply text-gray-300;
    }
  }
}

trix-editor {
  @apply form-control;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
trix-toolbar {
  @apply form-control;
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 0;
}
trix-toolbar * {
  box-sizing: border-box;
}
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}
trix-toolbar .trix-button-group {
  display: flex;
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: black;
}
trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.2em;
  height: 2.0em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}
trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}
trix-toolbar .trix-button--icon-attach::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M16.5%206v11.5a4%204%200%201%201-8%200V5a2.5%202.5%200%200%201%205%200v10.5a1%201%200%201%201-2%200V6H10v9.5a2.5%202.5%200%200%200%205%200V5a4%204%200%201%200-8%200v12.5a5.5%205.5%200%200%200%2011%200V6h-1.5z%22%2F%3E%3C%2Fsvg%3E);
  top: 8%;
  bottom: 4%;
}
trix-toolbar .trix-button--icon-bold::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M15.6%2011.8c1-.7%201.6-1.8%201.6-2.8a4%204%200%200%200-4-4H7v14h7c2.1%200%203.7-1.7%203.7-3.8%200-1.5-.8-2.8-2.1-3.4zM10%207.5h3a1.5%201.5%200%201%201%200%203h-3v-3zm3.5%209H10v-3h3.5a1.5%201.5%200%201%201%200%203z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-italic::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10%205v3h2.2l-3.4%208H6v3h8v-3h-2.2l3.4-8H18V5h-8z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-link::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M9.88%2013.7a4.3%204.3%200%200%201%200-6.07l3.37-3.37a4.26%204.26%200%200%201%206.07%200%204.3%204.3%200%200%201%200%206.06l-1.96%201.72a.91.91%200%201%201-1.3-1.3l1.97-1.71a2.46%202.46%200%200%200-3.48-3.48l-3.38%203.37a2.46%202.46%200%200%200%200%203.48.91.91%200%201%201-1.3%201.3z%22%2F%3E%3Cpath%20d%3D%22M4.25%2019.46a4.3%204.3%200%200%201%200-6.07l1.93-1.9a.91.91%200%201%201%201.3%201.3l-1.93%201.9a2.46%202.46%200%200%200%203.48%203.48l3.37-3.38c.96-.96.96-2.52%200-3.48a.91.91%200%201%201%201.3-1.3%204.3%204.3%200%200%201%200%206.07l-3.38%203.38a4.26%204.26%200%200%201-6.07%200z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-strike::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.73%2014l.28.14c.26.15.45.3.57.44.12.14.18.3.18.5%200%20.3-.15.56-.44.75-.3.2-.76.3-1.39.3A13.52%2013.52%200%200%201%207%2014.95v3.37a10.64%2010.64%200%200%200%204.84.88c1.26%200%202.35-.19%203.28-.56.93-.37%201.64-.9%202.14-1.57s.74-1.45.74-2.32c0-.26-.02-.51-.06-.75h-5.21zm-5.5-4c-.08-.34-.12-.7-.12-1.1%200-1.29.52-2.3%201.58-3.02%201.05-.72%202.5-1.08%204.34-1.08%201.62%200%203.28.34%204.97%201l-1.3%202.93c-1.47-.6-2.73-.9-3.8-.9-.55%200-.96.08-1.2.26-.26.17-.38.38-.38.64%200%20.27.16.52.48.74.17.12.53.3%201.05.53H7.23zM3%2013h18v-2H3v2z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-quote::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M6%2017h3l2-4V7H5v6h3zm8%200h3l2-4V7h-6v6h3z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-code::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.2%2012L15%2015.2l1.4%201.4L21%2012l-4.6-4.6L15%208.8l3.2%203.2zM5.8%2012L9%208.8%207.6%207.4%203%2012l4.6%204.6L9%2015.2%205.8%2012z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm4%203h14v-2H8v2zm0-6h14v-2H8v2zm0-8v2h14V5H8z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-number-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M2%2017h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1%203h1.8L2%2013.1v.9h3v-1H3.2L5%2010.9V10H2v1zm5-6v2h14V5H7zm0%2014h14v-2H7v2zm0-6h14v-2H7v2z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-undo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.5%208c-2.6%200-5%201-6.9%202.6L2%207v9h9l-3.6-3.6A8%208%200%200%201%2020%2016l2.4-.8a10.5%2010.5%200%200%200-10-7.2z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-redo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.4%2010.6a10.5%2010.5%200%200%200-16.9%204.6L4%2016a8%208%200%200%201%2012.7-3.6L13%2016h9V7l-3.6%203.6z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-8.3-.3l2.8%202.9L6%2014.2%204%2012l2-2-1.4-1.5L1%2012l.7.7zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-6.9-1L1%2014.2l1.4%201.4L6%2012l-.7-.7-2.8-2.8L1%209.9%203.1%2012zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-dialogs {
  position: relative;
}
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #F00 0px 0px 1.5px 1px;
}
trix-toolbar .trix-button--dialog {
  @apply btn btn-small btn-primary;
  font-size: inherit;
}
trix-toolbar .trix-dialog--link {
  max-width: 600px;
}
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}
trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
  width: 100%;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;

  .trix-button--dialog:last-of-type {
    @apply ml-1;
  }
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-dialog__link-fields {
    display: block;

    .trix-button-group {
      @apply mt-2;
    }
  }
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}
trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}
trix-editor .attachment {
  position: relative;
}
trix-editor .attachment:hover {
  cursor: default;
}
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}
trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}
trix-editor .trix-button-group {
  display: inline-flex;
}
trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-editor .trix-button.trix-active {
  background: #cbeefa;
}
trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: "";
  background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}
trix-editor .trix-button--remove:hover {
  border-color: #333;
}
trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}
trix-editor .attachment__metadata-container {
  position: relative;
}
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}
trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}

.trix-content {
  line-height: 1.5;
}
.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}
.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}
.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}
.trix-content li {
  margin-left: 1em;
}
.trix-content [dir=rtl] li {
  margin-right: 1em;
}
.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}
.trix-content img {
  max-width: 100%;
  height: auto;
}
.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}
.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}
.trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
  color: inherit;
}
.trix-content .attachment__caption {
  text-align: center;
}
.trix-content .attachment__caption .attachment__name + .attachment__size::before {
  content: ' · ';
}
.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}
.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}
.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}
.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;

}
.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;

}
.trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}
.font-display {
  font-size: 4rem;

  @apply font-bold leading-tight tracking-tight;
}


h1,
.h1 {
  font-size: 2.5rem;

  @apply font-bold leading-tight tracking-tight;

}

h2,
.h2 {
  font-size: 2.0rem;

  @apply font-bold leading-tight;
}

h3,
.h3 {
  font-size: 1.5rem;

  @apply font-bold leading-normal;
}

h4,
.h4 {
  font-size: 1.125rem;

  @apply font-bold leading-normal;
}

h5,
.h5 {
  @apply font-bold uppercase tracking-wide text-sm;
}

.link {
  @apply text-blue-500;

  &:hover,
  &:focus {
    @apply text-blue-600;
  }
}
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.transition {
  transition: ease-in-out 0.2s all;
}

/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.main-content {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%23000000' fill-opacity='0.03' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
}

.align-content{
  display:grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

.header-style{
  width: 100%;
  height: 3rem;
  background-color: rgba(255, 255, 255, 0.5);
  margin: auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  align-self: flex-start;
}

.footer-style{
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  margin: auto;
  padding: 1rem 4rem;
  text-align: center;
  align-items: center;
  bottom: 0;
  justify-content: space-between;
  font-family: 'Roboto', sans-serif;
  border-top: 2px solid #d4d4d4;
}

.multiple-report-card{
  width: 1050px;
}
.arrow {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  transform: rotate(90deg);

  &::marker {
    content: "";
  }
  &::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='5' width='5' viewBox='0 0 320 512'%3E%3Cpath fill='%238c1aff' d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    width: 12px;
    aspect-ratio: 1;
    display: block;
    transition: transform 0.5s ease;
  }
  [open] &::after {
    transform: rotate(180deg);
  }
}

.btn_text {
  &::marker {
      content: "";
    }
  &::after {
    content: "How to improve?";
    }
    [open] &::after {
      content: "Hide";
    }
}

.btn-style {
  width: 7rem;
  height: 1.25rem;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  align-items: center;
  margin: 0 0 0 auto;
  justify-content: space-between;
  text-wrap: nowrap;
  padding: 0.25rem 0.5rem;
  font-size: 0.6rem;
  line-height: 1rem;
  outline: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  cursor: pointer;
}

.btn-style:hover {
  background-color: #f3f4f6;
}

.summary-pointer-events-none {
  pointer-events: none;
}

.clickable {
  pointer-events: auto;
}
.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight, .highlight .w {
  color: #24292f;
  background-color: #f6f8fa;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
  color: #cf222e;
}
.highlight .gr {
  color: #f6f8fa;
}
.highlight .gd {
  color: #82071e;
  background-color: #ffebe9;
}
.highlight .nb {
  color: #953800;
}
.highlight .nc {
  color: #953800;
}
.highlight .no {
  color: #953800;
}
.highlight .nn {
  color: #953800;
}
.highlight .sr {
  color: #116329;
}
.highlight .na {
  color: #116329;
}
.highlight .nt {
  color: #116329;
}
.highlight .gi {
  color: #116329;
  background-color: #dafbe1;
}
.highlight .kc {
  color: #0550ae;
}
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
  color: #0550ae;
}
.highlight .sb {
  color: #0550ae;
}
.highlight .bp {
  color: #0550ae;
}
.highlight .ne {
  color: #0550ae;
}
.highlight .nl {
  color: #0550ae;
}
.highlight .py {
  color: #0550ae;
}
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
  color: #0550ae;
}
.highlight .o, .highlight .ow {
  color: #0550ae;
}
.highlight .gh {
  color: #0550ae;
  font-weight: bold;
}
.highlight .gu {
  color: #0550ae;
  font-weight: bold;
}
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
  color: #0a3069;
}
.highlight .nd {
  color: #8250df;
}
.highlight .nf, .highlight .fm {
  color: #8250df;
}
.highlight .err {
  color: #f6f8fa;
  background-color: #82071e;
}
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
  color: #6e7781;
}
.highlight .gl {
  color: #6e7781;
}
.highlight .gt {
  color: #6e7781;
}
.highlight .ni {
  color: #24292f;
}
.highlight .si {
  color: #24292f;
}
.highlight .ge {
  color: #24292f;
  font-style: italic;
}
.highlight .gs {
  color: #24292f;
  font-weight: bold;
}
.sidebar-section {
	@apply flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-white hover:text-white hover:bg-primary-700 focus:outline-none focus:bg-primary-700 active:bg-primary-700 active:text-white transition ease-in-out duration-150;
}

.sidebar-section-svg {
	@apply mr-4 h-6 w-6 text-gray-300 group-hover:text-white group-focus:text-white transition ease-in-out duration-150;
}

.sidebar-collapsible-arrow-svg {
	@apply ml-auto h-5 w-5 transform group-hover:text-gray-400 group-focus:text-gray-400 transition-colors ease-in-out duration-150;
}

.sidebar-report-link {
	@apply w-full flex items-center pl-5 pr-2 py-2 text-xs leading-5 font-medium rounded-md text-white hover:text-white hover:bg-primary-700 focus:outline-none focus:bg-white active:bg-white active:text-primary-700;
}

.sidebar-report-link-active {
	@apply text-primary-700 bg-white hover:text-primary-700 hover:bg-yellow-300;
}


.active-content {
	@apply mt-8 px-4 py-4 grid gap-4;
}
.active-content-col-1 {
	@apply sm:grid-cols-1;
}
.active-content-col-2 {
	@apply md:grid-cols-2 sm:grid-cols-1;
}
.active-content-col-6 {
	@apply md:grid-cols-6 grid-cols-1;
}

.report-div {
	@apply my-4 pb-1 border-b border-gray-200 space-y-2;
}

.report-div-new {
	@apply pb-1 border-gray-200 space-y-2;
}

.report-title {
	@apply text-xl leading-6 font-medium text-gray-900;
}
.report-description {
	@apply max-w-4xl text-sm leading-5 text-gray-500;
}

/* overwrite the avatar background color */
.avatar {
  @apply bg-secondary-500;
}

/* overwrite the button colors earlier specified in button.css */
.btn-primary {
  @apply bg-primary-600 text-white;

  &:hover,
  &:focus {
    @apply bg-primary-500 text-white;
  }

  &.outline {
    @apply bg-transparent border border-primary-500 text-primary-500 shadow-none;

    &:hover,
    &:focus {
      @apply bg-primary-500 text-white;
    }
  }
}

.btn-secondary {
  @apply bg-secondary-700 text-white;

  &:hover,
  &:focus {
    @apply bg-secondary-600 text-white;
  }

  &.outline {
    @apply bg-transparent border border-secondary-700 text-secondary-700 shadow-none;

    &:hover,
    &:focus {
      @apply bg-secondary-600 text-white;
    }
  }
}

.btn-tertiary {
  @apply bg-tertiary-800 text-white;

  &:hover,
  &:focus {
    @apply bg-tertiary-500 text-white;
  }

  &.outline {
    @apply bg-transparent border border-tertiary-500 text-tertiary-500 shadow-none;

    &:hover,
    &:focus {
      @apply bg-tertiary-500 text-white;
    }
  }
}

.apikey-valid {
  @apply bg-green-700;
}
.apikey-invalid {
  @apply bg-red-700;
}
.apikey-checking {
  @apply bg-yellow-500;
}


.category {
  @apply text-primary-600 bg-white hover:bg-primary-50;
}
.category.active {
    @apply text-white bg-primary-600 hover:bg-primary-400;
}

.reportcard {
}
.reportcard .grade {
}
.grade-a {
	@apply bg-green-600 text-white text-2xl font-semibold;
}
.grade-b {
	@apply bg-lime-400 text-black text-2xl font-semibold;
}
.grade-c {
	@apply bg-amber-400 text-black text-2xl font-semibold;
}
.grade-d {
	@apply bg-orange-500 text-black text-2xl font-semibold;
}
.grade-f {
	@apply bg-red-600 text-white text-2xl font-semibold;
}
.grade-unknown {
	@apply bg-neutral-400 text-black;
}
/*
 * 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.
 *



 */
.ProseMirror {
  position: relative;
  height: 100%;
  width: 100%;
}

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
}

.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px; top: -2px; bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}

/* Protect against generic img rules */

img.ProseMirror-separator {
  display: inline !important;
  border: none !important;
  margin: 0 !important;
}
.ProseMirror-textblock-dropdown {
  min-width: 3em;
}

.ProseMirror-menu {
  margin: 0 -4px;
  line-height: 1;
}

.ProseMirror-tooltip .ProseMirror-menu {
  width: -webkit-fit-content;
  width: fit-content;
  white-space: pre;
}

.ProseMirror-menuitem {
  margin-right: 3px;
  display: inline-block;
}

.ProseMirror-menuseparator {
  border-right: 1px solid #ddd;
  margin-right: 3px;
}

.ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu {
  font-size: 90%;
  white-space: nowrap;
}

.ProseMirror-menu-dropdown {
  vertical-align: 1px;
  cursor: pointer;
  position: relative;
  padding-right: 15px;
}

.ProseMirror-menu-dropdown-wrap {
  padding: 1px 0 1px 4px;
  display: inline-block;
  position: relative;
}

.ProseMirror-menu-dropdown:after {
  content: "";
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .6;
  position: absolute;
  right: 4px;
  top: calc(50% - 2px);
}

.ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu {
  position: absolute;
  background: white;
  color: #666;
  border: 1px solid #aaa;
  padding: 2px;
}

.ProseMirror-menu-dropdown-menu {
  z-index: 15;
  min-width: 6em;
}

.ProseMirror-menu-dropdown-item {
  cursor: pointer;
  padding: 2px 8px 2px 4px;
}

.ProseMirror-menu-dropdown-item:hover {
  background: #f2f2f2;
}

.ProseMirror-menu-submenu-wrap {
  position: relative;
  margin-right: -4px;
}

.ProseMirror-menu-submenu-label:after {
  content: "";
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid currentColor;
  opacity: .6;
  position: absolute;
  right: 4px;
  top: calc(50% - 4px);
}

.ProseMirror-menu-submenu {
  display: none;
  min-width: 4em;
  left: 100%;
  top: -3px;
}

.ProseMirror-menu-active {
  background: #eee;
  border-radius: 4px;
}

.ProseMirror-menu-disabled {
  opacity: .3;
}

.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {
  display: block;
}

.ProseMirror-menubar {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  position: relative;
  min-height: 1em;
  color: #666;
  padding: 6px 6px;
  top: 0; left: 0; right: 0;
  border-bottom: 1px solid silver;
  background: white;
  z-index: 10;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: visible;
}

.ProseMirror-icon {
  display: inline-block;
  line-height: .8;
  vertical-align: -2px; /* Compensate for padding */
  padding: 2px 8px;
  cursor: pointer;
}

.ProseMirror-menu-disabled.ProseMirror-icon {
  cursor: default;
}

.ProseMirror-icon svg {
  fill: currentColor;
  height: 1em;
}

.ProseMirror-icon span {
  vertical-align: text-top;
}
.ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
}

.ProseMirror-gapcursor:after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid black;
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}

@keyframes ProseMirror-cursor-blink {
  to {
    visibility: hidden;
  }
}

.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}
/* Add space around the hr to make clicking it easier */

.ProseMirror-example-setup-style hr {
  padding: 2px 10px;
  border: none;
  margin: 1em 0;
}

.ProseMirror-example-setup-style hr:after {
  content: "";
  display: block;
  height: 1px;
  background-color: silver;
  line-height: 2px;
}

.ProseMirror ul, .ProseMirror ol {
  padding-left: 30px;
}

.ProseMirror blockquote {
  padding-left: 1em;
  border-left: 3px solid #eee;
  margin-left: 0; margin-right: 0;
}

.ProseMirror-example-setup-style img {
  cursor: default;
}

.ProseMirror-prompt {
  background: white;
  padding: 5px 10px 5px 15px;
  border: 1px solid silver;
  position: fixed;
  border-radius: 3px;
  z-index: 11;
  box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2);
}

.ProseMirror-prompt h5 {
  margin: 0;
  font-weight: normal;
  font-size: 100%;
  color: #444;
}

.ProseMirror-prompt input[type="text"],
.ProseMirror-prompt textarea {
  background: #eee;
  border: none;
  outline: none;
}

.ProseMirror-prompt input[type="text"] {
  padding: 0 4px;
}

.ProseMirror-prompt-close {
  position: absolute;
  left: 2px; top: 1px;
  color: #666;
  border: none; background: transparent; padding: 0;
}

.ProseMirror-prompt-close:after {
  content: "✕";
  font-size: 12px;
}

.ProseMirror-invalid {
  background: #ffc;
  border: 1px solid #cc7;
  border-radius: 4px;
  padding: 5px 10px;
  position: absolute;
  min-width: 10em;
}

.ProseMirror-prompt-buttons {
  margin-top: 5px;
  display: none;
}
#editor, .editor {
  background: white;
  color: black;
  background-clip: padding-box;
  border-radius: 4px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  padding: 5px 0;
  margin-bottom: 23px;
}

.ProseMirror p:first-child,
.ProseMirror h1:first-child,
.ProseMirror h2:first-child,
.ProseMirror h3:first-child,
.ProseMirror h4:first-child,
.ProseMirror h5:first-child,
.ProseMirror h6:first-child {
  margin-top: 10px;
}

.ProseMirror {
  padding: 4px 8px 4px 14px;
  line-height: 1.2;
  outline: none;
}

.ProseMirror p { margin-bottom: 1em }

.ProseMirror section {
  display: block;
  padding: 0 4rem;
  margin: 0 -4rem 1rem;
  width: calc(100% + 8rem);
  cursor: pointer;
}

.ProseMirror turbo-frame {
  display: flex;
}

.ProseMirror turbo-frame[data-chart-id] {
  display: flex;
  padding-bottom: 0.5rem;
  color: rgb(100, 100, 100);
}

.ProseMirror turbo-frame[data-metric-id] {
  display: inline-flex;
}

.ProseMirror section > div {
  padding: 1rem;
  background: rgb(245, 245, 245);
  border-radius: 0.5rem;
  white-space: pre-wrap;
}
.breadcrumb-component {}
.modal-component {}
.pivot-table-component {}
.switch {
    position: relative;
    height: 32px;
    width: 300px;
    margin: 20px auto;
    background: #F2F2F2;
    background: #D7D7D7;
    border-radius: 32px;
}
.switch-label {
    font-weight: bold;
    position: relative;
    z-index: 2;
    float: left;
    width: 100px;
    line-height: 32px;
    font-size: 12px;
    color: #676a6c;
    text-align: center;
    cursor: pointer;
}

.three-state-input {
    display: none;
}

.three-state-input:checked + .switch-label {
    color: #FFF;
    transition: 0.15s ease-out;
    transition-property: color, text-shadow;
}

.three-state-input:checked + .switch-label-y ~ .switch-selector {
    transform: translateX(0%);
    background-color: #1AB394;
}
.three-state-input:checked + .switch-label-i ~ .switch-selector {
    transform: translateX(100%);
    background-color: #f8ac59;
}
.three-state-input:checked + .switch-label-n ~ .switch-selector {
    transform: translateX(200%);
    background-color: #ed5565;
}


.switch-selector {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    display: block;
    width: 100px;
    height: 32px;
    border-radius: 32px;
    background-color: #1ab394;
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}