:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: #111827;
  background-color: #F3F4F6;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;

  --color-primary: oklch(59.1% 0.293 322.896);
}

* {
  border-color: #E5E7EB;
}

body {
  margin: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #111827;
    background-color: #F3F4F6;
  }
}

#root {
  position: relative;
  width: 100%;
  height: 100%;
}

.icon-error,
.icon-info,
.icon-question,
.icon-success,
.icon-warning {
  position: relative;
  display: inline-block;
  aspect-ratio: 1 / 1;
  min-height: 18px;
}

.icon-error::after,
.icon-info::after,
.icon-question::after,
.icon-success::after,
.icon-warning::after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.icon-error::after {  
  background: transparent url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M.121 10c0 5.447 4.432 9.879 9.879 9.879 5.447 0 9.879-4.432 9.879-9.879 0-5.447-4.432-9.879-9.879-9.879C4.553.121.121 4.553.121 10Zm6.345 4.632a1.097 1.097 0 0 1-.776-1.874L8.448 10 5.69 7.242A1.098 1.098 0 1 1 7.242 5.69L10 8.448l2.758-2.758a1.098 1.098 0 0 1 1.552 1.552L11.552 10l2.758 2.758a1.097 1.097 0 1 1-1.552 1.552L10 11.552 7.242 14.31a1.095 1.095 0 0 1-.776.322Z' fill='%23EC0000'/%3E%3C/svg%3E") no-repeat 50% 50%;
}

.icon-info::after {
  background: transparent url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 .121C4.553.121.121 4.553.121 10c0 5.447 4.432 9.879 9.879 9.879 5.447 0 9.879-4.432 9.879-9.879 0-5.447-4.432-9.879-9.879-9.879Zm1.692 14.837-.115.481a.613.613 0 0 1-.412.445 4.86 4.86 0 0 1-2.223.157.923.923 0 0 1-.762-1.06l.673-4.138A1.09 1.09 0 0 0 8.26 9.69a.616.616 0 0 1-.33-.694l.115-.482a.614.614 0 0 1 .412-.445 4.86 4.86 0 0 1 2.223-.156.923.923 0 0 1 .762 1.058l-.673 4.14c-.08.49.18.947.592 1.152a.617.617 0 0 1 .33.694Zm-1.132-8.01a1.526 1.526 0 1 1 0-3.052 1.526 1.526 0 0 1 0 3.052Z' fill='%233E60B5'/%3E%3C/svg%3E") no-repeat 50% 50%;
}

.icon-question::after {
  background: transparent url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.879 10c0 5.456-4.423 9.879-9.879 9.879C4.544 19.879.121 15.456.121 10 .121 4.544 4.544.121 10 .121c5.456 0 9.879 4.423 9.879 9.879ZM10 13.047a.878.878 0 0 1-.878-.878v-.997c0-.242.1-.473.275-.639l1.775-1.675a1.61 1.61 0 0 0 .446-1.117v-.066c0-.44-.173-.852-.489-1.16a1.604 1.604 0 0 0-1.172-.458c-.87.022-1.576.773-1.576 1.674a.878.878 0 0 1-1.756 0c0-1.844 1.474-3.383 3.286-3.43a3.349 3.349 0 0 1 2.444.957c.657.64 1.02 1.5 1.02 2.417v.066a3.357 3.357 0 0 1-.983 2.38l-1.514 1.43v.618a.878.878 0 0 1-.878.878Zm0 2.872a1.105 1.105 0 0 1-.913-.488 1.22 1.22 0 0 1-.101-.189 1.173 1.173 0 0 1-.084-.421 1.109 1.109 0 0 1 .184-.608 1.11 1.11 0 0 1 1.128-.468 1.104 1.104 0 0 1 .394.165c.061.04.116.086.167.136a1.034 1.034 0 0 1 .24.356 1.106 1.106 0 0 1 .06.634 1.18 1.18 0 0 1-.06.206 1.136 1.136 0 0 1-.595.593.941.941 0 0 1-.205.061.995.995 0 0 1-.215.023Z' fill='%23427DF4'/%3E%3C/svg%3E") no-repeat 50% 50%;
}

.icon-success::after {
  background: transparent url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.879 10c0 5.456-4.423 9.879-9.879 9.879C4.544 19.879.121 15.456.121 10 .121 4.544 4.544.121 10 .121c5.456 0 9.879 4.423 9.879 9.879ZM8.562 14.28h.006a.99.99 0 0 0 .74-.333l5.823-6.586a.988.988 0 0 0-1.48-1.308L8.578 11.79l-2.22-2.578a.988.988 0 0 0-1.497 1.29l2.959 3.436a.989.989 0 0 0 .742.343Z' fill='%2328C937'/%3E%3C/svg%3E") no-repeat 50% 50%;
}

