.daterangepicker {
  position: absolute;
  color: inherit;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 278px;
  max-width: none;
  padding: 0;
  margin-top: 7px;
  top: 100px;
  left: 20px;
  z-index: 3001;
  display: none;
  font-family: arial;
  font-size: 15px;
  line-height: 1em;
}

.daterangepicker:before, .daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.daterangepicker:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
}

.daterangepicker:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
}

.daterangepicker.opensleft:before {
  right: 9px;
}

.daterangepicker.opensleft:after {
  right: 10px;
}

.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.opensright:before {
  left: 9px;
}

.daterangepicker.opensright:after {
  left: 10px;
}

.daterangepicker.drop-up {
  margin-top: -7px;
}

.daterangepicker.drop-up:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid #ccc;
}

.daterangepicker.drop-up:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
  float: none;
}

.daterangepicker.single .drp-selected {
  display: none;
}

.daterangepicker.show-calendar .drp-calendar {
  display: block;
}

.daterangepicker.show-calendar .drp-buttons {
  display: block;
}

.daterangepicker.auto-apply .drp-buttons {
  display: none;
}

.daterangepicker .drp-calendar {
  display: none;
  max-width: 270px;
}

.daterangepicker .drp-calendar.left {
  padding: 8px 0 8px 8px;
}

.daterangepicker .drp-calendar.right {
  padding: 8px;
}

.daterangepicker .drp-calendar.single .calendar-table {
  border: none;
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
  color: #fff;
  border: solid black;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
}

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 32px;
  width: 32px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.daterangepicker .calendar-table {
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: #fff;
}

.daterangepicker .calendar-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
  background-color: #eee;
  border-color: transparent;
  color: inherit;
}

.daterangepicker td.week, .daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}

.daterangepicker td.in-range {
  background-color: #ebf4f8;
  border-color: transparent;
  color: #000;
  border-radius: 0;
}

.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 4px;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #357ebd;
  border-color: transparent;
  color: #fff;
}

.daterangepicker th.month {
  width: auto;
}

.daterangepicker td.disabled, .daterangepicker option.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: line-through;
}

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}

.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  border-top: 1px solid #ddd;
  display: none;
  line-height: 12px;
  vertical-align: middle;
}

.daterangepicker .drp-selected {
  display: inline-block;
  font-size: 12px;
  padding-right: 8px;
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
}

.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
}

.daterangepicker.show-calendar .ranges {
  margin-top: 8px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.daterangepicker .ranges li {
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

.daterangepicker .ranges li:hover {
  background-color: #eee;
}

.daterangepicker .ranges li.active {
  background-color: #08c;
  color: #fff;
}

/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto;
  }

  .daterangepicker .ranges ul {
    width: 140px;
  }

  .daterangepicker.single .ranges ul {
    width: 100%;
  }

  .daterangepicker.single .drp-calendar.left {
    clear: none;
  }

  .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
    float: left;
  }

  .daterangepicker {
    direction: ltr;
    text-align: left;
  }

  .daterangepicker .drp-calendar.left {
    clear: left;
    margin-right: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .daterangepicker .drp-calendar.right {
    margin-left: 0;
  }

  .daterangepicker .drp-calendar.right .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    padding-right: 8px;
  }

  .daterangepicker .ranges, .daterangepicker .drp-calendar {
    float: left;
  }
}

@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto;
  }

  .daterangepicker .ranges {
    float: left;
  }

  .daterangepicker.rtl .ranges {
    float: right;
  }

  .daterangepicker .drp-calendar.left {
    clear: none !important;
  }
}

/* Dragula */

.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
  filter: alpha(opacity=80);
}

.gu-hide {
  display: none !important;
}

.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
}

.gu-transit {
  opacity: 0.2;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)';
  filter: alpha(opacity=20);
}

/* Component level reset. Explicitly for item during cloning */

