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-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-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-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-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-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%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%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%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%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 .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::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.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%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;
  overflow-wrap: break-word;
  word-break: break-word; }
  .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: ' \2022 '; }
  .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 'design_system/design_system.css';

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

/*

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

/* This media query is used to fix the zoom issue that happens on ios devices when the user taps on an input field
   this is because on IOS every input that hat a font-size lower than 16px will be zoomed in by the browser
   because of some accessibility features.
   this media query will set the font-size to 1rem (16px) on every input field when the user is using an IOS device
*/
@supports (-webkit-touch-callout: none) {
  select,
  select:focus,
  textarea,
  textarea:focus,
  input,
  input:focus {
   font-size: 1rem !important;
  }
 }

@layer components {
  .sidebar-dropdown-item {
    @apply self-stretch p-2 justify-start items-center inline-flex hover:bg-primary-800 rounded-lg w-full text-sm pl-9;
  }

  .loading-table-line {
    @apply w-full h-4 bg-slate-200 rounded;
  }

  /* BUTTONS */
  /* TODO: define properly the line height for text-{size} classes in theme depending on app */
  .btn {
    @apply px-5 py-2.5 text-sm inline-flex justify-center items-center gap-2 rounded-lg font-medium leading-[150%] focus:ring disabled:cursor-default cursor-pointer;
  }

  .btn.xs {
    @apply text-xs px-3 py-2;
  }

  .btn.sm {
    @apply text-sm px-3 py-2;
  }

  .btn.lg {
    @apply text-base px-5 py-3;
  }

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

  .btn.primary {
    @apply  bg-primary-600 text-white hover:bg-primary-800 focus:ring-blue-200 disabled:bg-gray-100 disabled:text-gray-400 disabled:border disabled:border-gray-200 disabled:cursor-default;
  }

  .btn.secondary {
    @apply border border-gray-300 text-gray-800 hover:text-primary-600 hover:border hover:border-gray-300 hover:bg-gray-100 focus:ring-2 focus:ring-primary-600 focus:bg-gray-100 focus:text-primary-600  disabled:bg-gray-50  disabled:text-gray-400 disabled:border-gray-300;
  }

  .tertiary {
    @apply text-primary-600 hover:text-primary-400 focus:text-primary-400 disabled:text-gray-400;
  }

  .tertiary.cursor-not-allowed {
    @apply text-gray-400 hover:text-gray-400 focus:text-gray-400;
  }

  /* BUTTONS */

  .sidebar-item {
    @apply self-stretch p-2 justify-start items-center inline-flex hover:bg-primary-800 rounded-lg;
  }

  .sidebar-item-content-wrapper {
    @apply grow shrink basis-0 h-6 justify-start items-start gap-3 flex;
    height: auto;
  }

  .sidebar-item-content-link {
    @apply w-full text-white text-base font-medium justify-start items-center inline-flex gap-3;
  }

  .sidebar-item-content-no-link {
    @apply w-full text-white text-base font-medium justify-start items-center inline-flex gap-3;
  }

  .sidebar-item-content-icon {
    @apply w-6 h-6;
  }

  .navbar-item {
    @apply block py-2 px-4 border-b;
  }

  .table-headers-item {
    @apply p-4 border-b text-left text-xs truncate font-semibold;
  }

  .table-row-item {
    @apply p-4 border-b text-left text-sm truncate font-normal max-w-xs;
  }

  .table-row-item-no-truncate {
    @apply p-4 border-b text-left text-sm font-normal;
  }

  .shipments-row-dropdown-item {
    @apply w-full inline-flex justify-center items-center hover:bg-gray-100;
  }

  .shipments-row-dropdown-item-text {
    @apply block px-4 py-2;
  }

  /* Corporate */

  .corporate .table {
    @apply text-left
  }

  .corporate table {
    @apply w-full min-w-table table-fixed border border-collapse text-gray-500
  }

  .corporate .table thead {
    @apply text-gray-700 bg-gray-50 uppercase
  }

  .corporate .table th {
    @apply p-4 border-b text-xs font-semibold
  }

  .corporate .table tr {
    @apply bg-white
  }

  .corporate .table td {
    @apply p-4 border-b text-sm font-normal
  }

  .corporate .currency {
    @apply text-right
  }

  .corporate .table .table-headers {
    @apply sticky top-0 p-4 bg-gray-50 normal-case
  }

  /* Forms */

  .form-label {
    @apply text-gray-900 text-sm font-medium
  }

  .form-field {
    @apply px-5 py-3 text-sm bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-600 focus:border-primary-600
  }

  .forms-field .input-wrapper.with-errors {
    @apply border-red-500 bg-red-50
  }

  .form-submit {
    @apply px-5 py-3 bg-primary-600 rounded-lg text-white hover:bg-primary-800
  }

  .form-submit[disabled="disabled"] {
    @apply bg-gray-300 text-gray-500 cursor-default
  }

  .form-link {
    @apply text-primary-600 text-sm font-normal
  }

  .form-field-error {
    @apply text-sm text-red-500
  }

  .with-error {
    @apply text-sm text-red-600
  }

  .field_with_errors {
    @apply flex flex-col
  }

  .form-address-field {
    @apply px-4 py-2 bg-gray-50 rounded-lg border border-gray-300 justify-start items-center gap-2.5 inline-flex
  }

  .field_with_errors input,
  .field_with_errors select,
  .field_with_errors textarea {
    @apply border-red-500 bg-red-50
  }

  /* Forms end */

  .shipments-row-dropdown-item {
    @apply w-full inline-flex justify-center items-center hover:bg-gray-100;
  }

  .shipments-row-dropdown-item-text {
    @apply block px-4 py-2;
  }

  /* General UI Components */

  .primary-button-with-icon {
    @apply text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center
  }

  .normal-button-with-icon {
    @apply text-gray-700 border border-gray-200 hover:bg-gray-300 focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center
  }

  .standard-input {
    @apply block w-full px-4 py-3 mb-3 leading-tight text-gray-700 border rounded appearance-none focus:outline-none focus:bg-white
  }

  .standard-label {
    @apply block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase
  }

  .standard-radio {
    @apply rounded-full checked:bg-primary-600 checked:border-primary-600 hover:checked:text-primary-600 focus:ring-primary-600 focus:checked:bg-primary-600 focus:shadow-none focus:outline-none
  }

  .standard-checkbox {
    @apply rounded checked:bg-primary-600 checked:border-primary-600 hover:checked:text-primary-600 focus:ring-primary-600 focus:checked:bg-primary-600 focus:shadow-none focus:outline-none
  }
  /* GENERAL UI COMPONENTS END */

  /* FORMS COMPONENTS */

  /* Form field */
  .forms-field {
    @apply flex flex-col items-start gap-2;
  }

  .forms-field .field_with_errors {
    @apply w-full order-2
  }

  /* Input wrapper */

  .forms-field .input-wrapper {
    @apply px-4 py-3 order-2 border border-gray-300 rounded-lg bg-white flex self-stretch gap-2.5 focus-within:ring-1 focus-within:ring-primary-600
  }

  .input-with-select .input-wrapper {
    @apply rounded-e-lg rounded-s-none;
  }

  .forms-field.small .input-wrapper {
    @apply py-2
  }

  .forms-field.large .input-wrapper {
    @apply py-3.5
  }

  .forms-field.with-validation .input-wrapper {
    @apply focus-within:ring-0 [&:has(input:valid)]:bg-white [&:has(input:valid)]:border-gray-300 [&:has(input:valid)]:focus-within:border-gray-300 [&:has(input:invalid)]:bg-red-50 [&:has(input:invalid)]:border-red-500 [&:has(input:invalid)]:focus-within:border-red-500
  }

  /* Input */

  .focus-container {
    @apply border-primary-600 border mt-[-1px] min-h-11
  }

  .forms-field .input-wrapper input {
    @apply leading-6 text-sm order-2 grow p-0 bg-transparent border-0 basis-0 shrink-0 text-gray-900 focus:ring-0 placeholder:text-gray-400 disabled:text-gray-400 disabled:cursor-not-allowed;
  }

  .forms-field.with-validation .input-wrapper input {
    @apply valid:text-gray-900 invalid:text-red-700
  }

  .forms-field.large .input-wrapper input {
    @apply text-base
  }

  .forms-field .input-wrapper textarea {
    @apply text-base leading-6 text-sm order-2 grow p-0 bg-transparent border-0 basis-0 shrink-0 text-gray-900 focus:ring-0 placeholder:text-gray-400 disabled:text-gray-400 disabled:cursor-not-allowed resize-none valid:text-gray-900 invalid:text-red-700;
  }

  /* Icon */
  .forms-field .input-wrapper i {
    @apply flex justify-center items-center order-1 text-gray-400
  }

  /* Clear button */
  .forms-field .input-wrapper span {

    @apply order-3 flex justify-center items-center text-gray-400 text-xs
  }

  .forms-field .input-wrapper:has(input:disabled) span {
    @apply hidden
  }

  /* Input elements variants */
  .forms-field.with-validation .input-wrapper input:valid ~ :is(i, span) {
    @apply text-gray-400
  }

  .forms-field.with-validation .input-wrapper input:invalid ~ :is(i, span) {
    @apply text-red-700
  }

  .forms-field.with-validation .input-wrapper textarea:valid ~ :is(i, span) {
    @apply text-gray-400
  }

  .forms-field.with-validation .input-wrapper textarea:invalid ~ :is(i, span) {
    @apply text-red-700
  }

  /* Help */
  .forms-field .help {
    @apply text-sm order-3 font-normal leading-tight text-gray-500
  }

  .forms-field .help.with-error{
    @apply  text-red-500
  }

  /* Label */
  .forms-field label {
    @apply text-sm order-1 font-medium text-gray-900
  }

  /* Text variants */
  .forms-field.small :is(label, .help) {
    @apply text-sm
  }

  .forms-field .input-wrapper ~ .help ul{
    @apply grid
  }

  .forms-field.with-validation .input-wrapper ~ :is(label, .help) li {
    @apply text-gray-500
  }

  .forms-field.with-validation .input-wrapper:has(input:invalid) ~ :is(label) {
    @apply text-red-600
  }

  /* Checkbox and radio */

  .forms-checks {
    @apply flex flex-col items-start gap-2;
  }

  .forms-checks .input-wrapper {
    @apply inline-flex items-center gap-2;
  }

  .forms-checks .input-wrapper input {
    @apply w-4 h-4 border border-gray-300 bg-gray-50 checked:bg-primary-600 checked:border-primary-600 outline-0 ring-0 ring-offset-0 self-start
  }

  .forms-checks .input-wrapper textarea {
    @apply w-4 h-4 border border-gray-300 bg-gray-50 checked:bg-primary-600 checked:border-primary-600 outline-0 ring-0 ring-offset-0 self-start
  }

  .forms-checks .input-wrapper input[type=checkbox] {
    @apply rounded
  }

  .forms-checks .input-wrapper input[type=radio] {
    @apply rounded-full
  }

  .forms-checks .input-wrapper div {
    @apply flex flex-col justify-start items-start gap-0.5
  }

  .forms-checks .input-wrapper div label {
    @apply text-sm leading-4 font-medium text-gray-900
  }

  .forms-checks .input-wrapper div .help {
    @apply text-xs font-normal text-gray-500
  }

  .forms-checks .input-wrapper input:disabled ~  div :is(label, .help) {
    @apply text-gray-400 cursor-not-allowed
  }

  .forms-checks .input-wrapper textarea:disabled ~  div :is(label, .help) {
    @apply text-gray-400 cursor-not-allowed
  }

  /* Select */
  .forms-select {
    @apply forms-field
  }

  .forms-select > select, .forms-select > input {
    @apply self-stretch text-sm  grow p-3 rounded-lg border border-gray-300 bg-white basis-0 shrink-0 text-gray-900 focus:ring-0 placeholder:text-gray-400 disabled:text-gray-400 disabled:cursor-not-allowed;
  }

  .forms-select.small select {
    @apply py-2 px-2.5 leading-tight
  }

  .forms-select.large select {
    @apply py-3.5 px-4 text-base
  }
  .forms-select.with-validation select {
    @apply valid:text-green-700 invalid:text-red-700 invalid:border-red-500 valid:border-green-500 valid:bg-green-50 invalid:bg-red-50
  }

  .forms-select.with-validation .input-wrapper:has(input:invalid) input::placeholder {
    @apply text-red-700
  }

  .forms-select.with-validation select:valid ~ :is(label, .help) {
    @apply text-green-700
  }

  .forms-select.with-validation select:invalid ~ :is(label, .help) {
    @apply text-red-600
  }

  .forms-select ul {
    @apply absolute z-20 w-full shadow max-h-56 rounded-lg flex flex-col text-sm font-medium bg-white top-full mt-2 overflow-auto focus:outline-none
  }

  /* FORMS COMPONENTS END */
}

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
      display: none;
  }
 /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
  }
}

