@import url("../../../styles.css");
@import url("../../../ElementBox.css");
#dashboard {
  display: grid;
  grid-template-rows: 65px 1fr;
  grid-template-columns: 65px 1fr;
  height: 100vh;
  grid-template-areas: "aside header" "aside main";
  transition: grid-template-columns 0.15s ease;
  background: var(--background-body);
  --background-body: #f5f5f5;
  --background-aside: #e0e0e0;
  --background-aside-section: #ccc;
  --background-aside-section-active: #bbb;
  --background-aside-nav-active: #eee;
  --background-aside-nav-hover: #ccc;
  --border-aside-nav: #bbb;
  --title-aside: gray;
  --text-aside: #333;
  --background-searcher-top: #eee;
  --background-searcher-item: #fff;
  --background-searcher-button: #eee;
  --border-searcher: #ccc;
  --icon-aside: none;
  --icon-copy: invert(1);
  --background-box: #fff;
  --border-box: #eee;
  --background-element: #fff;
  --background-element-disabled: #efefef;
  --background-element-hover: #ebf5fb;
  --border-element: #dcdcdc;
  --text-element: #333;
  --text-element-label: gray;
  --background-dialog: #fff;
  --border-dialog: #eee;
  --background-box-header: #fff;
  --background-box-header-button: #eee;
  --text-link: royalblue;
}

#dashboard.dark-mode {
  --background-body: #292929;
  --background-aside: #1f1f1f;
  --background-aside-section: #0f0f0f;
  --background-aside-section-active: #3f3f3f;
  --background-aside-nav-active: #3f3f3f;
  --background-aside-nav-hover: #2c2c2c;
  --border-aside-nav: #444;
  --title-aside: #eee;
  --text-aside: #fff;
  --background-searcher-top: #202020;
  --background-searcher-item: #292929;
  --background-searcher-button: #191919;
  --border-searcher: #101010;
  --icon-aside: invert(1);
  --icon-copy: none;
  --background-box: #0f0f0f;
  --border-box: #303030;
  --background-element: #0f0f0f;
  --background-element-disabled: #2a2a2a;
  --background-element-hover: #3f3f3f;
  --border-element: #4e4e4e;
  --text-element: #fff;
  --text-element-label: gray;
  --background-dialog: #000;
  --border-dialog: #333;
  --background-box-header: #111;
  --background-box-header-button: #000;
  --text-link: cornflowerblue;
}

#dashboard.active {
  grid-template-columns: 320px 1fr;
  transition: grid-template-columns 0.5s ease;
}

header {
  background: royalblue;
  display: grid;
  grid-template-columns: 24px 24px 1fr;
  padding: 0 20px;
  z-index: 1;
  grid-area: header;
  gap: 20px;
}
header .btn-search-dashboard,
header .btn-data-home {
  display: grid;
  align-items: center;
  color: white;
  cursor: pointer;
}
header .btn-search-dashboard i,
header .btn-data-home i {
  filter: invert(1);
  width: 24px;
  height: 24px;
}

header .menu {
  place-self: center;
}

header .menu #btn-menu {
  display: none;
}

header .menu .toggle {
  position: relative;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition-duration: 0.3s;
}

header .menu .toggle .bars {
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 5px;
  transition-duration: 0.3s;
}

#btn-menu:checked + .toggle .bars {
  margin-left: 8px;
}

#btn-menu:checked + .toggle #bar2 {
  transform: rotate(135deg);
  margin-left: 0;
  transform-origin: center;
  transition-duration: 0.3s;
}

#btn-menu:checked + .toggle #bar1 {
  transform: rotate(45deg);
  transition-duration: 0.3s;
  transform-origin: left center;
}

#btn-menu:checked + .toggle #bar3 {
  transform: rotate(-45deg);
  transition-duration: 0.3s;
  transform-origin: left center;
}

header nav {
  display: flex;
  justify-content: right;
}

header nav .group-header {
  position: relative;
  display: grid;
}

header nav a {
  margin: 0 12px;
  place-self: center;
}

#dashboard header nav a#btn-theme span.icon {
  background-image: url("/assets/images/dark.png");
  background-size: 100%;
  width: 24px;
  cursor: pointer;
  height: 24px;
  display: block;
  filter: var(--icon-aside);
  transition: 0.5s;
}

#dashboard header nav a#btn-theme p::before {
  content: "Activar Modo Oscuro";
}

#dashboard.dark-mode header nav a#btn-theme span.icon {
  background-image: url("/assets/images/white.png");
}

#dashboard.dark-mode header nav a#btn-theme p::before {
  content: "Activar Modo Claro";
}

header nav a i {
  width: 24px;
  height: 24px;
  filter: invert(1);
}