.media-library,
.media-library *,
.media-library-item * {
  all: unset;
  position: relative;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* `all:unset` for sortable rows in Vue 3 does too much */

.media-library-sortable .media-library-item {
  -webkit-user-drag: element;
}

.media-library script,
.media-library-item script {
  display: none;
}

/* Base */

.media-library {
  --text-opacity: 1;
  color: #4a5568;
  color: rgba(74, 85, 104, var(--text-opacity));
}

/* Order */

.media-library {
  display: grid;
  grid-template-areas:
        'errors'
        'items'
        'uploader';
  margin-bottom: 2px;
}

.media-library-listerrors {
  grid-area: errors;
  margin-bottom: -2px;
}

.media-library-items {
  grid-area: items;
  margin-bottom: -2px;
}

.media-library-uploader {
  grid-area: uploader;
  margin-bottom: -2px;
}

/* When cloning */

.media-library-item.gu-mirror {
  border-width: 2px;
  --border-opacity: 1;
  border-color: #e2e8f0;
  border-color: rgba(226, 232, 240, var(--border-opacity));
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Uploader */

.media-library-add {
  display: flex;
}

.media-library-replace,
.media-library-replace .media-library-dropzone,
.media-library-replace .media-library-placeholder {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Items */

.media-library-multiple .media-library-items {
  display: block;
  border-width: 2px;
  --border-opacity: 1;
  border-color: #e2e8f0;
  border-color: rgba(226, 232, 240, var(--border-opacity));
}

.media-library-item {
  display: flex;
  align-items: center;
  min-width: 0;
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
}

.media-library-item-row:not(:last-child) {
  border-bottom-width: 1px;
  --border-opacity: 1;
  border-color: #e2e8f0;
  border-color: rgba(226, 232, 240, var(--border-opacity));
}

.media-library-filled.media-library-sortable .media-library-add .media-library-dropzone:before {
  content: '';
}

.media-library-row-drag,
.media-library-filled.media-library-sortable .media-library-add .media-library-dropzone:before {
  align-self: stretch;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 2rem;
  --bg-opacity: 1;
  background-color: #edf2f7;
  background-color: rgba(237, 242, 247, var(--bg-opacity));
  --bg-opacity: 0.5;
  border-right-width: 1px;
  --border-opacity: 1;
  border-color: #e2e8f0;
  border-color: rgba(226, 232, 240, var(--border-opacity));
  cursor: move;
  --text-opacity: 1;
  color: #a0aec0;
  color: rgba(160, 174, 192, var(--text-opacity));
}

.media-library-row-drag:hover {
  --text-opacity: 1;
  color: #667eea;
  color: rgba(102, 126, 234, var(--text-opacity));
}

.media-library-row-remove {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  --text-opacity: 1;
  color: #a0aec0;
  color: rgba(160, 174, 192, var(--text-opacity));
  cursor: pointer;
  opacity: 0.5;
  cursor: pointer;
}

.media-library-row-remove:hover {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 300ms;
}

/* Invalid media, aka failed uploads */

.media-library-listerrors {
  display: block;
  border-width: 2px;
  --border-opacity: 1;
  border-color: #feb2b2;
  border-color: rgba(254, 178, 178, var(--border-opacity));
  --border-opacity: 0.5;
  --bg-opacity: 1;
  background-color: #fed7d7;
  background-color: rgba(254, 215, 215, var(--bg-opacity));
  --bg-opacity: 0.5;
  font-size: 0.75rem;
}

.media-library-listerror {
  display: flex;
  align-items: flex-start;
}

.media-library-listerror:not(:last-child) {
  border-bottom-width: 2px;
  --border-opacity: 1;
  border-color: #feb2b2;
  border-color: rgba(254, 178, 178, var(--border-opacity));
  --border-opacity: 0.25;
}

.media-library-listerror-icon {
  align-self: stretch;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  margin-left: 1rem;
  margin-right: 1rem;
  width: 2rem;
  display: flex;
  justify-content: center;
}

.media-library-filled.media-library-sortable .media-library-listerror-icon {
  margin-left: 0;
  margin-right: 1rem;
  --bg-opacity: 1;
  background-color: #fed7d7;
  background-color: rgba(254, 215, 215, var(--bg-opacity));
  --bg-opacity: 0.5;
  border-right-width: 1px;
  --border-opacity: 1;
  border-color: #fed7d7;
  border-color: rgba(254, 215, 215, var(--border-opacity));
}

.media-library-listerror-content {
  flex-grow: 1;
  padding-right: 3rem;
}

.media-library-listerror-title {
  --text-opacity: 1;
  color: #e53e3e;
  color: rgba(229, 62, 62, var(--text-opacity));
  height: 3rem;
  display: flex;
  align-items: center;
}

.media-library-listerror-items {
  margin-top: -0.5rem;
  border-top-width: 1px;
  --border-opacity: 1;
  border-color: #feb2b2;
  border-color: rgba(254, 178, 178, var(--border-opacity));
  --border-opacity: 0.25;
}

.media-library-listerror-item {
  display: flex;
  align-items: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.media-library-listerror-thumb {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.75rem;
}

.media-library-listerror-thumb:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-width: 1px;
  --border-opacity: 1;
  border-color: #e53e3e;
  border-color: rgba(229, 62, 62, var(--border-opacity));
  --border-opacity: 0.5;
}

.media-library-listerror-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Thumb */

.media-library-thumb {
  position: relative;
  flex: none;
  width: 4rem;
  height: 4rem;
  margin: 1rem;
}

.media-library-single .media-library-thumb {
  margin: 0;
  margin-right: 1rem;
}

.media-library-thumb-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}

.media-library-thumb-extension {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
}

.media-library-thumb-extension-truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  text-transform: uppercase;
  --text-opacity: 1;
  color: #a0aec0;
  color: rgba(160, 174, 192, var(--text-opacity));
  font-size: 0.75rem;
}

/* Placeholder */

.media-library-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: calc(4rem - 4px);
}

