/*
Trix 1.3.1
Copyright © 2020 Basecamp, LLC
http://trix-editor.org/*/
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }
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;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @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-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  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.6em;
  height: 1.6em;
  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;
    background-size: contain; }
    @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 {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }
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; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }
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; }
@charset "UTF-8";
.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%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * 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.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

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

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
@import "./components/alerts.css";
@import "./components/buttons.css";
@import "./components/table.css";
@import "./components/form.css";
@import "./components/layout.css";
@import "./components/form-error.css";
@import "./components/spinner.css";
@import "./components/labels.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'actiontext.css';
/* Consolidated Competency Report page-specific styles */
/* Unify SlimSelect height for all selects under the page controller scope */
.card-body select.slim-select + .ss-main { height: 3rem; min-height: 3rem; }
.card-body select.slim-select + .ss-main .ss-single-selected { height: 100%; min-height: 100%; display: flex; align-items: center; }
.card-body select.slim-select + .ss-main .ss-single-selected .placeholder,
.card-body select.slim-select + .ss-main .ss-single-selected .ss-value { line-height: 1.2rem; }
@layer components {
  .alert {
    @apply 
      flex
      w-full
      border-l-6
      px-7
      py-8
      shadow-md
      dark:bg-opacity-30
      md:p-9;
  }

  .alert-body {
    @apply w-full;
  }

  .alert-warning {
    @apply 
      border-warning
      bg-opacity-10
      dark:bg-[#1B1B24]
      bg-warning;
  }

  .alert-icon-warning {
    @apply 
      mr-5
      flex
      h-9
      w-9
      items-center
      justify-center
      rounded-lg
      bg-warning
      bg-opacity-30;
  }

  .alert-title-warning {
    @apply mb-3 text-lg font-bold text-[#9D5425];
  }

  .alert-body-warning p {
    @apply leading-relaxed text-[#D0915C]
  }

  .alert-info {
    @apply 
      border-info
      bg-opacity-10
      dark:bg-[#00829C]
      bg-info;
  }

  .alert-icon-info {
    @apply 
      mr-5
      flex
      h-9
      w-9
      items-center
      justify-center
      rounded-lg
      bg-info
      bg-opacity-30;
  }

  .alert-title-info {
    @apply mb-3 text-lg font-bold text-[#00829C];
  }

  .alert-body-info p {
    @apply leading-relaxed text-[#00829C]
  }

  .alert-danger {
    @apply 
      border-danger
      bg-opacity-20
      dark:bg-[#1B1B24]
      bg-danger;
  }

  .alert-icon-danger {
    @apply 
      mr-5
      flex
      h-9
      w-9
      items-center
      justify-center
      rounded-lg
      bg-danger
      bg-opacity-30;
  }

  .alert-title-danger {
    @apply mb-3 text-lg font-bold text-[#B45454];
  }

  .alert-body-danger p {
    @apply leading-relaxed text-[#CD5D5D]
  }

  .alert-success {
    @apply 
      border-success
      bg-opacity-20
      dark:bg-[#1B1B24]
      bg-success;
  }

  .alert-icon-success {
    @apply 
      mr-5
      flex
      h-9
      w-9
      items-center
      justify-center
      rounded-lg
      bg-success
      bg-opacity-60;
  }

  .alert-title-success {
    @apply mb-3 text-lg font-bold text-success;
  }

  .alert-body-success p {
    @apply leading-relaxed text-success
  }

  .alert-primary {
    @apply 
      border-primary
      bg-opacity-20
      dark:bg-[#1B1B24]
      bg-primary;
  }

  .alert-icon-primary {
    @apply 
      mr-5
      flex
      h-9
      w-9
      items-center
      justify-center
      rounded-lg
      bg-primary
      bg-opacity-60;
  }

  .alert-title-primary {
    @apply 
      mb-3 
      text-lg 
      font-bold 
      text-primary;
  }

  .alert-body-primary p {
    @apply 
      leading-relaxed 
      text-primary
  }
}
@layer components {
  .avatar-upload {
    @apply absolute
      bottom-0
      right-0
      flex
      h-8.5
      w-8.5
      cursor-pointer
      items-center
      justify-center
      rounded-full
      bg-primary
      text-white
      hover:bg-opacity-90
      sm:bottom-2
      sm:right-2;
  }
}
@layer components {
  /* solid buttons */
  .btn-sq {
    @apply 
      inline-flex
      items-center
      justify-center
      text-center
      font-medium
      text-base
      md:text-xs
      sm:text-xs
      xsm:text-xs
      text-white
      hover:bg-opacity-80
      focus:ring-4
      px-3
      md:px-4
      sm:px-4
      xsm:px-3
      py-2;
  }

  .btn-rmd {
    @apply 
      inline-flex
      rounded-md
      items-center
      justify-center
      text-center
      font-medium
      text-base
      md:text-xs
      sm:text-xs
      xsm:text-xs
      text-white
      hover:bg-opacity-80
      focus:ring-4
      px-3
      md:px-4
      sm:px-4
      xsm:px-3
      py-2;
  }

  .btn-rfull {
    @apply 
      inline-flex
      rounded-full
      items-center
      justify-center
      text-center
      font-medium
      text-base
      md:text-xs
      sm:text-xs
      text-white
      hover:bg-opacity-80
      focus:ring-4
      px-3
      md:px-4
      sm:px-4
      py-2;
  }
    
  .btn-primary {
    @apply 
      border-primary
      bg-primary
      text-white;
    & .icon-primary {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-secondary {
    @apply
      border-secondary
      bg-secondary
      text-white;
    & .icon-secondary {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-gray {
    @apply
      border
      border-graydarkf
      bg-gray
      text-graydark;
    & .icon-gray {
      filter: invert(21%) sepia(27%) saturate(411%) hue-rotate(181deg) brightness(95%) contrast(93%);
    }
  }

  .btn-graydarkf {
    @apply 
      border-graydarkf
      bg-graydarkf
      text-white;
    & .icon-graydarkf {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-success {
    @apply 
      border-success
      bg-success
      text-white;
    & .icon-success {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-purple {
    @apply 
      border-purple
      bg-purple
      text-white;
    & .icon-purple {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-danger {
    @apply 
      border-danger
      bg-danger
      text-white;
    & .icon-danger {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-creation {
    @apply
      border-creation
      bg-creation
      text-white;
    & .icon-creation {
      filter: invert(44%) sepia(89%) saturate(375%) hue-rotate(93deg) brightness(88%) contrast(91%);
    }
  }

  .btn-approval {
    @apply
      border-approval
      bg-approval
      text-white;
    & .icon-approval {
      filter: invert(44%) sepia(89%) saturate(375%) hue-rotate(93deg) brightness(88%) contrast(91%);
    }
  }

  .btn-tracking {
    @apply
      border-tracking
      bg-tracking
      text-white;
    & .icon-tracking {
      filter: invert(44%) sepia(89%) saturate(375%) hue-rotate(93deg) brightness(88%) contrast(91%);
    }
  }

  .btn-comments {
    @apply
      border-comments
      bg-comments
      text-white;
    & .icon-comments {
      filter: invert(44%) sepia(89%) saturate(375%) hue-rotate(93deg) brightness(88%) contrast(91%);
    }
  }

  .btn-completed {
    @apply
      border-completed
      bg-completed
      text-white;
    & .icon-completed {
      filter: invert(44%) sepia(89%) saturate(375%) hue-rotate(93deg) brightness(88%) contrast(91%);
    }
  }

  .btn-warning {
    @apply 
      border-warning
      bg-warning
      text-white;
    & .icon-warning {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-meta-3 {
    @apply 
      border-meta-3
      bg-meta-3
      text-white;
    & .icon-meta-3 {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  /* outline buttons */
  .btn-outline-sq {
    @apply
      inline-flex
      items-center
      justify-start
      border
      text-left
      text-base
      md:text-xs
      sm:text-xs
      font-medium
      hover:bg-opacity-80
      px-3
      md:px-4
      sm:px-4
      py-2;
  }

  .btn-outline-rmd {
    @apply
      inline-flex
      items-center
      justify-center
      rounded-md
      border
      text-center
      text-base
      md:text-xs
      sm:text-xs
      font-medium
      hover:bg-opacity-80
      px-3
      md:px-4
      sm:px-4
      py-2;
  }

  .btn-outline-rfull {
    @apply
      inline-flex
      items-center
      justify-center
      rounded-full
      border
      text-center
      text-base
      md:text-xs
      sm:text-xs
      font-medium
      hover:bg-opacity-80
      px-3
      md:px-4
      sm:px-4
      py-2;
  }

  .btn-outline-primary {
    @apply
      border-primary
      text-primary
      hover:bg-primary
      hover:text-white;
    & .icon-primary {
      filter: invert(17%) sepia(99%) saturate(2675%) hue-rotate(231deg) brightness(113%) contrast(82%);
    }
  }
  
  .btn-outline-primary:hover {
    & .icon-primary {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-outline-followups {
  @apply btn-outline-rmd
         border-[#3C50E0] text-[#3C50E0]
         hover:bg-[#3C50E0] hover:text-white;
  & .icon-followups {
    /* azul normal » blanco al hacer hover */
    filter: invert(17%) sepia(99%) saturate(2675%) hue-rotate(231deg) brightness(113%) contrast(82%);
  }
}
.btn-outline-followups:hover {
  & .icon-followups {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
  }
}

/* 2. Evidencias (tono un poco más oscuro) */
.btn-outline-evidence {
  @apply btn-outline-rmd
         border-[#3247D8] text-[#3247D8]
         hover:bg-[#3247D8] hover:text-white;
  & .icon-evidence {
    filter: invert(19%) sepia(96%) saturate(1948%) hue-rotate(229deg) brightness(100%) contrast(90%);
  }
}
.btn-outline-evidence:hover {
  & .icon-evidence {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
  }
}

/* 3. Estado (tono un poco más claro) */
.btn-outline-status {
  @apply btn-outline-rmd
         border-[#5063E8] text-[#5063E8]
         hover:bg-[#5063E8] hover:text-white;
  & .icon-status {
    filter: invert(29%) sepia(75%) saturate(1640%) hue-rotate(227deg) brightness(101%) contrast(96%);
  }
}
.btn-outline-status:hover {
  & .icon-status {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
  }
}

  .btn-outline-secondary {
    @apply
      border-secondary
      text-secondary
      hover:bg-secondary
      hover:text-white;
    & .icon-secondary {
        filter: invert(78%) sepia(9%) saturate(1981%) hue-rotate(165deg) brightness(97%) contrast(92%);
      }
  }

  .btn-outline-secondary:hover {
    & .icon-secondary {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-outline-gray {
    @apply
      border-gray
      text-graydarkf
      hover:bg-gray
      hover:text-graydarkf;
  }

  .btn-outline-graydarkf {
    @apply
      border-graydarkf
      text-graydarkf
      hover:bg-graydarkf
      hover:text-white;
    & .icon-graydarkf {
        filter: invert(21%) sepia(27%) saturate(411%) hue-rotate(181deg) brightness(95%) contrast(93%);
      }
  }

  .btn-outline-graydarkf:hover {
    & .icon-graydarkf {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-outline-success {
    @apply
      border-success
      text-success
      hover:bg-success
      hover:text-white;
    & .icon-success {
        filter: invert(44%) sepia(89%) saturate(375%) hue-rotate(93deg) brightness(88%) contrast(91%);
      }
  }

  .btn-outline-success:hover {
    & .icon-success {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-outline-creation {
    @apply
      border-creation
      text-creation
      hover:bg-creation
      hover:text-white;
    & .icon-creation {
        filter: invert(44%) sepia(89%) saturate(375%) hue-rotate(93deg) brightness(88%) contrast(91%);
      }
  }

  .btn-outline-creation:hover {
    & .icon-creation {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-outline-approval {
    @apply
      border-approval
      text-approval
      hover:bg-approval
      hover:text-white;
    & .icon-approval {
        filter: invert(44%) sepia(89%) saturate(375%) hue-rotate(93deg) brightness(88%) contrast(91%);
      }
  }

  .btn-outline-approval:hover {
    & .icon-approval {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-outline-tracking {
    @apply
      border-tracking
      text-tracking
      hover:bg-tracking
      hover:text-white;
    & .icon-tracking {
        filter: invert(44%) sepia(89%) saturate(375%) hue-rotate(93deg) brightness(88%) contrast(91%);
      }
  }

  .btn-outline-tracking:hover {
    & .icon-tracking {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-outline-comments {
    @apply
      border-comments
      text-comments
      hover:bg-comments
      hover:text-white;
    & .icon-comments {
        filter: invert(44%) sepia(89%) saturate(375%) hue-rotate(93deg) brightness(88%) contrast(91%);
      }
  }

  .btn-outline-comments:hover {
    & .icon-comments {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-outline-completed {
    @apply
      border-completed
      text-completed
      hover:bg-completed
      hover:text-white;
    & .icon-completed {
        filter: invert(44%) sepia(89%) saturate(375%) hue-rotate(93deg) brightness(88%) contrast(91%);
      }
  }

  .btn-outline-completed:hover {
    & .icon-completed {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-outline-danger {
    @apply
      border-danger
      text-danger
      hover:bg-danger
      hover:text-white;
    & .icon-danger {
        filter: invert(32%) sepia(100%) saturate(947%) hue-rotate(319deg) brightness(88%) contrast(90%);
      }
  }

  .btn-outline-danger:hover {
    & .icon-danger {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-outline-warning {
    @apply
      border-warning
      text-warning
      hover:bg-warning
      hover:text-white;
    & .icon-warning {
        filter: invert(71%) sepia(60%) saturate(2198%) hue-rotate(352deg) brightness(101%) contrast(101%);
      }
  }

  .btn-outline-warning:hover {
    & .icon-warning {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-outline-meta-3 {
    @apply
      border-meta-3
      text-meta-3
      hover:bg-meta-3
      hover:text-white;
    & .icon-meta-3 {
        filter: invert(48%) sepia(78%) saturate(432%) hue-rotate(109deg) brightness(101%) contrast(101%);
      }
  }

  .btn-outline-meta-3:hover {
    & .icon-meta-3 {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .btn-outline-purple {
    @apply
      border-purple
      text-purple
      hover:bg-purple
      hover:text-white;
    & .icon-purple {
        filter: invert(32%) sepia(71%) saturate(1068%) hue-rotate(244deg) brightness(91%) contrast(90%);
      }
  }

  .btn-outline-purple:hover {
    & .icon-purple {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(106deg) brightness(102%) contrast(101%);
    }
  }

  .link {
    @apply flex items-center gap-3.5 py-4 px-6 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base;
    & .icon-link {
      filter: invert(21%) sepia(27%) saturate(411%) hue-rotate(181deg) brightness(95%) contrast(93%);
    }
  }

  .link:hover {
    & .icon-link {
      filter: invert(17%) sepia(99%) saturate(2675%) hue-rotate(231deg) brightness(113%) contrast(82%);
    }
  }

  /* size buttons */
  .btn-lg {
    @apply px-5 py-3 text-base;
  }

  .btn-xl {
    @apply px-6 py-3.5 text-base;
  }

  .btn-danger-lg {
    @apply
      block
      w-full
      rounded
      border-meta-1
      bg-meta-1
      p-3
      text-center
      font-medium
      text-white 
      transition 
      hover:bg-opacity-90;
  }

  .btn-success-lg {
    @apply 
      border-success
      bg-success
      text-white
      block
      w-full
      rounded
      p-3
      text-center
      font-medium
      transition 
      hover:bg-opacity-90;
  }

  .btn-hover-danger-lg{
    @apply
      block 
      w-full 
      rounded 
      border 
      border-stroke 
      bg-gray 
      p-3 
      text-center 
      font-medium 
      text-black 
      transition 
      hover:border-meta-1 
      hover:bg-meta-1 
      hover:text-white 
      dark:border-strokedark 
      dark:bg-meta-4 
      dark:text-white 
      dark:hover:border-meta-1 
      dark:hover:bg-meta-1;
  }

  .btn-arrow-up-down{
    width: 30px;
    height: 30px;
    cursor: pointer;
  }

  .btn-div-span-tooltip{
    @apply
    absolute 
    left-1/2 
    top-full 
    z-20 
    mt-3 
    -translate-x-1/2 
    whitespace-nowrap 
    rounded 
    bg-black 
    px-4.5 
    py-1.5 
    text-sm 
    font-medium 
    text-white 
    opacity-0 
    group-hover:opacity-100 
    transition-opacity 
    duration-300;
  }
  
  .span-tooltip{
    @apply
    absolute 
    left-1/2 
    top-[-3px] 
    -z-10 
    h-2 
    w-2 
    -translate-x-1/2 
    rotate-45 
    rounded-sm 
    bg-black;
  }

  .text-inherit{
    color: inherit;
  }
  .ss-single{
    font-weight: normal;
    @apply
    text-graydarkf 
    dark:text-inherit;
  }
  .ss-placeholder{
    font-weight: normal;
    @apply
    text-graydarkf 
    dark:text-inherit;
  }
}
@layer components {
  .form-error {
    @apply flex text-danger text-sm text-left italic;
  }
  .field-error {
    @apply border-danger !important;
  }
}
@layer components {
  .form-label {
    @apply font-semibold text-graydarkf dark:text-bodydark2;
  }

  .text-form {
    @apply 
      mb-1 
      block 
      dark:text-white;
  }

  .field-text-from {
    @apply 
      w-full 
      rounded 
      border-[1.5px] 
      border-stroke
      bg-transparent 
      py-3 
      px-5 
      font-medium 
      outline-none 
      transition 
      focus:border-primary 
      active:border-primary 
      disabled:cursor-default 
      disabled:bg-whiter 
      dark:border-form-strokedark 
      dark:bg-form-input 
      dark:focus:border-primary;
  }
  
  .bg-color-from {
    @apply 
      relative 
      z-20 
      w-full 
      h-12 
      appearance-none 
      rounded 
      border 
      border-stroke 
      bg-transparent 
      py-3 
      px-5 
      outline-none 
      transition 
      focus:border-primary 
      active:border-primary 
      dark:border-form-strokedark 
      dark:bg-form-input 
      dark:focus:border-primary;
  }

  .select-from {
    @apply 
      relative 
      z-20 
      w-full 
      appearance-none 
      rounded 
      border 
      border-stroke 
      bg-transparent 
      py-3 
      px-5 
      outline-none 
      transition 
      focus:border-primary 
      active:border-primary 
      dark:border-form-strokedark 
      dark:bg-form-input 
      dark:focus:border-primary;
  }
  .file-form{
    @apply
      w-full 
      cursor-pointer 
      rounded-lg 
      border-[1.5px] 
      border-stroke 
      bg-transparent 
      font-medium 
      outline-none 
      transition 
      file:mr-5 
      file:border-collapse 
      file:cursor-pointer 
      file:border-0 
      file:border-r 
      file:border-solid 
      file:border-stroke 
      file:bg-whiter 
      file:py-3 
      file:px-5 
      file:hover:bg-primary 
      file:hover:bg-opacity-10 
      focus:border-primary 
      active:border-primary 
      disabled:cursor-default 
      disabled:bg-whiter 
      dark:border-form-strokedark 
      dark:bg-form-input 
      dark:file:border-form-strokedark 
      dark:file:bg-white/30 
      dark:file:text-white 
      dark:focus:border-primary
  }

  .w-amount-i{
    width: 30% !important;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .showRe {
    animation: fadeIn 1s forwards;
  }
  
  /* MD */
  .field-text-from-md {
    @apply 
      w-full 
      rounded 
      border-[1.5px] 
      border-stroke 
      bg-transparent 
      px-1
      py-1.5 
      font-medium 
      outline-none 
      transition 
      focus:border-primary 
      active:border-primary 
      disabled:cursor-default 
      disabled:bg-whiter 
      dark:border-form-strokedark 
      dark:bg-form-input 
      dark:focus:border-primary;
  }
  .bg-color-from-md {
    @apply 
      relative 
      z-20 
      w-full 
      h-12 
      appearance-none 
      rounded 
      border 
      border-stroke 
      bg-transparent 
      py-1
      px-1.5 
      outline-none 
      transition 
      focus:border-primary 
      active:border-primary 
      dark:border-form-strokedark 
      dark:bg-form-input 
      dark:focus:border-primary;
  }

  :is(.dark .dark-mode) {
    --tw-border-opacity: 1 !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(29 42 57/var(--tw-bg-opacity)) !important;
    border-color: rgb(61 77 96/var(--tw-border-opacity)) !important;
  }

  .select-from-md {
    @apply 
      relative 
      z-20 
      w-full 
      appearance-none 
      rounded 
      border 
      border-stroke 
      bg-transparent 
      py-1 
      px-1.5 
      outline-none 
      transition 
      focus:border-primary 
      active:border-primary 
      dark:border-form-strokedark 
      dark:bg-form-input 
      dark:focus:border-primary;
  }

  .disabled-text-field{
    color: #9ca3af;
    @apply
    w-full 
    rounded-lg 
    border-[1.5px] 
    border-stroke 
    bg-transparent 
    py-3 
    px-5 
    font-medium 
    outline-none 
    transition 
    focus:border-primary 
    active:border-primary 
    disabled:cursor-default 
    disabled:bg-whiter 
    dark:border-form-strokedark 
    dark:bg-form-input 
    dark:focus:border-primary 
    dark:disabled:bg-black;
  }

  .form-date-field{
    @apply
    w-full 
    rounded border-[1.5px] 
    border-stroke 
    bg-transparent 
    py-3 
    px-5 
    font-medium 
    outline-none 
    transition 
    focus:border-primary 
    active:border-primary 
    dark:border-form-strokedark 
    dark:bg-form-input 
    dark:focus:border-primary;
  }

  .text-area-disabled{
    @apply
    w-full 
    rounded-lg 
    border-[1.5px] 
    border-stroke 
    bg-transparent 
    py-3 
    px-5 
    font-medium 
    outline-none 
    transition 
    focus:border-primary 
    active:border-primary 
    disabled:cursor-default 
    disabled:bg-whiter 
    dark:border-form-strokedark 
    dark:bg-form-input 
    dark:focus:border-primary 
    dark:disabled:bg-black;
  }

  .text-area-default{
    @apply
    w-full 
    rounded 
    border-[1.5px] 
    border-stroke 
    bg-transparent 
    py-3 
    px-5 
    font-medium 
    outline-none 
    transition 
    focus:border-primary 
    active:border-primary 
    dark:border-form-strokedark 
    dark:bg-form-input 
    dark:focus:border-primary;
  }

  .text-area-default-md{
    @apply
    w-full 
    rounded 
    border-[1.5px] 
    border-stroke 
    bg-transparent 
    p-2 
    font-medium 
    outline-none 
    transition 
    focus:border-primary 
    active:border-primary 
    dark:border-form-strokedark 
    dark:bg-form-input 
    dark:focus:border-primary;
  }
}
@layer components {
  .filter-label {
    @apply 
      mb-1
      block
      text-sm
      font-medium
      text-graydarkf
      dark:text-white;
  }
}
.container {
  @apply 
    mx-auto
    max-w-screen-2xl
    p-4
    md:p-6
    2xl:p-10;
}

.card-main {
  @apply
    w-full
    shadow-md
    rounded-sm
    p-4
    border
    border-stroke
    bg-white
    dark:border-strokedark
    dark:bg-boxdark;
}

.card-header {
  @apply flex justify-between items-center;
}

.card-header h1 {
  @apply text-4xl font-semibold text-graydarkf dark:text-bodydark2;
}

.card-body {
  @apply max-w-full overflow-x-auto mt-5;
}

.search {
  @apply flex items-center lg:justify-end gap-1 justify-start;
}

.search label {
  @apply text-graydarkf dark:text-bodydark2;
}

.total-records {
  @apply text-graydarkf dark:text-bodydark2 mt-5 font-semibold italic;
}
#s-spinner {
  position: fixed;
  background-color: black;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  opacity: 50%;
}

#spinner-position {
  position: relative;
  top: 30%;
  left: 40%;
}

.sk-chase {
  top: 10em;
  z-index: 10;
  width: 40px;
  height: 40px;
  position: relative;
  animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-text {
  top: 4em;
  z-index: 10;
  width: 300px;
  height: 40px;
  position: relative;
  font-size: x-large;
  font-weight: 700;
  color: rgb(255, 255, 255);
}

.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; 
  animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:before {
  content: '';
  display: block;
  width: 25%;
  height: 25%;
  background-color: rgb(255, 255, 255);
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {
  100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot {
  80%, 100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4); 
  } 100%, 0% {
    transform: scale(1.0); 
  } 
}

#sk-position {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999;
  opacity: 50%;
  background-color: black;
}

.sk-circle {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
  top: 20%;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #ffffff;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
          animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg); }
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg); }
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg); }
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg); }
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg); }
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg); }
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); }
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@layer components {
  .responsive {
    @apply
      min-w-max
      lg:min-w-min
      max-w-full
      /* overflow-x-auto */
      overflow-hidden
      rounded-[10px]
      mt-4;
  }
  .data-table {
    @apply
      w-full
      grid
      bg-[#F9FAFB]
      dark:bg-meta-4
      overflow-hidden
      py-1;
  }
  .data-table div {
    @apply font-medium text-[#637381] dark:text-bodydark text-center p-2;
  }
  .data-table-content {
    min-height: 3.75rem;
    @apply
      p-2
      grid
      md:place-content-center
      place-content-start
      items-center
      border-b
      border-gray
      dark:border-boxdark-2
      bg-white
      dark:bg-boxdark
      hover:bg-gray
      dark:hover:bg-black
      w-full;
  }
  .data-table-content .col {
    @apply
      text-graydarkf
      dark:text-bodydark
      items-center
      px-5;
  }
  .col-actions {
    @apply items-center flex justify-end gap-3;
  }
  .dark-text-bold{
    @apply
    text-graydarkf
    text-center
    font-semibold
    dark:text-bodydark2;
  }
  .table-colored{
    @apply
    bg-[#F9FAFB]
    dark:bg-meta-4;
  }

  .add-items{
    color: rgb(55 65 81);
    min-height: 2.5rem !important;
    @apply
    bg-[#F9FAFB]
    dark:bg-meta-4
    dark:border-meta-4
    border-gray
    place-content-start;
  }

  .responsive-md {
    @apply
      overscroll-x-auto
      overscroll-y-auto
      overflow-auto
      mx-auto
      min-w-max
      max-w-screen-sm
      md:min-w-full
      p-3;
  }
}
table.evenodd tr:nth-child(even){background:#FFF}
table.evenodd tr:nth-child(odd){background:#EEEEEE}
table.reference{border:1px solid black;border-collapse:collapse;}
table.evenodd{border:1px solid black;border-collapse:collapse;}
#título caption{font-size:18pt;font-weight:bold;}
#título{top:50%}
#página{page-break-before:always}
th{text-align:center;font-weight:bold}
.barra{height:12px;background-color:#41B702;}
.bar-content{height:20px;width:100%;margin-top:10px;position:relative;}
.bar-content image{position:absolute;top:0;left:0;}
#categoría{font-size:12pt;}
#obname{font-size:7pt;}
.peso{width:50px}
.meta{width:50px}
.resultado{width:50px}
.objetivo{height:40px}
.content-item{padding:10px 0;color:#fff;width:600px;height:70px;position:relative;box-sizing:border-box;border-top-left-radius:10px;border-bottom-left-radius:10px;-webkit-box-shadow:2px 6px 21px -5px rgba(0,0,0,0.37);-moz-box-shadow:2px 6px 21px -5px rgba(0,0,0,0.37);box-shadow:2px 6px 21px -5px rgba(0,0,0,0.37);}
.content-item__number,
.content-item__text{float:left;}
.content-item__number{width:50px;position:relative;height:50px;font-size:1.3em;box-shadow:2px 6px 21px -5px rgba(0,0,0,0.37);border-radius:50%;margin:0 10px;background-color:rgba(255, 255, 255, 0.1);}
.content-item__number span{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}
.content-item__text{font-size:0.7em;width:80%;height:50px;line-height:10px;padding:5px 0;box-sizing:border-box;border-top:1px solid rgba(255, 255, 255, 0.5);border-left:1px solid transparent;border-right:1px solid transparent;border-bottom:1px solid rgba(255, 255, 255, 0.5);}
.content-item__title{margin-bottom:5px;}
.arrow{width:49.5px;height:49.5px;position:absolute;right:-24px;top:10px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);border-top-right-radius:7px;border-bottom-left-radius:30px;}
.color-item--cyan{background-color:#00BCD4;}
.color-item--teal{background-color:#009688;}
.color-item--green{background-color:#4CAF50;}
.color-item--light-green{background-color:#8BC34A;}
.color-item--green-pantan{background-color:#7BB661;}
.color-item--lime{background-color:#CDDC39;}
.bar-content-tasks {height:20px;width:100px;margin-top:10px;position:relative;}
.bar-content-tasks image{position:absolute;top:0;left:0;}
/**
 * @license
 *
 * Font Family: Satoshi
 * Designed by: Deni Anggara
 * URL: https://www.fontshare.com/fonts/satoshi
 * © 2023 Indian Type Foundry
 *
 * Font Styles:
 * Satoshi Light
 * Satoshi Light Italic
 * Satoshi Regular
 * Satoshi Italic
 * Satoshi Medium
 * Satoshi Medium Italic
 * Satoshi Bold
 * Satoshi Bold Italic
 * Satoshi Black
 * Satoshi Black Italic
 *
*/

@font-face {
  font-family: "Satoshi";
  src: url(/../fonts/Satoshi-Light.woff2) format("woff2"),
    url(/../fonts/Satoshi-Light.woff) format("woff"),
    url(/../fonts/Satoshi-Light.ttf) format("truetype");
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Satoshi";
  src: url(/../fonts/Satoshi-LightItalic.woff2) format("woff2"),
    url(/../fonts/Satoshi-LightItalic.woff) format("woff"),
    url(/../fonts/Satoshi-LightItalic.ttf) format("truetype");
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: "Satoshi";
  src: url(/../fonts/Satoshi-Regular.woff2) format("woff2"),
    url(/../fonts/Satoshi-Regular.woff) format("woff"),
    url(/../fonts/Satoshi-Regular.ttf) format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Satoshi";
  src: url(/../fonts/Satoshi-Italic.woff2) format("woff2"),
    url(/../fonts/Satoshi-Italic.woff) format("woff"),
    url(/../fonts/Satoshi-Italic.ttf) format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: "Satoshi";
  src: url(/../fonts/Satoshi-Medium.woff2) format("woff2"),
    url(/../fonts/Satoshi-Medium.woff) format("woff"),
    url(/../fonts/Satoshi-Medium.ttf) format("truetype");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Satoshi";
  src: url(/../fonts/Satoshi-MediumItalic.woff2) format("woff2"),
    url(/../fonts/Satoshi-MediumItalic.woff) format("woff"),
    url(/../fonts/Satoshi-MediumItalic.ttf) format("truetype");
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: "Satoshi";
  src: url(/../fonts/Satoshi-Bold.woff2) format("woff2"),
    url(/../fonts/Satoshi-Bold.woff) format("woff"),
    url(/../fonts/Satoshi-Bold.ttf) format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Satoshi";
  src: url(/../fonts/Satoshi-BoldItalic.woff2) format("woff2"),
    url(/../fonts/Satoshi-BoldItalic.woff) format("woff"),
    url(/../fonts/Satoshi-BoldItalic.ttf) format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: "Satoshi";
  src: url(/../fonts/Satoshi-Black.woff2) format("woff2"),
    url(/../fonts/Satoshi-Black.woff) format("woff"),
    url(/../fonts/Satoshi-Black.ttf) format("truetype");
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Satoshi";
  src: url(/../fonts/Satoshi-BlackItalic.woff2) format("woff2"),
    url(/../fonts/Satoshi-BlackItalic.woff) format("woff"),
    url(/../fonts/Satoshi-BlackItalic.ttf) format("truetype");
  font-weight: 900;
  font-display: swap;
  font-style: italic;
}
:root{--ss-primary-color: #5897fb;--ss-bg-color: #ffffff;--ss-font-color: #4d4d4d;--ss-font-placeholder-color: #8d8d8d;--ss-disabled-color: #dcdee2;--ss-border-color: #dcdee2;--ss-highlight-color: #fffb8c;--ss-success-color: #00b755;--ss-error-color: #dc3545;--ss-focus-color: #5897fb;--ss-main-height: 30px;--ss-content-height: 300px;--ss-spacing-l: 7px;--ss-spacing-m: 5px;--ss-spacing-s: 3px;--ss-animation-timing: 0.2s;--ss-border-radius: 4px}@keyframes ss-valueIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes ss-valueOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}.ss-hide{display:none !important}.ss-main{display:flex;flex-direction:row;position:relative;user-select:none;color:var(--ss-font-color);min-height:var(--ss-main-height);width:100%;padding:var(--ss-spacing-s);cursor:pointer;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;box-sizing:border-box;transition:background-color var(--ss-animation-timing);overflow:hidden}.ss-main:focus{box-shadow:0 0 5px var(--ss-focus-color)}.ss-main.ss-disabled{background-color:var(--ss-disabled-color);cursor:not-allowed}.ss-main.ss-disabled .ss-values .ss-disabled{color:var(--ss-font-color)}.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main.ss-open-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main.ss-open-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-values{display:inline-flex;flex-wrap:wrap;gap:var(--ss-spacing-m);flex:1 1 100%}.ss-main .ss-values .ss-placeholder{display:flex;padding:var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) var(--ss-spacing-m);margin:auto 0px auto 0px;line-height:1em;align-items:center;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss-main .ss-values .ss-max{display:flex;user-select:none;align-items:center;width:fit-content;font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m);background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius)}.ss-main .ss-values .ss-single{display:flex;margin:auto 0px auto var(--ss-spacing-s)}.ss-main .ss-values .ss-value{display:flex;user-select:none;align-items:center;width:fit-content;background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius);animation-name:ss-valueIn;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out;animation-fill-mode:both}.ss-main .ss-values .ss-value.ss-value-out{animation-name:ss-valueOut;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out}.ss-main .ss-values .ss-value .ss-value-text{font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m)}.ss-main .ss-values .ss-value .ss-value-delete{display:flex;align-items:center;height:var(--ss-spacing-l);width:var(--ss-spacing-l);padding:var(--ss-spacing-s) var(--ss-spacing-m);cursor:pointer;border-left:solid 1px var(--ss-bg-color);box-sizing:content-box}.ss-main .ss-values .ss-value .ss-value-delete svg{height:var(--ss-spacing-l);width:var(--ss-spacing-l)}.ss-main .ss-values .ss-value .ss-value-delete svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-deselect{flex:0 1 auto;display:flex;align-items:center;justify-content:center;width:fit-content;height:auto;margin:0 var(--ss-spacing-m) 0 var(--ss-spacing-m)}.ss-main .ss-deselect svg{width:8px;height:8px}.ss-main .ss-deselect svg path{fill:none;stroke:var(--ss-font-color);stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-arrow{flex:0 1 auto;display:flex;align-items:center;justify-content:flex-end;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-main .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content{position:absolute;display:flex;height:auto;flex-direction:column;width:auto;max-height:var(--ss-content-height);box-sizing:border-box;border:solid 1px var(--ss-border-color);background-color:var(--ss-bg-color);transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing);opacity:0;transform:scaleY(0);transform-origin:center top;overflow:hidden;z-index:10000}.ss-content.ss-relative{position:relative;height:100%}.ss-content.ss-open-above{flex-direction:column-reverse;opacity:1;transform:scaleY(1);transform-origin:center bottom;border-top-left-radius:var(--ss-border-radius);border-top-right-radius:var(--ss-border-radius)}.ss-content.ss-open-below{opacity:1;transform:scaleY(1);transform-origin:center top;border-bottom-left-radius:var(--ss-border-radius);border-bottom-right-radius:var(--ss-border-radius)}.ss-content .ss-search{flex:0 1 auto;display:flex;flex-direction:row;padding:var(--ss-spacing-l) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0px;padding:var(--ss-spacing-m) var(--ss-spacing-l);margin:0;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;text-align:left;box-sizing:border-box}.ss-content .ss-search input::placeholder{color:var(--ss-font-placeholder-color);vertical-align:middle}.ss-content .ss-search input:focus{box-shadow:0 0 5px var(--ss-focus-color)}.ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;flex:0 0 auto;height:auto;margin:0 0 0 var(--ss-spacing-m);border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius)}.ss-content .ss-search .ss-addable svg{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-content .ss-search .ss-addable svg path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list{flex:1 1 auto;height:auto;overflow-x:hidden;overflow-y:auto}.ss-content .ss-list .ss-error{color:var(--ss-error-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-searching{color:var(--ss-font-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup.ss-close .ss-option{display:none !important}.ss-content .ss-list .ss-optgroup .ss-optgroup-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text{flex:1 1 auto;font-weight:bold;color:var(--ss-font-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow){cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions{flex:0 1 auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ss-spacing-m)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall{flex:0 0 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall:hover{opacity:.5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall.ss-selected svg path{stroke:var(--ss-error-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall span{flex:0 1 auto;display:flex;align-items:center;justify-content:center;font-size:60%;text-align:center;padding:0 var(--ss-spacing-s) 0 0}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg{flex:0 1 auto;width:13px;height:13px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg path{fill:none;stroke:var(--ss-success-color);stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:first-child{stroke-width:5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:last-child{stroke-width:11}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable{flex:0 1 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow{flex:1 1 auto;width:10px;height:10px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content .ss-list .ss-optgroup .ss-option{padding:var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s) calc(var(--ss-spacing-l)*3)}.ss-content .ss-list .ss-option{display:flex;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);color:var(--ss-font-color);cursor:pointer;user-select:none}.ss-content .ss-list .ss-option:hover{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-highlighted,.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;background-color:var(--ss-disabled-color)}.ss-content .ss-list .ss-option.ss-disabled:hover{color:var(--ss-font-color)}.ss-content .ss-list .ss-option .ss-search-highlight{background-color:var(--ss-highlight-color)}/*# sourceMappingURL=slimselect.css.map */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

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

@layer base {
  body {
    @apply relative z-1 bg-whiten font-satoshi text-base font-normal text-body;
  }
}

@layer components {
}

@layer utilities {
  .bg-tail {
    background-color: #009688;
  }
  
  .bar-container {
    flex: 1;
    height: 25px;
    background-color: #eee;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
  }      
  
  .bar {
    height: 25px;
    display: flex;
    align-items: center;
    padding-left: 8px;
    color: rgb(219, 219, 219);
    font-weight: bold;
    white-space: nowrap;
  }

  .grid-cols-report-objectives {
    grid-template-columns: 
    minmax(15rem, 3fr)
    minmax(3rem, 1fr)
    minmax(4rem, 1fr)
    minmax(4px, 1fr)
    minmax(3rem, 1fr);
    place-content: start !important;
    padding: .3rem !important;
    min-height: auto !important;
    border: 1 solid #000;
  }

  .grid-cols-evaluation_users {
    grid-template-columns: 4rem 2fr 2fr 1fr 2fr 10rem 4rem 1fr 6rem;
    place-content: start !important;
    padding: 0rem !important;
    padding-bottom: .5rem !important;
    padding-top: .5rem !important;
    min-height: auto !important;
  }

  .grid-cols-approve-large-cm-objectives {
    grid-template-columns: 2fr 1fr 2fr 2fr repeat(1, 9rem 1fr) 1fr repeat(1, 9rem 1fr) 1fr;
    place-content: start !important;
    padding: 0rem !important;
    padding-bottom: .5rem !important;
    padding-top: .5rem !important;
    min-height: auto !important;
  }

  .grid-cols-approve-small-cm-objectives {
    grid-template-columns: 8rem 2fr 1fr 2fr 2fr 2fr 9rem 2fr 8rem;
    place-content: start !important;
    padding: 0rem !important;
    padding-bottom: .5rem !important;
    padding-top: .5rem !important;
    min-height: auto !important;
  }

  .grid-cols-approve-large {
    grid-template-columns: 2fr 1fr 2fr 2fr repeat(1, 9rem 1fr) 1fr repeat(1, 9rem 1fr) repeat(1, 9rem 1fr);
    place-content: start !important;
    padding: 0rem !important;
    padding-bottom: .5rem !important;
    padding-top: .5rem !important;
    min-height: auto !important;
  }

  .grid-cols-approve-small {
    grid-template-columns:
    minmax(6rem, 1fr)
    minmax(12rem, 2fr)
    minmax(3rem, 1fr)
    minmax(10rem, 1.5fr)
    minmax(12rem, 2fr)
    minmax(6rem, 1fr)
    minmax(5rem, 1fr)
    minmax(5rem, 1fr)
    minmax(4rem, 1fr)
    minmax(4rem, 1fr);
    place-content: start !important;
    padding: 0rem !important;
    padding-bottom: .5rem !important;
    padding-top: .5rem !important;
    min-height: auto !important;
  }

  .grid-cols-tracking-large {
    grid-template-columns: 2fr 1fr 2fr 2fr repeat(1, 9rem 1fr) 1fr repeat(1, 9rem 1fr) repeat(1, 9rem 1fr);
    place-content: start !important;
    padding: 0rem !important;
    padding-bottom: .5rem !important;
    padding-top: .5rem !important;
    min-height: auto !important;
  }

  .grid-cols-tracking-small {
    grid-template-columns:
    minmax(10rem, 2fr)
    minmax(3rem, 1fr)
    minmax(10rem, 1.5fr)
    minmax(10rem, 2fr)
    minmax(6rem, 1fr)
    minmax(5rem, 1fr)
    minmax(6rem, 1.5fr)
    minmax(6rem, 1.5fr)
    minmax(6rem, 1.3fr)
    minmax(4.5rem, 1.4fr)
    minmax(2.6rem, 0.8fr)
    minmax(5rem, 1fr);

    place-content: start !important;
    padding: 0rem !important;
    padding-bottom: .5rem !important;
    padding-top: .5rem !important;
    min-height: auto !important;
  }
  

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

  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .chat-height {
    @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
  }
  .inbox-height {
    @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
  }
}

/* third-party libraries CSS */

.tableCheckbox:checked ~ div span {
  @apply opacity-100;
}
.tableCheckbox:checked ~ div {
  @apply border-primary bg-primary;
}

.apexcharts-legend-text {
  @apply !text-body dark:!text-bodydark;
}
.apexcharts-text {
  @apply !fill-body dark:!fill-bodydark;
}
.apexcharts-xcrosshairs {
  @apply !fill-stroke dark:!fill-strokedark;
}
.apexcharts-gridline {
  @apply !stroke-stroke dark:!stroke-strokedark;
}
.apexcharts-series.apexcharts-pie-series path {
  @apply dark:!stroke-transparent;
}
.apexcharts-legend-series {
  @apply !inline-flex gap-1.5;
}
.apexcharts-tooltip.apexcharts-theme-light {
  @apply dark:!border-strokedark dark:!bg-boxdark;
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  @apply dark:!border-strokedark dark:!bg-meta-4;
}
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  @apply dark:!border-meta-4 dark:!bg-meta-4 dark:!text-bodydark1;
}
.apexcharts-xaxistooltip-bottom:after {
  @apply dark:!border-b-meta-4;
}
.apexcharts-xaxistooltip-bottom:before {
  @apply dark:!border-b-meta-4;
}
.apexcharts-tooltip-series-group {
  @apply !pl-1.5;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  @apply fill-primary;
}
.flatpickr-calendar.arrowTop:before {
  @apply dark:!border-b-boxdark;
}
.flatpickr-calendar.arrowTop:after {
  @apply dark:!border-b-boxdark;
}
.flatpickr-calendar {
  @apply !p-6 dark:!bg-boxdark dark:!text-bodydark dark:!shadow-8 2xsm:!w-auto;
}
.flatpickr-day {
  @apply dark:!text-bodydark dark:hover:!bg-meta-4 dark:hover:!border-meta-4;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  @apply !top-7 dark:!fill-white dark:!text-white;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
  @apply !left-7;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
  @apply !right-7;
}
span.flatpickr-weekday,
.flatpickr-months .flatpickr-month {
  @apply dark:!fill-white dark:!text-white;
}
.flatpickr-day.inRange {
  @apply dark:!shadow-7;
  box-shadow: -5px 0 0 #EFF4FB, 5px 0 0 #EFF4FB;
}
.flatpickr-day.inRange, 
.flatpickr-day.prevMonthDay.inRange, 
.flatpickr-day.nextMonthDay.inRange, 
.flatpickr-day.today.inRange, 
.flatpickr-day.prevMonthDay.today.inRange, 
.flatpickr-day.nextMonthDay.today.inRange, 
.flatpickr-day:hover, 
.flatpickr-day.prevMonthDay:hover, 
.flatpickr-day.nextMonthDay:hover, 
.flatpickr-day:focus, 
.flatpickr-day.prevMonthDay:focus, 
.flatpickr-day.nextMonthDay:focus {
  @apply border-gray bg-gray dark:!border-meta-4 dark:!bg-meta-4;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.selected,
.flatpickr-day.endRange {
  @apply dark:!text-white;
}
.flatpickr-day.selected, 
.flatpickr-day.startRange, 
.flatpickr-day.endRange, 
.flatpickr-day.selected.inRange, 
.flatpickr-day.startRange.inRange, 
.flatpickr-day.endRange.inRange, 
.flatpickr-day.selected:focus, 
.flatpickr-day.startRange:focus, 
.flatpickr-day.endRange:focus, 
.flatpickr-day.selected:hover, 
.flatpickr-day.startRange:hover, 
.flatpickr-day.endRange:hover, 
.flatpickr-day.selected.prevMonthDay, 
.flatpickr-day.startRange.prevMonthDay, 
.flatpickr-day.endRange.prevMonthDay, 
.flatpickr-day.selected.nextMonthDay, 
.flatpickr-day.startRange.nextMonthDay, 
.flatpickr-day.endRange.nextMonthDay {
  background: #3C50E0;
  @apply !border-primary !bg-primary hover:!border-primary hover:!bg-primary;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), 
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), 
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 #3C50E0;
}

.map-btn .jvm-zoom-btn {
  @apply flex h-7.5 w-7.5 items-center justify-center rounded border border-stroke bg-white px-0 pt-0 pb-0.5 text-2xl leading-none text-body hover:border-primary hover:bg-primary hover:text-white dark:border-strokedark dark:text-bodydark dark:bg-meta-4 dark:hover:border-primary dark:hover:text-white dark:hover:bg-primary;
}
.mapOne .jvm-zoom-btn {
  @apply left-auto top-auto bottom-0;
}
.mapOne .jvm-zoom-btn.jvm-zoomin {
  @apply right-10;
}
.mapOne .jvm-zoom-btn.jvm-zoomout {
  @apply right-0;
}
.mapTwo .jvm-zoom-btn {
  @apply top-auto bottom-0;
}
.mapTwo .jvm-zoom-btn.jvm-zoomin {
  @apply left-0;
}
.mapTwo .jvm-zoom-btn.jvm-zoomout {
  @apply left-10;
}

.taskCheckbox:checked ~ .box span {
  @apply opacity-100;
}
.taskCheckbox:checked ~ p {
  @apply line-through;
}
.taskCheckbox:checked ~ .box {
  @apply border-primary bg-primary dark:border-primary;
}

.custom-input-date::-webkit-calendar-picker-indicator {
  background: transparent;
}

.carouselOne .swiper-button-next:after,
.carouselOne .swiper-button-prev:after,
.carouselThree .swiper-button-next:after,
.carouselThree .swiper-button-prev:after {
  @apply hidden;
}
.carouselOne .swiper-button-next,
.carouselOne .swiper-button-prev,
.carouselThree .swiper-button-next,
.carouselThree .swiper-button-prev {
  @apply h-12.5 w-12.5 rounded-full bg-white !text-body shadow-default dark:bg-meta-4 dark:!text-bodydark;
}

.carouselTwo .swiper-pagination-bullet,
.carouselThree .swiper-pagination-bullet {
  @apply h-[5px] w-7.5 rounded-none bg-white/50;
}
.carouselTwo .swiper-pagination-bullet-active,
.carouselThree .swiper-pagination-bullet-active {
  @apply bg-white;
}
.carouselTwo .swiper-pagination,
.carouselThree .swiper-pagination {
  @apply xl:!bottom-8;
}

.data-table-common .datatable-search {
  @apply relative overflow-hidden rounded w-100 !ml-0;
}
.data-table-one .datatable-search input {
  @apply h-[46px] w-full rounded border border-stroke bg-transparent px-5 outline-none focus:border-primary dark:border-strokedark dark:bg-meta-4 dark:focus:border-primary;
}
.data-table-common .datatable-selector{
  @apply relative z-20 inline-flex bg-transparent p-0 font-medium text-body dark:text-bodydark outline-none;
}
.data-table-common .datatable-top {
  @apply sm:flex-row-reverse sm:items-center sm:justify-between gap-4 border-b border-stroke py-4.5 px-7.5 dark:border-strokedark flex-col flex sm:gap-x-4 sm:gap-y-0 after:hidden;
}
.data-table-common .datatable-dropdown label{
  @apply inline-flex items-center gap-2.5 font-medium capitalize text-black dark:text-white;
}
.datatable-table .datatable-sorter {
  @apply after:hidden before:hidden;
}
.datatable-table > thead > tr:first-child > th {
  @apply font-medium border-transparent px-2.5 pt-9 pb-2.5;
}
.data-table-common .datatable-table > tbody > tr > td:first-child,
.data-table-common .datatable-table > thead > tr > th:first-child {
  @apply pl-8;
}
.data-table-common .datatable-table > tbody > tr > td:last-child,
.data-table-common .datatable-table > thead > tr > th:last-child {
  @apply pr-8;
}
.data-table-common .datatable-table > thead > tr:last-child > th {
  @apply !border-b border-stroke dark:border-strokedark pb-6;
}
.data-table-common .datatable-table > thead > tr:last-child > th input {
  @apply h-[34px] w-full rounded border border-stroke bg-transparent px-3 text-sm outline-none focus:border-primary dark:border-strokedark dark:bg-meta-4 dark:focus:border-primary;
}
.data-table-common .datatable-table > tbody > tr {
  @apply hover:bg-primary hover:bg-opacity-5;
}
.data-table-one .datatable-table > tbody > tr> td:first-child {
  @apply text-primary dark:text-white;
}
.data-table-common .datatable-table > tbody > tr> td {
  @apply py-5 border-b border-stroke dark:border-strokedark font-medium;
}
.data-table-one .datatable-bottom {
  @apply sm:flex-row-reverse sm:items-center sm:justify-between gap-4 flex-col flex sm:space-x-4 sm:gap-0 after:hidden py-7 px-8;
}
.data-table-common .datatable-wrapper.no-footer .datatable-container {
  @apply border-none;
}
.data-table-common .datatable-info {
  @apply !m-0 font-medium;
}
.data-table-common .datatable-pagination {
  @apply !m-0;
}
.data-table-common .datatable-pagination a {
  @apply cursor-pointer p-0 font-medium text-body dark:text-bodydark flex h-8 w-8 items-center justify-center rounded hover:bg-primary hover:text-white;
}
.data-table-common .datatable-pagination .datatable-active a {
  @apply bg-primary text-white;
}
.data-table-two .datatable-bottom {
  @apply sm:flex-row sm:items-center sm:justify-between gap-4 flex-col flex sm:space-x-4 sm:gap-0 after:hidden py-7 px-8;
}
.data-table-two .datatable-search input {
  @apply h-11.5 w-full rounded border border-stroke bg-whiter px-5 outline-none focus:border-primary dark:border-strokedark dark:bg-meta-4 dark:focus:border-primary;
}

input[type=search]::-webkit-search-cancel-button {
  @apply appearance-none;
}

.custom-input-date::-webkit-calendar-picker-indicator {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
}
.custom-input-date-1::-webkit-calendar-picker-indicator {
  background-image: url(/icon/icon-calendar.svg);
}
.custom-input-date-2::-webkit-calendar-picker-indicator {
  background-image: url(/icon/icon-arrow-down.svg);
}

[x-cloak] {
  display: none !important;
}

.ss-main{
  --tw-border-opacity: 1;
  background-color: initial;
  border-color: rgb(226 232 240/var(--tw-border-opacity));
  border-radius: 0.25rem !important;
  border-width: 1.5px !important;
  color: inherit !important;
  font-weight: 500 !important;
  outline: 2px solid #0000 !important;
  outline-offset: 2px !important;
  padding: 0.75rem 1.25rem !important;
  transition-duration: .15s !important;
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter !important;
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter !important;
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter !important;
  transition-timing-function: cubic-bezier(.4,0,.2,1) !important;
  width: 100% !important;
}
:is(.dark .ss-main) {
  --tw-border-opacity: 1 !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(29 42 57/var(--tw-bg-opacity)) !important;
  border-color: rgb(61 77 96/var(--tw-border-opacity)) !important;
}
:is(.dark .ss-disabled) {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(28 36 52 / var(--tw-bg-opacity)) !important; 
}
.ss-disabled {
  background-color: rgb(245 247 253 / var(--tw-bg-opacity)) !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.
 *


 */

 @import "satoshi.css";
 @import "style.css";
 @import "slimselect";