header nav a.notifications span {
  background: orangered;
  padding: 5px 10px;
  border-radius: 20px;
  color: white;
  font-size: 12px;
  position: absolute;
  top: 5px;
  right: -5px;
}

header nav .group-header .tooltip .text {
  bottom: -60px;
}

header nav .group-header a.account {
  display: grid;
  grid-template-columns: 1fr 30px;
  gap: 10px;
}

header nav .group-header.active {
  background: rgba(0, 0, 0, 0.2);
}

header nav .group-header a.account p {
  font-size: 14px;
  font-weight: bold;
  margin: 6px 0;
  color: #fff;
}

header nav .group-header a.account span.avatar,
header nav .group-header .box-header .top span.avatar {
  background: transparent;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  border-radius: 50%;
  align-content: center;
  text-align: center;
  border: 1px solid #fff;
}

header nav .group-header.active .box-account,
header nav .group-header.active .box-new,
header nav .group-header.active .box-notifications {
  display: block;
}

header nav .group-header .box-header {
  display: none;
  position: absolute;
  top: 75px;
  border-radius: 10px;
  width: 420px;
  box-shadow: 2px 3px 10px 2px rgba(0, 0, 0, 0.25);
  right: 10px;
}

header nav .group-header .box-header .top {
  background: royalblue;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: repeat(2, 1fr);
  column-gap: 12px;
  row-gap: 5px;
  grid-template-areas: "header-avatar header-name" "header-avatar header-mail";
  border-radius: 10px 10px 0 0;
}

header nav .group-header .box-header .top span.avatar {
  font-size: 24px;
  grid-area: header-avatar;
  background: darkblue;
  border: none;
}

header nav .group-header .box-header .top h2 {
  margin: 0px;
  color: #fff;
  grid-area: header-name;
  font-size: 20px;
}

header nav .group-header .box-header .top h5 {
  margin: 0;
  color: #fff;
  grid-area: header-mail;
  font-size: 14px;
}

header nav .group-header .box-header .content {
  background: var(--background-box-header);
}

header nav .group-header .box-header .content a {
  display: grid;
  grid-template-columns: 24px 1fr;
  padding: 14px 18px;
  margin: 0;
  border-bottom: 1px solid var(--background-body);
  align-items: center;
  width: 100%;
}

header nav .group-header .box-header .content a:last-child {
  border-bottom: none;
}

header nav .group-header .box-header .content a i {
  filter: var(--icon-aside);
  transition: 0.5s;
  width: 20px;
  height: 20px;
}

header nav .group-header .box-header .content a p {
  font-size: 14px;
  color: var(--text-element-label);
  font-weight: 400;
  transition: 0.5s;
  margin: 0 0 0 12px;
}

header nav .group-header .box-header .content a:hover p {
  color: var(--text-element);
}

header nav .group-header .box-header .button {
  padding: 10px 18px;
  border-top: 1px solid var(--border-element);
  background: var(--background-box-header-button);
  border-radius: 0 0 10px 10px;
}

header nav .group-header .box-header .button a {
  font-size: 14px;
  color: var(--text-element-label);
  border: 1px solid var(--border-element);
  border-radius: 8px;
  margin: 0;
  text-align: center;
  padding: 12px 0;
  display: block;
  transition: 0.5s;
  font-weight: bold;
  background: var(--background-box-header);
  width: 100%;
}

header nav .group-header .box-header .button a:hover {
  color: #333;
  border-color: #333;
}

header nav .group-header .box-options,
section.searcher .content .results table tr td.option .box-content,
section.searcher .totals a .box-content {
  position: absolute;
  display: none;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0;
  font-size: 1rem;
  text-align: left;
  list-style: none;
  background-color: var(--background-element);
  background-clip: padding-box;
  top: 75px;
  right: 10px;
  box-shadow: 2px 3px 10px 2px rgba(0, 0, 0, 0.25);
  border-radius: 0.375rem;
}

header nav .group-header .box-options a,
section.searcher .content .results table tr td.option .box-content a {
  margin: 0;
  padding: 2.5px 0;
  display: table;
  width: 100%;
}

header nav .group-header .box-options a p,
section.searcher .content .results table tr td.option .box-content a p {
  width: auto;
  padding: 0.25rem 1rem;
  float: left;
  font-weight: 400;
  color: var(--text-element);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  margin: 0;
  font-size: 13px;
}

header nav .group-header .box-options a:hover,
section.searcher .content .results table tr td.option .box-content a:hover {
  background: royalblue;
}

header nav .group-header .box-options a:hover p,
section.searcher .content .results table tr td.option .box-content a:hover p {
  color: #fff;
}

header nav .group-header .box-notifications {
  display: none;
  position: absolute;
  top: 75px;
  border-radius: 10px;
  width: 480px;
  box-shadow: 2px 3px 10px 2px rgba(0, 0, 0, 0.25);
  right: 10px;
  max-height: 90vh;
  background: var(--background-element);
}