.media-library-filled.media-library-sortable .media-library-add .media-library-placeholder {
  width: 2rem;
  height: 2rem;
  margin-left: -2rem;
  margin-right: 1rem;
}

.media-library-multiple.media-library-empty .media-library-add .media-library-placeholder:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  --bg-opacity: 1;
  background-color: #e2e8f0;
  background-color: rgba(226, 232, 240, var(--bg-opacity));
  --bg-opacity: 0.25;
  transform: translate(calc(-50% + 3px), calc(-50% + 3px));
}

.media-library-multiple.media-library-empty .media-library-add .media-library-placeholder:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  --bg-opacity: 1;
  background-color: #f7fafc;
  background-color: rgba(247, 250, 252, var(--bg-opacity));
  border-width: 1px;
  --border-opacity: 1;
  border-color: #cbd5e0;
  border-color: rgba(203, 213, 224, var(--border-opacity));
  --border-opacity: 0.25;
  transform: translate(-50%, -50%);
}

.media-library-dropzone:not(.disabled):active .media-library-placeholder,
.media-library-dropzone-drop .media-library-placeholder {
  transform: translateY(1px);
}

/* Help */

.media-library-help {
  text-align: left;
  padding-right: 1rem;
  font-size: 0.75rem;
  --text-opacity: 1;
  color: #718096;
  color: rgba(113, 128, 150, var(--text-opacity));
}

.media-library-help-clear {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  opacity: 0.75;
  cursor: pointer;
}

.media-library-help-clear:hover {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 300ms;
}

/* Dropzone */

.media-library-dropzone {
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  display: flex;
  align-items: center;
  border-width: 2px;
  --border-opacity: 1;
  border-color: #718096;
  border-color: rgba(113, 128, 150, var(--border-opacity));
  --border-opacity: 0.25;
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 300ms;
  flex-grow: 1;
  background-color: transparent;
}

.media-library-dropzone-add {
  border-style: dashed;
  --bg-opacity: 1;
  background-color: #f7fafc;
  background-color: rgba(247, 250, 252, var(--bg-opacity));
}

.media-library-dropzone-replace {
  border-style: solid;
}

.media-library-dropzone:not(.disabled):hover,
.media-library-dropzone-drag {
  --bg-opacity: 1;
  background-color: #a3bffa;
  background-color: rgba(163, 191, 250, var(--bg-opacity));
  --bg-opacity: 0.25;
  --border-opacity: 1;
  border-color: #5a67d8;
  border-color: rgba(90, 103, 216, var(--border-opacity));
  --border-opacity: 0.25;
}

.media-library-dropzone:not(.disabled):active,
.media-library-dropzone:not(.disabled):focus,
.media-library-dropzone-drop {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --bg-opacity: 1;
  background-color: #a3bffa;
  background-color: rgba(163, 191, 250, var(--bg-opacity));
  --bg-opacity: 0.5;
  --border-opacity: 1;
  border-color: #5a67d8;
  border-color: rgba(90, 103, 216, var(--border-opacity));
  --border-opacity: 0.25;
}

