:root {
  --body-bg: #eee;
  --primary: #a31946;
  --secondary: #292978;
  --success: #26b58a;
  --info: #56aaff;
  --warning: #f7ca8d;
  --danger: #eb532f;
  --light: #f8f9fa;
  --dark: #1a0206;
  --white: #fff;
  --black: #000;
  --gray: #6c757d;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --text-muted: #6c757d;
  --text: #222;
  --headers-color: #344767;
  --text-color: #222;
  --text-lighter-color: #707070;
  --text-muted-color: #9A9A9A;
  --focused-input-label-color: #e91e63;
  --loader-primary-color: #6c757d;
  --loader-secondary-color: #dc3545;
  --component-layout-header-height: 3rem;
  --component-layout-footer-height: 4rem;
  --top-menu-container-height: 4rem;
  --sidebar-container-width: 0;
  --sidenav-container-width: 8rem;
  --sidenav-open-width: 18rem;
  --footer-container-height: 0rem;
  --sidenav-padding: 1rem;
  --top-menu-background: rgba(255, 255, 255, 0.8);
  --panel-background: #fff;
  --panel-shadow: 0 0 10px rgba(0,0,0,0.1);
  --table-cell-background: #fff;
  --table-header-background: #f8f9fa;
  --table-edit-row-background: #f8f9fa;
  --table-edited-row-background: black;
  --table-edited-row-color: white;
  --vertical-tabs-background: #f8f9fa;
  --vertical-tabs-border: #ededee;
  --vertical-tabs-background-active: #fff;
  --sidebar-background: #f8f9fa;
  --tabs-border: #999;
  --tab-background: linear-gradient(180deg, #f0f0f0, #fff);
  --link-color: var(--danger);
  /*gradients*/
  --shadow-default: 0 5px 5px rgba(0,0,0,0.1);
  --text-default: #000;
  --gradient-primary: linear-gradient(180deg, #a31946, #c61535);
  --shadow-primary: 0 10px 10px rgba(163, 25, 70, 0.6);
  --text-primary: #fff;
  --gradient-secondary: linear-gradient(180deg, #292978, #292978);
  --shadow-secondary: 0 10px 10px rgba(41, 41, 120, 0.6);
  --text-secondary: #fff;
  --gradient-warning: linear-gradient(180deg, #f7ca8d, #f7a940);
  --shadow-warning: 0 10px 10px rgba(247, 169, 64, 0.6);
  --text-warning: #000;
  --gradient-info: linear-gradient(180deg, #56aaff, #0967b1);
  --shadow-info: 0 10px 10px rgba(9, 103, 177, 0.6);
  --text-info: #fff;
  --gradient-success: linear-gradient(180deg, #26b58a, #269a7f);
  --shadow-success: 0 10px 10px rgba(38, 144, 138, 0.6);
  --text-success: #fff;
  --gradient-dark: linear-gradient(180deg, #6c6b6b, #1a0206);
  --shadow-dark: 0 10px 10px rgba(108, 107, 107, 0.6);
  --text-dark: #fff;
  --gradient-danger: linear-gradient(45deg, #eb532f, #cc0d0d);
  --shadow-danger: 0 10px 10px rgba(204, 13, 13, 0.6);
  --text-danger: #fff;
  --table-selected-row-background: rgba(0, 0, 0, 0.32);
  --table-selected-row-color: #000;
  --table-actions-color: var(--text);
  --shadow-primary-hover: 0 14px 40px 0 rgba(0,0,0,.24),0 17px 20px -5px rgba(233,30,99,1)!important;
  --shadow-secondary-hover: 0 14px 40px 0 rgba(0,0,0,.24),0 17px 20px -5px rgba(41, 41, 120, 1)!important;
  --shadow-dark-hover: 0 14px 40px 0 rgba(0,0,0,.24),0 17px 20px -5px rgba(112, 112, 112, 1) !important;
  --shadow-warning-hover: 0 14px 40px 0 rgba(0,0,0,.24),0 17px 20px -5px rgba(212, 163, 0, 1) !important;
  --shadow-success-hover: 0 14px 40px 0 rgba(0,0,0,.24),0 17px 20px -5px rgba(76,175,80,1)!important;
  --shadow-info-hover: 0 14px 40px 0 rgba(0,0,0,.24),0 17px 20px -5px rgba(26, 115, 232, 0.65) !important;
  --shadow-danger-hover: 0 14px 40px 0 rgba(0,0,0,.24),0 17px 20px -5px rgb(180, 6, 6) !important;
  --shadow-panel: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --search-input-color: #444;
  --search-input-border-color: #ccc;
  --search-input-border-focus-color: var(--primary);
  --menu-text-shadow: rgba(0,0,0,0);
  --tab-color: var(--text-primary);
  --icon-background: var(--text-primary);
  --glider-background: var(--gradient-primary);
  --icon-color: var(--primary);
  --even-item-background: rgba(0, 0, 0, 0.05);
  --ckeditor-background: var(--bg-color);
  --ckeditor-color: var(--text-color);
}

.no-top-menu {
  --top-menu-container-height: 0;
  --sidenav-container-width: 0;
}

:root .dark, bs-theme-dark {
  --search-input-color: #fff;
  --bg-color: #222;
  --text-color: #fff;
  --panel-background-color: #171717;
  --bs-body-bg: var(--bg-color);
  --headers-color: #eee;
  --shadow-panel: 0 4px 16px -1px rgba(0,0,0,5), 0 2px 14px -1px rgba(0,0,0,.06);
  --bs-dropdown-link-hover-bg: #222;
  --top-menu-background-color: rgba(0, 0, 0, 0.1);
  --sidebar-border-color: #212121;
  --menu-text-shadow: rgba(0,0,0,0.5);
  --glider-background: var(--gradient-primary);
  --ckeditor-background: var(--bg-color);
  --ckeditor-color: var(--text-color);
}

.dark {
  --body-bg: #1a0206;
  --text: #fff;
  --top-menu-background: rgba(0, 0, 0, 0.2);
  --panel-background: #202020;
  --table-cell-background: #202020;
  --table-header-background: #2b2b2b;
  --sidebar-background: #2e2e2e;
  --tab-background: linear-gradient(180deg, #272727, #1b1b1b);
  --tabs-border: #2e2e2e;
  --table-edit-row-background: #1c1c1c;
  --vertical-tabs-background: #2b2b2b;
  --vertical-tabs-border: #373737;
  --vertical-tabs-background-active: #1c1c1c;
  --text-lighter-color: #cacaca;
  --table-actions-color: var(--text);
  --search-input-color: #fff;
  --search-input-border-color: #ccc;
}

.glass {
  --body-bg: url("../assets/imgs/blurry-gradient-haikei.svg") center center / cover;
  --text: #fff;
  --top-menu-background: rgba(255, 255, 255, 0.1);
  --panel-background: rgba(255, 255, 255, 0.1);
  --bs-body-bg: var(--body-bg);
  --headers-color: #fff;
  --text-lighter-color: #cacaca;
  --shadow-panel: 0 4px 16px -1px rgba(0,0,0,5), 0 2px 14px -1px rgba(0,0,0,.06);
  --bs-dropdown-link-hover-bg: #222;
  --top-menu-background-color: rgba(0, 0, 0, 0.1);
  --sidebar-border-color: #212121;
  --gradient-dark: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .5));
  --table-cell-background: rgba(255, 255, 255, 0.1);
  --table-header-background: rgba(0, 0, 0, 0.5);
  --table-actions-color: #fff;
  --sidebar-background: rgba(0, 0, 0, 0.5);
  --table-edit-row-background: rgba(255, 255, 255, 0.1);
  --search-input-color: #fff;
  --search-input-border-focus-color: var(--danger);
  --menu-text-shadow: rgba(0,0,0,0.5);
  --loader-primary-color: #fff;
  --glider-background: var(--gradient-primary);
  --gradient-primary: linear-gradient(180deg, rgba(163, 25, 70, .5), rgba(163, 25, 70, .9));
  --shadow-primary-hover: 0 14px 40px 0 rgba(0,0,0,.24),0 17px 20px -5px rgb(96, 33, 55) !important;
  --gradient-danger: linear-gradient(180deg, rgba(235, 83, 47, .5), rgba(235, 83, 47, .9));
  --shadow-danger-hover: 0 14px 40px 0 rgba(0,0,0,.24),0 17px 20px -5px rgb(180, 6, 6) !important;
  --gradient-secondary: linear-gradient(180deg, rgba(41, 41, 120, .5), rgba(41, 41, 120, .9));
  --shadow-secondary-hover: 0 14px 40px 0 rgba(0,0,0,.24),0 17px 20px -5px rgb(41, 41, 120) !important;
  --gradient-warning: linear-gradient(180deg, rgba(247, 169, 64, .5), rgba(247, 169, 64, .9));
  --shadow-warning-hover: 0 14px 40px 0 rgba(0,0,0,.24),0 17px 20px -5px rgb(212, 163, 0) !important;
  --gradient-info: linear-gradient(180deg, rgba(26, 115, 232, .5), rgba(26, 115, 232, .9));
  --shadow-info-hover: 0 14px 40px 0 rgba(0,0,0,.24),0 17px 20px -5px rgb(26, 115, 232) !important;
  --gradient-success: linear-gradient(180deg, rgba(38, 144, 138, .5), rgba(38, 144, 138, .9));
  --shadow-success-hover: 0 14px 40px 0 rgba(0,0,0,.24),0 17px 20px -5px rgb(76,175,80) !important;
  --ckeditor-background: var(--bg-color);
  --ckeditor-color: var(--text-color);
}
.glass .panel {
  backdrop-filter: blur(10px);
}
.glass .dashboard-item {
  backdrop-filter: blur(10px);
}
.glass .dashboard a.dashboard-item .dashboard-module-header.dark {
  background: rgba(0, 0, 0, 0.5);
}
.glass .dashboard a.dashboard-item .dashboard-module-header.default {
  background: rgba(255, 255, 255, 0.5);
}
.glass .dashboard a.dashboard-item .module-title-and-description p {
  color: #fff;
}
.glass .dashboard a.dashboard-item .dashboard-module-body i {
  color: #fff;
}
.glass .top-menu-container .sidenav-handle {
  color: rgba(255, 255, 255, 0.9);
}
.glass .top-menu-container ol.breadcrumb li a {
  color: rgba(255, 255, 255, 0.9);
}
.glass .top-menu-container ol.breadcrumb li {
  color: white;
}
.glass .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.9);
}
.glass .nav-link {
  color: rgba(255, 255, 255, 0.9);
}
.glass .dropdown-item a {
  color: white;
}
.glass .dropdown-item.active, .glass .dropdown-item:active, .glass .dropdown-item:focus, .glass .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}
.glass .dropdown-item.active a, .glass .dropdown-item:active a, .glass .dropdown-item:focus a, .glass .dropdown-item:hover a {
  color: white !important;
}
.glass .dropdown-menu {
  background: rgba(0, 0, 0, 0.7);
}

.visually-hidden {
  display: none;
}

.align-center {
  text-align: center;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

.button {
  border: 1px solid transparent;
  background: none;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.8rem;
  transition: all 0.3s ease;
  cursor: pointer;
}
.button:hover {
  transform: translateY(-3px);
  /*box-shadow: var(--shadow-default);
  border-color: #eee;*/
}
.button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.button.icon-with-text-button {
  display: flex;
  align-content: flex-start;
  gap: 0.5rem;
  align-items: center;
  flex-grow: 1;
}
.button.icon-with-text-button span {
  display: inline-block;
  vertical-align: middle;
  flex-grow: 1;
  white-space: nowrap;
}
.button.action-button {
  padding-inline: 0.5rem;
}
.button.btn-dark, .button.btn-create, .button .dark, .button .create {
  color: #fff;
  background: var(--gradient-dark);
  border-color: var(--dark);
}
.button.btn-dark:hover, .button.btn-create:hover, .button .dark:hover, .button .create:hover {
  box-shadow: var(--shadow-dark);
}
.button.primary {
  color: #fff;
  background: var(--gradient-primary);
  border-color: var(--primary);
}
.button.primary:hover {
  box-shadow: var(--shadow-primary);
}
.button.danger {
  color: #fff;
  background: var(--gradient-danger);
  border-color: var(--danger);
}
.button.danger:hover {
  box-shadow: var(--shadow-danger);
}
.button.warning {
  color: var(--dark);
  background: var(--gradient-warning);
  border-color: var(--warning);
}
.button.warning:hover {
  box-shadow: var(--shadow-warning);
}
.button.success {
  color: #fff;
  background: var(--gradient-success);
  border-color: var(--success);
}
.button.success:hover {
  box-shadow: var(--shadow-success);
}
.button.secondary {
  color: #fff;
  background: var(--gradient-secondary);
  border-color: var(--secondary);
}
.button.secondary:hover {
  box-shadow: var(--shadow-secondary);
}
.button.info {
  color: #fff;
  background: var(--gradient-info);
  border-color: var(--info);
}
.button.info:hover {
  box-shadow: var(--shadow-info);
}

.dashboard {
  padding: 2rem 1rem 2rem 0rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1rem;
  grid-row-gap: 2.25rem;
  width: 100%;
}
.dashboard a.dashboard-item {
  display: block;
  text-decoration: none;
  background: var(--panel-background);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 0 1rem 1rem;
  border-radius: 1rem;
  position: relative;
}
.dashboard a.dashboard-item .dashboard-module-header {
  padding: 1rem;
  border-radius: 1rem;
  background: var(--gradient-primary);
  transform: translateY(-1rem);
  transition: all ease-in-out 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 125px;
  /*color variants*/
}
.dashboard a.dashboard-item .dashboard-module-header i {
  font-size: 4rem;
  color: #fff;
}
.dashboard a.dashboard-item .dashboard-module-header.success {
  background: var(--gradient-success);
  box-shadow: var(--shadow-success);
  color: var(--text-success);
}
.dashboard a.dashboard-item .dashboard-module-header.info {
  background: var(--gradient-info);
  box-shadow: var(--shadow-info);
  color: var(--text-info);
}
.dashboard a.dashboard-item .dashboard-module-header.warning {
  background: var(--gradient-warning);
  box-shadow: var(--shadow-warning);
  color: var(--text-warning);
}
.dashboard a.dashboard-item .dashboard-module-header.warning i {
  color: #222;
}
.dashboard a.dashboard-item .dashboard-module-header.danger {
  background: var(--gradient-danger);
  box-shadow: var(--shadow-danger);
  color: var(--text-danger);
}
.dashboard a.dashboard-item .dashboard-module-header.white {
  background: var(--white);
  box-shadow: var(--shadow-default);
  color: var(--text-default);
}
.dashboard a.dashboard-item .dashboard-module-header.white i {
  color: #222;
}
.dashboard a.dashboard-item .dashboard-module-header.default {
  background: var(--white);
  box-shadow: var(--shadow-default);
  color: var(--text-default);
}
.dashboard a.dashboard-item .dashboard-module-header.default i {
  color: #222;
}
.dashboard a.dashboard-item .dashboard-module-header.dark {
  background: var(--black);
  box-shadow: var(--shadow-default);
  color: var(--text-default);
}
.dashboard a.dashboard-item .dashboard-module-header.primary {
  background: var(--gradient-primary);
  box-shadow: var(--shadow-primary);
  color: var(--text-primary);
}
.dashboard a.dashboard-item .dashboard-module-header.secondary {
  background: var(--gradient-secondary);
  box-shadow: var(--shadow-secondary);
  color: var(--text-secondary);
}
.dashboard a.dashboard-item:hover .dashboard-module-header {
  transform: translateY(-2rem);
  /*color variants*/
}
.dashboard a.dashboard-item:hover .dashboard-module-header.success {
  box-shadow: var(--shadow-success-hover);
}
.dashboard a.dashboard-item:hover .dashboard-module-header.info {
  box-shadow: var(--shadow-info-hover);
}
.dashboard a.dashboard-item:hover .dashboard-module-header.warning {
  box-shadow: var(--shadow-warning-hover);
}
.dashboard a.dashboard-item:hover .dashboard-module-header.danger {
  box-shadow: var(--shadow-danger-hover);
}
.dashboard a.dashboard-item:hover .dashboard-module-header.white {
  box-shadow: var(--shadow-dark-hover);
}
.dashboard a.dashboard-item:hover .dashboard-module-header.dark {
  box-shadow: var(--shadow-dark-hover);
}
.dashboard a.dashboard-item:hover .dashboard-module-header.default {
  box-shadow: var(--shadow-dark-hover);
}
.dashboard a.dashboard-item:hover .dashboard-module-header.primary {
  box-shadow: var(--shadow-primary-hover);
}
.dashboard a.dashboard-item:hover .dashboard-module-header.secondary {
  box-shadow: var(--shadow-secondary-hover);
}
.dashboard a.dashboard-item .module-title-and-description h2 {
  font-size: 1.05rem;
  font-weight: bolder;
  color: var(--headers-color);
  margin: 0;
}
.dashboard a.dashboard-item .module-title-and-description p {
  font-size: 0.86rem;
  color: var(--text-lighter-color);
  margin: 0;
  font-weight: 200;
}
.dashboard a.dashboard-item .dashboard-module-body {
  display: flex;
  gap: 0.25rem;
  justify-content: space-between;
  align-items: center;
}
.dashboard a.dashboard-item .dashboard-module-body i {
  border-radius: 50%;
  height: 2rem;
  width: 2rem;
  font-size: 1.5rem;
  color: var(--text-lighter-color);
  z-index: 1;
  background: var(--panel-background-color);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all ease-in-out 0.2s;
}
.dashboard a.dashboard-item .dashboard-module-body i:hover {
  transform: rotate(360deg);
  background: var(--bg-color);
}

/*media queries*/
/*@media (max-width: 2600px){
  .dashboard{
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 1800px){
  .dashboard{
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1200px){
  .dashboard{
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 992px){
  .dashboard{
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px){
  .dashboard{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px){
  .dashboard{
    grid-template-columns: repeat(1, 1fr);
  }
}*/
/*CIRCULAR CHART*/
@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.pie {
  --p:20;
  --b:.5rem;
  --c:darkred;
  --w:80px;
  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  margin: 5px;
  place-content: center;
  font-size: 0.8rem;
  font-weight: lighter;
  color: white;
  opacity: 0.9;
}
.pie.full {
  font-size: 1rem;
  font-weight: bolder;
}

.pie:before,
.pie:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.pie:before {
  inset: 0;
  background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--p)*1%), #0000 0);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
  mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
}

.pie:after {
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}

.animate {
  animation: p 1s 0.5s both;
}

.no-round:before {
  background-size: 0 0, auto;
}

.no-round:after {
  content: none;
}

@keyframes p {
  from {
    --p:0;
  }
}
.widget-data-orders {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.widget-data-orders span:nth-of-type(1) {
  font-size: 2rem;
  font-weight: 200;
}
.widget-data-orders span:nth-of-type(3) {
  font-size: 1.25rem;
  font-weight: bold;
}

.not-found {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 70vh;
  gap: 2rem;
}
.not-found h1 {
  font-size: 5rem;
  font-weight: 900;
  margin: 0;
}
.not-found h2 {
  font-size: 2.5rem;
  font-weight: 400;
  margin: 0;
}

.top-menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-block: 0.5rem;
}
.top-menu-container h1 {
  font-size: 1.2rem;
  color: var(--headers-color);
  font-weight: bolder;
  margin: 0;
  padding: 0;
}
.top-menu-container .breadcrumb-menu-handle-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.top-menu-container .sidenav-handle {
  background: transparent;
  border-color: transparent;
  color: var(--text-lighter-color);
  font-size: 1.5rem;
  border-radius: 0.5rem;
  padding-left: 0;
  transition: all ease-in 0.2s;
}
.top-menu-container .sidenav-handle.reversed {
  transform: scaleX(-1);
}
.top-menu-container ol.breadcrumb {
  margin: 0;
}
.top-menu-container ol.breadcrumb li {
  font-size: 0.86rem;
  color: var(--text-lighter-color);
  text-shadow: 1px 1px 1px var(--menu-text-shadow);
}
.top-menu-container ol.breadcrumb li a {
  color: var(--text-lighter-color);
}
.top-menu-container ol.breadcrumb li a:hover {
  color: var(--header);
}
.top-menu-container ol.breadcrumb li.detail-name {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-menu-container .nav-link, .top-menu-container .dropdown-item {
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 400;
}
.top-menu-container .nav-link i, .top-menu-container .dropdown-item i {
  margin-right: 0.25rem;
}
.top-menu-container .nav-link.active a, .top-menu-container .dropdown-item.active a {
  color: var(--light);
}
.top-menu-container .nav-link.notifications-link {
  position: relative;
}
.top-menu-container .nav-link.notifications-link i {
  margin-right: 0.2rem;
}
.top-menu-container .nav-link.notifications-link .badge {
  position: absolute;
  top: 0.3rem;
  right: 0;
  background: var(--danger-color);
  color: white;
  font-size: 0.5rem;
  font-weight: 200;
  padding: 0.2rem 0.3rem;
  border-radius: 50%;
}
.top-menu-container img.icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  margin: 0;
  padding: 0;
  margin-right: 0.25rem;
}
.top-menu-container .nav-link {
  text-shadow: 1px 1px 1px var(--menu-text-shadow);
}
.top-menu-container .dropdown-item .nav-link {
  text-shadow: none;
}

aside.sidenav-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  padding: var(--sidenav-padding);
  transition: width ease-in 0.2s;
  z-index: 201;
  width: var(--sidenav-container-width);
}
aside.sidenav-container nav {
  width: 100%;
  height: calc(100vh - 30px);
  background: var(--gradient-dark);
  display: block;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 0.75rem;
  font-size: 90%;
  overflow-y: scroll;
}
aside.sidenav-container nav::-webkit-scrollbar {
  display: none;
}
aside.sidenav-container nav a {
  color: #fff;
  transition: width ease-in 0.2s;
  text-decoration: none;
}
aside.sidenav-container nav .brand {
  padding: 1rem 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  gap: 1rem;
}
aside.sidenav-container nav .brand img {
  width: 4rem;
}
aside.sidenav-container nav .brand span {
  font-size: 0.8rem;
  text-align: center;
  display: block;
}
aside.sidenav-container nav .sidenav-menu {
  list-style: none;
  padding: 0;
}
aside.sidenav-container nav .sidenav-menu li {
  margin-bottom: 3px;
}
aside.sidenav-container nav .sidenav-menu li a {
  border-radius: 0.5rem;
  width: 4.5rem;
  height: 3.5rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
aside.sidenav-container nav .sidenav-menu li a span.description {
  font-size: 0.6rem;
  text-transform: uppercase;
  padding-top: 0.3rem;
  text-align: center;
  font-weight: 600;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
aside.sidenav-container nav .sidenav-menu li a:hover, aside.sidenav-container nav .sidenav-menu li a.active {
  text-decoration: none;
  background: rgba(199, 199, 199, 0.2);
}
aside.sidenav-container nav .sidenav-menu li a span.expand, aside.sidenav-container nav .sidenav-menu li a i.expand {
  display: none;
}
aside.sidenav-container nav .sidenav-menu li a i:not(.expand) {
  font-size: 1.2rem;
}
aside.sidenav-container nav .sidenav-menu li a.expanded ~ ul {
  display: block;
}
aside.sidenav-container nav .sidenav-menu li ul {
  display: none;
  list-style: none;
  margin: 3px 0;
  padding: 0;
}
aside.sidenav-container nav .sidenav-menu li ul li a {
  height: 2.8rem;
  color: #fff;
}
aside.sidenav-container nav .sidenav-menu li ul li a span:first-of-type {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}
aside.sidenav-container nav .sidenav-menu li ul li a span.description {
  font-weight: 100;
  display: none;
}
aside.sidenav-container nav .sidenav-menu li ul li a.active {
  background-color: var(--primary);
  /*background-image: $submenuActiveColor;*/
}
aside.sidenav-container nav .sidenav-header {
  position: relative;
}
aside.sidenav-container nav .sidenav-header button.btn-close {
  visibility: hidden;
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
  font-size: 1.4rem;
}
aside.sidenav-container.open .sidenav-header button.btn-close {
  visibility: visible;
}
aside.sidenav-container:hover, aside.sidenav-container.open {
  width: var(--sidenav-open-width);
  z-index: 103;
}
aside.sidenav-container:hover nav, aside.sidenav-container.open nav {
  backdrop-filter: blur(10px);
}
aside.sidenav-container:hover nav .brand, aside.sidenav-container.open nav .brand {
  padding: 1rem 0;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-left: 1rem;
  padding-right: 1rem;
  align-items: center;
}
aside.sidenav-container:hover nav .brand img, aside.sidenav-container.open nav .brand img {
  width: 4rem;
}
aside.sidenav-container:hover nav .brand span, aside.sidenav-container.open nav .brand span {
  padding-left: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  display: block;
}
aside.sidenav-container:hover nav .sidenav-menu li a, aside.sidenav-container.open nav .sidenav-menu li a {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  text-align: left;
  justify-content: flex-start;
  justify-items: center;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  text-decoration: none;
  width: auto;
}
aside.sidenav-container:hover nav .sidenav-menu li a span.description, aside.sidenav-container.open nav .sidenav-menu li a span.description {
  padding-left: 1rem;
  text-align: left;
  align-items: flex-start;
  font-size: 0.9rem;
  font-weight: 300;
  text-transform: inherit;
}
aside.sidenav-container:hover nav .sidenav-menu li a span.expand, aside.sidenav-container:hover nav .sidenav-menu li a i.expand, aside.sidenav-container.open nav .sidenav-menu li a span.expand, aside.sidenav-container.open nav .sidenav-menu li a i.expand {
  justify-self: flex-end;
  display: block;
  margin-left: auto;
  transition: all ease-in 0.2s;
}
aside.sidenav-container:hover nav .sidenav-menu li a.expanded span.expand, aside.sidenav-container:hover nav .sidenav-menu li a.expanded i.expand, aside.sidenav-container.open nav .sidenav-menu li a.expanded span.expand, aside.sidenav-container.open nav .sidenav-menu li a.expanded i.expand {
  transform: rotate(180deg);
}
aside.sidenav-container:hover nav .sidenav-menu li ul, aside.sidenav-container.open nav .sidenav-menu li ul {
  display: none;
}
aside.sidenav-container:hover nav .sidenav-menu li ul li, aside.sidenav-container.open nav .sidenav-menu li ul li {
  overflow: hidden;
  margin-bottom: 2px;
}
aside.sidenav-container:hover nav .sidenav-menu li ul li a, aside.sidenav-container.open nav .sidenav-menu li ul li a {
  align-items: center;
  justify-items: center;
  text-decoration: none;
}
aside.sidenav-container:hover nav .sidenav-menu li ul li a span.description, aside.sidenav-container.open nav .sidenav-menu li ul li a span.description {
  display: block;
  margin-top: -3px;
}
aside.sidenav-container:hover nav .sidenav-menu li ul.opened, aside.sidenav-container.open nav .sidenav-menu li ul.opened {
  display: block;
}

.expand-table tr.hidden, .expand-table .expand-table tr.hidden {
  opacity: 0.3;
}
.expand-table table.select-mode tbody tr, .expand-table .expand-table table.select-mode tbody tr {
  cursor: pointer;
}
.expand-table table.select-mode tr.selected td, .expand-table table.select-mode tr.selected:hover td, .expand-table .expand-table table.select-mode tr.selected td, .expand-table .expand-table table.select-mode tr.selected:hover td {
  background: var(--table-selected-row-background);
  color: var(--table-selected-row-color);
}
.expand-table.data-template-danger table.select-mode tr.selected td, .expand-table.data-template-danger table.select-mode tr.selected:hover td, .expand-table .expand-table.data-template-danger table.select-mode tr.selected td, .expand-table .expand-table.data-template-danger table.select-mode tr.selected:hover td {
  background: rgba(235, 83, 47, 0.1);
  color: var(--table-selected-row-color);
}
.expand-table.data-template-danger table.select-mode tr.selected td.actions, .expand-table.data-template-danger table.select-mode tr.selected:hover td.actions, .expand-table .expand-table.data-template-danger table.select-mode tr.selected td.actions, .expand-table .expand-table.data-template-danger table.select-mode tr.selected:hover td.actions {
  background: var(--danger);
}
.expand-table.data-template-danger table.select-mode tr.selected td.actions button, .expand-table.data-template-danger table.select-mode tr.selected:hover td.actions button, .expand-table .expand-table.data-template-danger table.select-mode tr.selected td.actions button, .expand-table .expand-table.data-template-danger table.select-mode tr.selected:hover td.actions button {
  color: #fff !important;
}
.expand-table.data-template-primary table.select-mode tr.selected td, .expand-table.data-template-primary table.select-mode tr.selected:hover td, .expand-table .expand-table.data-template-primary table.select-mode tr.selected td, .expand-table .expand-table.data-template-primary table.select-mode tr.selected:hover td {
  background: rgba(255, 21, 109, 0.1);
  color: var(--table-selected-row-color);
}
.expand-table.data-template-primary table.select-mode tr.selected td.actions, .expand-table.data-template-primary table.select-mode tr.selected:hover td.actions, .expand-table .expand-table.data-template-primary table.select-mode tr.selected td.actions, .expand-table .expand-table.data-template-primary table.select-mode tr.selected:hover td.actions {
  background: var(--primary);
}
.expand-table.data-template-primary table.select-mode tr.selected td.actions button, .expand-table.data-template-primary table.select-mode tr.selected:hover td.actions button, .expand-table .expand-table.data-template-primary table.select-mode tr.selected td.actions button, .expand-table .expand-table.data-template-primary table.select-mode tr.selected:hover td.actions button {
  color: #fff !important;
}
.expand-table.data-template-secondary table.select-mode tr.selected td, .expand-table.data-template-secondary table.select-mode tr.selected:hover td, .expand-table .expand-table.data-template-secondary table.select-mode tr.selected td, .expand-table .expand-table.data-template-secondary table.select-mode tr.selected:hover td {
  background: rgba(41, 41, 120, 0.1);
  color: var(--table-selected-row-color);
}
.expand-table.data-template-secondary table.select-mode tr.selected td.actions, .expand-table.data-template-secondary table.select-mode tr.selected:hover td.actions, .expand-table .expand-table.data-template-secondary table.select-mode tr.selected td.actions, .expand-table .expand-table.data-template-secondary table.select-mode tr.selected:hover td.actions {
  background: var(--secondary);
}
.expand-table.data-template-secondary table.select-mode tr.selected td.actions button, .expand-table.data-template-secondary table.select-mode tr.selected:hover td.actions button, .expand-table .expand-table.data-template-secondary table.select-mode tr.selected td.actions button, .expand-table .expand-table.data-template-secondary table.select-mode tr.selected:hover td.actions button {
  color: #fff !important;
}
.expand-table.data-template-success table.select-mode tr.selected td, .expand-table.data-template-success table.select-mode tr.selected:hover td, .expand-table .expand-table.data-template-success table.select-mode tr.selected td, .expand-table .expand-table.data-template-success table.select-mode tr.selected:hover td {
  background: rgba(38, 181, 138, 0.1);
  color: var(--table-selected-row-color);
}
.expand-table.data-template-success table.select-mode tr.selected td.actions, .expand-table.data-template-success table.select-mode tr.selected:hover td.actions, .expand-table .expand-table.data-template-success table.select-mode tr.selected td.actions, .expand-table .expand-table.data-template-success table.select-mode tr.selected:hover td.actions {
  background: var(--success);
}
.expand-table.data-template-success table.select-mode tr.selected td.actions button, .expand-table.data-template-success table.select-mode tr.selected:hover td.actions button, .expand-table .expand-table.data-template-success table.select-mode tr.selected td.actions button, .expand-table .expand-table.data-template-success table.select-mode tr.selected:hover td.actions button {
  color: #fff !important;
}
.expand-table.data-template-warning table.select-mode tr.selected td, .expand-table.data-template-warning table.select-mode tr.selected:hover td, .expand-table .expand-table.data-template-warning table.select-mode tr.selected td, .expand-table .expand-table.data-template-warning table.select-mode tr.selected:hover td {
  background: rgba(247, 202, 141, 0.1);
  color: var(--table-selected-row-color);
}
.expand-table.data-template-warning table.select-mode tr.selected td.actions, .expand-table.data-template-warning table.select-mode tr.selected:hover td.actions, .expand-table .expand-table.data-template-warning table.select-mode tr.selected td.actions, .expand-table .expand-table.data-template-warning table.select-mode tr.selected:hover td.actions {
  background: var(--warning);
}
.expand-table.data-template-warning table.select-mode tr.selected td.actions button, .expand-table.data-template-warning table.select-mode tr.selected:hover td.actions button, .expand-table .expand-table.data-template-warning table.select-mode tr.selected td.actions button, .expand-table .expand-table.data-template-warning table.select-mode tr.selected:hover td.actions button {
  color: black !important;
}
.expand-table.data-template-info table.select-mode tr.selected td, .expand-table.data-template-info table.select-mode tr.selected:hover td, .expand-table .expand-table.data-template-info table.select-mode tr.selected td, .expand-table .expand-table.data-template-info table.select-mode tr.selected:hover td {
  background: rgba(86, 170, 255, 0.1);
  color: var(--table-selected-row-color);
}
.expand-table.data-template-info table.select-mode tr.selected td.actions, .expand-table.data-template-info table.select-mode tr.selected:hover td.actions, .expand-table .expand-table.data-template-info table.select-mode tr.selected td.actions, .expand-table .expand-table.data-template-info table.select-mode tr.selected:hover td.actions {
  background: var(--info);
}
.expand-table.data-template-info table.select-mode tr.selected td.actions button, .expand-table.data-template-info table.select-mode tr.selected:hover td.actions button, .expand-table .expand-table.data-template-info table.select-mode tr.selected td.actions button, .expand-table .expand-table.data-template-info table.select-mode tr.selected:hover td.actions button {
  color: #fff !important;
}
.expand-table.data-template-dark table.select-mode tr.selected td, .expand-table.data-template-dark table.select-mode tr.selected:hover td, .expand-table .expand-table.data-template-dark table.select-mode tr.selected td, .expand-table .expand-table.data-template-dark table.select-mode tr.selected:hover td {
  background: rgba(108, 107, 107, 0.1);
  color: var(--table-selected-row-color);
}
.expand-table.data-template-dark table.select-mode tr.selected td.actions, .expand-table.data-template-dark table.select-mode tr.selected:hover td.actions, .expand-table .expand-table.data-template-dark table.select-mode tr.selected td.actions, .expand-table .expand-table.data-template-dark table.select-mode tr.selected:hover td.actions {
  background: var(--dark);
}
.expand-table.data-template-dark table.select-mode tr.selected td.actions button, .expand-table.data-template-dark table.select-mode tr.selected:hover td.actions button, .expand-table .expand-table.data-template-dark table.select-mode tr.selected td.actions button, .expand-table .expand-table.data-template-dark table.select-mode tr.selected:hover td.actions button {
  color: #fff !important;
}
.expand-table td .theme-identifier, .expand-table .expand-table td .theme-identifier {
  border-radius: 0.25rem;
  padding: 0.25rem;
}
.expand-table td .theme-identifier.gradient-primary, .expand-table .expand-table td .theme-identifier.gradient-primary {
  background: var(--gradient-primary);
}
.expand-table td .theme-identifier.gradient-secondary, .expand-table .expand-table td .theme-identifier.gradient-secondary {
  background: var(--gradient-secondary);
}
.expand-table td .theme-identifier.gradient-success, .expand-table .expand-table td .theme-identifier.gradient-success {
  background: var(--gradient-success);
}
.expand-table td .theme-identifier.gradient-info, .expand-table .expand-table td .theme-identifier.gradient-info {
  background: var(--gradient-info);
}
.expand-table td .theme-identifier.gradient-warning, .expand-table .expand-table td .theme-identifier.gradient-warning {
  background: var(--gradient-warning);
}
.expand-table td .theme-identifier.gradient-danger, .expand-table .expand-table td .theme-identifier.gradient-danger {
  background: var(--gradient-danger);
}
.expand-table td .theme-identifier.gradient-dark, .expand-table .expand-table td .theme-identifier.gradient-dark {
  background: var(--gradient-dark);
}
.expand-table td .theme-identifier.gradient-default, .expand-table .expand-table td .theme-identifier.gradient-default {
  background: var(--gradient-default);
  border: 1px solid var(--tabs-border);
}

.expand-table tr.edited-row > td, .expand-table tr.edited-row:hover > td, .expand-table .expand-table tr.edited-row > td, .expand-table .expand-table tr.edited-row:hover > td {
  opacity: 1;
  background: var(--table-edited-row-background);
  color: var(--table-edited-row-color);
}
.expand-table tr.edited-row > td.actions button, .expand-table tr.edited-row:hover > td.actions button, .expand-table .expand-table tr.edited-row > td.actions button, .expand-table .expand-table tr.edited-row:hover > td.actions button {
  color: var(--table-edited-row-color);
}
.expand-table.data-template-primary tr.edited-row > td, .expand-table.data-template-primary tr.edited-row:hover > td, .expand-table .expand-table.data-template-primary tr.edited-row > td, .expand-table .expand-table.data-template-primary tr.edited-row:hover > td {
  opacity: 1;
  background: var(--primary);
  color: var(--table-edited-row-color);
}
.expand-table.data-template-primary tr.edited-row > td.actions button, .expand-table.data-template-primary tr.edited-row:hover > td.actions button, .expand-table .expand-table.data-template-primary tr.edited-row > td.actions button, .expand-table .expand-table.data-template-primary tr.edited-row:hover > td.actions button {
  color: var(--table-edited-row-color);
}
.expand-table.data-template-secondary tr.edited-row > td, .expand-table.data-template-secondary tr.edited-row:hover > td, .expand-table .expand-table.data-template-secondary tr.edited-row > td, .expand-table .expand-table.data-template-secondary tr.edited-row:hover > td {
  opacity: 1;
  background: var(--secondary);
  color: var(--table-edited-row-color);
}
.expand-table.data-template-secondary tr.edited-row > td.actions button, .expand-table.data-template-secondary tr.edited-row:hover > td.actions button, .expand-table .expand-table.data-template-secondary tr.edited-row > td.actions button, .expand-table .expand-table.data-template-secondary tr.edited-row:hover > td.actions button {
  color: var(--table-edited-row-color);
}
.expand-table.data-template-success tr.edited-row > td, .expand-table.data-template-success tr.edited-row:hover > td, .expand-table .expand-table.data-template-success tr.edited-row > td, .expand-table .expand-table.data-template-success tr.edited-row:hover > td {
  opacity: 1;
  background: var(--success);
  color: var(--table-edited-row-color);
}
.expand-table.data-template-success tr.edited-row > td.actions button, .expand-table.data-template-success tr.edited-row:hover > td.actions button, .expand-table .expand-table.data-template-success tr.edited-row > td.actions button, .expand-table .expand-table.data-template-success tr.edited-row:hover > td.actions button {
  color: var(--table-edited-row-color);
}
.expand-table.data-template-danger tr.edited-row > td, .expand-table.data-template-danger tr.edited-row:hover > td, .expand-table .expand-table.data-template-danger tr.edited-row > td, .expand-table .expand-table.data-template-danger tr.edited-row:hover > td {
  opacity: 1;
  background: var(--danger);
  color: var(--table-edited-row-color);
}
.expand-table.data-template-danger tr.edited-row > td.actions button, .expand-table.data-template-danger tr.edited-row:hover > td.actions button, .expand-table .expand-table.data-template-danger tr.edited-row > td.actions button, .expand-table .expand-table.data-template-danger tr.edited-row:hover > td.actions button {
  color: var(--table-edited-row-color);
}
.expand-table.data-template-warning tr.edited-row > td, .expand-table.data-template-warning tr.edited-row:hover > td, .expand-table .expand-table.data-template-warning tr.edited-row > td, .expand-table .expand-table.data-template-warning tr.edited-row:hover > td {
  opacity: 1;
  background: var(--warning);
  color: black;
}
.expand-table.data-template-warning tr.edited-row > td.actions button, .expand-table.data-template-warning tr.edited-row:hover > td.actions button, .expand-table .expand-table.data-template-warning tr.edited-row > td.actions button, .expand-table .expand-table.data-template-warning tr.edited-row:hover > td.actions button {
  color: black;
}
.expand-table.data-template-info tr.edited-row > td, .expand-table.data-template-info tr.edited-row:hover > td, .expand-table .expand-table.data-template-info tr.edited-row > td, .expand-table .expand-table.data-template-info tr.edited-row:hover > td {
  opacity: 1;
  background: var(--info);
  color: var(--table-edited-row-color);
}
.expand-table.data-template-info tr.edited-row > td.actions button, .expand-table.data-template-info tr.edited-row:hover > td.actions button, .expand-table .expand-table.data-template-info tr.edited-row > td.actions button, .expand-table .expand-table.data-template-info tr.edited-row:hover > td.actions button {
  color: var(--table-edited-row-color);
}
.expand-table.data-template-dark tr.edited-row > td, .expand-table.data-template-dark tr.edited-row:hover > td, .expand-table .expand-table.data-template-dark tr.edited-row > td, .expand-table .expand-table.data-template-dark tr.edited-row:hover > td {
  opacity: 1;
  background: var(--dark);
  color: var(--table-edited-row-color);
}
.expand-table.data-template-dark tr.edited-row > td.actions button, .expand-table.data-template-dark tr.edited-row:hover > td.actions button, .expand-table .expand-table.data-template-dark tr.edited-row > td.actions button, .expand-table .expand-table.data-template-dark tr.edited-row:hover > td.actions button {
  color: var(--table-edited-row-color);
}

.expand-table .align-center {
  text-align: center;
}
.expand-table .edit-open tr:not(.edit-row) td, .expand-table .edit-open tr:not(.edit-row) th, .expand-table .edit-open tr:not(.edited-row) td, .expand-table .edit-open tr:not(.edited-row) th {
  opacity: 0.3;
}
.expand-table .edit-open tr.edit-row td, .expand-table .edit-open tr.edit-row th, .expand-table .edit-open tr.edited-row td, .expand-table .edit-open tr.edited-row th {
  opacity: 1;
}
.expand-table .edit-open tr.edit-row .edit-open tr:not(.edit-row) td, .expand-table .edit-open tr.edit-row .edit-open tr:not(.edit-row) th, .expand-table .edit-open tr.edited-row .edit-open tr:not(.edit-row) td, .expand-table .edit-open tr.edited-row .edit-open tr:not(.edit-row) th {
  opacity: 0.3;
}
.expand-table td {
  background: var(--table-cell-background);
  border-bottom: 1px solid var(--table-header-background);
  font-weight: 300;
  padding: 0.25rem 1rem;
}
.expand-table td img.avatar {
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
}
.expand-table td p {
  margin: 0;
  padding: 0;
}
.expand-table tr:hover td {
  background: var(--table-header-background);
}
.expand-table th {
  background: var(--table-header-background);
  text-transform: uppercase;
  font-weight: 200;
  font-size: 0.8rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #999;
}
.expand-table td, .expand-table td td {
  padding: 0.25rem 1rem;
}
.expand-table .expand-table-table-container {
  overflow-x: auto;
}
.expand-table.sticky-headers .list-container {
  overflow-y: visible;
  max-height: calc(100vh - 300px);
}
.expand-table.sticky-headers table {
  width: 100%;
}
.expand-table.sticky-headers .expand-table-table-container {
  overflow-y: auto;
  width: 100%;
}
.expand-table.sticky-headers thead tr th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.expand-table.sticky-headers table.edit-open thead tr th {
  position: static;
}
.expand-table th.actions, .expand-table td.actions {
  position: sticky;
  right: 0;
  min-width: 150px;
  text-align: right;
  background: var(--table-header-background);
  vertical-align: middle;
}
.expand-table th.actions > div, .expand-table td.actions > div {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.expand-table td.actions > button {
  margin-left: 0.25rem;
  color: var(--table-actions-color);
}
.expand-table table {
  border-collapse: collapse;
  width: 100%;
}
.expand-table table .edit-row td {
  background: var(--table-edit-row-background);
  padding: 0;
  position: relative;
}
.expand-table table .edit-row td .edit-container {
  position: sticky;
  left: 0;
  padding-inline: 1rem;
  background: var(--table-cell-background);
  width: calc(100vw - var(--sidenav-container-width) - 4rem);
}
.expand-table table .edit-row td td, .expand-table table .edit-row td th {
  position: static;
  padding: 0.25rem 1rem;
}
.expand-table table table tbody td {
  padding: 0.25rem 1rem;
}
.expand-table table table .edit-row td .edit-container {
  width: calc(100vw - var(--sidenav-container-width) - 11rem);
}
.expand-table table table .edit-row td .edit-container .fields-container {
  padding: 0;
}
.expand-table table table tr.edited-row > td, .expand-table table table tr.edited-row:hover > td {
  opacity: 1 !important;
  background: var(--table-edited-row-background);
  color: var(--table-edited-row-color);
}
.expand-table table table tr.edited-row > td.actions button, .expand-table table table tr.edited-row:hover > td.actions button {
  color: var(--table-edited-row-color);
}
.expand-table table .tabs.vertical .component-layout main {
  width: calc(100% - 0rem);
}
.expand-table table .tabs.vertical .component-layout footer {
  padding-inline: 0;
}
.expand-table table .tabs.vertical table .edit-container {
  width: calc(100vw - var(--sidenav-container-width) - 14rem);
}
.expand-table .pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
}
.expand-table .pagination-status {
  font-weight: 200;
  font-size: 0.8rem;
  margin: 0;
  padding: 0;
}
.expand-table .pagination-element span {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
}
.expand-table .pagination-element span.active {
  background: var(--gradient-primary);
  color: white;
}
.expand-table.data-template-primary .pagination-element span.active {
  background: var(--gradient-primary);
}
.expand-table.data-template-secondary .pagination-element span.active {
  background: var(--gradient-secondary);
}
.expand-table.data-template-success .pagination-element span.active {
  background: var(--gradient-success);
}
.expand-table.data-template-info .pagination-element span.active {
  background: var(--gradient-info);
}
.expand-table.data-template-warning .pagination-element span.active {
  color: var(--dark);
  background: var(--gradient-warning);
}
.expand-table.data-template-danger .pagination-element span.active {
  background: var(--gradient-danger);
}
.expand-table.data-template-dark .pagination-element span.active {
  background: var(--gradient-dark);
}
.expand-table.data-template-default .pagination-element span.active {
  color: var(--dark);
  background: #fff;
  border: 1px solid var(--dark);
}

.sidebar .expand-table table .edit-row td .edit-container, .dialog .expand-table table .edit-row td .edit-container, .dropbar .expand-table table .edit-row td .edit-container {
  width: 100%;
}

.expand-table.structured-table table:not(.inner) tbody tr > td:first-child {
  text-align: left;
  min-width: 9rem;
}
.expand-table.structured-table table:not(.inner) tbody tr.level-1 > td:first-child i:first-of-type {
  margin-right: 0.5rem;
}
.expand-table.structured-table table:not(.inner) tbody tr.level-2 > td:first-child i:first-of-type {
  margin-right: 0.5rem;
  margin-left: 1rem;
}
.expand-table.structured-table table:not(.inner) tbody tr.level-3 > td:first-child i:first-of-type {
  margin-right: 0.5rem;
  margin-left: 2rem;
}
.expand-table.structured-table table:not(.inner) tbody tr.level-4 > td:first-child i:first-of-type {
  margin-right: 0.5rem;
  margin-left: 3rem;
}
.expand-table.structured-table table:not(.inner) tbody tr.level-5 > td:first-child i:first-of-type {
  margin-right: 0.5rem;
  margin-left: 4rem;
}
.expand-table.structured-table table:not(.inner) tbody tr.level-6 > td:first-child i:first-of-type {
  margin-right: 0.5rem;
  margin-left: 5rem;
}

.data-type-validation-error {
  background: var(--danger);
  color: var(--text-danger);
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin: 1rem 0;
  display: inline-block;
}

.hidden-info {
  font-weight: 200;
  font-size: 0.7rem;
}

.car-service-kanban .list-actions-container .btn-create {
  display: none;
}

.kanban-grid {
  min-height: 300px;
  display: flex;
  flex-grow: 1;
}
.kanban-grid.no-data {
  display: block;
}
.kanban-grid[data-cols="3"] .kanban-column {
  width: 33%;
  padding: 1rem;
}
.kanban-grid[data-cols="5"] .kanban-column {
  width: 20%;
  padding: 1rem;
}
.kanban-grid .kanban-column {
  border-right: 1px dashed var(--table-header-background);
}
.kanban-grid .kanban-column:last-of-type {
  border-right: none;
}
.kanban-grid .kanban-column h3.kanban-column-header {
  font-size: 0.9rem;
  font-weight: bold;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--table-header-background);
  position: relative;
}
.kanban-grid .kanban-column h3.kanban-column-header button {
  position: absolute;
  right: 1rem;
  bottom: 0;
}
.kanban-grid .kanban-column .kanban-item {
  padding: 1rem;
  border: 1px solid var(--table-header-background);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  background: var(--table-header-background);
}
.kanban-grid .kanban-column .kanban-item .kanban-item-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 200;
}
.kanban-grid .kanban-column .kanban-item .kanban-item-header .bi-thermometer-high {
  font-size: 1.5rem;
  color: var(--danger);
}
.kanban-grid .kanban-column .kanban-item .kanban-item-header .bi-thermometer-low {
  font-size: 1.5rem;
  color: var(--success);
}
.kanban-grid .kanban-column .kanban-item .kanban-item-header .bi-thermometer-half {
  font-size: 1.5rem;
  color: var(--warning);
}
.kanban-grid .kanban-column .kanban-item .kanban-item-subheader {
  font-size: 0.8rem;
  font-weight: 400;
}
.kanban-grid .kanban-column .kanban-item .kanban-item-date {
  font-size: 0.8rem;
  font-weight: 200;
  text-align: right;
  padding: 0;
  margin: 0;
}
.kanban-grid .kanban-column .kanban-item .kanban-item-date span {
  padding-inline: 0.25rem;
  border-radius: 0.25rem;
}
.kanban-grid .kanban-column .kanban-item .kanban-item-date span.success {
  background: var(--success);
  color: var(--text-success);
}
.kanban-grid .kanban-column .kanban-item .kanban-item-date span.danger {
  background: var(--danger);
  color: var(--text-danger);
}
.kanban-grid .kanban-column .kanban-item .kanban-item-date span.warning {
  background: var(--warning);
  color: var(--text-warning);
}
.kanban-grid .kanban-column .kanban-item .kanban-item-date span.info {
  background: var(--info);
  color: var(--text-info);
}
.kanban-grid .kanban-column .kanban-item .kanban-item-body .kanban-item-user {
  display: none;
}
.kanban-grid .kanban-column .kanban-item .kanban-item-body .kanban-item-avatar {
  height: 2rem;
  aspect-ratio: 1;
}
.kanban-grid .kanban-column .kanban-item.date-past {
  border-top: 4px solid var(--danger);
}
.kanban-grid .kanban-column .kanban-item.date-today {
  border-top: 4px solid var(--success);
}

.task-detail {
  margin: 0 auto;
  max-width: 1500px;
}
.task-detail h3 {
  font-size: 1.3rem;
  margin-block: 0.5rem;
}
.task-detail h4 {
  font-size: 1.1rem;
  margin-block: 0.5rem;
}
.task-detail h4.task-description-header {
  width: 100%;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 200;
}
.task-detail div[data-ei=assigned-users] {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 2rem;
}
.task-detail .assigned-users {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  width: 50%;
  flex-wrap: wrap;
  --image-height: 3rem;
}
.task-detail .assigned-users .users-header {
  width: 100%;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 200;
}
.task-detail .assigned-users .users-container {
  width: 100%;
  display: block;
  position: relative;
  height: var(--image-height);
}
.task-detail .assigned-users .users-container span {
  position: absolute;
  right: 0;
  transition: all 0.3s ease-in-out;
  width: var(--image-height);
  height: var(--image-height);
}
.task-detail .assigned-users .users-container span:nth-of-type(1) {
  transform: translateX(0);
}
.task-detail .assigned-users .users-container span:nth-of-type(2) {
  transform: translateX(-1rem);
}
.task-detail .assigned-users .users-container span:nth-of-type(3) {
  transform: translateX(-2rem);
}
.task-detail .assigned-users .users-container span:nth-of-type(4) {
  transform: translateX(-3rem);
}
.task-detail .assigned-users .users-container span:nth-of-type(5) {
  transform: translateX(-4rem);
}
.task-detail .assigned-users .users-container span img {
  height: var(--image-height);
  aspect-ratio: 1;
}
.task-detail .assigned-users:hover .users-container span {
  transform: translateX(0);
}
.task-detail .assigned-users:hover .users-container span:nth-of-type(2) {
  transform: translateX(-3.1rem);
}
.task-detail .assigned-users:hover .users-container span:nth-of-type(3) {
  transform: translateX(-6.2rem);
}
.task-detail .assigned-users:hover .users-container span:nth-of-type(4) {
  transform: translateX(-9.3rem);
}
.task-detail .assigned-users:hover .users-container span:nth-of-type(5) {
  transform: translateX(-12.4rem);
}
.task-detail .task-description .description {
  border-radius: 1rem;
  /*border: 1px solid var(--vertical-tabs-border);*/
  padding: 1rem;
  margin-bottom: 3rem;
}
.task-detail .task-header {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.task-detail .task-header > span {
  display: flex;
  align-content: flex-start;
  align-items: center;
  gap: 1rem;
}
.task-detail .task-header .priority-meter i {
  font-size: 3rem;
}
.task-detail .task-header .avatar-button {
  height: 3.2rem;
  width: 3.2rem;
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: 2px solid var(--panel-background);
  border-radius: 1.6rem;
}
.task-detail .task-header .avatar-button img {
  margin: 0;
  padding: 0;
  width: 2.8rem;
  height: 2.8rem;
}
.task-detail .task-header .avatar-button.assignable {
  cursor: pointer;
}
.task-detail .task-header .avatar-button.assignable:hover {
  border-color: var(--success);
}

.kanban-item {
  --image-height: 2rem;
}
.kanban-item .kanban-item-body .kanban-users {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.kanban-item .kanban-item-body .kanban-users .users-container {
  position: relative;
  height: var(--image-height);
}
.kanban-item .kanban-item-body .kanban-users .users-container span {
  position: absolute;
  right: 0;
  transition: all 0.3s ease-in-out;
  width: var(--image-height);
  height: var(--image-height);
}
.kanban-item .kanban-item-body .kanban-users .users-container span:nth-of-type(1) {
  transform: translateX(0);
}
.kanban-item .kanban-item-body .kanban-users .users-container span:nth-of-type(2) {
  transform: translateX(-1rem);
}
.kanban-item .kanban-item-body .kanban-users .users-container span:nth-of-type(3) {
  transform: translateX(-2rem);
}
.kanban-item .kanban-item-body .kanban-users .users-container span:nth-of-type(4) {
  transform: translateX(-3rem);
}
.kanban-item .kanban-item-body .kanban-users .users-container span:nth-of-type(5) {
  transform: translateX(-4rem);
}
.kanban-item .kanban-item-body .kanban-users .users-container span img {
  height: var(--image-height);
  aspect-ratio: 1;
}
.kanban-item .kanban-item-body .kanban-users:hover .users-container span {
  transform: translateX(0);
}
.kanban-item .kanban-item-body .kanban-users:hover .users-container span:nth-of-type(2) {
  transform: translateX(-2.1rem);
}
.kanban-item .kanban-item-body .kanban-users:hover .users-container span:nth-of-type(3) {
  transform: translateX(-4.2rem);
}
.kanban-item .kanban-item-body .kanban-users:hover .users-container span:nth-of-type(4) {
  transform: translateX(-6.3rem);
}
.kanban-item .kanban-item-body .kanban-users:hover .users-container span:nth-of-type(5) {
  transform: translateX(-8.4rem);
}

@media (max-width: 992px) {
  .kanban-grid {
    min-height: 300px;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
  }
  .kanban-grid[data-cols="3"] .kanban-column {
    width: 100%;
    padding: 1rem;
  }
  .kanban-grid[data-cols="5"] .kanban-column {
    width: 100%;
    padding: 1rem;
  }
}
.sidebar-open .calendar {
  width: calc(100% - 250px);
}

.calendar {
  margin-bottom: 5rem;
}
.calendar .header-buttons-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.calendar .bin, .calendar .add-button {
  width: 4rem;
  height: 4rem;
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 10rem;
  bottom: 1rem;
  background: var(--gradient-danger);
  color: var(--text-danger);
  border-radius: 2rem;
  transition: visibility 0s, opacity 0.5s linear;
}
.calendar .bin i, .calendar .add-button i {
  font-size: 2rem;
}
.calendar .add-button {
  background: var(--gradient-success);
  color: var(--text-success);
  right: 1rem;
  display: flex;
}

.show-bin .calendar .bin {
  display: flex;
}

.monthly-calendar h2 {
  font-size: 1.2rem;
}
.monthly-calendar .vacations-info {
  font-size: 0.8rem;
}
.monthly-calendar .vacations-info span.total {
  font-weight: bold;
  font-size: 1rem;
}
.monthly-calendar .weekday-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: right;
  font-weight: bold;
  background-color: var(--table-header-background);
  padding: 0.5rem 0;
  border-radius: 0.5rem 0.5rem 0 0;
}
.monthly-calendar .weekday-header .weekday {
  padding: 0.25rem 1rem;
}
.monthly-calendar .calendar-grid {
  background: var(--table-background);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: right;
  align-items: start;
  justify-items: start;
}
.monthly-calendar .calendar-grid .calendar-day {
  display: flex;
  flex-direction: column;
  text-align: right;
  width: 100%;
  padding: 0.5rem;
  border: 0.5px solid var(--table-header-background);
  align-items: flex-end;
  align-content: flex-start;
  justify-content: flex-start;
  height: 100%;
}
.monthly-calendar .calendar-grid .calendar-day.prev-month-day, .monthly-calendar .calendar-grid .calendar-day.next-month-day {
  background-color: var(--table-header-background);
}
.monthly-calendar .calendar-grid .calendar-day .day-number {
  font-size: 0.8rem;
  font-weight: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25rem;
}
.monthly-calendar .calendar-grid .calendar-day.today .day-number {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
}
.monthly-calendar .calendar-grid .calendar-day .events-container {
  min-height: 2rem;
  background: var(--table-header-background);
  border-radius: 0.25rem;
  border: 1px solid var(--table-);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.monthly-calendar .calendar-grid .calendar-day .events-container .event {
  border-radius: 0.25rem;
  background: var(--gradient-warning);
  color: var(--text-warning);
  text-align: left;
  padding: 0.25rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.monthly-calendar .calendar-grid .calendar-day .events-container .event span.hover-date {
  display: none;
  color: var(--text-danger);
}
.monthly-calendar .calendar-grid .calendar-day .events-container .event.approved {
  background: var(--gradient-success);
  color: var(--text-success);
}
.monthly-calendar .calendar-grid .calendar-day .events-container .event span.not-selectable {
  pointer-events: none;
}
.monthly-calendar .calendar-grid .calendar-day .events-container .event:hover {
  cursor: pointer;
  background: var(--gradient-danger);
  color: var(--text-danger);
}
.monthly-calendar .calendar-grid .calendar-day .events-container .event:hover span.hover-date {
  display: inline;
}
.monthly-calendar .calendar-grid .calendar-day .events-container .event:hover span.hover-name {
  display: none;
}
.monthly-calendar .calendar-grid .calendar-day .events-container .car-service-event {
  display: block;
}
.monthly-calendar .calendar-grid .calendar-day:hover .events-container:not(.with-events) {
  cursor: pointer;
  border: 1px dashed var(--primary);
  color: #fff;
}

.sidebar-calendar-events {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sidebar-calendar-events .event {
  border-radius: 0.25rem;
  background: var(--gradient-warning);
  color: var(--text-warning);
  text-align: left;
  padding: 0.25rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: grab;
}
.sidebar-calendar-events .event:hover {
  background: var(--gradient-danger);
  color: var(--text-danger);
}
.sidebar-calendar-events .event:hover span.hover-date {
  display: inline;
}
.sidebar-calendar-events .event:hover span.hover-name {
  display: none;
}

.loader {
  margin-left: auto;
  margin-right: auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite;
}

.loader::before, .loader::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  /*border: 5px solid #FFF;*/
  border: 5px solid var(--loader-primary-color);
  animation: prixClipFix 2s linear infinite;
}

.loader::after {
  inset: 8px;
  transform: rotate3d(90, 90, 0, 180deg);
  /*border-color: #FF3D00;*/
  border-color: var(--loader-secondary-color);
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  75%, 100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
}
/*

@media (max-width: 776px) {
  .wrapper{
    .top-menu-container{
      width: calc(100% - 2rem);
      margin-left: 1rem;
    }
    .main{
      padding: calc(var(--top-menu-height) + 2rem) 1rem 1rem;
    }
    .sidenav-container{
      transform: translateX(-100%);
      background: yellow;
    }
    .sidebar-container{
      width: 100%;
    }
  }
}

*/
.upload-progress {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  width: 100%;
  height: 0.6rem;
  align-items: center;
  justify-content: flex-start;
}
.upload-progress .progress-bar {
  height: 0.4rem;
  width: 10%;
  background: black;
}
.upload-progress .progress-bar.warning {
  background: var(--gradient-warning);
}
.upload-progress .progress-bar.success {
  background: var(--gradient-success);
}
.upload-progress .progress-bar.danger {
  background: var(--gradient-danger);
}
.upload-progress .progress-bar.info {
  background: var(--gradient-info);
}
.upload-progress .progress-bar.primary {
  background: var(--gradient-primary);
}
.upload-progress .progress-bar.secondary {
  background: var(--gradient-secondary);
}
.upload-progress .progress-bar.dark {
  background: var(--gradient-dark);
}

.wrapper {
  width: 100%;
  height: 100vh;
}

.sidenav-container {
  height: 100%;
  width: var(--sidenav-container-width);
}

.content-container {
  padding-top: var(--top-menu-container-height);
  height: 100vh;
  width: calc(100% - var(--sidenav-container-width));
  padding-bottom: 1rem;
  /*display: flex;*/
  flex-direction: column;
  overflow: auto;
  margin-left: calc(var(--sidenav-container-width) + 1rem);
}
.content-container main.main-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 1rem;
  padding-top: 2rem;
}

.top-menu-container {
  height: var(--top-menu-container-height);
  position: fixed;
  top: 0.25rem;
  width: calc(100% - var(--sidenav-container-width) - 2rem);
  background: var(--top-menu-background);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  z-index: 100;
  padding-inline: 1rem;
  padding-block: 0.5rem;
}

.top-menu {
  background: transparent !important;
}

.footer-container {
  height: var(--footer-container-height);
  border-radius: 0.5rem;
  background: red;
  overflow: hidden;
  margin-right: 1rem;
  width: calc(100% - 3rem);
}

.main-content-middle {
  padding-top: 1rem;
  overflow: visible;
  position: relative;
}

body.sidenav-open {
  --sidenav-container-width: var(--sidenav-open-width);
}

.component-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.component-layout header {
  height: var(--component-layout-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
}
.component-layout header.empty-header {
  border: none;
}
.component-layout header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
}
.component-layout header button {
  font-size: 2rem;
  font-weight: 200;
  padding: 0;
  margin: 0;
  transform: translateY(-5px);
}
.component-layout header button:hover {
  border-color: transparent;
  transform: translateY(0px) rotate(180deg);
}
.component-layout main {
  flex: 1;
  width: 100%;
  overflow-y: auto;
}
.component-layout main[data-loading=true] {
  display: flex;
  justify-content: center;
  align-items: center;
}
.component-layout footer {
  height: var(--component-layout-footer-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0 1rem;
  width: calc(100% - 2rem);
}

.sidebar-overlay {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 250px;
  background: var(--sidebar-background);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  height: 100vh;
  transition: transform 0.3s ease;
  transform: translateX(100%);
}
.sidebar.open {
  transform: translateX(0);
}
.sidebar.full {
  width: 100%;
}
.sidebar.two-thirds {
  width: calc(100% / 3 * 2);
}
.sidebar.tiny {
  width: 100px;
}
.sidebar.half {
  width: 50%;
}
.sidebar.one-third {
  width: calc(100% / 3);
}
.sidebar.product-container {
  width: 350px;
}
.sidebar .component-layout header {
  padding-inline: 1rem;
}
.sidebar .component-layout header h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}
.sidebar .component-layout main {
  padding-inline: 1rem;
}

.dropbar {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  top: auto;
  width: calc(100% - 2rem);
  background: var(--light);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  z-index: 100;
  transition: transform 0.3s ease;
  transform: translateY(100%);
  border-radius: 1rem 1rem 0 0;
}
.dropbar header {
  padding-inline: 1rem;
}
.dropbar main {
  padding-inline: 1rem;
}
.dropbar.open {
  transform: translateY(0);
}
.dropbar.full {
  height: calc(100% - 5px);
  transform: translateY(calc(100% - 5px));
}
.dropbar.two-thirds {
  height: calc(100% / 3 * 2);
  transform: translateY(calc(0 - 5px));
}
.dropbar.tiny, .dropbar.small {
  height: 200px;
  transform: translateY(calc(0 - 200px));
}
.dropbar.half {
  height: 50%;
  transform: translateY(calc(0- 50%));
}
.dropbar.danger {
  border-top: 5px solid var(--danger);
}
.dropbar.danger header {
  color: var(--danger);
}

.dropdown-button-item {
  padding: 0.25rem 0.5rem;
}
.dropdown-button-item h6 {
  font-size: 0.7rem;
  font-weight: 200;
  text-transform: uppercase;
}

.draggable-list-with-search {
  padding: 1rem;
}
.draggable-list-with-search .form-input {
  position: relative;
}
.draggable-list-with-search .form-input input {
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  transition: border-bottom-color 500ms ease-in-out;
  border-bottom-width: 1px;
  width: 100%;
  background: none;
}
.draggable-list-with-search .form-input input:placeholder-shown + label {
  opacity: 0.4;
}
.draggable-list-with-search .form-input input:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  border-color: var(--danger);
}
.draggable-list-with-search .form-input i {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  cursor: pointer;
}
.draggable-list-with-search .list-container ul {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
}
.draggable-list-with-search .list-container ul.over {
  background: #ccc;
}
.draggable-list-with-search .list-container ul li {
  margin-block: 0.25rem;
  padding: 1rem;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.draggable-list-with-search .list-container ul li.selected {
  background: var(--gradient-warning);
  font-weight: bold;
}

.no-data-info {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  color: var(--text);
  padding: 2rem 1rem;
  background: var(--panel-background);
  border-radius: 1rem;
}
.no-data-info i {
  font-size: 2rem;
  transition: all 0.3s ease-in-out;
}
.no-data-info p {
  font-size: 1.5rem;
  padding: 0;
  margin: 0;
}
.no-data-info:hover {
  transform: rotate(360deg);
  cursor: pointer;
}
.no-data-info:hover i {
  transform: rotate(360deg);
}

hr.horizontal.light {
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
  opacity: 0.5;
  height: 2px;
  border: none;
}

.list-actions-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 0.5rem;
}
.list-actions-container .actions-container {
  display: flex;
  gap: 1rem;
}
.list-actions-container .form-input {
  position: relative;
}
.list-actions-container .form-input input {
  padding: 0.5rem;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--search-input-border-color);
  font-size: 0.9rem;
  background: transparent;
  color: var(--search-input-color);
}
.list-actions-container .form-input input:focus {
  outline: none;
  border-color: var(--search-input-border-focus-color);
}
.list-actions-container .form-input input:focus ~ .search-icon-container i {
  color: var(--search-input-border-focus-color);
}
.list-actions-container .form-input .search-icon-container i {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: var(--search-input-border-color);
}
.list-actions-container .form-input .search-icon-container i.fa-spinner {
  top: 30%;
}
.list-actions-container .website-language-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.list-actions-container .website-language-selector button:hover {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.list-actions-container .website-language-selector .active {
  background: var(--gradient-primary);
  color: var(--text-primary);
}

.list-container {
  width: calc(100%);
  overflow-x: auto;
}

.website-image-path {
  display: flex;
  flex-direction: column;
}
.website-image-path > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
}

.website-image-container {
  display: flex;
  width: 6rem;
  align-items: center;
  position: relative;
}
.website-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.25rem;
  border: 3px solid var(--panel-background);
}
.website-image-container img.gallery {
  border-color: var(--success);
}
.website-image-container img.main {
  border-color: var(--primary);
}
.website-image-container img.head {
  border-color: var(--warning);
}
.website-image-container .image-info-icon {
  position: absolute;
  bottom: 0.25rem;
  right: 0.25rem;
  border-radius: 50%;
  padding: 0.25rem;
  cursor: help;
  background: var(--panel-background);
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

.panel {
  background: var(--panel-background);
  border-radius: 0.5rem;
  box-shadow: var(--panel-shadow);
  overflow: visible;
  width: calc(100vw - var(--sidenav-container-width) - 2rem);
}
.panel.panel-primary .panel-header .icon {
  background: var(--gradient-primary);
  box-shadow: var(--shadow-primary);
  color: #fff;
}
.panel.panel-secondary .panel-header .icon {
  background: var(--gradient-secondary);
  box-shadow: var(--shadow-secondary);
  color: #fff;
}
.panel.panel-success .panel-header .icon {
  background: var(--gradient-success);
  box-shadow: var(--shadow-success);
  color: #fff;
}
.panel.panel-info .panel-header .icon {
  background: var(--gradient-info);
  box-shadow: var(--shadow-info);
  color: #fff;
}
.panel.panel-warning .panel-header .icon {
  background: var(--gradient-warning);
  box-shadow: var(--shadow-warning);
  color: var(--dark);
}
.panel.panel-danger .panel-header .icon {
  background: var(--gradient-danger);
  box-shadow: var(--shadow-danger);
  color: #fff;
}
.panel.panel-dark .panel-header .icon {
  background: var(--gradient-dark);
  box-shadow: var(--shadow-dark);
  color: #fff;
}
.panel.panel-default .panel-header .icon {
  background: #fff;
  box-shadow: var(--shadow-dark);
  color: var(--dark);
}
.panel header.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: visible;
}
.panel header.panel-header .icon {
  border-radius: 0.5rem;
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--panel-background);
  margin-left: 1rem;
  transform: translateY(-1rem);
}
.panel header.panel-header .icon i {
  font-size: 2rem;
}
.panel header.panel-header .icon i.has-link {
  cursor: pointer;
}
.panel header.panel-header .icon i.rotate-circle {
  transition: transform 0.3s ease-in-out;
}
.panel header.panel-header .icon i.rotate-circle:hover {
  transform: rotate(360deg);
}
.panel header.panel-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  padding-top: 1rem;
}
.panel header.panel-header h2.shorten {
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel header.panel-header h2 small {
  font-size: 0.7rem;
  font-weight: 200;
}
.panel header.panel-header h2 small:before {
  font-size: 0.7rem;
  content: " / ";
}
.panel header.panel-header .panel-header-left {
  display: flex;
  align-content: flex-start;
  gap: 1rem;
  overflow: visible;
  position: relative;
}
.panel header.panel-header .panel-header-right {
  padding-right: 1rem;
  display: flex;
  align-content: flex-end;
  gap: 1rem;
  overflow: visible;
  position: relative;
}
.panel header.panel-header .panel-header-right button {
  padding: 0.5rem 0.5rem;
}
.panel header.panel-header .panel-header-right button:hover {
  border-color: transparent;
  box-shadow: none;
}
.panel header.panel-header .panel-header-right button:active, .panel header.panel-header .panel-header-right button:focus {
  border-color: transparent;
}
.panel header.panel-header input[type=range] {
  width: 150px;
}
.panel div.panel-body {
  padding: 0 1rem 2rem;
  min-height: 100px;
  transition: all 0.1s ease-in-out;
}
.panel div.panel-body.collapsed {
  height: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  min-height: 0;
}
.panel div.panel-body.fs-80 table {
  font-size: 80%;
}
.panel div.panel-body.fs-80 table table {
  font-size: 90%;
}
.panel div.panel-body.fs-90 table {
  font-size: 90%;
}
.panel div.panel-body.fs-100 table {
  font-size: 100%;
}
.panel div.panel-body.fs-110 table {
  font-size: 110%;
}
.panel div.panel-body.fs-120 table {
  font-size: 120%;
}
.panel div.panel-body.hs-1 table td {
  padding-inline: 0;
}
.panel div.panel-body.hs-1 table th {
  padding-inline: 0.25rem;
}
.panel div.panel-body.hs-2 table td, .panel div.panel-body.hs-2 table th {
  padding-inline: 0.25rem;
}
.panel div.panel-body.hs-3 table td, .panel div.panel-body.hs-3 table th {
  padding-inline: 0.5rem;
}
.panel div.panel-body.hs-4 table td, .panel div.panel-body.hs-4 table th {
  padding-inline: 1rem;
}
.panel div.panel-body.hs-5 table td, .panel div.panel-body.hs-5 table th {
  padding-inline: 1.5rem;
}
.panel div.panel-body.hs-6 table td, .panel div.panel-body.hs-6 table th {
  padding-inline: 2rem;
}
.panel div.panel-body.hs-7 table td, .panel div.panel-body.hs-7 table th {
  padding-inline: 2.5rem;
}
.panel div.panel-body.hs-8 table td, .panel div.panel-body.hs-8 table th {
  padding-inline: 3rem;
}
.panel div.panel-body.vs-1 table td {
  padding-block: 0;
}
.panel div.panel-body.vs-1 table th {
  padding-block: 0.25rem;
}
.panel div.panel-body.vs-2 table td {
  padding-block: 0.1rem;
}
.panel div.panel-body.vs-3 table td {
  padding-block: 0.2rem;
}
.panel div.panel-body.vs-4 table td {
  padding-block: 0.4rem;
}
.panel div.panel-body.vs-5 table td {
  padding-block: 0.5rem;
}
.panel div.panel-body.vs-6 table td {
  padding-block: 0.7rem;
}
.panel div.panel-body.vs-7 table td {
  padding-block: 0.9rem;
}
.panel div.panel-body.vs-8 table td {
  padding-block: 1rem;
}

.blank {
  width: calc(100vw - var(--sidenav-container-width) - 2rem);
}
.blank h2.panel-title.shorten {
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blank h2.panel-title small {
  font-size: 0.7rem;
  font-weight: 200;
}
.blank h2.panel-title small:before {
  font-size: 0.7rem;
  content: " / ";
}

.simple-form {
  text-align: center;
  container-type: inline-size;
}
.simple-form.saving {
  position: relative;
}
.simple-form.saving > * {
  pointer-events: none;
  opacity: 0.1;
}
.simple-form.saving .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}
.simple-form .fields-container {
  padding: 1rem;
  text-align: left;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 600px;
}
.simple-form.simple-form-4-columns .fields-container {
  max-width: var(--breakpoint-xl);
  grid-template-columns: repeat(4, 1fr);
}
.simple-form.simple-form-4-columns .fields-container .textarea-wrapper {
  grid-column: 1/-1;
}
@container (width < 992px) {
  .simple-form.simple-form-4-columns .fields-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@container (width < 768px) {
  .simple-form.simple-form-4-columns .fields-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@container (width < 576px) {
  .simple-form.simple-form-4-columns .fields-container {
    grid-template-columns: repeat(1, 1fr);
  }
}
.simple-form.simple-form-3-columns .fields-container {
  max-width: 100%;
  grid-template-columns: repeat(3, 1fr);
}
.simple-form.simple-form-3-columns .fields-container .textarea-wrapper {
  grid-column: 1/-1;
}
.simple-form.simple-form-2-columns .fields-container {
  max-width: 100%;
  grid-template-columns: repeat(2, 1fr);
}
.simple-form.simple-form-2-columns .fields-container .textarea-wrapper {
  grid-column: 1/-1;
}
.simple-form .fields-container .form-control {
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  transition: border-bottom-color 500ms ease-in-out;
}
.simple-form .fields-container .form-control:placeholder-shown + label {
  opacity: 0.4;
}
.simple-form .fields-container .form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  border-color: var(--danger);
}
.simple-form .fields-container .form-check {
  margin-top: 1rem;
}
.simple-form .richtext-wrapper {
  padding-bottom: 100px;
}
.simple-form .richtext-wrapper .ql-editor {
  background: var(--panel-background);
}
.simple-form .tags-with-options .tags-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  gap: 0.25rem;
  padding: 0.25rem;
}
.simple-form .tags-with-options .tags-container .tag {
  background: var(--danger);
  color: var(--white);
  padding: 0 0.1rem 0 0.25rem;
  border-radius: 5px;
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
.simple-form .tags-with-options .tags-container .tag button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: #fff;
}
.simple-form .field-with-icon {
  position: relative;
}
.simple-form .field-with-icon .icon-container {
  border: 1px solid #eee;
  border-radius: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}
.simple-form .field-with-icon .icon-container.avatar {
  border-color: transparent;
}
.simple-form .field-with-icon .icon-container img {
  margin: 0;
  padding: 0;
  width: 100%;
}
.simple-form .field-with-theme {
  position: relative;
}
.simple-form .field-with-theme .theme-container {
  border: 1px solid #eee;
  border-radius: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
}
.simple-form textarea[rows="5"] {
  min-height: 150px;
}
.simple-form .quill-wrapper .switch-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.simple-form .quill-wrapper .html-replacement {
  min-height: 500px;
}
.simple-form .quill-wrapper .html-replacement .html-editor {
  min-height: 500px;
}
.simple-form .form-range {
  width: 100%;
}
.simple-form .form-label {
  display: block;
}
.simple-form .range-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 200;
}
.simple-form .range-options:hover {
  cursor: pointer;
}
.simple-form .range-wrapper label {
  font-size: 0.85rem;
  padding-left: 1rem;
  color: rgba(var(--bs-body-color-rgb), 0.65);
}