header nav .group-header .box-notifications h2 {
  margin: 0;
  padding: 12px 18px;
  font-size: 18px;
  color: var(--text-element);
}

header nav .group-header .box-notifications .item {
  display: grid;
  grid-template-columns: 1fr 24px;
  grid-template-rows: 1fr 24px;
  grid-template-areas: "notification-date notification-trash" "notification-description notification-trash";
  padding: 14px 18px;
  margin: 0;
  border-bottom: 1px solid var(--border-element);
  gap: 5px;
}

header nav .group-header .box-notifications .item.new {
  background: var(--background-box-header-button);
}

header nav .group-header .box-notifications .item:last-child {
  border: none;
}

header nav .group-header .box-notifications .item p {
  margin: 0;
  align-items: center;
  font-size: 13px;
  color: var(--text-element-label);
  grid-area: notification-date;
}

header nav .group-header .box-notifications .item h5 {
  margin: 0;
  align-items: center;
  font-size: 15px;
  color: var(--text-element);
  grid-area: notification-description;
}

header nav .group-header .box-notifications .item a {
  grid-area: notification-trash;
}

header nav .group-header .box-notifications .item a.tooltip .text {
  bottom: auto;
}

header nav .group-header .box-notifications .item a i {
  filter: none;
  width: 14px;
  height: 14px;
}

aside {
  background: var(--background-aside);
  overflow-y: auto;
  direction: ltr;
  scrollbar-color: #666 #999;
  scrollbar-width: thin;
  grid-area: aside;
  display: grid;
  grid-template-rows: 65px 1fr;
}

aside .pic {
  background: #2b4baf;
  position: sticky;
  top: 0;
  display: grid;
  z-index: 10;
}

aside .pic .logo,
#dashboard.active aside .pic .icon {
  display: none;
}

aside .pic .icon,
#dashboard.active aside .pic .logo {
  display: block;
}

aside .pic img {
  width: 85%;
  place-self: center;
}

aside .pic .icon {
  width: 48px;
}

aside .content {
  display: grid;
  grid-template-columns: 65px 1fr;
}

aside .content .section {
  background: var(--background-aside-section);
}

aside .content .section a {
  width: 100%;
  display: grid;
  padding: 20px 0;
  place-items: center;
  border-left: 5px solid transparent;
}

aside .content .section a.selected {
  border-color: royalblue;
}

aside .content .section a.active {
  background-color: var(--background-aside-section-active);
}

aside .content .section a i {
  width: 20px;
  height: 20px;
  filter: var(--icon-aside);
}

aside .content .section a.tooltip .text {
  position: fixed;
  z-index: 3;
}

#dashboard.active aside .content .section a.tooltip .text {
  position: absolute;
}

aside .content .section a.tooltip .text.rgt {
  left: 80px;
  right: inherit;
  transform: none;
}

aside .content .nav {
  position: absolute;
  left: 70px;
  border-radius: 10px;
  background: var(--background-element);
  width: 250px;
  max-height: -webkit-fill-available;
  max-height: fill-available;
  overflow: auto;
  display: none;
  z-index: 2;
  box-shadow: 2px 3px 10px 2px rgba(0, 0, 0, 0.25);
}

aside .content .nav.active,
#dashboard.active aside .content .nav {
  display: block;
}

#dashboard.active aside .content .nav {
  position: relative;
  left: auto;
  border-radius: 0;
  background: transparent;
  top: auto !important;
  width: auto;
  max-height: none;
  max-height: none;
  box-shadow: none;
}

aside .content .nav ul .top {
  margin: 0 0 15px 0;
  padding: 0 5px 0 8px;
  display: grid;
  grid-template-columns: 1fr auto;
}

aside .content .nav ul .top h2 {
  font-size: 16px;
  margin: 0;
  color: var(--title-aside);
}

#dashboard.active aside .content .nav ul .top a.close {
  display: none;
}

aside .content .nav ul .top a.close {
  font-size: 15px;
}

aside .content .nav ul .top a.close.tooltip .lft {
  left: -40px;
}

aside .content .nav ul h5 {
  font-size: 11px;
  text-transform: uppercase;
  font-family: "Verdana", Arial;
  color: gray;
  margin: 0;
  align-content: center;
}

aside .content .nav ul {
  display: none;
  padding: 20px 12px;
}

aside .content .nav ul li {
  margin: 0 0 20px 0;
}

aside .content .nav ul.active {
  display: block;
}

aside .content .nav ul li .item {
  grid-template-columns: 1fr;
  display: grid;
  padding: 6px 10px;
  align-items: center;
  margin: 5px 0;
  border-radius: 10px;
}

aside .content .nav ul li .item:first-child {
  margin: 0 0 5px 0;
}