/* Modal view styles */
.accordion {
  @apply max-w-screen-md p-0
}

.accordion-header {
  @apply flex justify-between items-center p-4 cursor-pointer
}

.accordion-content {
  @apply hidden
}

.accordion-item.open .accordion-content {
  @apply block
}


.form-select-placeholder:has(option:checked[value='']) {
  @apply text-gray-500
}

/* End modal view styles */

/* Scrollbar styles */
.scrollbar-thumb-gray {
  scrollbar-width: thin;
  scrollbar-color: theme('colors.gray.300') transparent;
}
/* End of scrollbar styles */

/* Error message styles */
.field-error-message {
  @apply order-last text-sm font-normal text-red-500
}
/* End error message styles */

.hide-caret {
  caret-color: transparent;
}

.sortable-ghost {
  @apply opacity-50 bg-gray-200;
}

.sortable-drag {
  @apply shadow-md border-primary-400;
}

.sortable-swap {
  @apply opacity-50 bg-gray-200;
}

/* Input Tag Styles  */
.tag {
  @apply px-3 py-1 rounded-md justify-start items-center gap-1 bg-gray-100;
}

.tag .content {
  @apply text-center text-xs font-medium leading-tight flex;
}

.tag .content .text {
  @apply text-gray-900;
}

.tag .content .close-btn {
  @apply ml-1 cursor-pointer text-gray-500 stroke-1;
}
@import 'actiontext.css';
.ds-badge {
  @apply px-3 py-0.5 rounded-md inline-flex justify-center items-center gap-1;
}