.glass input, .glass select, .glass textarea {
  border-color: var(--tabs-border) !important;
}

/*********** Baseline, reset styles ***********/
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 25rem;
}

/* Removes default focus */
input[type=range]:focus {
  outline: none;
}

/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
input[type=range]::-webkit-slider-runnable-track {
  background-color: #ebebeb;
  border-radius: 0.5rem;
  height: 0.5rem;
}

/* slider thumb */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  margin-top: -4px;
  /* Centers thumb on the track */
  background-color: #b51a00;
  border-radius: 0.5rem;
  height: 1rem;
  width: 1rem;
}

input[type=range]:focus::-webkit-slider-thumb {
  outline: 3px solid #b51a00;
  outline-offset: 0.125rem;
}

/*********** Firefox styles ***********/
/* slider track */
input[type=range]::-moz-range-track {
  background-color: #ebebeb;
  border-radius: 0.5rem;
  height: 0.5rem;
}

/* slider thumb */
input[type=range]::-moz-range-thumb {
  background-color: #b51a00;
  border: none;
  /*Removes extra border that FF applies*/
  border-radius: 0.5rem;
  height: 1rem;
  width: 1rem;
}

input[type=range]:focus::-moz-range-thumb {
  outline: 3px solid #b51a00;
  outline-offset: 0.125rem;
}