aside .content .nav ul li .item:last-child {
  margin: 5px 0 0 0;
}

aside .content .nav ul li .item:hover {
  background: var(--background-aside-nav-hover);
}

aside .content .nav ul li .item.active {
  background: var(--background-aside-nav-active);
}

aside .content .nav ul li .item.new {
  grid-template-columns: 1fr 24px;
}

aside .content .nav ul li .item.new.excel {
  grid-template-columns: 1fr repeat(2, 24px);
}

aside .content .nav ul li .item i:first-child {
  width: 14px;
  height: 14px;
}

aside .content .nav ul li .item a {
  font-size: 14px;
  color: var(--text-aside);
}

aside .content .nav ul li .item a.tooltip {
  display: none;
}

aside .content .nav ul li .item a.tooltip i {
  filter: var(--icon-aside);
}

aside .content .nav ul li .item:hover a.tooltip,
aside .content .nav ul li .item.active a.tooltip {
  display: flex;
  direction: rtl;
}

aside .content .nav ul li .item:hover a.tooltip .text.lft {
  left: -35px;
}

main section.new .lt .box .top .arrow {
  display: none;
}

aside .content .nav ul li a.mnu {
  width: 100%;
  display: grid;
  grid-template-columns: 24px 1fr 14px;
  gap: 10px;
  padding: 0;
  border-left: 5px solid transparent;
}

aside .content .nav ul li a.mnu i {
  place-self: center;
  filter: var(--icon-aside);
  width: 16px;
  height: 16px;
}

aside .content .nav ul li a.mnu .arrow {
  text-align: center;
}

aside .content .nav ul li a.mnu .arrow span,
main section.new .lt .box .top .arrow,
main section.view .lt .info .details li.btn-details .arrow span {
  display: inline-block;
  margin-right: 8px;
  width: 10px;
  height: 10px;
  position: relative;
  cursor: pointer;
}

aside .content .nav ul li a.mnu .arrow span::before,
aside .content .nav ul li a.mnu .arrow span::after,
main section.new .lt .box .top .arrow span::before,
main section.new .lt .box .top .arrow span::after,
main section.view .lt .info .details li.btn-details .arrow span::after,
main section.view .lt .info .details li.btn-details .arrow span::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 6px;
  background-color: var(--text-aside);
  top: 0;
  transition: top 0.1s ease;
}

aside .content .nav ul li a.mnu .arrow span::before,
main section.new .lt .box .top .arrow span::before,
main section.view .lt .info .details li.btn-details .arrow span::before {
  transform: rotate(-45deg);
  top: -2px;
}

aside .content .nav ul li a.mnu .arrow span::after,
main section.new .lt .box .top .arrow span::after,
main section.view .lt .info .details li.btn-details .arrow span::after {
  transform: rotate(45deg);
  top: 2px;
}

aside .content .nav ul li.active a.mnu .arrow span::before,
main section.new .lt .box.active .top .arrow span::before,
main section.view .lt .info .details.active li.btn-details .arrow span::before {
  left: -2px;
  top: 0;
  transform: rotate(-45deg);
}

aside .content .nav ul li.active a.mnu .arrow span::after,
main section.new .lt .box.active .top .arrow span::after,
main section.view .lt .info .details.active li.btn-details .arrow span::after {
  left: 2px;
  top: 0;
  transform: rotate(45deg);
}

aside .content .nav ul li .cnt {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  margin: 5px 0 0 15px;
  border-left: 1px solid var(--border-element);
  padding: 0 0 0 14px;
}

#dashboard.active aside .content .nav ul li .cnt {
  border-color: var(--border-aside-nav);
}

main {
  grid-area: main;
  padding: 0 30px;
  overflow: auto;
  position: relative;
}
main section.copy {
  display: flex;
  align-items: center;
  gap: 8px;
  place-content: center;
  margin: 30px 0 20px 0;
}
main section.copy p {
  margin: 0;
  font-size: 14px;
  color: var(--text-aside);
}
main section.copy a {
  color: var(--text-aside);
  font-weight: 500;
  display: flex;
  gap: 5px;
}
main section.copy a img {
  width: 24px;
  filter: var(--icon-copy);
}

main section.title {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas: "title-icon title-name" "title-icon title-path";
  column-gap: 20px;
  padding: 20px 0;
}

main section.title i {
  width: 48px;
  height: 48px;
  align-self: center;
  grid-area: title-icon;
  filter: var(--icon-aside);
}

main section.title .info {
  display: flex;
  gap: 12px;
  align-items: center;
}

main section.title .info .favorites,
section.searcher .top .info .favorites {
  float: left;
  width: auto;
}

main section.title .info .favorites a i,
section.searcher .top .info .favorites a i {
  width: 20px;
  height: 20px;
  align-self: center;
}