.ds-badge .ds-badge__close-icon {
  @apply cursor-pointer;
}

/* Badge Sizes */
.ds-badge.ds-badge--small {
  @apply px-2.5 py-0.5;
}

.ds-badge.ds-badge--large {
  @apply px-3 py-0.5;
}

.ds-badge.ds-badge--small .ds-badge__icon svg {
  @apply w-3.5 h-3.5;
}

.ds-badge.ds-badge--large .ds-badge__icon svg {
  @apply w-4 h-4;
}

.ds-badge.ds-badge--small .ds-badge__close-icon svg {
  @apply w-3 h-3;
}

.ds-badge.ds-badge--large .ds-badge__close-icon svg {
  @apply w-3.5 h-3.5;
}
/* button appearance */
.ds-button {
  @apply inline-flex gap-2 items-center justify-center rounded-lg font-medium transition focus:outline-none;
}

.ds-button--primary {
  @apply bg-primary-600 text-white border border-primary-600 hover:bg-primary-800 focus:bg-primary-800 focus:ring-primary-200 focus:ring-[3px];
}

.ds-button--secondary {
  @apply bg-white border border-gray-300 text-gray-800 hover:bg-gray-100 hover:text-primary-600 focus:bg-white focus:text-primary-600 focus:ring-primary-600 focus:ring-2;
}