/*
.dark{
  .cke{
    .cke_top {
      background: var(--ckeditor-background) !important;
      color: var(--ckeditor-color) !important;
      .cke_toolbar{
        .cke_button{
          color: var(--ckeditor-color) !important;
          .cke_button_icon{
            color: var(--ckeditor-color) !important;
            filter: invert(1);
          }
        }
      }
    }
  }
}
.glass{
  .cke{
    .cke_top {
      background: var(--panel-background) !important;
      color: var(--text-color) !important;
      .cke_toolbar{
        .cke_button{
          color: var(--text-color) !important;
          .cke_button_icon{
            color: var(--text-color) !important;
            filter: invert(1);
          }
        }
      }
    }
  }
}
*/
.attachments .drop-zone {
  margin: 0 auto;
  max-width: 1500px;
  border: 1px solid var(--vertical-tabs-border);
  border-radius: 1rem;
  padding: 1rem;
  margin-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.attachments .drop-zone .upload-button-container {
  min-height: 6rem;
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.attachments .drop-zone .file-container {
  min-height: 6rem;
  width: 20%;
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--vertical-tabs-border);
}
.attachments .drop-zone .file-container .toolbar {
  display: flex;
  position: absolute;
  right: -100%;
  top: 0;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  max-width: 50%;
  min-width: 1rem;
  height: 100%;
  border-radius: 0 0.5rem 0.5rem 0;
  transition: right 0.2s ease-in-out;
  background: rgba(0, 0, 0, 0.1);
}
.attachments .drop-zone .file-container:hover .toolbar {
  box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  right: 0;
}
.attachments .drop-zone .file-container .file {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.25rem;
}
.attachments .drop-zone .file-container .file i {
  font-size: 2rem;
}
.attachments .drop-zone .file-container .file span {
  font-size: 0.8rem;
  font-weight: 200;
}
.attachments .drop-zone .upload-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--text-lighter-color);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  height: 4rem;
  width: 4rem;
  font-size: 2rem;
}
.attachments .drop-zone .upload-button:hover {
  background: var(--gradient-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-primary-hover);
  color: var(--text-primary);
  border-color: var(--primary);
}