main section.title .info h2 {
  margin: 0;
  font-size: 24px;
  align-self: center;
  grid-area: title-name;
  float: left;
  color: var(--text-aside);
}

main section.title .path {
  grid-area: title-path;
  align-self: center;
}

main section.title .path a,
main section.title .path p {
  font-size: 14px;
  float: left;
  padding: 0 8px 0 0;
  color: royalblue;
  margin: 0;
}

main section.title .path p {
  color: var(--text-aside);
}

main section.title .favorites.active a i.favorites,
section.searcher .top .info .favorites.active a i.favorites {
  background-image: url("/assets/icons/favorites-active.png");
  filter: none;
}

main section.new {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 20px;
}

main section.view {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}

main section.new .lt .box {
  border-radius: 8px;
  margin: 20px 0;
  border: 1px solid var(--border-box);
  background-color: var(--background-box);
  display: grid;
  grid-template-rows: auto 1fr;
}

main section.new .lt .box:first-child {
  margin: 0 0 20px 0;
}

main section.new .lt .box .top {
  display: grid;
  grid-template-columns: 1fr 24px;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-box);
  align-items: center;
}

main section.new .lt .box .top h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-aside);
}

main section.new .lt .box .top .arrow span::before,
main section.new .lt .box .top .arrow span::after {
  width: 3px;
  height: 10px;
}

main section.new .lt .box .top .arrow span::before {
  top: -3px;
}

main section.new .lt .box .top .arrow span::after {
  top: 3px;
}

main section.new .lt .box.active .top .arrow span::before {
  left: -3px;
}

main section.new .lt .box.active .top .arrow span::after {
  left: 3px;
}

main section.new .lt .box .content, main section.new .lt .box .buttons {
  display: none;
}

main section.new .lt .box.active .content, main section.new .lt .box.active .buttons {
  display: block;
  padding: 0 20px;
  margin: 0;
}

main section.new .lt .box.active .buttons {
  border-top: 1px solid var(--border-box);
  padding: 8px 20px;
  text-align: right;
}

main section.new .rt .info,
main section.view .lt .info {
  background: var(--background-box);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-box);
  position: sticky;
  top: 20px;
  color: var(--text-aside);
}

main section.new .rt .info h2,
main section.view .lt .info h2 {
  font-size: 24px;
  margin: 0;
  color: var(--text-aside);
}

main section.new .rt .info a {
  color: var(--text-link);
}

main section.new .rt .info li,
main section.view .lt .info li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: center;
  margin: 20px 0;
}

main section.new .rt .info li i,
main section.view .lt .info li i {
  filter: var(--icon-aside);
}

main section.new .rt .info li p,
main section.view .lt .info li p {
  margin: 0;
  font-size: 14px;
  color: var(--text-aside);
}

main section.view .lt .info div.details {
  display: grid;
  border-top: 1px solid var(--border-box);
}

main section.view .lt .info .details .btn-details {
  cursor: pointer;
  grid-template-columns: 24px 1fr 24px;
}

main section.view .lt .info .details.active {
  margin: 0 0 20px 0;
}

main section.view .lt .info .details.active .item {
  display: grid;
}

main section.view .lt .info .details .item {
  display: none;
  grid-template-rows: repeat(2, 1fr);
  border: 1px solid var(--border-box);
  align-items: center;
  border-radius: 8px;
  margin: 8px 0;
}

main section.view .lt .info .details .item h5 {
  margin: 0;
  font-size: 13px;
  background: #f5f5f5;
  font-weight: 600;
  color: var(--text-element);
  padding: 10px 8px;
}

main section.view .lt .info .details .item p {
  font-size: 13px;
  margin: 0;
  background: #fff;
  padding: 10px 8px;
  color: var(--text-element);
}

main section.new .rt .info .buttons,
main section.view .lt .info .buttons {
  display: grid;
  padding: 20px 0 0 0;
  border-top: 1px solid var(--border-box);
  gap: 8px;
}

main section.new .rt .info .buttons {
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "btn-customer-create btn-customer-invoice" "btn-customer-other btn-customer-other";
}

main section.view .lt .info .buttons {
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "btn-edit-customer-view btn-delete-customer-view";
}

main section.new .rt .info .buttons button {
  grid-area: btn-customer-other;
}

main section.new .rt .info .buttons button:first-child {
  grid-area: btn-customer-create;
}

main section.view .lt .info .buttons button:first-child {
  grid-area: btn-edit-customer-view;
}

main section.new .rt .info .buttons button:last-child {
  grid-area: btn-customer-invoice;
}

main section.view .lt .info .buttons button:last-child {
  grid-area: btn-delete-customer-view;
}

main section.view .rt .tab {
  padding: 20px;
  background: var(--background-box);
  border-radius: 5px;
  border: 1px solid var(--border-box);
}

main section.view .rt .tab .contents h5 {
  margin: 0 0 8px 0;
  color: var(--text-aside);
}

