@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Judson&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Krub&display=swap');

:root {--base-clr0:68; --base-clr1:86; --base-secondary:289;
  --base-primary:303; --base-info:198; --base-success:121; --base-warning:50; --base-danger:21;}
@supports (color: lch(34% 79 68)) {
  html[data-theme='light'] {--cbg-modal:lch(29% 34 var(--base-clr0) / 86%);
    --cbg0:lch(92% 24 var(--base-clr0)); --cfg0:lch(34% 79 var(--base-clr0)); --cbd0: lch(69% 79 var(--base-clr0) / 83%);
    --cbg1:lch(79% 34 var(--base-clr1)); --cfg1:lch(34% 79 var(--base-clr1)); --cbd1: lch(69% 79 var(--base-clr1) / 83%);
    --cfg-primary: lch(34% 79 var(--base-primary)); --cbg-primary: lch(79% 69 var(--base-primary)); --cbd-primary: lch(69% 79 var(--base-primary) / 83%);
    --cfg-secondary: lch(34% 41 var(--base-secondary)); --cbg-secondary: lch(79% 11 var(--base-secondary)); --cbd-secondary: lch(69% 69 var(--base-secondary) / 69%);
    --cfg-info: lch(34% 79 var(--base-info)); --cbg-info: lch(79% 69 var(--base-info)); --cbd-info: lch(69% 79 var(--base-info) / 83%);
    --cfg-success: lch(34% 79 var(--base-success)); --cbg-success: lch(79% 69 var(--base-success)); --cbd-success: lch(69% 79 var(--base-success) / 83%);
    --cfg-warning: lch(34% 79 var(--base-warning)); --cbg-warning: lch(79% 69 var(--base-warning)); --cbd-warning: lch(69% 79 var(--base-warning) / 83%);
    --cfg-danger: lch(34% 79 var(--base-danger)); --cbg-danger: lch(79% 69 var(--base-danger)); --cbd-danger: lch(69% 79 var(--base-danger) / 83%);
  }
  html[data-theme='dark'] {--cbg-modal:lch(79% 34 var(--base-clr0) / 68%);
    --cbg0:lch(21% 07 var(--base-clr0)); --cfg0:lch(79% 83 var(--base-clr0)); --cbd0: lch(69% 79 var(--base-clr0) / 83%);
    --cbg1:lch(21% 37 var(--base-clr1)); --cfg1:lch(69% 83 var(--base-clr1)); --cbd1: lch(69% 79 var(--base-clr1) / 83%);
    --cfg-primary: lch(69% 34 var(--base-primary)); --cbg-primary: lch(34% 79 var(--base-primary)); --cbd-primary: lch(69% 79 var(--base-primary) / 83%);
    --cfg-secondary: lch(79% 69 var(--base-secondary)); --cbg-secondary: lch(34% 34 var(--base-secondary)); --cbd-secondary: lch(69% 79 var(--base-secondary) / 83%);
    --cfg-info: lch(69% 34 var(--base-info)); --cbg-info: lch(34% 79 var(--base-info)); --cbd-info: lch(69% 79 var(--base-info) / 83%);
    --cfg-success: lch(79% 34 var(--base-success)); --cbg-success: lch(34% 79 var(--base-success)); --cbd-success: lch(69% 79 var(--base-success) / 83%);
    --cfg-warning: lch(83% 34 var(--base-warning)); --cbg-warning: lch(44% 49 var(--base-warning)); --cbd-warning: lch(69% 79 var(--base-warning) / 83%);
    --cfg-danger: lch(69% 34 var(--base-danger)); --cbg-danger: lch(34% 79 var(--base-danger)); --cbd-danger: lch(69% 79 var(--base-danger) / 83%);
  }
}
@supports not (color: lch(34% 79 68)) {
  html[data-theme='light'] {--cbg-modal: hsla(var(--base-clr0) 34% 29% / 86%);
    --cbg0: hsl(var(--base-clr0) 27% 79%); --cfg0: hsl(var(--base-clr0) 69% 34%); --cbd0: hsla(var(--base-clr0) 57% 73% / 83%);
    --cbg1: hsl(var(--base-clr1) 11% 69%); --cfg1: hsl(var(--base-clr1) 69% 34%); --cbd1: hsla(var(--base-clr1) 57% 73% / 83%);
    --cfg-primary: hsl(var(--base-primary) 79% 44%); --cbg-primary: hsl(var(--base-primary) 59% 77%); --cbd-primary: hsla(var(--base-primary) 57% 73% / 83%);
    --cfg-info: hsl(var(--base-info) 83% 34%); --cbg-info: hsl(var(--base-info) 69% 77%); --cbd-info: hsla(var(--base-info) 68% 68% / 83%);
    --cfg-success: hsl(var(--base-success) 83% 34%); --cbg-success: hsl(var(--base-success) 69% 77%); --cbd-success: hsla(var(--base-success) 68% 69% / 83%);
    --cfg-warning: hsl(var(--base-warning) 83% 34%); --cbg-warning: hsl(var(--base-warning) 69% 77%); --cbd-warning: hsla(var(--base-warning) 65% 55% / 83%);
    --cfg-danger: hsl(var(--base-danger) 83% 34%); --cbg-danger: hsl(var(--base-danger) 69% 79%); --cbd-danger: hsla(var(--base-danger) 68% 68% / 83%);
  }
  html[data-theme='dark'] {--cbg-modal: hsla(var(--base-clr0) 17% 12% / 93%);
    --cbg0: hsl(var(--base-clr0) 9% 14%); --cfg0: hsl(var(--base-clr0) 69% 79%); --cbd0: hsla(var(--base-clr0) 68% 34% / 79%);
    --cbg1: hsl(var(--base-clr1) 7% 25%); --cfg1: hsl(var(--base-clr1) 69% 79%); --cbd1: hsla(var(--base-clr1) 68% 34% / 79%);
    --cfg-primary: hsl(var(--base-primary) 79% 83%); --cbg-primary: hsl(var(--base-primary) 79% 21%); --cbd-primary: hsla(var(--base-primary) 68% 34% / 79%);
    --cfg-info: hsl(var(--base-info) 79% 69%); --cbg-info: hsl(var(--base-info) 69% 21%); --cbd-info: hsla(var(--base-info) 68% 34% / 79%);
    --cfg-success: hsl(var(--base-success) 79% 69%); --cbg-success: hsl(var(--base-success) 69% 21%); --cbd-success: hsla(var(--base-success) 68% 34% / 79%);
    --cfg-warning: hsl(var(--base-warning) 79% 69%); --cbg-warning: hsl(var(--base-warning) 69% 21%); --cbd-warning: hsla(var(--base-warning) 68% 34% / 79%);
    --cfg-danger: hsl(var(--base-danger) 79% 69%); --cbg-danger: hsl(var(--base-danger) 79% 21%); --cbd-danger: hsla(var(--base-danger) 68% 34% / 79%);
  }
}
body {padding: initial; max-width: 100vw; --navpos:sticky;}
body > footer, header { margin: initial; }
nav+* { margin-top: initial; }
section::after {content: '';margin:unset;}
#app {
  display: grid;
  width: 100%;
  height: 100vh;
  grid-template: [header-left] "sidebar head" 60px [header-right]
    [main-left] "sidebar main" 1fr [main-right]
    [footer-left] "sidebar foot" 60px [footer-right]
    / 120px 1fr;/*"sidebar head" 60px "sidebar main" calc(100vh - 60px) / 120px auto;*/
}
#app header { grid-area: head; }
.header .logo-container {text-align: center}
#app footer { grid-area: foot; display: inline-flex; justify-content: space-evenly; }
nav-sidebar { grid-area: sidebar; width: 100%;}
main {grid-area: main;overflow: auto;}
content-holder {grid-area: main}
nav > .navbar-item:not(:last-of-type) { padding-bottom: 0.5em; }
nav > .navbar-item.active {color:var(--cfg-primary)}
.nav-link .svg-icon, .navbar-item .svg-icon {height: 10vh; font-size: 2em;}
.navbar-item {display: block;text-align: center;text-decoration: none;align-content:center;}
.navbar-item a {text-decoration:none;}
@media (max-width:415px) {
  #app {display: inline-block;
    grid-template: [header-left] "head" 30px [header-right]
      [main-left]   "main" 1fr [main-right]
      [footer-left] "foot" 30px [footer-right]
      [footer-left] "sidebar" 64px [footer-right]
      / 100%;
  }
  #app footer {grid-area: foot;display: block;margin-bottom: 3em;}
  nav-sidebar { position: fixed;bottom: 0;grid-area: sidebar; }
  nav-sidebar nav {display:-webkit-inline-box;overflow-x: auto}
  nav-sidebar nav a {margin:.5em 1em}
  nav-sidebar nav a div {display:none}
  .nav-link .svg-icon, .navbar-item .svg-icon {height: 40px; font-size: 3em;}
  nav > .navbar-item {margin-bottom: 0}
  nav ul:first-child > li:first-child::after {content:unset}
  .heading button {margin-right: 0 !important;}
  view-phone-log .columns article {flex:none;width:100%}
  .list{display:inline list-item;margin-left:1em}
  .responsive-flex.list > span:not(first-child){margin-left:1em}
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}
/* .loading::after {content: "↻"; font-size: 3em;
  position: absolute; top: 0em; left: 1.8em;
  animation-name: spin;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
} */
.hidden {display: none !important;}
.fs-1 {font-size:1em;} .fs-1_5 {font-size:1.5em;} .fs-2 {font-size:2em;}
.close {
  vertical-align: middle;  border: none;  color: inherit;
  border-radius: 50%;  background: transparent;  position: relative;
  width: 32px;  height: 32px;  opacity: 0.6; padding: 0; margin-top: 0;
}
.close::before, .close::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 18px;
  width: 3px;
  background-color: currentColor;
}
.close::before {transform: translate(-50%, -50%) rotate(45deg);}
.close::after {transform: translate(-50%, -50%) rotate(-45deg);}
button.delete { border-radius: 50%;padding:0;width:1.1em;height:1.1em;margin-top:0 }
button.delete > [class^="bi-"]::before, button.delete > [class*=" bi-"]::before { font-size:1em;vertical-align:.1em; }
.notyf__dismiss {width:unset;} .notyf__dismiss button {margin:unset;}
.notyf__toast--dismissible .notyf__wrapper {padding-right:3em;}
.navbar, .navbar-brand, .navbar-menu {
  box-shadow: inset 0 -.5em 1.5em 2em lch(from var(--cbg0) l c h / 69%);
}
table, .dropdown-content {
  --bs-table-striped-color: thistle;
  --bs-table-active-color: aliceblue;
  --bs-table-hover-color: darkslateblue;
  background-color: var(--cbg1);
  color: var(--cfg1);
}
tbody {font-family: Judson}
table thead td, table thead th, table tfoot td, table tfoot th, .card-content {align-items:baseline;
  background-color:var(--cbg0); color:inherit; margin: .5em 0em}