.tabs.horizontal .tabs-content {
  border: 1px solid var(--tabs-border);
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  padding: 1rem;
}
.tabs.horizontal nav.tabs-menu-container ul {
  margin: 0;
  padding: 1rem 0 0;
  list-style: none;
}
.tabs.horizontal .tab {
  display: inline-block;
  padding: 0;
  border: 1px solid var(--tabs-border);
  cursor: pointer;
  transform: translateY(1px);
  background: var(--tab-background);
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  margin-right: 0.1rem;
  position: relative;
}
.tabs.horizontal .tab.active {
  background: var(--tab-background);
  border-bottom-color: var(--tabs-border);
  z-index: 2;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.1);
}
.tabs.horizontal .tab.active a {
  font-weight: bold;
  color: var(--text);
}
.tabs.horizontal .tab a {
  font-size: 0.9rem;
  color: var(--text-muted);
  display: block;
  cursor: pointer;
  text-decoration: none;
  padding: 10px;
}
.tabs.horizontal .tab a i {
  margin-right: 0.5rem;
}
.tabs.vertical {
  display: flex;
  padding-top: 0.5rem;
  align-items: stretch;
}
.tabs.vertical .tabs-content {
  flex: 1;
  padding-inline: 1rem;
}
.tabs.vertical nav.tabs-menu-container {
  width: 4rem;
  background: var(--vertical-tabs-background);
  border-radius: 0.5rem;
  border: 1px solid var(--vertical-tabs-border);
}
.tabs.vertical nav.tabs-menu-container ul {
  position: sticky;
  bottom: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.tabs.vertical nav.tabs-menu-container ul .tab {
  display: block;
}
.tabs.vertical nav.tabs-menu-container ul .tab:nth-child(1) {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.tabs.vertical nav.tabs-menu-container ul .tab:nth-last-child(1) {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.tabs.vertical nav.tabs-menu-container ul .tab.active {
  background: var(--vertical-tabs-background-active);
}
.tabs.vertical nav.tabs-menu-container ul .tab.active a {
  color: var(--text);
  font-weight: bold;
}
.tabs.vertical nav.tabs-menu-container ul .tab a {
  text-align: center;
  width: 100%;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  color: var(--text-muted);
}
.tabs.vertical nav.tabs-menu-container ul .tab a span {
  text-transform: uppercase;
  padding: 0 0.25rem;
  font-size: 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabs.vertical nav.tabs-menu-container ul .tab a i {
  padding-inline: 1rem;
}

.panel-success {
  --tab-color: var(--text-success);
  --icon-background: var(--text-success);
  --glider-background: var(--gradient-success);
  --icon-color: var(--success);
}

.panel-info {
  --tab-color: var(--text-info);
  --icon-background: var(--text-info);
  --glider-background: var(--gradient-info);
  --icon-color: var(--info);
}

.panel-warning {
  --tab-color: var(--text-warning);
  --icon-background: var(--text-warning);
  --glider-background: var(--gradient-warning);
  --icon-color: var(--warning);
}

.panel-danger {
  --tab-color: var(--text-danger);
  --icon-background: var(--text-danger);
  --glider-background: var(--gradient-danger);
  --icon-color: var(--danger);
}

.panel-primary {
  --tab-color: var(--text-primary);
  --icon-background: var(--text-primary);
  --glider-background: var(--gradient-primary);
  --icon-color: var(--primary);
}

.panel-secondary {
  --tab-color: var(--text-secondary);
  --icon-background: var(--text-secondary);
  --glider-background: var(--gradient-secondary);
  --icon-color: var(--secondary);
}

.panel-dark {
  --tab-color: var(--text-dark);
  --icon-background: var(--text-dark);
  --glider-background: var(--gradient-dark);
  --icon-color: var(--dark);
}

.tabs-pills {
  --tabs-border-radius: .5rem;
}
.tabs-pills .tabs-menu-container {
  padding-top: 0.5rem;
}
.tabs-pills .tabs-menu-container ul {
  list-style: none;
  position: relative;
  display: flex;
  justify-content: flex-start;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: var(--tabs-border-radius);
  padding-inline: 0.5rem;
  padding-block: 0.5rem;
}
.tabs-pills .tabs-menu-container ul .tab {
  cursor: pointer;
  position: relative;
  color: var(--color-text);
  font-size: 0.86rem;
}
.tabs-pills .tabs-menu-container ul .tab a {
  padding-inline: 0.5rem 1rem;
  padding-block: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--color-text-muted);
  border-radius: 3rem;
  transition: background 0.3s ease, color 0.3s ease;
  gap: 0.5rem;
}
.tabs-pills .tabs-menu-container ul .tab a span {
  display: block;
  flex-direction: row;
  align-items: center;
  align-content: flex-start;
  white-space: nowrap;
}
.tabs-pills .tabs-menu-container ul .tab a span.icon {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  border-radius: 1rem;
  width: 2rem;
  height: 2rem;
}
.tabs-pills .tabs-menu-container ul .tab a span.icon i {
  font-size: 1.1rem;
}
.tabs-pills .tabs-menu-container ul .tab.active a {
  color: var(--tab-color);
}
.tabs-pills .tabs-menu-container ul .tab.active .icon {
  background: var(--icon-background);
  color: var(--icon-color);
}
.tabs-pills .tabs-menu-container ul .glider {
  position: absolute;
  width: 0;
  top: 0.25rem;
  left: 0.25rem;
  background: var(--glider-background);
  border-radius: var(--tabs-border-radius);
  transition: all ease-in-out 0.3s;
}
.tabs-pills.vertical {
  --tabs-border-radius: .5rem;
  display: flex;
  padding-top: 0.5rem;
  align-items: stretch;
}
.tabs-pills.vertical .tabs-content {
  flex: 1;
  padding-inline: 1rem;
}
.tabs-pills.vertical .tabs-menu-container ul {
  flex-direction: column;
  height: 100%;
  width: 5rem;
  max-width: 5rem;
  border-radius: var(--tabs-border-radius);
  align-content: flex-start;
  align-items: center;
}
.tabs-pills.vertical .tabs-menu-container ul .tab {
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
  font-weight: 200;
}
.tabs-pills.vertical .tabs-menu-container ul .tab a {
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0.5rem;
  width: 100%;
}
.tabs-pills.vertical .tabs-menu-container ul .tab a span:not(.icon) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}
.tabs-pills.vertical .tabs-menu-container ul .glider {
  width: 100%;
  border-radius: var(--tabs-border-radius);
  height: 0;
}

dialog {
  min-height: 250px;
  min-width: 400px;
  padding: 0;
  border: 0;
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  animation: dialog 0.3s ease;
  background: var(--panel-background);
  backdrop-filter: blur(10px);
  color: var(--text);
}
dialog .component-layout {
  min-height: 250px;
}
dialog header h2 {
  margin-top: 1rem;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
}
dialog header button {
  padding-top: 2rem;
}
dialog footer {
  border-top: 1px solid var(--text-muted);
}
dialog footer button, dialog footer .close {
  color: var(--text);
}
dialog footer .mr-auto {
  margin-right: auto;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
dialog.half {
  width: calc(100% / 2);
  height: calc(100% / 2);
}
dialog.full {
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
}
dialog.two-thirds {
  width: calc(100% / 3 * 2);
  height: calc(100% / 3 * 2);
}
dialog.tiny {
  width: 400px;
  min-height: 200px;
  max-height: 350px;
}
dialog.danger {
  border-top: 5px solid var(--danger);
}
dialog.danger header {
  color: var(--danger);
}
dialog.danger .with-icon i {
  color: var(--danger);
}
dialog.info {
  border-top: 5px solid var(--info);
}
dialog.info header {
  color: var(--info);
}
dialog.info .with-icon i {
  color: var(--info);
}
dialog.success {
  border-top: 5px solid var(--success);
}
dialog.success header {
  color: var(--success);
}
dialog.success .with-icon i {
  color: var(--success);
}
dialog.warning {
  border-top: 5px solid var(--warning);
}
dialog.warning header {
  color: var(--warning);
}
dialog.warning .with-icon i {
  color: var(--warning);
}
dialog.primary {
  border-top: 5px solid var(--primary);
}
dialog.primary header {
  color: var(--primary);
}
dialog.primary .with-icon i {
  color: var(--primary);
}
dialog.secondary {
  border-top: 5px solid var(--secondary);
}
dialog.secondary header {
  color: var(--secondary);
}
dialog.secondary .with-icon i {
  color: var(--secondary);
}
@keyframes dialog {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

.confirm-dialog-content {
  padding: 1rem;
}
.confirm-dialog-content.with-icon {
  align-items: center;
  display: flex;
}
.confirm-dialog-content.with-icon i {
  font-size: 4rem;
  margin-right: 1rem;
  border-radius: 2rem;
}

.info-dialog-content .icons-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 1rem;
  gap: 1rem;
}
.info-dialog-content .icons-list .icon-container {
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  border-radius: 0.5rem;
  padding: 0.5rem;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}
.info-dialog-content .icons-list .icon-container:hover {
  box-shadow: var(--shadow-dark);
  scale: 1.02;
  cursor: pointer;
}
.info-dialog-content .icons-list .icon-container i {
  font-size: 2rem;
  border-radius: 1rem;
  padding: 1rem;
}
.info-dialog-content .icons-list .icon-container span {
  font-size: 0.8rem;
  font-weight: 100;
}
.info-dialog-content .themes-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 1rem;
  gap: 1rem;
}
.info-dialog-content .themes-list .theme-container {
  display: flex;
  flex-direction: row;
  border: 1px solid #eee;
  border-radius: 0.5rem;
  padding: 0.5rem;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  aspect-ratio: 1;
}
.info-dialog-content .themes-list .theme-container:hover {
  box-shadow: var(--shadow-dark);
  scale: 1.02;
  cursor: pointer;
}

.config .arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #ccc;
}
.config .arrow.arrow-top {
  transform: rotate(180deg);
}
.config .main-edit-options, .config .sub-edit-options {
  display: grid;
  opacity: 0;
  height: 0;
  min-height: 0;
  transition: all 0.3s ease-in-out;
  overflow-x: hidden;
}
.config .main-edit-options.expanded, .config .sub-edit-options.expanded {
  opacity: 1;
  height: auto;
  min-height: 100%;
  overflow: visible;
}
.config .expand-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid #fefefe;
  cursor: pointer;
}
.config .expand-button i {
  display: block;
  transition: all 0.3s ease-in-out;
}
.config .expand-button.expanded i {
  transform: rotate(540deg);
}
.config .divider {
  background: linear-gradient(white, #ccc, white);
  width: 1px;
  height: 6rem;
}
.config h3 {
  font-size: 1.1rem;
  font-weight: 200;
  text-transform: uppercase;
}
.config h4 {
  font-size: 1.1rem;
}
.config h5 {
  font-size: 0.8rem;
  font-weight: 200;
  text-transform: uppercase;
}
.config .create-content, .config .edit-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.config .create-headers, .config .edit-headers {
  display: flex;
  justify-content: space-between;
}
.config .create-headers > *:nth-child(2), .config .edit-headers > *:nth-child(2) {
  text-align: right;
}
.config .table-options {
  display: flex;
  align-content: flex-start;
  gap: 1rem;
}
.config .edit-possibility {
  display: flex;
  gap: 1rem;
}
.config .sizes {
  display: flex;
  gap: 1rem;
}
.config .sizes .item {
  position: relative;
}
.config .sizes .item .sizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 25%;
  height: 100%;
  background: #ccc;
  /*box-shadow: -5px 0 10px rgba(0,0,0,0.1);*/
}
.config .sizes .item.half .sizer {
  width: 50%;
}
.config .sizes .item.two-thirds .sizer {
  width: 66.6666666667%;
}
.config .sizes .item.full .sizer {
  width: 100%;
}
.config .item {
  cursor: pointer;
  width: 6rem;
  height: 6rem;
  border-radius: 0.5rem;
  border: 2px solid #ccc;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}
.config .item.selected {
  border-style: dashed;
  border-color: var(--danger);
}
.config .item.search i {
  position: absolute;
  font-size: 2.5rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #666;
  z-index: 2;
  animation: search 3s infinite alternate;
}
@keyframes search {
  0% {
    transform: translate(-50%, -50%);
  }
  25% {
    transform: translate(-25%, -25%);
  }
  50% {
    transform: translate(0%, 0%);
  }
  75% {
    transform: translate(25%, -25%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
.config .item.pagination, .config .item.sorting, .config .item.filter, .config .item.theme, .config .item.multi-select, .config .item.vertical-tabs {
  align-items: center;
  color: #777;
}
.config .item.pagination i, .config .item.sorting i, .config .item.filter i, .config .item.theme i, .config .item.multi-select i, .config .item.vertical-tabs i {
  font-size: 3rem;
  height: 3rem;
}
.config .item.pagination span, .config .item.sorting span, .config .item.filter span, .config .item.theme span, .config .item.multi-select span, .config .item.vertical-tabs span {
  font-size: 0.7rem;
  font-weight: 200;
}
.config .item.vertical-tabs i {
  transform: rotate(90deg) translateY(0%);
}
.config .item.theme.primary {
  background: var(--primary);
  color: var(--light);
}
.config .item.theme.secondary {
  background: var(--secondary);
  color: var(--light);
}
.config .item.theme.success {
  background: var(--success);
  color: var(--light);
}
.config .item.theme.danger {
  background: var(--danger);
  color: var(--light);
}
.config .item.theme.warning {
  background: var(--warning);
  color: var(--dark);
}
.config .item.theme.info {
  background: var(--info);
  color: var(--light);
}
.config .item.theme.dark {
  background: var(--dark);
  color: var(--light);
}
.config .edit-form {
  height: 2rem;
  border: 1px solid #ccc;
  border-radius: 0.125rem;
  position: relative;
}
.config .edit-form:before {
  left: 3px;
  top: 3px;
  content: "";
  position: absolute;
  height: 5px;
  width: 45%;
  background: #ccc;
  border-radius: inherit;
}
.config .edit-form:after {
  right: 3px;
  top: 3px;
  content: "";
  height: 5px;
  position: absolute;
  width: 45%;
  background: #ccc;
  border-radius: inherit;
}
.config .bar {
  height: 5px;
  background: #ccc;
}
.config .bar.up-down {
  animation: moveUpDown 2s infinite alternate;
}
.config .bar.header-bar {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  top: 0;
  height: 10px;
  margin: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 5px solid #555;
}
@keyframes moveUpDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50px);
  }
}
.config .sidebar-edit {
  position: relative;
}
.config .sidebar-edit .sidebar-edit-sidebar {
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 100%;
  bottom: 0;
  width: 50%;
  background: var(--light);
  border-left: 1px solid #ccc;
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
  animation: sidebarLeft 2s infinite alternate;
}
.config .sidebar-edit .sidebar-edit-sidebar .edit-form:after {
  top: 1rem;
}
.config .dropbar-edit {
  position: relative;
}
.config .dropbar-edit .dropbar-edit-dropbar {
  border-radius: inherit;
  position: absolute;
  right: 1%;
  left: 1%;
  top: 100%;
  height: 50%;
  width: 98%;
  background: var(--light);
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
  border-top: 1px solid #ccc;
  animation: dropbarUp 2s infinite alternate;
}
.config .dropbar-edit .dropbar-edit-dropbar .edit-form {
  margin-top: 5px;
  border: transparent;
}
.config .dialog-edit {
  position: relative;
}
.config .dialog-edit .dialog-edit-dialog {
  border-radius: inherit;
  position: absolute;
  right: 10%;
  left: 10%;
  top: 10%;
  transform: translateY(-50%);
  height: 50%;
  width: 80%;
  background: var(--light);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  border-top: 1px solid #ccc;
  animation: dialogScale 2s infinite alternate;
}
.config .dialog-edit .dialog-edit-dialog .edit-form {
  margin-top: 5px;
  border: transparent;
}
@keyframes dropbarUp {
  0% {
    top: 100%;
  }
  100% {
    top: 50%;
  }
}
@keyframes sidebarLeft {
  0% {
    left: 100%;
  }
  100% {
    left: 50%;
  }
}
@keyframes dialogScale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

#iweb {
  min-height: 100vh;
  min-width: 100vw;
}