main dialog[open] {
  display: grid;
}

main dialog:-internal-dialog-in-top-layer::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

main dialog {
  min-width: 60%;
  max-width: 90%;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: var(--background-dialog);
  grid-template-rows: auto 1fr auto;
  outline: none;
}

main dialog .top {
  background: royalblue;
  color: #fff;
  border: none;
  display: grid;
  grid-template-columns: 1fr 24px;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-dialog);
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 2;
}

main dialog .top h2 {
  margin: 0;
}

main dialog .top a {
  font-size: 24px;
}

main dialog .content {
  padding: 0 20px;
  overflow-y: auto;
}

main dialog .buttons {
  background: var(--background-dialog);
  border-top: 1px solid var(--border-dialog) !important;
  padding: 10px 20px !important;
  text-align: right;
  position: sticky;
  bottom: 0;
  z-index: 2;
}

main .tab .links {
  display: flex;
  direction: ltr;
}

main .tab .links a.tablink {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-aside);
}

main .tab .links a.tablink.active {
  background: royalblue;
  color: #fff;
}

main .tab .contents {
  margin: 20px 0 0 0;
}

main .tab .contents .tabcontent {
  display: none;
}

main .tab .contents .tabcontent.active {
  display: block;
}

#new-book-invoice .content,
#new-payment-means .content,
#new-customer-new-invoice .content {
  padding: 0;
}

#new-book-invoice .tab .contents,
#new-payment-means .tab .contents,
#new-customer-new-invoice .tab .contents {
  padding: 0 20px;
}

#new-book-invoice .content .tab .links,
#new-payment-means .content .tab .links,
#new-customer-new-invoice .content .tab .links {
  background: var(--background-aside-nav-active);
  border-bottom: 1px solid var(--border-element);
  padding: 8px 20px;
}

#new-book-invoice .content .tab .links a.tablink.active,
#new-payment-means .content .tab .links a.tablink.active,
#new-customer-new-invoice .content .tab .links a.tablink.active {
  background: #202020;
  color: #fff;
}

.list-accounts-new-payment-means .item,
.installments-new-invoice .item {
  border-bottom: 1px solid var(--border-element);
  padding: 20px 0;
}

.list-accounts-new-payment-means .item:first-child .title a.close {
  display: none;
}

.list-accounts-new-payment-means .item:last-child,
.installments-new-invoice .item:last-child {
  border: none;
}

.list-accounts-new-payment-means .item .title,
.installments-new-invoice .item .title {
  display: grid;
  grid-template-columns: 1fr auto;
}

.list-accounts-new-payment-means .item .title p,
.installments-new-invoice .item .title p {
  color: black;
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 8px 0;
}

.list-accounts-new-payment-means .item .fld,
.installments-new-invoice .item .fld {
  margin: 0;
  grid-template-columns: 3fr 1fr;
}

.installments-new-invoice .item .fld {
  grid-template-columns: 3fr repeat(3, 1fr);
}

.summary-view {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border-box);
  border-radius: 8px;
  margin: 0 0 20px 0;
}

.summary-view li {
  border-right: 1px solid var(--border-box);
  text-align: center;
  background: var(--background-element);
  padding: 20px 0;
  color: var(--text-element);
}

.summary-view li h4 {
  margin: 0 0 10px 0;
}

.summary-view li:first-child {
  border-radius: 8px 0 0 8px;
}

.summary-view li:last-child {
  border-radius: 0 8px 8px 0;
}

section.open-cash-drawer {
  background: var(--background-box-header);
  border-radius: 8px;
  display: grid;
  gap: 30px;
  justify-items: center;
  padding: 25vh 0;
}
section.open-cash-drawer h2 {
  color: var(--text-aside);
}

main .alert {
  position: fixed;
  top: 80px;
  right: 25px;
  max-width: 80%;
  min-width: 320px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 14px;
  row-gap: 5px;
  border-radius: 5px 10px 10px 5px;
  padding: 14px;
  border-left: 5px solid transparent;
  animation: show_slide 1s ease forwards;
  z-index: 1000;
}
main .alert i {
  width: 24px;
  height: 24px;
}
main .alert p {
  margin: 0;
  font-size: 15px;
  align-content: center;
}
main .alert a {
  font-size: 16px;
}

main .alert.t {
  grid-template-areas: "alert-icon alert-title alert-close" "alert-icon alert-description alert-close";
  grid-template-rows: auto 1fr;
}
main .alert.t i {
  grid-area: alert-icon;
}
main .alert.t h5 {
  grid-area: alert-title;
  margin: 0;
  font-size: 15px;
}
main .alert.t p {
  grid-area: alert-description;
  align-content: start;
  font-size: 14px;
}
main .alert.t a {
  grid-area: alert-close;
}