table.striped tbody tr:not(.selected):nth-child(even) {background-color: #25221F;}
.card, .dropdown-item, table th {background-color:var(--cbg0);color:var(--cfg0);position: relative;}
html[data-theme='dark'] .card, .dropdown-item, table th {color:var(--cfg-success);}
table th {color:darkslateblue}
.card-body p {border-bottom: 1px solid var(--cbd-warning); margin: 0; padding: .5em 1em;}
.card-body p i {margin-right:.5em}
.card-header, .modal-header, .modal-card-head {
  border-bottom: 4px ridge rgba(83, 79, 69, .7); font-weight: 600;
  color: var(--cfg-info); filter: brightness(1.2); margin: 0; padding: .5em;
}
.modal,.modal-background { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background-color:var(--cbg-modal); }
.modal {
  align-items: center;
  display: none;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: fixed;
  z-index: 42;
} .modal.active { display: flex; } .clipped { overflow: hidden !important; }
.modal-content, .modal-card {background: var(--cbg-secondary);
  padding: 0.5em;
  max-height: calc(100vh - 10em);
  overflow: auto;
  position: relative;
  width: 100%;
} html[data-theme='dark'] .modal-content, .modal-card {background: var(--cbg0);}
.modal-card { display: flex; flex-direction: column; max-height: calc(100vh - 8em); overflow: hidden; padding: 0;}
.modal-max-height,.modal-lg { max-height: 98%; }
.modal-card-body {-webkit-overflow-scrolling: touch;background-color: var(--cbg0);flex-grow: 1;flex-shrink: 1;overflow: auto;padding:1em}
.modal-card-head {background-color:var(--cbg0);display:block;padding: 0.7em;position:relative;}
.modal-card-foot {align-items: center;background-color:var(--cbg0);display: flex;flex-shrink: 0;justify-content: center; padding: 0.7em;position: relative;filter:drop-shadow(0 0 0.5em var(--cbd1));}
.title, .modal-card-title, .card-header-title, button, label {font:var(--font-h);display:inline-table;text-decoration-line:blink;}
.title + .subtitle {color:var(--cfg-primary);font-weight:bold}
.truncate {display:-webkit-inline-box;overflow: hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:4}
textarea, input:not([type="range"]), button, select {
  background-color:var(--cbg1); color:var(--cfg0); border-color:var(--cbd1);
  font-size:100%; line-height:normal}
/*html[data-theme='light'] textarea, input:not([type="range"]), button, select {background-color:var(--cbg-modal);}*/
input::placeholder, select::placeholder, textarea::placeholder {color:var(--cbd1) !important;}
html[data-theme='light'] input::placeholder, html[data-theme='light'] select::placeholder, html[data-theme='light'] textarea::placeholder {color:lch(from var(--cbd1) calc(l - 16) c h) !important;}
.heading > input[type=search] {flex-grow: 1;width: unset;}
@-moz-document url-prefix() {input[type=search] {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>');
  background-repeat: no-repeat;
  background-size: 1.2em 1.2em;
  background-position: 0.4em;
  flex-grow: 1; width: unset !important; padding-left: 2em;
}}
.primary {background-color:var(--cbg-primary)!important;border-color:var(--cbd-primary)!important;color:var(--cfg-primary)!important}
.secondary {background-color:var(--cbg-secondary)!important;border-color:var(--cbd-secondary)!important;color:var(--cfg-secondary)!important}
.info {background-color:var(--cbg-info)!important;border-color:var(--cbd-info)!important;color:var(--cfg-info)!important}
.success {background-color:var(--cbg-success)!important;border-color:var(--cbd-success)!important;color:var(--cfg-success)!important}
.warning {background-color:var(--cbg-warning)!important;border-color:var(--cbd-warning)!important;color:var(--cfg-warning)!important}
.danger {background-color:var(--cbg-danger)!important;border-color:var(--cbd-danger)!important;color:var(--cfg-danger)!important}
div.primary:empty, div.info:empty, div.success:empty, div.warning:empty, div.danger:empty {display:none}
.reset {padding:0 .3em; border:none!important; background-color:transparent!important; color:inherit!important;text-decoration:none;}
.semibold {font-weight: 600 !important;}
/*.toolbar {color: var(--cfg-warning)!important;}*/
a:hover, button:not([disabled]):hover, input[type="checkbox"]:hover {border-color:unset;filter:drop-shadow(0 0.25em 0.5em var(--cbd1));}
html[data-theme='light'] .reset:hover {filter:drop-shadow(0 0 0.5em var(--cfg1)) drop-shadow(0 0 1em var(--cfg1)) drop-shadow(0 0 1.5em var(--cfg1)) brightness(110%) !important;}
html[data-theme='dark'] .reset:hover {filter:drop-shadow(0 0 0.5em var(--cbg-modal)) drop-shadow(0 0 1em var(--cbg-danger)) drop-shadow(0 0 1.5em var(--cbg-warning)) !important;}
button:disabled, button[disabled] {filter: blur(0.1em); cursor: not-allowed;}
.heading {display:flex;align-items:flex-start;gap: 0.3em !important;flex-wrap: wrap;}
.heading h4 {margin-top: 0.5em !important;}.heading button {margin-top: 0 !important;}
comp-pagination, comp-pagination ul {display: inline-flex;flex-wrap: wrap;gap: 0.5em;width: 100%;justify-content: center;margin:1em 0;}
comp-pagination a {padding: 0.3em;text-decoration: none;border-radius: 5px;flex: 0 1 2.6em;text-align: center;border: 2px solid;width: 4em;}
comp-pagination a.active {filter:brightness(120%) saturate(1.4);}
.left-right {display: flex; justify-content: space-between;}
.icon-detail {
  position: absolute;
  bottom: 20px; right: 20px;
  height: auto; display: none;
}
.icon, .icon-detail i {font-size: 3em}
.card:hover .icon-detail {
  display: inline-block;
}
.modal-xs, .modal-sm, .modal-md, .modal-lg {width: 100vw}
.tags {
  align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-start;
}
.tags .tag:not(:last-child) { margin-right: 0.5em; }
.tag {
  align-items: center; display: inline-flex;
  background-color: var(--cfg1); color: var(--cbg1);
  border-radius: 0.5em; font-size: 0.75em;  height: 3em;
  justify-content: center; white-space: nowrap;
  padding-left: 0.75em; padding-right: 0.75em; margin-bottom: 0.5em;
}
dl {overflow: hidden;}
dt {float: left; margin-right: 1em; }
.form-switch {
  display: block;
  line-height: 1.2em;
  margin: 0.2em 0px;
  min-height: 1.4em;
  padding: 0.1em 0.4em 0.1em 1.2em;
  padding-left: 2em;
  position: relative;
}
.form-switch input {
  clip: rect(0px, 0px, 0px, 0px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}
.form-switch input:checked + .form-icon {background-color:green;border-color:green}
.form-switch .form-icon {
  border: 0.1em solid gray;
  cursor: pointer;
  display: inline-block;
  position: absolute;
  transition: background 0.2s ease 0s, border 0.2s ease 0s, box-shadow 0.2s ease 0s, color 0.2s ease 0s;
  background: gray none repeat scroll 0% 0% padding-box;
  border-radius: 0.5em;
  height: 1em;
  left: 0px;
  top: 0.2em;
  width: 1.8em;
}
.form-switch .form-icon::before {
  background: lightgray none repeat scroll 0% 0%;
  border-radius: 50%;
  content: "";
  display: block;
  height: 0.85em;
  left: 0px;
  position: absolute;
  top: 0px;
  transition: background 0.2s ease 0s, border 0.2s ease 0s, box-shadow 0.2s ease 0s, color 0.2s ease 0s, left 0.2s ease 0s;
  width: 0.85em;
}
.form-switch input:checked + .form-icon::before {left:14px}
input[type="checkbox"] {
  appearance: none; background-color: inherit; color: currentColor;
  margin: 0; margin-right:.4em; padding-right: 0.1em;
  font: inherit; border-radius: 0.2em; transform: translateY(0.2em);
  width: 1.2em; height: 1.2em; border: 0.1em solid currentColor;
  display: grid; place-content: center; float: left;
}
input[type="checkbox"]::before {
  box-shadow: inset 1em 1em var(--cfg0);
  content: ""; width: 0.7em; height: 0.7em;
  transform: scale(0); transform-origin: bottom left; transition: 120ms transform ease-in-out;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
input[type="checkbox"]:checked::before {
  transform: scale(1) translateX(-0.34em);
}
/*.custom-checkbox input[type='checkbox'] {display:none;}
.custom-checkbox .form-icon {display: inline-block;mask-size: cover; width: 1.2em;height: 1.2em;cursor: pointer;vertical-align: -0.3em;background-color: var(--cbg-warning);
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 1024 1024"><path d="M810.666667 128 213.333333 128C165.973333 128 128 165.973333 128 213.333333L128 810.666667C128 857.6 166.4 896 213.333333 896L810.666667 896C857.6 896 896 857.6 896 810.666667L896 213.333333C896 165.973333 857.6 128 810.666667 128M810.666667 213.333333 810.666667 810.666667 213.333333 810.666667 213.333333 213.333333 810.666667 213.333333Z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 1024 1024"><path d="M810.666667 128 213.333333 128C165.973333 128 128 165.973333 128 213.333333L128 810.666667C128 857.6 166.4 896 213.333333 896L810.666667 896C857.6 896 896 857.6 896 810.666667L896 213.333333C896 165.973333 857.6 128 810.666667 128M810.666667 213.333333 810.666667 810.666667 213.333333 810.666667 213.333333 213.333333 810.666667 213.333333Z"/></svg>');
}
.custom-checkbox input:checked ~ .form-icon {
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 1024 1024"><path d="M896 0l-768 0c-70.41024 0-128 57.61024-128 128l0 768c0 70.41024 57.61024 128 128 128l768 0c70.41024 0 128-57.61024 128-128l0-768c0-70.41024-57.61024-128-128-128zM448 794.50112l-237.2608-237.2608 90.50112-90.50112 146.7392 146.7392 306.74944-306.74944 90.50112 90.50112-397.25056 397.25056z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 1024 1024"><path d="M896 0l-768 0c-70.41024 0-128 57.61024-128 128l0 768c0 70.41024 57.61024 128 128 128l768 0c70.41024 0 128-57.61024 128-128l0-768c0-70.41024-57.61024-128-128-128zM448 794.50112l-237.2608-237.2608 90.50112-90.50112 146.7392 146.7392 306.74944-306.74944 90.50112 90.50112-397.25056 397.25056z"/></svg>');
  background: var(--cfg-warning);vertical-align: -0.2em;/*! filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5); */
}*/
.validated input:invalid {
  border-color: var(--cfg-danger);
  padding-right: calc(1.5em + 0.75em);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875em) center;
  background-size: calc(0.75em + 0.375em) calc(0.75em + 0.375em);
}
.icon-input{grid-template-columns: 1fr;display: inline-grid;align-items:center;} .icon-input *{grid-column-start: 1;grid-row-start: 1} .icon-input 
*:first-child{padding-left:2em;} .icon-input .icofont{margin-left: .5em; width: fit-content;}
form .help.danger {display: none;padding: 0 1em;}
form.validated *:invalid ~ .help.danger {display: inline-block;}
.fade {transition: opacity .15s linear;}
.chat-wrapper{width:385px;position:fixed;right:40px;bottom:40px;z-index:11;-webkit-transition:transform 400ms ease;transition:transform 400ms ease;-webkit-transform:translateY(130%);transform:translateY(130%)}
.chat-wrapper.open{-webkit-transform:translateY(0);transform:translateY(0)}
.nav-user {
  padding:calc(31px / 2) 20px calc(31px / 2) 57px!important;
  text-align:left!important;
  position:relative;
  border-width:0 1px;
  min-height:70px;
}
.nav-user .account-user-avatar {
  position:absolute;
  top:calc(38px / 2);
  left:15px
}
.nav-user .account-user-avatar img {
  height:32px;
  width:32px
}
.nav-user .account-position {
  display:block;
  font-size:12px;
  margin-top:-3px
}
.nav-user .account-user-name {
  display:block;
  font-weight:600
}
.hvr-reveal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-reveal:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-color: var(--cbd-success);
  border-style: solid;
  border-width: 0;
  -webkit-transition-property: border-width;
  transition-property: border-width;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-reveal:hover:before, .hvr-reveal:focus:before, .hvr-reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  border-width: 4px;
}
.arrow-down {
 display:inline-block
}
.arrow-down:after {
 border-color:initial;
 border-style:solid;
 border-width:0 0 1px 1px;
 content:"";
 height:.4em;
 display:inline-block;
 right:5px;
 top:50%;
 margin-left:10px;
 -webkit-transform:rotate(-45deg) translateY(-50%);
 transform:rotate(-45deg) translateY(-50%);
 -webkit-transform-origin:top;
 transform-origin:top;
 -webkit-transition:all .3s ease-out;
 transition:all .3s ease-out;
 width:.4em
}
.dropdown {display: inline-flex; position: relative; /*! vertical-align: top; */}
.dropdown.active .dropdown-menu, .dropdown:hover .dropdown-menu
  {background-color:var(--cbg1);display: flex;flex-direction:column;gap:10px;max-width:40vw;}