.media-library-dropzone.disabled {
  --bg-opacity: 1;
  background-color: #feb2b2;
  background-color: rgba(254, 178, 178, var(--bg-opacity));
  --bg-opacity: 0.25;
  --border-opacity: 1;
  border-color: #e53e3e;
  border-color: rgba(229, 62, 62, var(--border-opacity));
  --border-opacity: 0.25;
  cursor: not-allowed;
}

/* Properties */

.media-library-properties {
  font-size: 0.75rem;
  --text-opacity: 1;
  color: #718096;
  color: rgba(113, 128, 150, var(--text-opacity));
  flex-grow: 1;
  min-width: 0;
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.media-library-single .media-library-properties {
  margin-top: 0;
  margin-bottom: 0;
}

.media-library-properties-fixed {
  width: 8rem;
  flex-grow: 0;
}

.media-library-property {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --text-opacity: 1;
  color: #a0aec0;
  color: rgba(160, 174, 192, var(--text-opacity));
}

/* Field */

.media-library-field {
  display: block;
  overflow: hidden;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.media-library-field-error {
  display: block;
  margin-top: 0.25rem;
  --text-opacity: 1;
  color: #e53e3e;
  color: rgba(229, 62, 62, var(--text-opacity));
}

.media-library-label {
  display: block;
  font-size: 0.75rem;
  --text-opacity: 1;
  color: #a0aec0;
  color: rgba(160, 174, 192, var(--text-opacity));
  padding-right: 0.5rem;
}

.media-library-input {
  flex: 1 1 0%;
  width: 100%;
  font-size: 0.75rem;
  --text-opacity: 1;
  color: #2d3748;
  color: rgba(45, 55, 72, var(--text-opacity));
  border-radius: 0.125rem;
  --bg-opacity: 1;
  background-color: #edf2f7;
  background-color: rgba(237, 242, 247, var(--bg-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 300ms;
}

.media-library-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --bg-opacity: 1;
  background-color: #ebf4ff;
  background-color: rgba(235, 244, 255, var(--bg-opacity));
}

/* Rounded buttons */

.media-library-button {
  width: 1.5rem;
  height: 1.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  line-height: 1;
  transition-duration: 100ms;
  transition-property: all;
  border-width: 1px;
  --border-opacity: 1;
  border-color: #cbd5e0;
  border-color: rgba(203, 213, 224, var(--border-opacity));
  --border-opacity: 0.75;
  z-index: 10;
}

.media-library-sortable .media-library-button {
  width: 1.25rem;
  height: 1.25rem;
}

.media-library-button-info {
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
  --text-opacity: 1;
  color: #667eea;
  color: rgba(102, 126, 234, var(--text-opacity));
}

.media-library-button-warning {
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
  --text-opacity: 1;
  color: #f56565;
  color: rgba(245, 101, 101, var(--text-opacity));
}

.media-library-button-error {
  --bg-opacity: 1;
  background-color: #f56565;
  background-color: rgba(245, 101, 101, var(--bg-opacity));
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
  --border-opacity: 1;
  border-color: #fc8181;
  border-color: rgba(252, 129, 129, var(--border-opacity));
}

.media-library-button-success {
  --bg-opacity: 1;
  background-color: #48bb78;
  background-color: rgba(72, 187, 120, var(--bg-opacity));
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
}

.media-library-replace .media-library-button {
  opacity: 0;
}

.media-library-dropzone:not(.disabled):hover .media-library-placeholder .media-library-button,
.media-library-dropzone:not(.disabled):focus .media-library-placeholder .media-library-button,
.media-library-dropzone-drag + .media-library-placeholder .media-library-button {
  opacity: 1;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.media-library-dropzone:not(.disabled):active .media-library-placeholder .media-library-button,
.media-library-dropzone-drop .media-library-placeholder .media-library-button {
  opacity: 1;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

/* Icon */

.media-library-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.media-library-icon-fill {
  fill: currentColor;
}

/* Progress */

.media-library-progress-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  --bg-opacity: 1;
  background-color: #e2e8f0;
  background-color: rgba(226, 232, 240, var(--bg-opacity));
  --bg-opacity: 0.5;
  z-index: 10;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 300ms;
  pointer-events: none;
}

.media-library-progress-wrap-loading {
  opacity: 1;
}

.media-library-progress {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 0.25rem;
  width: 100%;
  max-width: 28rem;
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
  border-radius: 9999px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.media-library progress::-webkit-progress-bar {
  -webkit-appearance: none;
          appearance: none;
  border-radius: 9999px;
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
}

.media-library progress::-moz-progress-bar {
  height: 100%;
  --bg-opacity: 1;
  background-color: #667eea;
  background-color: rgba(102, 126, 234, var(--bg-opacity));
}

.media-library progress::-webkit-progress-value {
  height: 100%;
  --bg-opacity: 1;
  background-color: #667eea;
  background-color: rgba(102, 126, 234, var(--bg-opacity));
}

/* Text styles */

.media-library-text-separator {
  opacity: 0.5;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.media-library-text-success {
  --text-opacity: 1;
  color: #38a169;
  color: rgba(56, 161, 105, var(--text-opacity));
}

.media-library-text-error {
  --text-opacity: 1;
  color: #e53e3e;
  color: rgba(229, 62, 62, var(--text-opacity));
}

.media-library-text-link {
  text-decoration: underline;
  cursor: pointer;
}

/* Ported utilities */

.media-library-hidden {
  display: none;
}

.media-library-block {
  display: block;
}

/* RTL Support */

[dir='rtl'] .media-library-row-remove {
  right: auto;
  left: 0;
}

[dir='rtl'] .media-library-properties {
  margin-right: 0;
  margin-left: 1rem;
}

[dir='rtl'] .media-library-filled.media-library-sortable .media-library-add .media-library-placeholder {
  margin-right: -2rem;
  margin-left: 1rem;
}

[dir='rtl'] .media-library-row-drag,
[dir='rtl'] .media-library-filled.media-library-sortable .media-library-add .media-library-dropzone:before {
  border-right-width: 0;
  border-left-width: 1px;
}

[dir='rtl'] .media-library-help {
  text-align: right;
  padding-right: 0;
  padding-left: 1rem;
}

[dir='rtl'] .media-library-listerror-content {
  padding-right: 0;
  padding-left: 3rem;
}

[dir='rtl'] .media-library-filled.media-library-sortable .media-library-listerror-icon {
  margin-right: 0;
  margin-left: 1rem;
  border-right-width: 0;
  border-left-width: 1px;
}
.media-library * {
    @apply rounded-lg;
}

:root {
    --primary: rgb(0, 173, 238, 0.9);
    --primary-dark: rgb(0, 173, 238, 1);
    --primary-70: rgba(0, 173, 238, 0.7);
    --primary-50: rgba(0, 173, 238, 0.5);
    --primary-30: rgba(0, 173, 238, 0.3);
    --primary-10: rgba(0, 173, 238, 0.1);
    --logo: #430051;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    min-width: 200px;
    width: auto;
    bottom: 100%;
    left: 0;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* Order table */
#order-table-row {
    @apply bg-white hover:bg-gray-100;
}

#order-table-row:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(244, 245, 247, var(--tw-bg-opacity));
}

#order-table-row-product-error {
    --tw-bg-opacity: 1;
    @apply bg-red-200;
}

#order-table-row-product-error:hover {
    --tw-bg-opacity: 1;
    @apply bg-red-300;
}

#order-table-row-no-invoice-mail {
    --tw-bg-opacity: 1;
    background-color: rgb(254 215 170 / var(--tw-bg-opacity)) !important;
}

#order-table-row-no-invoice-error {
    --tw-bg-opacity: 1;
    background-color: rgb(137 75 0 / var(--tw-bg-opacity)) !important;
}

#order-table-row-no-invoice-mail:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(253 186 116 / var(--tw-bg-opacity)) !important;
}