@keyframes show_slide {
  0% {
    transform: translateX(100%);
  }
  40% {
    transform: translateX(-10%);
  }
  80% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-10px);
  }
}
main .alert.error {
  background-color: #f7d8d8;
  color: #7f1d1d;
  border-color: #ff7e7e;
}

main .alert.success {
  background-color: #cedff5;
  color: #1e3a8a;
  border-color: #7eb8ff;
}

main .alert.warning {
  background-color: #ffeeaa;
  color: #78350f;
  border-color: #ffa502;
}

main dialog.confirm {
  background: var(--background-dialog);
  border-radius: 20px;
  width: 25%;
  min-width: 25%;
  position: fixed;
  place-self: anchor-center;
  padding: 20px;
}
main dialog.confirm .msg {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  grid-template-rows: repeat(2, auto);
  grid-template-areas: "confirm-icon confirm-title confirm-close" "confirm-icon confirm-description confirm-description";
  column-gap: 14px;
}
main dialog.confirm .msg i {
  grid-area: confirm-icon;
  width: 24px;
  height: 24px;
  margin: 5px 0 0 0;
  filter: var(--icon-aside);
}
main dialog.confirm .msg a {
  grid-area: confirm-close;
  color: var(--text-aside);
}
main dialog.confirm .msg h5 {
  margin: 0;
  font-size: 24px;
  grid-area: confirm-title;
  color: var(--text-aside);
}
main dialog.confirm .msg p {
  margin: 8px 0 0 0;
  font-size: 15px;
  color: gray;
  grid-area: confirm-description;
}
main dialog.confirm .buttons {
  border: none !important;
  padding: 0 !important;
  margin: 24px 0 0 0;
}
main dialog.confirm .buttons button:last-child {
  margin: 0 0 0 8px;
}

dialog#search-dashboard .content .label h2 .arrow span {
  display: inline-block;
  margin-right: 8px;
  width: 10px;
  height: 10px;
  position: relative;
  cursor: pointer;
}

dialog#search-dashboard .content .label h2 .arrow span::before,
dialog#search-dashboard .content .label h2 .arrow span::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 6px;
  background-color: var(--text-aside);
  top: 0;
  transition: top 0.1s ease;
}

dialog#search-dashboard .content .label h2 .arrow span::before {
  transform: rotate(-45deg);
  top: -2px;
}

dialog#search-dashboard .content .label h2 .arrow span::after {
  transform: rotate(45deg);
  top: 2px;
}

dialog#search-dashboard .content .label.active h2 .arrow span::before {
  left: -2px;
  top: 0;
  transform: rotate(-45deg);
}

dialog#search-dashboard .content .label.active h2 .arrow span::after {
  left: 2px;
  top: 0;
  transform: rotate(45deg);
}