.ds-button--tertiary {
  @apply bg-transparent border-0 text-primary-600 hover:text-primary-400 focus:ring-gray-200 focus:ring-2;
}

.ds-button--alert {
  @apply bg-red-700 text-white hover:bg-red-800 focus:bg-red-800 focus:ring-red-200 focus:ring-[3px];
}

.ds-button--agreement {
  @apply bg-sky-600 text-white hover:bg-sky-700 focus:bg-sky-700 focus:ring-sky-200 focus:ring-[3px];
}

/* button disabled */
.ds-button--disabled,
.ds-button--disabled:disabled {
  cursor: not-allowed !important;
}

a.ds-button--disabled {
  pointer-events: none;
}

.ds-button--primary.ds-button--disabled, 
.ds-button--alert.ds-button--disabled,
.ds-button--agreement.ds-button--disabled {
  @apply bg-gray-300 text-gray-500 border border-gray-300;
}

.ds-button--secondary.ds-button--disabled {
  @apply border border-gray-300 bg-gray-50 text-gray-500;
}

.ds-button--tertiary.ds-button--disabled {
  @apply border-0 bg-transparent text-gray-400;
}

/* button size */
.ds-button--base {
  @apply px-4 py-[10px] text-sm h-[42px];
}

.ds-button--sm {
  @apply px-3 py-2 text-sm h-[37px];
}

.ds-button--xs {
  @apply px-3 py-2 text-xs h-[34px];
}

/* button svg size */
.ds-button--sm svg,
.ds-button--base svg {
  @apply w-[18px] h-[18px];
}