#order-table-row-creating-invoice {
    --tw-bg-opacity: 1;
    background-color: rgb(199 210 254 / var(--tw-bg-opacity)) !important;
}

#order-table-row-creating-invoice:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(165 180 252 / var(--tw-bg-opacity)) !important;
}

#order-table-row-bulk-error-invoice {
    --tw-bg-opacity: 1;
    background-color: rgb(255 230 42 / var(--tw-bg-opacity)) !important;
}

#order-table-row-bulk-error-invoice:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 240 42 / var(--tw-bg-opacity)) !important;
}

#order-table-row-null-price-error-invoice {
    --tw-bg-opacity: 1;
    background-color: rgb(240 128 128 / var(--tw-bg-opacity)) !important;
}

#order-table-row-null-price-error-invoice:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(240 110 110 / var(--tw-bg-opacity)) !important;
}

/* Text center between lines */
.text-between-lines {
    line-height: 0.1em;
}


/* Datetime picker */
.bootstrap-datetimepicker-widget {
    @apply absolute z-30 w-1/2 bg-white rounded-lg shadow-md bg-opacity-95;
}


/* Input type range */
[type="range"] {
    --range: calc(var(--max) - var(--min));
    --ratio: calc((var(--val) - var(--min)) / var(--range));
    --sx: calc(0.5 * 1.5em + var(--ratio) * (100% - 1.5em));
    margin: 0;
    padding: 0;
    width: 12.5em;
    height: 1.5em;
    background: transparent;
    font: 1em/1 arial, sans-serif;
}