.login {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  width: 100%;
  background: #fff;
}
.login button[type=submit].btn {
  background: var(--gradient-success);
  color: var(--text-success);
  width: calc(100% - 2rem);
  padding-block: 1rem;
}
.login button[type=submit].btn:hover {
  box-shadow: var(--shadow-success);
}
.login .btn-danger {
  background: var(--gradient-danger);
  color: #fff;
  margin-left: 3rem;
}
.login .btn-danger:hover {
  box-shadow: var(--shadow-danger);
}
.login .logo-container {
  padding-top: 3rem;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #080A27;
}
.login .logo-container img {
  width: 250px;
  margin-bottom: 2rem;
}
.login .logo-container.car-tour {
  background-color: #81312D;
}
.login .logo-container.car-tour img {
  width: 250px;
  margin-bottom: 2rem;
}
.login .logo-container.genexis {
  background: linear-gradient(-45deg, #050c1c, #000000);
}
.login .logo-container.genexis img {
  width: 250px;
  margin-bottom: 2rem;
}
.login .logo-container h1 {
  font-size: 2.5rem;
  color: #fff;
  text-align: center;
}
.login .logo-container h1 small {
  font-size: 1rem;
  font-weight: 200;
  padding-left: 2rem;
}
.login .logo-container h1 small:before {
  content: "(";
}
.login .logo-container h1 small:after {
  content: ")";
}
.login .logo-container img {
  width: 350px;
}
.login .logo-container .blockquote {
  color: #fff;
  padding: 2rem;
  display: block;
  font-weight: 100;
  text-align: center;
}
.login .form-container {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
}
.login .form-container h2 {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1.2rem;
}
.login .form-container form {
  width: 60%;
}
.login .form-container form label {
  color: black !important;
}
.login .form-container form input {
  color: black;
}
.login .form-container form button[type=submit] {
  background: #080A27 !important;
  color: #fff;
  text-transform: uppercase;
  font-weight: 100;
  letter-spacing: 2px;
  border: 1px solid #080A27;
  margin-top: 2rem;
  width: calc(100% - 2rem);
  padding: 0.75rem;
  border-radius: 0.25rem;
  transition: all 0.3s ease-in-out;
}
.login .form-container form button[type=submit]:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-secondary);
}
.login .form-container .fields-container {
  width: 100%;
}
.login .form-container .login-button {
  background: #080A27 !important;
  color: #fff;
  text-transform: uppercase;
  font-weight: 100;
  letter-spacing: 2px;
  border: 1px solid #080A27;
  margin-top: 2rem;
  width: calc(100% - 2rem);
  padding: 0.75rem;
  border-radius: 0.25rem;
  transition: all 0.3s ease-in-out;
}
.login .form-container .login-button:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-secondary);
}
.login .login-result-container {
  margin-top: 2rem;
  margin-inline: 1rem;
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.login .login-result-container.error {
  background: var(--gradient-danger);
  color: #fff;
}
.login .login-result-container.success {
  background: var(--gradient-success);
  color: #fff;
}
.login .login-result-container [data-ei=login-result-icon] {
  font-size: 2rem;
}
.login .login-language-switcher {
  list-style: none;
  margin: 1rem;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.login .login-language-switcher li {
  margin: 0;
  padding: 0;
}
.login .login-language-switcher li .btn:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-dark);
}