.ds-button--xs svg {
  @apply w-[16px] h-[16px];
}

/* buttonIcon svg color */
.ds-button.ds-button-icon {
  @apply focus:outline-none  focus:ring-2;
}

.ds-button svg,
.ds-button-icon svg {
  @apply flex items-center justify-center;
}

.ds-button--primary svg path, 
.ds-button--alert svg path, 
.ds-button--agreement svg path,
.ds-button--primary.ds-button-icon svg path,
.ds-button--alert.ds-button-icon svg path,
.ds-button--agreement.ds-button-icon svg path {
  @apply fill-white;
}

.ds-button--secondary svg path, .ds-button--secondary.ds-button-icon svg path {
  @apply fill-gray-800 hover:fill-primary-600 focus:fill-primary-600;
}

.ds-button--secondary:hover svg path,
.ds-button--secondary.ds-button-icon:hover svg path {
  @apply fill-primary-600;
}

.ds-button--tertiary svg path, .ds-button--tertiary.ds-button-icon svg path {
  @apply fill-primary-600 hover:fill-primary-400 focus:fill-primary-400;
}

.ds-button--primary.ds-button--disabled svg path, 
.ds-button--alert.ds-button--disabled svg path,
.ds-button--agreement.ds-button--disabled svg path,
.ds-button--primary.ds-button--disabled.ds-button-icon svg path,
.ds-button--alert.ds-button--disabled.ds-button-icon svg path,
.ds-button--agreement.ds-button--disabled.ds-button-icon svg path {
  @apply fill-gray-500;
}

.ds-button--secondary.ds-button--disabled svg path,
.ds-button--secondary.ds-button--disabled.ds-button-icon svg path  {
  @apply fill-gray-500;
}

.ds-button--tertiary.ds-button--disabled svg path,
.ds-button--tertiary.ds-button--disabled.ds-button-icon svg path  {
  @apply fill-gray-400;
}

/* icon padding */
.ds-button--base.ds-button-icon {
  @apply p-[10px];
}

.ds-button--xs.ds-button-icon,
.ds-button--sm.ds-button-icon {
  @apply p-2;
}

/* buttonIcon shape */
.ds-button-icon--circle {
  @apply rounded-full;
}

.ds-button-icon--square {
  @apply rounded-lg;
}
.ds-checkbox .ds-checkbox-input {
  @apply w-4 h-4 checked:bg-primary-600 checked:focus:bg-primary-600 checked:hover:bg-primary-600 checked:focus:ring-primary-600 focus:ring-transparent focus:border-gray-400 mt-[2px] border-gray-400 rounded-[4px] disabled:bg-gray-200 disabled:cursor-not-allowed disabled:pointer-events-none disabled:border-gray-300 disabled:checked:bg-primary-300 disabled:checked:border-primary-300;
}

.ds-checkbox svg {
  @apply mt-px w-4.5 h-4.5;
}
.ds-combobox .ds-input-icon-end svg {
  @apply cursor-pointer;
}

.ds-combobox .ds-input-field.ds--disabled svg {
  @apply pointer-events-none;
}

.ds-combobox .ds-input-field.ds-error svg {
  @apply text-red-600;
}
.ds-combobox-search-fetch .ds-input-field.ds-error .ds-input-icon-start svg {
  @apply fill-red-600;
}
@import 'input_field.css';
@import 'button.css';
@import "checkbox.css";
@import 'radio.css';
@import 'select.css';
@import 'toggle.css';
@import 'tooltip.css';
@import 'dropdown.css';
@import 'input_verification_code.css';
@import 'errors.css';
@import 'combobox.css';
@import "popover.css";
@import "badge.css";
@import 'combobox_search_fetch.css';
.ds-dropdown {
  @apply absolute top-0 left-0 right-0 z-20;
}

.ds-dropdown .ds-dropdown-container {
  @apply absolute top-0 left-0 right-0 z-[10];
}

.ds-dropdown .ds-dropdown-menu {
  @apply bg-white border border-gray-200 rounded-lg shadow-md py-1 max-h-[230px] overflow-auto transition-all ease-out;
}

.ds-dropdown .ds-dropdown-title {
  @apply text-sm font-semibold text-gray-900 px-4 py-2;
}

.ds-dropdown .ds-dropdown-item-default {
  @apply border-b border-b-gray-200 font-semibold;
}