[type="range"],
[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

[type="range"]::-webkit-slider-runnable-track {
    box-sizing: border-box;
    border: none;
    width: 12.5em;
    height: 0.25em;
    background: #ccc;
}

.js [type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(#002e5d, #002e5d) 0 / var(--sx) 100% no-repeat #ccc;
}

[type="range"]::-moz-range-track {
    box-sizing: border-box;
    border: none;
    width: 12.5em;
    height: 0.25em;
    background: #ccc;
}

[type="range"]::-ms-track {
    box-sizing: border-box;
    border: none;
    width: 12.5em;
    height: 0.25em;
    background: #ccc;
}

[type="range"]::-moz-range-progress {
    height: 0.25em;
    background: #002e5d;
}

[type="range"]::-ms-fill-lower {
    height: 0.25em;
    background: #002e5d;
}

[type="range"]::-webkit-slider-thumb {
    margin-top: -0.625em;
    box-sizing: border-box;
    border: none;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    background: #78be21;
}

[type="range"]::-moz-range-thumb {
    box-sizing: border-box;
    border: none;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    background: #78be21;
}

[type="range"]::-ms-thumb {
    margin-top: 0;
    box-sizing: border-box;
    border: none;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    background: #78be21;
}

[type="range"]::-ms-tooltip {
    display: none;
}

/* Language dropdown for the navbar menu */
.dropdown-hover:hover>.dropdown-hover-content {
    display: block;
}

.dropdown-menu-custom {
    width: 100% !important;
    min-width: 0 !important;
}

/* Spatie media library. */
.media-library-row-remove {
    position: relative;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    --text-opacity: 1;
    color: #a0aec0;
    color: rgba(160, 174, 192, var(--text-opacity));
    cursor: pointer;
    opacity: 0.5;
    cursor: pointer;
}

.media-library-icon {
    width: 2.25rem;
    height: 2.25rem;
}

.media-library-multiple .media-library-items {
    border: none;
}

.media-library-item {
    border-radius: 10px;
    border-width: 1px;
    margin-bottom: 10px;
}

.media-library-dropzone-add {
    border-radius: 10px;
    border-width: 1px;
    background-color: white;
}

.media-library-placeholder .media-library-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Datetime picker */
.daterangepicker td.in-range {
    background-color: #78be21 !important;
    color: #ffffff !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #002e5d !important;
}

.daterangepicker .ranges li.active {
    background-color: #002e5d !important;
}

/* dowload button with temporary files */

.downloadCanvasButton {
    display: inline-flex;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-right: 0.5rem;
    color: #ffffff;
    background-color: #78be21;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    justify-content: center;
    border-radius: 0.375rem;
    cursor: pointer;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.remove-arrow::-webkit-inner-spin-button,
.remove-arrow::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.remove-arrow {
    -moz-appearance: textfield;
}

#cookies-policy .cookiesBtn__link {
    background-color: #002E5D !important;
    border: none !important;
}

#cookies-policy .cookies__details {
    color: #78BE21 !important;
}

#cookies-policy .cookies__category input:checked+.cookies__box:after {
    background-color: #78BE21 !important;
}