dialog#search-dashboard {
  min-width: 40%;
  max-width: 80%;
}
dialog#search-dashboard .top {
  background: transparent;
  color: var(--text-aside);
}
dialog#search-dashboard .top a {
  text-align: center;
}
dialog#search-dashboard .top .box-element.input input.invalid ~ span::after {
  font-weight: 400;
}
dialog#search-dashboard .content {
  padding: 0;
}
dialog#search-dashboard .content h2 {
  padding: 15px 20px;
  font-size: 16px;
  cursor: pointer;
  margin: 0;
  display: grid;
  align-items: center;
  grid-template-columns: 24px auto 1fr 18px;
  gap: 5px;
  border-bottom: 1px solid var(--border-element);
  color: var(--text-aside);
}
dialog#search-dashboard .content h2 i {
  filter: var(--icon-aside);
}
dialog#search-dashboard .content h2 span {
  font-weight: 400;
  margin: 0 0 0 8px;
  font-style: italic;
  font-size: 14px;
}
dialog#search-dashboard .content .data,
dialog#search-dashboard .content .stock {
  display: none;
  border-bottom: 1px solid var(--border-element);
  padding: 20px;
  transition: 0.3s;
}
dialog#search-dashboard .content .data h4,
dialog#search-dashboard .content .data h5,
dialog#search-dashboard .content .data p,
dialog#search-dashboard .content .data span,
dialog#search-dashboard .content .stock h4,
dialog#search-dashboard .content .stock h5,
dialog#search-dashboard .content .stock p,
dialog#search-dashboard .content .stock span {
  margin: 0;
  font-size: 14px;
  padding: 0;
  font-weight: 400;
  padding: 0;
  border: none;
}
dialog#search-dashboard .content .data:hover,
dialog#search-dashboard .content .stock:hover {
  background: var(--background-aside-nav-active);
}
dialog#search-dashboard .content .customers .data,
dialog#search-dashboard .content .vendors .data,
dialog#search-dashboard .content .sales .data,
dialog#search-dashboard .content .purchases .data,
dialog#search-dashboard .content .stock {
  grid-template-columns: 1fr auto;
  grid-template-rows: repeat(3, auto);
  grid-template-areas: "data-code data-balance" "data-name data-balance" "data-vat data-balance";
  gap: 10px;
  color: var(--text-aside);
}
dialog#search-dashboard .content .customers .data h5,
dialog#search-dashboard .content .vendors .data h5,
dialog#search-dashboard .content .sales .data h5,
dialog#search-dashboard .content .purchases .data h5,
dialog#search-dashboard .content .stock h5 {
  grid-area: data-code;
}
dialog#search-dashboard .content .customers .data h4,
dialog#search-dashboard .content .vendors .data h4,
dialog#search-dashboard .content .sales .data h4,
dialog#search-dashboard .content .purchases .data h4,
dialog#search-dashboard .content .stock h4 {
  grid-area: data-name;
  font-weight: 500;
}
dialog#search-dashboard .content .customers .data p,
dialog#search-dashboard .content .vendors .data p,
dialog#search-dashboard .content .sales .data p,
dialog#search-dashboard .content .purchases .data p,
dialog#search-dashboard .content .stock p {
  grid-area: data-vat;
}
dialog#search-dashboard .content .customers .data span,
dialog#search-dashboard .content .vendors .data span,
dialog#search-dashboard .content .sales .data span,
dialog#search-dashboard .content .purchases .data span,
dialog#search-dashboard .content .stock span {
  grid-area: data-balance;
  align-content: center;
  font-weight: 500;
}
dialog#search-dashboard .content .items .data {
  grid-template-columns: 3fr repeat(2, auto);
  grid-template-rows: repeat(3, auto);
  grid-template-areas: "data-code data-stock data-price" "data-name data-stock data-price" "data-variant data-stock data-price";
  column-gap: 20px;
  row-gap: 10px;
  color: var(--text-aside);
}
dialog#search-dashboard .content .items .data h5 {
  grid-area: data-code;
}
dialog#search-dashboard .content .items .data h4 {
  grid-area: data-name;
  font-weight: 500;
}
dialog#search-dashboard .content .items .data p {
  grid-area: data-variant;
}
dialog#search-dashboard .content .items .data span {
  grid-area: data-stock;
  align-content: center;
  font-weight: 500;
}
dialog#search-dashboard .content .items .data span:last-child {
  grid-area: data-price;
}
dialog#search-dashboard .content .customers.active .data,
dialog#search-dashboard .content .vendors.active .data,
dialog#search-dashboard .content .sales.active .data,
dialog#search-dashboard .content .purchases.active .data,
dialog#search-dashboard .content .items.active .data,
dialog#search-dashboard .content .stock {
  display: grid;
}
dialog#search-dashboard .content .label.active h2 {
  background: var(--background-aside-nav-active);
}
dialog#search-dashboard .content .header {
  background: var(--background-aside-nav-active);
  display: grid;
  padding: 14px 20px;
  color: var(--text-aside);
}
dialog#search-dashboard .content .header h5 {
  margin: 0;
  text-align: center;
}
dialog#search-dashboard .content .header h5:first-child {
  text-align: left;
}
dialog#search-dashboard .content .stock {
  grid-template-areas: none;
  grid-template-rows: 1fr;
}
dialog#search-dashboard .content .stock .info {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-areas: "data-code" "data-name" "data-vat";
  gap: 10px;
}
dialog#search-dashboard .content .stock span {
  grid-area: auto;
  text-align: center;
}

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid royalblue;
  border-radius: 5px;
  background-color: transparent;
  display: inline-block;
  position: relative;
  margin-right: 10px;
  cursor: pointer;
}

.checkbox:before {
  content: "";
  background-color: royalblue;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
}

.checkbox:checked:before {
  transform: translate(-50%, -50%) scale(1);
}

.checkbox-label {
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  color: var(--text-aside);
}

dialog#send-dashboard {
  min-width: 40%;
}
dialog#send-dashboard .send-wsp {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 30px 10px;
}
dialog#send-dashboard .send-wsp .ct {
  grid-column-start: 1;
  grid-column-end: 3;
  padding: 0 0 40px 0;
  border-bottom: 1px solid var(--border-element);
  margin: 0 0 40px 0;
}
dialog#send-dashboard .send-wsp .lt {
  border-right: 1px solid var(--border-element);
  padding: 0 40px 0 0;
}
dialog#send-dashboard .send-wsp .rt {
  padding: 0 0 0 40px;
}
dialog#send-dashboard .send-wsp h4 {
  margin: 0;
  color: var(--text-aside);
}
dialog#send-dashboard .send-wsp p {
  margin: 10px 0 20px 0;
  color: gray;
  line-height: 26px;
  font-size: 15px;
}
dialog#send-dashboard .send-wsp .button {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

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