.icon-warning::after {
  background: transparent url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' fill='none' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.968 19.464H1.032a.91.91 0 0 1-.806-1.331l8.969-17.11a.91.91 0 0 1 1.61 0l8.969 17.11a.91.91 0 0 1-.806 1.33ZM10 14.19a.637.637 0 0 1-.637-.61l-.587-5.67a1.228 1.228 0 1 1 2.448 0l-.587 5.67a.637.637 0 0 1-.637.61Zm0 3.197a1.016 1.016 0 1 0 0-2.032 1.016 1.016 0 0 0 0 2.032Z' fill='%23FF9D00'/%3E%3C/svg%3E") no-repeat 50% 50%;
}

.auth-container {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.auth-content {
  width: 26rem;
}

.auth-content > img {
  display: block;
  width: 11rem;
  height: auto;
  margin: 1.5rem auto 2.25rem auto;
}

.auth-content > .card {
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 1px 2px 4px 0px rgba(0, 0, 0, 0.08);
  padding: 1rem 2rem 2rem 2rem;
}

.auth-content > .card .card-title {
  text-align: center;
  font-weight: bold;
  color: oklch(0.446 0.03 256.802);
}

form.card input {
  position: relative;
  padding: 0.765rem 1rem;
}

.login-form .form-email {
  margin-top: 1.25rem;
}

.login-form .form-email > input {
  border-bottom-left-radius: 0!important;
  border-bottom-right-radius: 0!important;
}

.login-form .form-password {
  position: relative;
}

.login-form .form-password > input {
  border-top-left-radius: 0!important;
  border-top-right-radius: 0!important;
}

.login-form .form-password > button {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  padding: 0.5rem;
  cursor: pointer;
  background: none;
  border: none;
  color: oklch(0.446 0.03 256.802);
  transform: translateY(-50%);
}

.login-form .forgot-password {
  display: inline-block;
  margin: 0.75rem 0 1.5rem 0;
  text-decoration: none;
  color: oklch(0.551 0.027 264.364);
}

.login-form .forgot-password:hover {
  text-decoration: underline;
}

form.card button[type="submit"] {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 0.375rem;
  padding: 0.5rem 0;
  color: white;
  background-color: oklch(59.1% 0.293 322.896);
  border: none;
  padding: 0.875rem 0;
}

form.card button[type="submit"]:hover {
  text-decoration: underline;
}

form.card button[type="submit"] > svg {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: oklch(83.3% 0.145 321.434);
}

.forgetpwd-form .form-email {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.auth-content > .card.info {
  display: flex;
  flex-flow: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}

.container > .card {
  margin-bottom: 1rem;
}

.settings {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.settings > header {
  margin-bottom: 0.5rem;
}

.settings .card h4 {
  padding: 0.5rem 2rem;
}

.settings form {
  padding: 0 2rem;
}

.settings form .form-actions {
  padding-top: 1rem;
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 0.5rem;
}

.alert {
  display: flex;
  flex-flow: row;
  gap: 1rem;
  padding: 0 1.5rem;
  align-items: center;
  color: var(--color-error);
  border-color: var(--color-error);
}

.alert .icon-error {
  width: 2rem;
  height: 2rem;
}

.alert dl {
  flex-grow: 1;
}

.dt-wrapper {
  position: relative;
  display: flex;
  flex-flow: column;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}

.dt-caption {
  padding: 0.5rem 1rem;
}

.dt-container {
  position: relative;
  border-top: 1px solid #e5e7eb;
  overflow: auto;
  min-height: 15rem;
  display: block;
  width: 100%;
}

.dt-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}

.dt-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.dt-table thead th {
  background-color: #f9fafb;
  font-size: 14px;
  font-weight: bold;
  color: #6b7280;
  padding: 8px;
  text-align: left;
  user-select: none;
  border-bottom: 1px solid #e5e7eb;
}

.dt-table thead th:not(:first-child) {
  border-left: 1px solid #e5e7eb;
}

.dt-table tbody td {
  padding: 8px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  color: #111827;
}

.dt-table tbody tr:hover {
  background-color: #f3f4f6;
}

.dt-no-data {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: large;
  color: #9ca3af;
}

.dt-footer {
  display: flex;
  flex-flow: row;
  width: 100%;
  padding: 0.5rem 1rem;
}

.table-search {
  display: flex;
  flex-flow: row-reverse;
  gap: 0.5rem;
}

.table-actions {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: end;
  gap: 0.5rem;
}

dialog {
  padding: 0;
  min-width: 26rem;
}

dialog > header {
  padding: 0.5rem 2rem 0 2rem;
  border-bottom: 1px solid var(--color-border);
}

dialog > form {
  display: flex;
  flex-flow: column;
  padding: 1rem 2rem 1.5rem 2rem!important;
  gap: 1rem;
}

dialog .form-actions {
  flex-flow: row-reverse!important;
}