@media (max-width: 768px) {
  .login {
    background: #fff;
    flex-direction: column;
  }
  .login .logo-container {
    width: 100%;
    height: 40%;
  }
  .login .logo-container h1 {
    font-size: 2rem;
    margin: 0;
  }
  .login .logo-container img {
    width: 150px;
  }
  .login .logo-container blockquote {
    padding: 1rem;
    font-size: 0.8rem;
  }
  .login .logo-container.car-tour img {
    width: 100px;
    margin-bottom: 2rem;
  }
  .login .form-container {
    background: #fff;
    width: 100%;
    height: 60%;
  }
}
/*quill for dark mode*/
.ql-editor {
  min-height: 500px;
}

.richtext-small-wrapper .ql-editor {
  min-height: 0;
  margin-bottom: 3rem;
  max-height: 300px;
  height: 200px;
}
.richtext-small-wrapper .ql-container {
  min-height: 150px;
  height: 200px;
}

.dark .ql-container.ql-snow {
  border-color: var(--tabs-border);
}
.dark .ql-toolbar.ql-snow {
  border-color: var(--tabs-border);
}
.dark .ql-toolbar.ql-snow .ql-formats span {
  color: var(--text);
  background: var(--sidebar-background);
}
.dark .ql-toolbar.ql-snow .ql-formats button svg path, .dark .ql-toolbar.ql-snow .ql-formats button svg line {
  stroke: var(--text);
}
.dark .ql-editor {
  background: var(--body-bg);
}