.ds-dropdown .ds-dropdown-item,
.ds-dropdown .ds-dropdown-item-default {
  @apply text-gray-900 text-sm px-4 py-2 hover:bg-gray-100 cursor-pointer w-full text-left flex items-center justify-between min-h-[20px];
}

.ds-dropdown .ds-dropdown-item--selected {
  @apply text-primary-600 h-4 w-4;
}

.ds-dropdown .ds-dropdown-item--disabled {
  @apply cursor-no-drop;
}

.ds-dropdown .ds-dropdown-item--disabled button {
  @apply text-gray-500 pointer-events-none;
}

.ds-dropdown .ds-dropdown-match {
  @apply text-primary-600;
}

.ds-dropdown.ds-dropdown-component-preview .ds-dropdown-menu {
  @apply block;
}

.ds-field-form.ds-error .ds-message-error {
  @apply mt-2 leading-tight text-sm font-normal text-red-600
}

.ds-field-form.ds-error label {
  @apply text-red-600;
}

/* select error */
.ds-field-form.ds-error .ds-input,
.ds-field-form.ds-error button.ds-select-input,
.ds-field-form.ds-error .ds-select-input:focus,
.ds-select.ds-error select, .ds-select.ds-error select:focus {
  @apply bg-red-50 border-red-500 text-red-700 ring-red-500 shadow-red-500/20;
}

.ds-field-form.ds-error .ds-select-input-icon svg path {
  @apply fill-red-600;
}
.ds-input-field .ds-input  {
  @apply w-full border rounded-md px-3 text-gray-900 bg-white border-gray-300 h-[42px] text-sm focus:border-2  focus:border-primary-600 focus:outline-none focus:ring-0 focus:bg-gray-50
}

.ds-input-field .ds-input-container {
  @apply relative;
}

.ds-input-field .ds-input-small {
  @apply h-[37px] text-sm;
}

.ds-input-field .ds-input-icon-start {
  @apply absolute inset-y-0 left-0 flex items-center pl-3;
}

.ds-input-field .ds-input-icon-start svg,
.ds-input-field .ds-input-icon-end svg {
  @apply w-4.5 h-4.5;
}

.ds-input-field .ds-input-icon-end {
  @apply absolute inset-y-0 right-0 flex items-center pr-3;
}

.ds-input-field .ds-input-with-start-icon {
  @apply pl-10;
}
.ds-input-field .ds-input-with-end-icon {
  @apply pr-10;
}

.ds-input-field .ds-input-icon-text {
  @apply text-sm text-gray-500;
}

.ds-input-field .ds-input-error {
  @apply bg-red-50 border-red-600 text-red-700;
}

.ds-input-field .ds-input-field-label svg path {
  @apply text-gray-500;
}

.ds-input-field.ds--disabled .disabled-dark.ds-input {
  @apply bg-gray-200;
}

.ds-input-field.ds--disabled .ds-input {
  @apply border-gray-300 text-gray-500 bg-gray-100 pointer-events-none;
}

.ds-input-field.ds--disabled .ds-input-icon-end svg path,
.ds-input-field.ds--disabled .ds-input-icon-start svg path {
  @apply fill-gray-500;
}

.ds-input-field .ds-input-icon-end--success {
  @apply hidden;
}

.ds-input-field.ds-input--success .ds-input-icon-end--success {
  @apply text-green-500 block;
}
.ds-input-verification-code .ds-input {
  @apply rounded-l-none;
}

.ds-input-verification-code .ds-select-input {
  @apply rounded-r-none border-r-transparent focus:border-r focus:border-r-primary-600;
}

.ds-input-verification-code .helper-text {
  @apply leading-tight text-sm font-normal text-gray-500;
}

.ds-input-verification-code.ds-error .helper-text {
  @apply text-red-700;
}

.ds-input-verification-code.ds-error label {
  @apply text-red-700;
}

.ds-input-verification-code .check-icon path {
  @apply fill-green-500;
}

.ds-input-verification-code .ds-select-input {
  @apply bg-gray-50;
}

.ds-input-verification-code.ds--disabled .ds-select-input--light {
  @apply border-r-transparent;
}
.ds-popover {
  @apply relative inline-block;
}

.ds-popover .ds-popover-content {
  @apply absolute z-50 min-w-64 max-w-sm bg-white rounded-[4.80px] p-4 shadow-[0px_1px_2px_-1px_rgba(0,0,0,0.10),0px_1px_3px_0px_rgba(0,0,0,0.10)] outline outline-1 outline-gray-200 opacity-0 invisible transform transition-all duration-200 ease-in-out;
}

