.top-left {
  position: fixed;
  top: 70px;
  left: 10px;
}

.top {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
}

.top-right {
  position: fixed;
  top: 70px;
  right: 10px;
}

.mid-left {
  position: fixed;
  top: 30%;
  left: 10px;
  transform: translateY(-50%);
}

.mid {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, 0%);
  xtransform: translate(-80%, -100%);
}

.mid-right {
  position: fixed;
  top: 30%;
  right: 10px;
  transform: translateY(-50%);
}

.bottom-left {
  position: fixed;
  bottom: 10px;
  left: 10px;
}

.bottom {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.bottom-right {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

.ui-modal {
  width: 100%;
  max-width: 90%;
}
@media (min-width: 576px) {
  .ui-modal-sm {
    max-width: 300px;
  }
}
@media (min-width: 768px) {
  .ui-modal-md {
    max-width: 500px;
  }
}
@media (min-width: 992px) {
  .ui-modal-lg {
    max-width: 700px;
  }
}
@media (min-width: 1200px) {
  .ui-modal-xl {
    max-width: 900px;
  }
}

.ui-modal > .ui-card-body {
  max-height: 75vh;
  overflow-y: auto;
}

body[data-hx-ui-theme=dark-cyan] {
  background-color: #202124;
  background-color: rgb(13, 17, 23);
}

.ui-modal {
  z-index: 1000;
}

.ui-modal-backdrop {
  position: fixed; /* Fixed position to cover the whole screen */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
  z-index: 999; /* Make sure it's on top of other elements on the page */
}

/*# sourceMappingURL=style.css.map */

.ui {
  border: 2px solid #d4d9e0;
  border: 2px solid rgba(0, 0, 0, 0.07);
  background-color: #fafafc;
  padding: 5px;
  color: #8b909e;
  transition: color 0.1s, background-color 0.3s;
  text-align: center;
  outline: none !important;
  position: relative;
}

/*# sourceMappingURL=ui.css.map */

.ui-input-updated {
  box-shadow: 0 0 0 0.2rem rgba(5, 236, 75, 0.549);
  transition: 0.3s;
}

/*# sourceMappingURL=ui_input.css.map */

.ui-card {
  background-color: #1e282c;
  color: #eee;
  border-radius: 1rem;
  border: 1px solid #393c3e;
  -webkit-box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  opacity: 1;
}

.ui-card:hover, .ui-card.active {
  -webkit-box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.7);
}

.ui-card-header {
  overflow: hidden;
}

.ui-card-header,
.ui-card-body,
.ui-card-footer {
  padding: 0.75rem 1.5rem;
  x-transition: 1s;
}

.ui-card-header {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  x-transition: 1s;
  position: relative;
  border-bottom: 1px solid #393c3e;
}

.in-background > .ui-card-header {
  padding-bottom: 0;
}

.in-background > .ui-card-header > h2 {
  x-display: none;
  height: 0px;
}

.ui-card-footer {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  background-color: #222d32;
  position: relative;
  border-top: 1px solid #393c3e;
}

.ui-card-header.error {
  background-color: #db0e00;
  color: #e7e7e7;
}

.ui-card-header.error .clickable:hover {
  background-color: #d20e00;
}

.ui-card-header.success {
  background-color: #00dd0b;
  color: #0f5501;
}

.ui-card-header.success .clickable:hover {
  background-color: #0f5c00;
}

.ui-card-header.primary {
  background-color: #10a8e8;
  color: #ffffff;
}

.ui-card-header.primary .clickable:hover {
  background-color: #26b3ef;
}

.ui-card-header.yellow {
  background-color: #e6b905;
  color: #5c4a02;
}

.ui-card-header.green {
  background-color: #00dd0b;
  color: #0f5501;
}

.ui-card-header-controls {
  position: absolute;
  width: 50%;
  top: 0px;
  right: 0px;
  height: 30px;
  text-align: right;
}

.ui-card-header-controls > * {
  display: inline-block;
}

.ui-card-header-controls > .close {
  position: relative;
  right: 0px;
  top: 0px;
  width: calc(3rem + 0px);
  height: calc(3rem + 0px);
  border-top-right-radius: 1rem;
  border: 1px rgba(0, 0, 0, 0.2);
  transition: 0.5s;
  border-left: 1px rgba(0, 0, 0, 0.7);
  font-size: 2rem;
  line-height: 2rem;
}

.ui-card-header.success .ui-card-header-controls > .close {
  background-color: #00dd0b;
  color: #e7e7e7;
}

.ui-card-header.success .ui-card-header-controls > .close:hover {
  background-color: #0f5c00;
}

.ui-card-header.error .ui-card-header-controls > .close {
  background-color: #db0e00;
  color: #e7e7e7;
}

.ui-card-header.error .ui-card-header-controls > .close:hover {
  background-color: #d20e00;
}

.ui-card-header.primary .ui-card-header-controls > .close {
  background-color: #10a8e8;
  color: #e7e7e7;
}

.ui-card-header.primary .ui-card-header-controls > .close:hover {
  background-color: #26b3ef;
}

.ui-card-header-close-control {
  border-color: initial;
}

.ui-card-header > h2 {
  margin-block-start: 0;
  margin-block-end: 0;
  font-size: 1rem;
  font-weight: 500;
  height: 20px;
  transition: 0.5s;
}

/*# sourceMappingURL=ui_cards.css.map */

.ui-label {
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 5px 12px;
  text-transform: uppercase;
}

.ui-sm.ui-label,
.ui-xs.ui-label {
  border-radius: 15px;
  padding: 1px 8px;
  text-transform: uppercase;
  border-width: 1px !important;
  font-weight: 500;
  font-size: 0.7rem;
}

.ui-xs.ui-label {
  padding: 1px 5px;
  line-height: 0.8rem;
}

.ui-label.ui-primary {
  background-color: #10a8e8;
  color: #fafafc;
}

.ui-label.ui-success {
  background-color: #24c55a;
  color: #fafafc;
}

.ui-label.ui-warning {
  background-color: #ffe600;
  color: #bf9a15;
}

.ui-label.ui-error {
  background-color: #c40c52;
  color: #fafafc;
}

.ui-label.ui-orange {
  background-color: #FFA000;
  color: #fafafc;
}

.ui-label.ui-purple {
  background-color: #bd00c4;
  color: #fafafc;
}

/*# sourceMappingURL=ui_label.css.map */

.ui-btn {
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 5px 12px;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
  transition: 1s;
}

.ui-btn[data-use-component]:not([data-action-installed]) {
  background-color: #F1F1F1;
  cursor: wait;
  color: #787878;
}

.ui-btn {
  text-decoration: none !important;
}

.ui-soft.ui-btn,
.ui-sm.ui-btn,
.ui-xs.ui-btn {
  font-weight: 500;
  border-width: 1px !important;
}

.ui-sm.ui-btn,
.ui-xs.ui-btn {
  border-radius: 15px;
  padding: 1px 8px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 0.7rem;
}

.ui-xs.ui-btn {
  padding: 1px 5px;
  line-height: 0.8rem;
}

.ui-btn.ui-primary:hover {
  background-color: #10a8e8;
  color: #fafafc;
  border-color: rgba(0, 0, 0, 0.15);
}

.ui-btn.ui-success:hover {
  background-color: #24c55a;
  color: #fafafc;
  border-color: rgba(0, 0, 0, 0.15);
}

.ui-btn.ui-warning:hover {
  background-color: #ffe600;
  color: #bf9a15;
  border-color: rgba(0, 0, 0, 0.15);
}

.ui-btn.ui-error:hover {
  background-color: #c40c52;
  color: #fafafc;
  border-color: rgba(0, 0, 0, 0.15);
}

.ui-btn.ui-orange:hover {
  background-color: #FFA000;
  color: #fafafc;
  border-color: rgba(0, 0, 0, 0.15);
}

.ui-btn.ui-purple:hover {
  background-color: #bd00c4;
  color: #fafafc;
  border-color: rgba(0, 0, 0, 0.15);
}

.ui-btn.ui-error.dark {
  color: #c40c52;
}

/*# sourceMappingURL=ui_button.css.map */