html[data-theme='dark'] .dropdown-menu {background-color:var(--cbg-secondary);}
.dropdown-menu {
  display: none; position: fixed;
  top: 40px; padding:.5em;
  min-width: 15em; z-index: 50;
  -webkit-animation-name:DropDownSlide;
  animation-name:DropDownSlide;
  -webkit-animation-duration:.3s;
  animation-duration:.3s;
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
}
.dropdown-content { width: inherit;
  border-radius: 4px; padding: 0.5em;
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.2), 0 1px 0 2px rgba(10, 10, 10, 0.1);
}
.dropdown-item {
  cursor:progress; display: block;
  line-height: 1.5; padding: 0.3em 0.5em; position: relative;
}
.dropdown-menu-animated {
 -webkit-animation-name:DropDownSlide;
 animation-name:DropDownSlide;
 -webkit-animation-duration:.3s;
 animation-duration:.3s;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both;
 position:absolute;
 margin:0;
 z-index:1000
}
.dropdown-menu-animated.dropdown-menu-end[style] {
 left:auto!important;
 right:0!important
}
.dropdown-menu-animated.show {
 top:100%!important
}
.dropdown-menu-animated i {
 display:inline-block
}
.dropdown-menu-animated.dropdown-menu[data-popper-placement^=left],
.dropdown-menu-animated.dropdown-menu[data-popper-placement^=right],
.dropdown-menu-animated.dropdown-menu[data-popper-placement^=top] {
 top:auto!important;
 -webkit-animation:none!important;
 animation:none!important
}
@-webkit-keyframes DropDownSlide {
 100% {
  -webkit-transform:translateY(0);
  transform:translateY(0)
 }
 0% {
  -webkit-transform:translateY(10px);
  transform:translateY(10px)
 }
}
@keyframes DropDownSlide {
 100% {
  -webkit-transform:translateY(0);
  transform:translateY(0)
 }
 0% {
  -webkit-transform:translateY(10px);
  transform:translateY(10px)
 }
}
/* hide scroll remove arrows/spinners from input type number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.callout {
  padding:1.25em;
  margin-top:1.25em;
  margin-bottom:1.25em;
  border:1px solid #e9ecef;
  border-left-width:.25em;
  border-radius:.25em
 }
 .callout h4 {
  margin-bottom:.25em
 }
 .callout code {
  border-radius:.25em
 }
 .callout+.callout {
  margin-top:-.25em
 }
 .callout-info {
  border-left-color:#5bc0de
 }
 .callout-warning {
  border-left-color:#f0ad4e
 }
 .callout-danger {
  border-left-color:var(--cfg-danger)
 }
h4.card-title[data-status="Đang hoạt động"] i:before {
  display: none;
}
i[data-status]:not([data-status="Đang hoạt động"]):before {
  content: "\f05e";
  color: red;
}
.status-inactive {width: unset;
  text-decoration: line-through wavy var(--cfg-danger);
  -webkit-text-decoration: line-through wavy var(--cfg-danger);
}
.border-animation {
  outline: 4px dashed darkgreen;
  box-shadow: 0px 0px 4px 4px;
  animation: maskBorder 2s linear infinite;
}
@keyframes maskBorder {
  to {
    outline-color: #213419;
    box-shadow: 0px 0px 5px 5px;}
}
.thecube {
  width: 75px;
  height: 75px;
  margin: 0 auto;
  margin-top: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
.thecube .cube {
  position: relative;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
.thecube .cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(2);
  transform: scale(2);
}
.thecube .cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2BA0C7;
  -webkit-animation: foldthecube 2.4s infinite linear both;
  animation: foldthecube 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
.thecube .c2 {
  -webkit-transform: scale(2) rotateZ(90deg);
  transform: scale(2) rotateZ(90deg);
}
.thecube .c3 {
  -webkit-transform: scale(2) rotateZ(180deg);
  transform: scale(2) rotateZ(180deg);
}
.thecube .c4 {
  -webkit-transform: scale(2) rotateZ(270deg);
  transform: scale(2) rotateZ(270deg);
}
.thecube .c2:before {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.thecube .c3:before {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.thecube .c4:before {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}
@-webkit-keyframes foldthecube {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}
@keyframes foldthecube {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}
.grid{display:grid}
.grid-overlay{grid-area:1/1}
.grid.cols-3{grid-template-columns: 1fr 1fr 1fr;}
.whole-row {grid-column:1/-1}
.blur{filter:blur(3px);opacity:0.7}
::-moz-placeholder {
  font-size: 0.9em;
}
::-ms-input-placeholder {
  font-size: 0.9em;
}
::-webkit-input-placeholder {
  font-size: 0.9em;
}
.card-content span, .notification {white-space: pre-wrap;} .notification{padding:0 .5em} .nowrap {white-space:nowrap;}
form span {white-space:nowrap;} input[type=date] {width:auto!important;}
.flex, footer div[slot=footer] {display:flex;align-items: center;} .flex.text-right {justify-content: end;flex-wrap:wrap}
.responsive-flex {display:block;} .one-third input[type=date] {width: 100% !important;}
.basis-auto {flex-basis: auto; max-width:100vw;}
.shrink {flex-shrink: unset} .grow {flex-grow: 1}
.basis {flex-basis:100%} .basis-min {flex-basis:min-content} .basis-3 {flex-basis:3em}
.vat-toolbar{color: var(--cfg-warning)!important;position:absolute;top:.5em;right:.5em;}
.vat-title {display:inline;width:7em !important;} .vat-content {flex:1} .vat-unit {width:48% !important;} .vat-money {width:40% !important;}
.w-max {display: inline-block; width: max-content}
.columns{display:flex;flex-wrap: wrap;gap: 1em;justify-content: center;}
.columns > article {flex:none;width:100%}
@media (min-width: 666px) { .hidden-mobile{display:flex!important} .card{padding:1em} .columns comp-foreigner {flex:none;width:48%}
  .columns > article {flex:none;width:96%} .half{flex:none;width:50%} .responsive-flex {display:flex;align-items:center;gap:.5em}
  .responsive-flex.text-right {justify-content: end;} .responsive-flex input:last-of-type {margin-right: 0;}
  .responsive-flex.list{justify-content: space-evenly;}
  .vat-title {flex:none;width:18% !important} .vat-label {width:15% !important} .vat-unit {width:5em !important} .vat-money {width:8em !important} }
@media (min-width: 768px) { .notyf__toast {max-width:50vw;} .flex .one-third, .responsive-flex .one-third {width: 33.3333%;}
  .modal-content, .modal-card { margin: 0 auto; max-height: calc(100vh - 40px); }
  form {display: grid; grid-template-columns: max-content 1fr; grid-gap: 0.3em 0.6em; grid-auto-flow: dense; align-items: center;}
  comp-modal-vat-invoice form {grid-template-columns: 1fr 9fr;}
  .modal-xs{width:30vw} .modal-sm{width:60vw} .modal-md{width:78vw} .modal-lg{width:86vw} .field-body{flex-grow:9;flex-wrap:wrap}
  .vat-title {flex:none;width:16% !important} .vat-unit,.vat-money {margin-left:0.5em;} }
@media (min-width: 992px) { view-phone-log .columns > article {flex:none;width:24%}
  .modal-xs{width:25vw} .modal-sm{width:50vw} .modal-md{width:68vw} .left{float:left}
  .vat-title {flex:none;width:15% !important} .vat-label {width:12% !important} .vat-money {width:20% !important} }
@media (min-width: 1200px) { view-phone-log .columns > article {flex:none;width:32%}
  .modal-xs{width:21vw} .modal-sm{width:44vw} .modal-md{width:65vw} .vat-title {flex:none;width:7em !important}
  .vat-label {width:11% !important} .vat-money {width:7em !important} .columns > article {flex:none;width:98%} }
@media (min-width: 1400px) { .modal-xs{width:16vw} .modal-sm{width:36vw} .modal-md{width:58vw}
  .columns > article {flex:none;width:47%} }