.ds-popover[data-popover-active="true"] .ds-popover-content {
  @apply visible opacity-100;
}

.ds-popover .popover-arrow {
  @apply absolute w-2 h-2 bg-white border border-gray-300 rotate-45;
}

.ds-popover .arrow-right {
  @apply right-full top-1/2 -mt-1 -mr-[5px] border-r-0 border-t-0;
}

.ds-popover .arrow-top {
  @apply top-full left-1/2 -ml-1 -mt-[5px] border-t-0 border-l-0;
}

.ds-popover .arrow-bottom {
  @apply left-1/2 bottom-full -ml-1 -mb-[5px] border-b-0 border-l-0 -rotate-45;
}

.ds-popover .arrow-left {
  @apply left-full top-1/2 -mt-1 -ml-[5px] border-l-0 border-t-0 -rotate-45;
}
.ds-radio .ds-radio-input {
  @apply mt-1 mb-1 h-4 w-4 border-gray-400 rounded-full checked:bg-primary-600 checked:border-primary-600 hover:checked:bg-primary-600 focus:ring-primary-600 focus:checked:bg-primary-600 focus:shadow-none focus:outline-none disabled:bg-gray-200 disabled:cursor-not-allowed disabled:pointer-events-none disabled:border-gray-300 disabled:checked:bg-primary-300 disabled:checked:border-primary-300
}

.ds-select .ds-select-label-container {
  @apply flex items-center mb-2 gap-x-2;
}

.ds-select .ds-select-label {
  @apply block text-sm font-medium text-gray-900;
}

.ds-select .ds-select-input {
  @apply text-start;
}

.ds-select .ds-select-input-container {
  @apply relative;
}

.ds-select .ds-select-input {
  @apply w-full border border-gray-300 rounded-lg text-gray-900 text-sm bg-white;
}

.ds-select .ds-select-input:focus {
  @apply border-primary-600 bg-gray-50 border-2;
}

.ds-select .ds-select-input:focus .ds-select-input-icon svg {
  transform: rotate(180deg);
}

.ds-select .ds-select-input-icon {
  @apply text-sm text-gray-900 absolute inset-y-0 right-4 flex items-center pointer-events-none;
}

/* select padding */
.ds-select .ds-select-input--base {
  @apply pl-4 pr-9 h-[42px] leading-[125%];
}

.ds-select .ds-select-input--badges {
  @apply pl-4 pr-9 py-1.5 leading-[125%];
}

.ds-select .ds-select-input--sm {
  @apply pl-4 pr-9 h-[37px] leading-[150%];
}

/* select tooltip */
.ds-select .ds-select-tooltip {
  @apply w-4 h-4;
}

.ds-select .ds-select-tooltip svg {
  @apply text-gray-500;
}

/* select helper-text */
.ds-select .ds-select-helper-text {
  @apply mt-2 leading-tight text-sm font-normal text-gray-500;
}


.ds-select .ds-select-input-icon svg.ds-select-input-icon-error,
.ds-select .ds-select-label.ds-select-label-error {
  @apply text-red-600;
}

.ds-select .ds-select-error-message {
  @apply mt-2 leading-tight text-sm font-normal text-red-600;
}

/* disabled status */
.ds-select.ds--disabled .ds-select-input--light,
.ds-select-dropdown.ds--disabled .ds-select-input--light {
  @apply border-gray-300 text-gray-500 bg-gray-100 cursor-no-drop pointer-events-none;
}

.ds-select.ds--disabled .ds-select-input--dark,
.ds-select-dropdown.ds--disabled .ds-select-input--dark {
  @apply bg-gray-200 text-gray-500 cursor-no-drop pointer-events-none;
}

.ds-select.ds--disabled .ds-select-input .ds-select-input-icon svg,
.ds-select-dropdown.ds--disabled .ds-select-input .ds-select-input-icon svg {
  @apply text-gray-500 pointer-events-none;
}
.ds-toggle .ds-toggle-btn {
  @apply w-9 h-5 bg-gray-400 rounded-full relative transition-colors my-1;
}

.ds-toggle .peer:checked ~ .ds-toggle-btn {
  @apply bg-primary-600;
}

.ds-toggle .peer:disabled ~ .ds-toggle-btn {
  @apply bg-gray-300 cursor-not-allowed;
}

.ds-toggle .peer:disabled:checked ~ .ds-toggle-btn {
  @apply bg-primary-300;
}