/*comments*/
/*end comments*/
.info-popup {
  position: absolute;
  z-index: 1000;
  background: var(--text-color);
  color: var(--body-bg);
  border-radius: 0.25rem;
  padding: 0.25rem;
  font-size: 0.8rem;
  font-weight: 200;
  box-shadow: var(--shadow-dark);
}

.comments {
  margin: 0 auto;
  max-width: 1500px;
}
.comments .comments-list {
  display: flex;
  flex-direction: column;
}
.comments .comments-list .comment {
  margin-bottom: 1rem;
  border-radius: 1rem;
  display: inline-block;
  max-width: 80%;
  width: auto;
  align-self: flex-start;
}
.comments .comments-list .comment.my-comment {
  align-self: flex-end;
}
.comments .comments-list .comment.my-comment.has-form {
  display: block;
  width: 100%;
}
.comments .comments-list .comment.my-comment .comment-text {
  background: var(--success);
  color: var(--text-success);
}
.comments .comments-list .comment .comment-details {
  padding: 0.5rem 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  font-size: 0.8rem;
  font-weight: 200;
}
.comments .comments-list .comment .comment-details .tools {
  text-align: right;
}
.comments .comments-list .comment .comment-text {
  background: var(--body-bg);
  padding: 1rem;
  border-radius: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#snackbar {
  position: fixed;
  bottom: 1rem;
  border-radius: 0.5rem;
  left: 50%;
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
  display: none;
  z-index: 10000;
  font-size: 0.8em;
  font-weight: 200;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%);
  min-width: 150px;
  max-width: 98%;
}
#snackbar i {
  font-size: 2rem;
}
#snackbar.show {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
#snackbar.success {
  background: var(--gradient-success);
  color: var(--text-success);
}
#snackbar.error {
  background: var(--gradient-danger);
  color: var(--text-danger);
}
#snackbar.warning {
  background: var(--gradient-warning);
  color: var(--text-warning);
}
#snackbar.info {
  background: var(--gradient-info);
  color: var(--text-info);
}
#snackbar.primary {
  background: var(--gradient-primary);
  color: var(--text-primary);
}
#snackbar.dark {
  background: var(--gradient-dark);
  color: var(--text-dark);
}

.view h4:not(.description h4) {
  width: 100%;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 200;
  margin-block: 2rem 1rem;
  border-bottom: 1px solid var(--vertical-tabs-border);
  padding-block: 0.25rem;
}

.priority-meter.low {
  color: var(--success);
}
.priority-meter.half {
  color: var(--warning);
}
.priority-meter.high {
  color: var(--danger);
}

.lightbox {
  position: fixed;
  z-index: 1002;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
}
.lightbox .lightbox-content {
  max-width: 90%;
  max-height: 100vh;
  background: rgba(255, 255, 255, 0.1);
}
.lightbox .lightbox-content img {
  max-width: 100%;
  max-height: 80vh;
}
.lightbox .close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}
.lightbox .close:hover {
  color: #bbb;
}
.lightbox .prev, .lightbox .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.3s;
  user-select: none;
}
.lightbox .prev:hover, .lightbox .next:hover {
  color: #bbb;
}
.lightbox .prev {
  left: 10px;
}
.lightbox .next {
  right: 10px;
}

/*notifications bell*/
a[data-notifications].has-notifications {
  position: relative;
}
a[data-notifications].has-notifications:after {
  content: attr(data-notifications);
  position: absolute;
  top: 0;
  right: 0;
  background: var(--danger);
  color: var(--text-danger);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 1rem;
  font-size: 0.5rem;
  min-height: 1rem;
  padding-inline: 0.2rem;
  border-radius: 0.5rem;
}

.notifications-list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
}
.notifications-list .list {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.notifications-list .list .notification {
  position: relative;
  border-radius: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--table-header-background);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
}
.notifications-list .list .notification.selected {
  border-color: var(--danger);
}
.notifications-list .list .notification.unread:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  width: 1rem;
  height: 1rem;
  background: var(--danger);
  border-radius: 0.5rem;
}
.notifications-list .list .notification p {
  margin: 0;
  padding: 0;
}
.notifications-list .list .notification p.date {
  font-size: 0.7rem;
  font-weight: 200;
  text-align: right;
}
.notifications-list .current-notification {
  flex-grow: 1;
}
.notifications-list .current-notification.nothing-selected {
  text-align: center;
}

/*forbidden*/
.forbidden-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}
.forbidden-wrapper h1 {
  font-size: 3rem;
  color: #333;
  text-transform: uppercase;
  font-weight: 900;
}
.forbidden-wrapper .forbidden-link {
  display: block;
  background: var(--gradient-primary);
  color: var(--text-primary);
  border-radius: 0.5rem;
  padding: 0.5rem 1.5rem;
  transition: transform 0.3s, box-shadow 0.3s;
}
.forbidden-wrapper .forbidden-link:hover {
  box-shadow: var(--shadow-primary-hover);
  transform: scale(1.05);
}

@keyframes basketInfoBuffering {
  0% {
    transform: scale(1);
    background: var(--primary);
  }
  50% {
    transform: scale(1.3);
    background: var(--danger);
  }
  100% {
    transform: scale(1);
    background: var(--primary);
  }
}
@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blinking {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.top-menu .dropdown.basket {
  /*& > .nav-link span {
    display: none;
  }*/
}
.top-menu .basket-count {
  padding: 0.1rem 0.3rem;
  background: var(--danger);
  color: var(--white);
  border-radius: 0.3rem;
}
.top-menu .hidden {
  display: none;
}

.products .list-actions-container {
  /*flex-direction: row-reverse;*/
}
.products .pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
}
.products .pagination-status {
  font-weight: 200;
  font-size: 0.8rem;
  margin: 0;
  padding: 0;
}
.products .pagination-element span {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
}
.products .pagination-element span.active {
  background: var(--gradient-primary);
  color: white;
}
.products.data-template-primary .pagination-element span.active {
  background: var(--gradient-primary);
}
.products.data-template-secondary .pagination-element span.active {
  background: var(--gradient-secondary);
}
.products.data-template-success .pagination-element span.active {
  background: var(--gradient-success);
}
.products.data-template-info .pagination-element span.active {
  background: var(--gradient-info);
}
.products.data-template-warning .pagination-element span.active {
  color: var(--dark);
  background: var(--gradient-warning);
}
.products.data-template-danger .pagination-element span.active {
  background: var(--gradient-danger);
}
.products.data-template-dark .pagination-element span.active {
  background: var(--gradient-dark);
}
.products.data-template-default .pagination-element span.active {
  color: var(--dark);
  background: #fff;
  border: 1px solid var(--dark);
}

.products-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  row-gap: 2rem;
}
.products-list .product {
  background: var(--panel-background);
  border-radius: 0.5rem;
  padding: 0.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.products-list .product .header-link {
  color: var(--headers-color);
}
.products-list .product .header-link:hover {
  text-decoration: underline;
}
.products-list .product .image-container {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  width: 100%;
  aspect-ratio: 4/3;
  /*background: var(--panel-background);*/
  display: flex;
  align-items: center;
  justify-content: center;
}
.products-list .product .image-container .product-images-quantity {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  color: var(--white);
  padding: 0.1rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  display: none;
}
.products-list .product .image-container .detail-link {
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
  color: var(--white);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  display: inline-block;
  right: 0.5rem;
  bottom: 0.5rem;
  min-width: 0;
  transition: min-width 0.3s ease-in-out;
}
.products-list .product .image-container .detail-link span {
  display: none;
}
.products-list .product .image-container:hover .detail-link {
  width: calc(100% - 1rem);
  height: calc(100% - 3rem);
  background: rgba(0, 0, 0, 0.1);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.products-list .product .image-container:hover .detail-link span {
  display: inline-block;
}
.products-list .product .image-container:hover .detail-link i {
  display: none;
}
.products-list .product .image-container:hover .icons {
  background: rgba(0, 0, 0, 0.5);
}
.products-list .product .image-container .icons {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  left: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.25rem;
  z-index: 1;
  color: var(--white);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease-in-out;
}
.products-list .product .image-container .icons .in-stock-info {
  background: var(--primary);
  color: var(--white);
  padding: 0.1rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  display: flex;
  gap: 0.25rem;
}
.products-list .product .image-container .icons .icons-left {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem;
  align-items: center;
  justify-content: flex-start;
}
.products-list .product .image-container .icons .icons-right {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem;
  align-items: center;
  justify-content: flex-end;
}
.products-list .product .image-container .icons .icons-right i {
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.products-list .product .image-container .icons .icons-right i.buffering:before {
  animation: heartBeat 0.75s infinite;
}
.products-list .product .image-container .icons button {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.products-list .product .image-container .icons button:hover {
  color: var(--success);
  transform: scale(1.1);
}
.products-list .product .image-container img {
  width: 100%;
  display: block;
  border-radius: 0.5rem;
}
.products-list .product .details {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}
.products-list .product .details h2 {
  padding-block: 0.5rem;
  font-size: 0.95rem;
  font-weight: bolder;
  color: var(--headers-color);
  margin: 0;
}
.products-list .product .details p {
  font-size: 0.86rem;
  color: var(--text);
  margin: 0;
  font-weight: 200;
}
.products-list .product .details p.price {
  font-size: 1.25rem;
  font-weight: 200;
  text-align: right;
}
.products-list .product .details p.price strong {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-lighter-color);
}
.products-list .product .details p.uid-ean {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  gap: 1rem;
}
.products-list .product .details .basket-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
}
.products-list .product .details .basket-buttons .basket-info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  position: relative;
  padding-right: 1rem;
  color: var(--text-lighter-color);
}
.products-list .product .details .basket-buttons .basket-info:not([data-quantity]) {
  display: none;
}
.products-list .product .details .basket-buttons .basket-info i {
  font-size: 1.5rem;
}
.products-list .product .details .basket-buttons .basket-info:after {
  display: block;
  content: attr(data-quantity);
  position: absolute;
  top: -0.5rem;
  right: 0;
  padding: 0.05rem 0.3rem;
  font-size: 0.75rem;
  background: var(--danger);
  color: var(--white);
  border-radius: 0.5rem;
  transition: all 0.3s ease-in-out;
}
.products-list .product .details .basket-buttons .basket-info[data-quantity="0"] {
  display: none;
}
.products-list .product .details .basket-buttons .basket-info.buffering:after {
  animation: basketInfoBuffering 0.75s infinite;
}
.products-list .product .details .basket-buttons .basket-info:hover:after {
  transform: scale(1.3);
}
.products-list .product .details .basket-buttons button {
  color: var(--white);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  opacity: 0.8;
}
.products-list .product .details .basket-buttons button:hover {
  opacity: 1;
}
.products-list .product .details .basket-buttons button.add-button {
  background: var(--success);
}
.products-list .product .details .basket-buttons button.remove-button {
  background: var(--danger);
}
.products-list .product .details .dealer-info {
  width: 2rem;
  margin-block: 0.25rem;
}
.products-list .product .details .dealer-info i {
  color: var(--warning);
}

.switch-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-block: 1rem;
}
.switch-container .switch {
  padding: 0.25rem;
  border-radius: 0.5rem;
  font-size: 0.6rem;
  text-transform: uppercase;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.switch-container .switch.active {
  background: var(--gradient-info);
  display: flex;
}
.switch-container .switch.active a {
  color: var(--text-info);
}
.switch-container .switch span {
  text-align: center;
}
.switch-container .switch span.description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 1rem);
}
.switch-container .switch span.icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.switch-container .switch span.icon i {
  font-size: 1.5rem;
}

.sidenav-container.open .genexis-sidenav .switch-container .switch, .genexis-sidenav:hover .switch-container .switch {
  display: flex;
  width: auto;
  padding-inline: 1rem;
}

.genexis-client-switch {
  padding: 1rem;
}
.genexis-client-switch .search-container {
  text-align: right;
  height: 4rem;
}
.genexis-client-switch .search-container input {
  padding: 0.5rem;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--search-input-border-color);
  font-size: 0.9rem;
  background: transparent;
  color: var(--search-input-color);
}
.genexis-client-switch .search-container input:focus {
  outline: none;
}

.users-list {
  padding: 0.5rem 0;
  height: calc(100vh / 3 * 2 - 14rem);
  overflow-y: auto;
}
.users-list table {
  width: 100%;
  font-size: 0.9rem;
}
.users-list table i {
  font-size: 1.2rem;
}
.users-list table button {
  color: var(--text);
}

.genexis-basket-item {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--panel-background);
  border: 1px solid var(--tabs-border);
  border-radius: 0.5rem;
  display: flex;
  gap: 1rem;
}
.genexis-basket-item.blinking {
  animation: blinking 1s infinite;
}
.genexis-basket-item .image-container {
  width: 100px;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 0.5rem;
}
.genexis-basket-item .image-container img {
  width: 100%;
  display: block;
}
.genexis-basket-item .product-information {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  justify-content: flex-start;
}
.genexis-basket-item .code-ean {
  display: flex;
  text-transform: uppercase;
  gap: 0.5rem;
  justify-content: flex-start;
  font-size: 0.8rem;
  font-weight: 200;
}
.genexis-basket-item .note-area {
  font-size: 0.8rem;
}
.genexis-basket-item .note-area .note {
  font-weight: 200;
}
.genexis-basket-item .prices-and-form {
  width: 30%;
  border-left: 1px solid var(--tabs-border);
  padding: 0 0.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.genexis-basket-item .prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  border-left: 1px solid var(--tabs-border);
  padding-left: 0.5rem;
}
.genexis-basket-item .form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  border-left: 1px solid var(--tabs-border);
  padding-left: 0.5rem;
}
.genexis-basket-item .quantity-container {
  max-width: 100px;
}
.genexis-basket-item .quantity-and-submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.genexis-basket-item .note-container {
  width: 100%;
}
.genexis-basket-item .price .label {
  font-size: 0.8rem;
  color: var(--text-lighter-color);
}
.genexis-basket-item .price .value {
  font-size: 1.25rem;
  font-weight: 200;
}
.genexis-basket-item h5.product-name {
  font-size: 1.05rem;
  font-weight: bolder;
  color: var(--headers-color);
  margin: 0;
}
.genexis-basket-item p.product-description {
  font-size: 0.86rem;
  color: var(--text-lighter-color);
  margin: 0;
  font-weight: 200;
}

.genexis-basket-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-grow: 1;
}
.genexis-basket-info .addresses-container {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-grow: 1;
}
.genexis-basket-info .addresses-container ul.unstyled {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
}
.genexis-basket-info .addresses-container ul.unstyled.selected {
  border: 1px solid var(--info);
}
.genexis-basket-info .addresses-container ul.unstyled .address-type {
  font-size: 0.8rem;
  font-weight: 200;
  color: var(--text-lighter-color);
}
.genexis-basket-info h3 {
  font-size: 1.25rem;
  font-weight: bolder;
  color: var(--headers-color);
  margin: 0 0 0.5rem;
}
.genexis-basket-info button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.genexis-basket-info button i {
  font-size: 1.3rem;
}

.products {
  --infobar-height: 4rem;
}
.products.has-info-bar {
  position: relative;
  padding-bottom: var(--infobar-height);
}
.products.has-info-bar .genexis-info-bar {
  position: fixed;
  width: calc(100% - var(--sidenav-container-width) - 2rem);
  bottom: 1rem;
  right: 1rem;
  background: rgba(255, 0, 0, 0.5);
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
  z-index: 1000;
  color: var(--text-danger);
  backdrop-filter: blur(10px);
  min-height: var(--infobar-height);
}
.products.has-info-bar .genexis-info-bar.running {
  height: var(--infobar-height);
  max-height: var(--infobar-height);
  white-space: nowrap;
  overflow: hidden;
}
.products.has-info-bar .genexis-info-bar p {
  margin: 0 4rem 0 0;
  text-shadow: 0 0 5px var(--primary);
}
.products.has-info-bar .genexis-info-bar.running p {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 20s linear infinite;
}
.products.has-info-bar .genexis-info-bar button.close {
  position: fixed;
  right: 1rem;
  background: var(--danger);
  color: var(--white);
  border: none;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
.basket-order-note {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 1rem;
  padding-block: 1rem;
}
.basket-order-note .basket-order-note-text {
  flex-grow: 1;
}
.basket-order-note .basket-order-note-button {
  flex: 1;
  flex-grow: 0;
}
.basket-order-note .basket-order-note-button button {
  height: 100%;
}

.basket-order-buttons {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.orders-history .orders-history-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-inline: 4px;
}
.orders-history .orders-history-items .order-history-item-container {
  padding-top: 0.25rem;
}
.orders-history .orders-history-items.something-selected .order-history-item-container:not(.selected) {
  display: none;
}
.orders-history .orders-history-items .order-history-item {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  align-items: stretch;
  border: 1px solid var(--tabs-border);
  border-radius: 0.5rem;
  padding-top: 0.25rem;
  cursor: pointer;
  position: relative;
}
.orders-history .orders-history-items .order-history-item:after {
  content: attr(data-name);
  position: absolute;
  right: -2px;
  top: -1rem;
  font-size: 0.7rem;
  font-weight: 200;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  line-height: 0.8rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.25rem;
}
.orders-history .orders-history-items .order-history-item .note {
  grid-column: 1/span 4;
  border-top: 1px solid var(--tabs-border);
  padding-top: 1rem;
  border-left: none !important;
}
.orders-history .orders-history-items .order-history-item .note:after {
  left: 0.5rem;
  right: auto;
  top: 0;
}
.orders-history .orders-history-items .order-history-item .note p {
  margin: 0;
  padding: 0;
}
.orders-history .orders-history-items .order-history-item.remote {
  border-color: var(--info);
  border-width: 2px;
  margin-top: 0.5rem;
  border-top-right-radius: 0;
}
.orders-history .orders-history-items .order-history-item.remote:after {
  background: var(--info);
  border: 2px solid var(--info);
  color: var(--text-info);
}
.orders-history .orders-history-items .order-history-item.complain {
  border-color: var(--danger);
  border-width: 2px;
  margin-top: 0.5rem;
  border-top-right-radius: 0;
}
.orders-history .orders-history-items .order-history-item.complain:after {
  background: var(--danger);
  border: 2px solid var(--danger);
  color: var(--text-danger);
}
.orders-history .orders-history-items .order-history-item.complain.remote {
  border-bottom-color: var(--info);
  border-right-color: var(--info);
}
.orders-history .orders-history-items .order-history-item > div:not(.customer) {
  border-left: 1px solid var(--tabs-border);
}
.orders-history .orders-history-items .order-history-item > div {
  padding: 0.5rem;
  position: relative;
  margin-bottom: 0.25rem;
}
.orders-history .orders-history-items .order-history-item > div:after {
  content: attr(data-name);
  position: absolute;
  top: 0;
  right: 0.5rem;
  font-weight: 200;
  font-size: 0.75rem;
  color: var(--text-lighter-color);
}
.orders-history .orders-history-items .order-history-item .note {
  column-span: 4;
  color: var(--text);
}
.orders-history .orders-history-items .order-history-item .customer-name {
  padding-top: 0.25rem;
  font-size: 1.25rem;
  font-weight: bolder;
  color: var(--headers-color);
  margin: 0;
}
.orders-history .orders-history-items .order-history-item .customer-address {
  font-size: 0.9rem;
  color: var(--text);
  margin: 0;
  font-weight: 200;
}
.orders-history .orders-history-items .order-history-item .customer:after {
  right: auto;
  left: 0.5rem;
}
.orders-history .orders-history-items .order-history-item .date {
  display: flex;
  justify-content: center;
  align-items: center;
}
.orders-history .orders-history-items .order-history-item .date p {
  margin: 0;
  padding: 0;
}
.orders-history .orders-history-items .order-history-item .date:after {
  right: 50%;
  transform: translateX(50%);
}
.orders-history .orders-history-items .order-history-item .price {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--headers-color);
}
.orders-history .orders-history-items .order-history-item .price p {
  margin: 0;
  padding: 0;
}
.orders-history .order-history-item-details .close {
  font-size: 1.5rem;
  align-self: flex-end;
  margin-left: auto;
  height: 1.5rem;
  width: 1.5rem;
  padding: 0;
}
.orders-history .order-history-item-detail-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
}
.orders-history .order-history-item-detail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.orders-history .order-history-item-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.25rem;
}
.orders-history .order-history-item-details .order-history-item-detail-item {
  border: 1px solid var(--tabs-border);
  display: grid;
  grid-template-columns: 1fr 1fr 3fr 0.5fr 1fr 1fr;
  gap: 0.25rem;
  position: relative;
  border-radius: 0.5rem;
  padding: 0.25rem;
  align-items: stretch;
  background: var(--panel-background);
}
.orders-history .order-history-item-details .order-history-item-detail-item > div:not(.item-uid) {
  border-left: 1px solid var(--tabs-border);
}
.orders-history .order-history-item-details .order-history-item-detail-item > div {
  padding: 0.75rem 0.25rem 0.25rem;
  position: relative;
  font-size: 0.9rem;
}
.orders-history .order-history-item-details .order-history-item-detail-item > div:after {
  content: attr(data-name);
  position: absolute;
  top: -0.25rem;
  right: 0.5rem;
  font-weight: 200;
  font-size: 0.75rem;
  color: var(--text-lighter-color);
}
.orders-history .order-history-item-details .order-history-item-detail-item > div.item-price, .orders-history .order-history-item-details .order-history-item-detail-item > div.item-priceVat, .orders-history .order-history-item-details .order-history-item-detail-item > div.item-quantity {
  text-align: right;
  font-weight: bold;
}
.orders-history .order-history-item-details .order-history-item-detail-item > div.item-uid:after, .orders-history .order-history-item-details .order-history-item-detail-item > div.item-ean:after, .orders-history .order-history-item-details .order-history-item-detail-item > div.item-name:after {
  right: auto;
  left: 0.5rem;
}
.orders-history .order-history-item-details .order-history-item-detail-item .item-note {
  grid-column: 1/span 6;
  border-top: 1px solid var(--tabs-border);
  padding-top: 1rem;
  border-left: transparent !important;
}
.orders-history .order-history-item-details .order-history-item-detail-item .item-note:after {
  left: 0.25rem;
  right: auto;
  top: 0rem;
}
.orders-history .order-history-item-details .order-history-item-detail-item .item-note p {
  margin: 0;
  padding: 0;
}

.hidden-image-icon {
  cursor: pointer;
}

.hidden-image {
  max-height: 50px;
}

.sidebar .product {
  border-radius: 0.5rem;
  padding: 0.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.sidebar .product .image-container {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--panel-background);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar .product .image-container .detail-link {
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
  color: var(--white);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  display: inline-block;
  right: 0.5rem;
  bottom: 0.5rem;
  min-width: 0;
  transition: min-width 0.3s ease-in-out;
}
.sidebar .product .image-container .detail-link span {
  display: none;
}
.sidebar .product .image-container:hover .detail-link {
  width: calc(100% - 1rem);
  height: calc(100% - 3rem);
  background: rgba(0, 0, 0, 0.1);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
}
.sidebar .product .image-container:hover .detail-link span {
  display: inline-block;
}
.sidebar .product .image-container:hover .detail-link i {
  display: none;
}
.sidebar .product .image-container:hover .icons {
  background: rgba(0, 0, 0, 0.5);
}
.sidebar .product .image-container .icons {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  left: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.25rem;
  z-index: 1;
  color: var(--white);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease-in-out;
}
.sidebar .product .image-container .icons .in-stock-info {
  background: var(--primary);
  color: var(--white);
  padding: 0.1rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  display: flex;
  gap: 0.25rem;
}
.sidebar .product .image-container .icons .icons-left {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem;
  align-items: center;
  justify-content: flex-start;
}
.sidebar .product .image-container .icons .icons-right {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem;
  align-items: center;
  justify-content: flex-end;
}
.sidebar .product .image-container .icons .icons-right i.buffering:before {
  animation: heartBeat 0.75s infinite;
}
.sidebar .product .image-container .icons button {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.sidebar .product .image-container .icons button:hover {
  color: var(--primary);
  transform: scale(1.1);
}
.sidebar .product .image-container img {
  /*position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
  width: 100%;
  display: block;
  border-radius: 0.5rem;
}
.sidebar .product .details {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}
.sidebar .product .details h2 {
  padding-block: 0.5rem;
  font-size: 0.95rem;
  font-weight: bolder;
  color: var(--headers-color);
  margin: 0;
}
.sidebar .product .details p {
  font-size: 0.86rem;
  color: var(--text);
  margin: 0.5rem 0;
  font-weight: 200;
}
.sidebar .product .details p.price {
  font-size: 1.25rem;
  font-weight: 200;
  text-align: right;
}
.sidebar .product .details p.price strong {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-lighter-color);
}
.sidebar .product .details p.uid-ean {
  margin: 0.5rem 0 0.5rem;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  gap: 1rem;
}
.sidebar .product .details form {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.sidebar .product .details form .note-container {
  grid-column: 1/span 2;
}
.sidebar .product .details .basket-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}
.sidebar .product .details .basket-buttons button {
  display: none;
}
.sidebar .product .details .basket-buttons .basket-info {
  margin-block: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  position: relative;
  padding-right: 1rem;
  color: var(--text-lighter-color);
}
.sidebar .product .details .basket-buttons .basket-info:not([data-quantity]) {
  display: none;
}
.sidebar .product .details .basket-buttons .basket-info i {
  font-size: 1.5rem;
}
.sidebar .product .details .basket-buttons .basket-info:after {
  display: block;
  content: attr(data-quantity);
  position: absolute;
  top: -0.5rem;
  right: 0;
  padding: 0.05rem 0.3rem;
  font-size: 0.75rem;
  background: var(--danger);
  color: var(--white);
  border-radius: 0.5rem;
  transition: all 0.3s ease-in-out;
}
.sidebar .product .details .basket-buttons .basket-info[data-quantity="0"] {
  display: none;
}
.sidebar .product .details .basket-buttons .basket-info.buffering:after {
  animation: basketInfoBuffering 0.75s infinite;
}
.sidebar .product .details .basket-buttons .basket-info:hover:after {
  transform: scale(1.3);
}
.sidebar .product .details .basket-buttons button {
  color: var(--white);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  opacity: 0.8;
}
.sidebar .product .details .basket-buttons button:hover {
  opacity: 1;
}
.sidebar .product .details .basket-buttons button.add-button {
  background: var(--success);
}
.sidebar .product .details .basket-buttons button.remove-button {
  background: var(--danger);
}

/*SEARCH FOR PRODUCTS*/
.list-container.products .list-actions-container .form-input input {
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--danger);
  font-size: 1rem;
  background: transparent;
  color: var(--search-input-color);
  min-width: 250px;
}
.list-container.products .list-actions-container .form-input input ~ .search-icon-container i {
  color: var(--danger);
}
.list-container.products .list-actions-container .form-input input:focus {
  outline: none;
  border-color: var(--danger);
}
.list-container.products .list-actions-container .form-input input:focus ~ .search-icon-container i {
  color: var(--danger);
}
.list-container.products .list-actions-container .form-input .search-icon-container i {
  font-size: 1.3rem;
}

.balance-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
  grid-gap: 2rem;
}
.balance-grid .balance-item {
  border: 1px solid var(--tabs-border);
  border-radius: 1rem;
  padding: 1rem;
}
.balance-grid .balance-item .balance-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}
.balance-grid .balance-item .balance-container .balance-info {
  font-size: 1.3rem;
}
.balance-grid .balance-item .balance-container .balance-calendar {
  border-radius: 1rem;
  width: 6rem;
  height: 6rem;
  text-align: center;
}
.balance-grid .balance-item .balance-container .balance-calendar > div {
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
}
.balance-grid .balance-item .balance-container .balance-calendar > div:nth-child(1) {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  background-color: var(--primary);
  color: var(--white);
  font-size: 1.2rem;
  font-weight: bold;
}
.balance-grid .balance-item .balance-container .balance-calendar > div:nth-child(2) {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  background-color: var(--secondary);
  color: var(--white);
}
.balance-grid .balance-item .balance-details-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
.balance-grid .balance-item .balance-details-row > div {
  padding: 0.5rem 1rem;
  border-bottom: 1px dotted var(--tabs-border);
}
.balance-grid .balance-item .balance-details-row > div:nth-child(2) {
  text-align: right;
}

.topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  grid-gap: 2rem;
}
.topics .topic {
  border-radius: 1rem;
  border: 1px solid var(--tabs-border);
  background: var(--panel-background);
  padding: 1rem;
}
.topics .topic[data-solved="1"] {
  border-color: var(--success);
}
.topics .topic h3 {
  margin: 0;
  padding-block: 0.25rem 0.5rem;
  font-size: 1.3rem;
  color: var(--headers-color);
}
.topics .topic .topic-author-date {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 200;
  color: var(--text-lighter-color);
}
.topics .topic .topic-body {
  font-size: 0.9rem;
}
.topics .topic .topic-actions-responses {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.topics .topic .topic-actions-responses .topic-responses {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.topic-detail .description {
  margin-block: 1rem;
}
.topic-detail .topic-author-date {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 200;
}
.topic-detail .date, .topic-detail .author {
  font-weight: 200;
  color: var(--text-lighter-color);
}
.topic-detail .list .list-item {
  border-radius: 1rem;
  padding: 1rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.topic-detail .list .list-item .topic-author-date {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.topic-detail .list .list-item:nth-of-type(even) {
  background: var(--even-item-background);
}

.company-invoices-issued .form-field_invoice-no {
  /*grid-row: 3;
  grid-column: span 2;*/
}

@media (max-width: 768px) {
  :root {
    --sidenav-container-width: 0;
    --sidenav-padding: 0;
  }

  aside.sidenav-container {
    padding-top: 1rem;
    padding-left: 1rem;
  }
  aside.sidenav-container nav {
    padding: 0;
    height: calc(100% - 1rem);
  }

  .content-container {
    width: calc(100%);
    padding-inline: 1rem;
  }
  .content-container .top-menu-container {
    width: calc(100% - 2rem);
  }

  .content-container main.main-content {
    padding-right: 0;
  }
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: System, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  background: var(--body-bg);
  overflow-x: hidden;
  color: var(--text);
}

a {
  text-decoration: none;
  color: var(--link-color);
}

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