.ds-toggle .ds-toggle-btn::after {
  content: '';
  @apply absolute top-[2px] start-[2px] bg-white rounded-full h-4 w-4 transition-all;
}

.ds-toggle .peer:checked ~ .ds-toggle-btn::after {
  transform: translateX(100%);
  border-color: white;
}

.rtl .peer:checked ~ .ds-toggle-btn::after {
  transform: translateX(-100%);
}
.ds-tooltip {
  @apply relative inline-block
}

.ds-tooltip .ds-tooltip-container {
  @apply absolute z-10 hidden flex-col items-center min-w-max
}

.ds-tooltip .ds-tooltip-content {
  @apply bg-black text-white text-xs leading-none rounded-md shadow-lg p-2
}

.ds-tooltip .ds-tooltip-arrow {
  @apply w-3 h-3 bg-black absolute
}

.ds-tooltip-placement-top {
  @apply bottom-full left-1/2 -translate-x-1/2 mb-2;
}

.ds-tooltip-placement-right {
  @apply left-full top-1/2 -translate-y-1/2 ml-2;
}

.ds-tooltip-placement-bottom {
  @apply top-full left-1/2 -translate-x-1/2 mt-2;
}

.ds-tooltip-placement-left {
  @apply right-full top-1/2 -translate-y-1/2 mr-2;
}

.ds-tooltip-arrow-top {
  @apply top-full left-1/2 -translate-x-1/2 mt-[-6px] rotate-45;
}

.ds-tooltip-arrow-right {
  @apply left-0 top-1/2 -translate-y-1/2 -ml-1 rotate-45;
}

.ds-tooltip-arrow-bottom {
  @apply bottom-full left-1/2 -translate-x-1/2 mb-[-6px] rotate-45;
}

.ds-tooltip-arrow-left {
  @apply right-0 top-1/2 -translate-y-1/2 -mr-1 rotate-45;
}

.alert-icon .icon-color {
    fill: white;
}

.alert-icon-black .icon-color {
    fill: 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.
 *



 */
pre {
  margin: 0px !important;
};
.blankslate-shadow {
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px -1px rgba(0, 0, 0, 0.10);
}
.card-shadow {
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10),
              0px 1px 2px -1px rgba(0, 0, 0, 0.10);
}
.background-animation {
  background: linear-gradient(154.44deg, rgb(242, 233, 236) 11.61%, rgb(232, 239, 237) 25.95%, rgb(219, 223, 244) 67.47%, rgb(215, 227, 244) 99.5%);
}
/* Missing js error message styles */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in-toast-alert {
  opacity: 0;
  animation: fadeIn 0.5s ease-in-out 5s forwards;
}
/* End missing js error message styles */
.grey-alert {
  color: black;
  background-color: #F3F4F6;
}

.yellow-alert {
  color: #723B13;
  background-color: #FDFDEA;
}

.red-alert {
  color: #9B1C1C;
  background-color: #FDF2F2;
}

.purple-alert {
  color: #0B005A;
  background-color: #F4F2FF;
}

.green-alert {
  color: #03543F;
  background-color: #F3FAF7;
}

.blue-alert {
  color: #1E429F;
  background-color: #EBF5FF;
}

.links-alert {
  color: #5233EA;
}
@media (min-width: 767px) {
  .rate-alerts  > div {
    margin-right: -10px;
    border: 1px solid #E5E7EB;
    border-bottom-left-radius: 5px;
  }
  .rate-alerts  > div:last-child {
    margin-right: 0;
    border-bottom-right-radius: 5px;
  }
}
@media (max-width: 766px) {
  .rate-alerts  > div {
    border: 1px solid #E5E7EB;
  }
  .rate-alerts  > div:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
}

@media (min-width: 1024px) {
  .custom-create-button svg {
    display: none;
  }
}

@media (min-width: 1400px) {
  .custom-create-button svg {
    display: block;
  }  
}
.ruby-display {
  display: ruby;
}
.icon-inline-display {
  display: ruby;
}
.multiline-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* Número de líneas que quieres mostrar */
    overflow: hidden;
}
.carrier-image-container svg {
  width: 24px;
  height: 24px;
}
.origin-container svg {
  width: 24px;
  height: 24px;
}
div.primary:hover {
  background: linear-gradient(87deg, #497AF8 26.03%, #7B3FF3 110.01%);
  color: white;
};