@font-face {
  font-family: "AppFont";
  src: url("../font/Inter_18pt-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "AppFont Italic";
  src: url("../font/Inter_18pt-Italic.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "AppFont Medium";
  src: url("../font/Inter_18pt-Medium.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "AppFont Bold";
  src: url("../font/Inter_18pt-Bold.woff2") format("woff2");
  font-display: swap;
}

* {
  box-sizing: border-box;
}

:root {
  --fontsize: 0.9rem;
  --sans: var(--fontsize) / 1.5 "AppFont", sans-serif;
  --mono: var(--fontsize) / 1.5 monospace;

  --clientgreen: #00943b;
  --clientgreen-filter: brightness(0) saturate(100%) invert(41%) sepia(71%)
    saturate(7500%) hue-rotate(141deg) brightness(98%) contrast(102%);
  --clientblue: #00a8e1;
  --clienttext: #353750;
  --clienttexthover: #4d5180;

  --appwhite: #ffffff;
  --appgrey: #333333;
  --applightgrey: #6a6a6a;
  --applightergrey: rgba(255, 255, 255, 0.55);
  --applightshadow: #dddddd;
  --appblue: #253fb6;
  --appblue-alt: #293685;
  --appblue-button: #627ca5;
  --appblue-filter: brightness(0) saturate(100%) invert(16%) sepia(66%)
    saturate(3500%) hue-rotate(227deg) brightness(97%) contrast(94%);
  --appblue-hover: rgba(37, 63, 182, 0.18);
  --appyellow: #fbff6a;
  --appyellowbackground: #fdffb2;
  --apporange: #ff9b00;
  --appred: #bf0d0d;
  --appgreen: var(--clientgreen);
  --appbrown: #771902;
  --appbrown-filter: brightness(0) saturate(100%) invert(12%) sepia(46%)
    saturate(5461%) hue-rotate(5deg) brightness(91%) contrast(98%);
  --appbrown-hover: rgba(198, 169, 84, 0.39);
  --appred-filter: brightness(0) saturate(100%) invert(20%) sepia(85%)
    saturate(3823%) hue-rotate(350deg) brightness(87%) contrast(114%);
  --appwarn-error-bgcolor: #ffeded;
  --appwarn-success-bgcolor: #fdffbb;
  --appwarn-dump-bgcolor: rgba(140, 0, 0, 0.92);
  --appinput-border: #bcbcbc;

  --appbgcolor: #fafafa;
  --apptextcolor: #181818;
  --appmaincolor: var(--clienttext);
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  position: relative;
}

/* General settings */

body {
  margin: 0;
  font: var(--sans);
  font-weight: 400;
  font-style: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background-color: var(--appbgcolor);
  color: var(--apptextcolor);
  position: relative;
  height: 100%;
  background-image: url(../image/background-waves.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
img,
iframe {
  border: none;
  max-width: 100%;
}

i {
  display: inline;
}

a {
  font-family: "AppFont", sans-serif;
  color: var(--appblue);
  text-decoration: none;
}

a:hover {
  color: var(--appblue);
  text-decoration: underline;
}

strong {
  font-family: "AppFont Bold", sans-serif;
  font-weight: normal;
}

pre {
  font: 1rem/1.5 var(--mono);
  background: var(--appred);
  color: var(--appwhite);
  padding: 1rem;
  overflow: auto;
}

pre.app-dumper {
  background: var(--appwarn-dump-bgcolor);
  color: var(--appwhite);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 1.2rem;
  position: fixed;
  top: 0;
  right: 0px;
  bottom: 0;
  max-height: 94vh;
  margin: 2rem 0;
  height: fit-content;
  border-radius: 0.5rem 0 0 0.5rem;
  z-index: 99999;
  width: 100%;
  max-width: fit-content;
  padding: 0;
}

pre.app-dumper span {
  display: flex;
  align-items: center;
  font-weight: 800;
  gap: 0.5rem;
  text-transform: uppercase;
  position: fixed;
  background-color: var(--appred);
  padding: 0.5rem;
  right: 2rem;
}

pre.app-dumper > div {
  padding: 1.5rem 1rem;
}

pre.app-dumper i {
  background: url(../image/svg/alert-report.svg);
  width: 24px;
  height: 24px;
  zoom: 1.3;
  filter: invert(1);
}

code {
  font: 1rem/1.6 var(--mono);
}

blockquote {
  border-left: 5px solid var(--appgrey);
  padding: 1rem 1.5rem;
  margin: 0;
}

hr {
  border: 0;
  border-bottom: 1px solid var(--appgrey);
}

.width-full {
  width: 100%;
}
.width-auto {
  width: auto;
}

.flex-w {
  display: flex;
  flex-direction: row;
}
.flex-h {
  display: flex;
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}

.flex-gap-0-5rem {
  gap: 0.5rem;
}

.flex-gap-1rem {
  gap: 1rem;
}

.flex-gap-1-5rem {
  gap: 1.5rem;
}

.flex-gap-2rem {
  gap: 2rem;
}

.flex-gap-4rem {
  gap: 4rem;
}

.flex-justify-space-between {
  justify-content: space-between;
}

.flex-justify-center {
  justify-content: center;
}

.flex-justify-start {
  justify-content: flex-start;
}

.flex-justify-end {
  justify-content: flex-end;
}

.nowrap {
  text-wrap: nowrap;
}

.hidden {
  display: none !important;
}

.required {
  margin-left: 0.4rem;
  color: var(--appred);
}

i.img-placeholder {
  width: 120px;
  display: flex;
  height: 120px;
  background: var(--applightshadow);
  flex-direction: column;
  align-items: center;
  font-style: initial;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--applightgrey);
}

/* Headlines */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0.5rem 0;
  font-weight: normal;
}

h1 {
  font-size: 2.4rem;
  line-height: 1.2;
  font-family: "AppFont Bold", sans-serif;
}

h2 {
  font-size: 1.6rem;
  line-height: 1.2;
  font-family: "AppFont Medium", sans-serif;
}

h3 {
  font-size: 1.3rem;
  line-height: 1.24;
  font-family: "AppFont Medium", sans-serif;
}

h4 {
  font-size: 1.18rem;
  line-height: 1.23;
}

h5,
h6 {
  font-size: 1rem;
  font-weight: bold;
}

p {
  font-family: "AppFont", sans-serif;
}

/* Table */

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 1rem 0;
}

th,
td {
  text-align: left;
  vertical-align: top;
  border: 1px solid;
  padding: 0.4rem 1rem;
  max-width: 10vw;
}

thead,
tfoot {
  background: var(--clienttexthover);
}

/* Rounded Corners*/

pre,
code,
input,
select,
textarea,
button,
img {
  border-radius: 0.3rem;
}

/* Forms */

form {
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

input,
select,
textarea {
  font-family: "AppFont", sans-serif;
  font-size: var(--fontsize);
  color: var(--appgrey);
  background: var(--appwhite);
  border: 0;
  padding: 0.6rem;
}

button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  font-family: "AppFont", sans-serif;
  appearance: none;
  -webkit-appearance: none;
  font-size: var(--fontsize);
  display: flex;
  color: var(--appwhite);
  background: var(--clienttext);
  border: 0;
  margin: 4px;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  text-align: center;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  border-radius: 5rem;
  width: max-content;
}
button i {
  filter: invert(1);
}

button.red {
  background: var(--appred);
}

/* Cards */
article {
  background: var(--appbgcolor);
  border-radius: 0.3rem;
  padding: 1rem;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
}

[style*="--c:"]:first-child,
section > section:first-child,
article:first-child {
  margin-left: 0;
}
[style*="--c:"]:last-child,
section > section:last-child,
article:last-child {
  margin-right: 0;
}

/* main application */

.app-container {
  position: relative;
  align-items: stretch;
  height: 100%;
}

.app-container > .top {
  background: var(--clienttext);
  width: 100%;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 0.3rem rgba(0.21, 0.22, 0.31, 0.27);
  color: var(--appwhite);
}
.app-container > .top .left {
  justify-content: space-between;
  max-width: 250px;
  width: 100%;
  padding: 1.2rem 0 1.2rem 1.2rem;
}
.app-container > .top .left img {
  width: 100%;
  max-width: 150px;
}
.app-container > .top .left #menu-control {
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-container > .top .left #menu-control i.menu-toggle {
  background: url(../image/svg/menu.svg);
  width: 24px;
  height: 24px;
  zoom: 1.5;
  cursor: pointer;
  filter: invert(1);
}
.app-container > .top .right {
  align-items: flex-end;
  padding: 1rem 1.2rem;
}
.app-container > .top .right .user strong {
  color: var(--appwhite);
}
.app-container > .top .right .info {
  font-size: 0.9rem;
  color: var(--applightergrey);
}

.app-container > .base {
  justify-content: space-between;
  align-items: flex-start;

  gap: 1rem;
  padding: 1.5rem 0 0;
}

.app-container > .base .menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.app-container > .base .menu ul li a {
  font-family: "AppFont Medium", sans-serif;
  transition: 200ms;
  color: var(--clienttext);
  text-decoration: none;
  text-transform: capitalize;
  padding: 0.8rem 1.2rem;
  gap: 0.5rem;
  text-wrap: nowrap;
  align-items: center;
  width: 250px;
  font-size: 1.1rem;
}
.app-container > .base .menu ul li a i {
  display: inline;
  filter: var(--clientgreen-filter);
}
.app-container > .base .menu ul li a:hover,
.app-container > .base .menu ul li a:active,
.app-container > .base .menu ul li a:focus-within {
  background-color: var(--clienttext);
  color: var(--appwhite);
  cursor: pointer;
}

.app-container > .base .content {
  padding: 1.2rem;
  width: 100%;
}
.app-container > .base .content h1.view-title {
  font-size: 2.5rem;
  color: var(--clienttext);
  margin: 0;
}
.app-container > .base .content .view-controls {
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}
.app-container > .base .content .view-controls a.button:only-child {
  margin: 0 0 auto auto;
}
.app-container > .base .content a.button {
  display: flex;
  padding: 0.7rem 1.2rem;
  gap: 0.5rem;
  transition: 200ms;
  text-decoration: none;
  text-transform: capitalize;
  background: var(--clienttext);
  border-radius: 5rem;
  color: var(--appwhite);
  align-items: center;
  font-family: "AppFont Medium", sans-serif;
}
.app-container > .base .content a.button:hover {
  background: var(--clienttexthover);
  cursor: pointer;
}
.app-container > .base .content a.button.fit {
  max-width: fit-content;
}
.app-container > .base .content a.button i {
  filter: var(--clientgreen-filter);
}

.app-container > .base .content .searchbox {
  background: rgba(0, 0, 0, 0.1);
  padding: 1rem;
  border-radius: 0.7rem;
  max-width: 300px;
  width: fit-content;
  margin: 0 0 0 auto;
  display: none;
  height: max-content;
}
.app-container > .base .content .searchbox.active {
  display: block;
}
.app-container > .base .content .searchbox span.title {
  color: var(--apptextcolor);
  font-weight: 600;
  width: 100%;
  text-align: left;
  font-size: 1.1rem;
  display: block;
  margin: 0 auto 1rem;
}
.app-container > .base .content .searchbox form {
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: start;
  max-width: 100%;
}
.app-container > .base .content .searchbox form input,
.app-container > .base .content .searchbox form select {
  width: 100%;
}
.app-container > .base .content .searchbox form select {
  text-transform: capitalize;
}
.app-container > .base .content .searchbox form input[type="checkbox"],
.app-container > .base .content .searchbox form input[type="radio"] {
  width: auto;
}
.app-container > .base .content .searchbox form button {
  font-weight: 600;
  width: 100%;
}
.app-container > .base .content .view-details {
  background-color: var(--appwhite);
  padding: 1.2rem;
  border-radius: 0.7rem;
  box-shadow: 2px 2px 5px var(--applightshadow);
}
.app-container > .base .content .view-details h2 {
  font-family: "AppFont Bold", sans-serif;
  color: var(--clienttexthover);
  font-size: 1.8rem;
}
.app-container > .base .content .view-details h3 {
  font-weight: 700;
  color: var(--appgrey);
  font-size: 1.5rem;
}
.app-container > .base .content .view-details h4 {
  font-family: "AppFont Medium", sans-serif;
}
.app-container > .base .content .view-details ul {
  padding: 0 1rem 0 2rem;
}
.app-container > .base .content .view-details ul li::marker {
  color: var(--appblue);
}
.app-container > .base .content .view-details ol {
  padding: 0 1rem 0 2rem;
}
.app-container > .base .content .view-details ol li::marker {
  color: var(--appblue);
  font-weight: 500;
}
.app-container > .base .content .view-details table {
  width: 100%;
}
.app-container > .base .content .view-details table thead {
  border-bottom: 1px solid var(--applightshadow);
}
.app-container > .base .content .view-details table thead th {
  color: var(--appwhite);
  border: 1px solid var(--clienttexthover);
  font-size: var(--fontsize);
}
.app-container > .base .content .view-details table thead th.admin-actions {
  background: var(--clienttext);
  border: 1px solid var(--clienttext);
}
.app-container > .base .content .view-details table tbody {
  border: 1px solid var(--applightshadow);
}
.app-container > .base .content .view-details table tbody td {
  border: none;
  vertical-align: middle;
}
.app-container > .base .content .view-details table thead th.center,
.app-container > .base .content .view-details table tbody td.center {
  text-align: center;
}
.app-container > .base .content .view-details table tbody td img.store-list {
  max-height: 120px;
}
.app-container > .base .content .view-details table tbody td .tag-item {
  background: var(--clientblue);
  color: var(--appwhite);
  padding: 0.2rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  font-family: "AppFont Bold", sans-serif;
}
.app-container > .base .content .view-details table tbody td .status-1 {
  background: var(--appgreen);
  color: var(--appwhite);
  padding: 0.3rem 0.5rem;
  border-radius: 0.3rem;
}
.app-container > .base .content .view-details table tbody td .status-0 {
  background: var(--appred);
  color: var(--appwhite);
  padding: 0.3rem 0.5rem;
  border-radius: 0.3rem;
}
.app-container > .base .content .view-details table tbody td .status--100 {
  background: var(--applightgrey);
  color: var(--appwhite);
  padding: 0.3rem 0.5rem;
  border-radius: 0.3rem;
}
.app-container > .base .content .view-details table tbody td a.button {
  padding: 0.4rem;
  justify-content: center;
  background: transparent;
  color: var(--appblue);
}
.app-container > .base .content .view-details table tbody td a.button i {
  filter: var(--appblue-filter);
}
.app-container > .base .content .view-details table tbody td a.button:hover {
  background: var(--applightshadow);
}

.app-container > .base .content .view-details table tbody td.zoomable {
  cursor: zoom-in;
}
.app-container > .base .content .view-details table tbody td.zoomable.zoom {
  position: fixed;
  width: 100vw;
  top: 0;
  height: 100vh;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  z-index: 99999;
  max-width: initial;
  border: none;
  cursor: zoom-out;
}
.app-container > .base .content .view-details table tbody td.zoomable.zoom img {
  max-width: 35vw;
  max-height: initial;
  border-radius: 0;
}
.app-container > .base .content .view-details table tbody td.zoomable.zoom p {
  color: var(--appwhite);
}

.app-container > .base .content .view-details table tbody tr:nth-child(even) {
  background-color: var(--appbgcolor);
}
.app-container > .base .content .view-details table tbody td + td {
  border-left: 1px solid var(--applightshadow);
}

.app-container > .base .content .view-details form fieldset {
  padding: 0;
  margin: 1.2rem 0 0;
  border: 0;
}
.app-container > .base .content .view-details form label {
  font-weight: 600;
  font-size: var(--fontsize);
}
.app-container > .base .content .view-details .toggler {
  background-color: var(--appgreen);
  display: flex;
}
.app-container > .base .content .view-details .toggler i {
  filter: invert(1);
}
.app-container > .base .content .view-details form div.complementares {
  transition: 250ms;
}

.app-container > .base .content .view-details form div.complementares.closed {
  display: none;
}

.app-container
  > .base
  .content
  .view-details
  form
  div.tags
  #checkbox-container {
  text-decoration: underline;
  margin: 0 0 0.5rem 0;
}

.app-container
  > .base
  .content
  .view-details
  form
  div.tags
  #checkbox-container:hover {
  cursor: pointer;
  color: var(--appblue-alt);
}

.app-container
  > .base
  .content
  .view-details
  form
  div.tags
  span.checkbox-container {
  display: block;
  font-weight: 400;
  font-size: var(--fontsize);
}
.app-container
  > .base
  .content
  .view-details
  form
  label
  span.checkbox-container.all {
  margin-bottom: 0.3rem;
  color: var(--appred);
  font-style: italic;
}
.app-container > .base .content .view-details form input[type="text"],
.app-container > .base .content .view-details form input[type="email"],
.app-container > .base .content .view-details form input[type="tel"],
.app-container > .base .content .view-details form input[type="password"],
.app-container > .base .content .view-details form select,
.app-container > .base .content .view-details form textarea {
  border: 1px solid var(--appinput-border);
  background-color: var(--appwhite);
  min-width: 320px;
  width: 100%;
}
.app-container > .base .content .view-details form input.invalid-field,
.app-container > .base .content .view-details form select.invalid-field,
.app-container > .base .content .view-details form textarea.invalid-field {
  border: 1px solid var(--appred);
  background-color: var(--appwarn-error-bgcolor);
}

.app-container > .base .content .view-details form .mapsQuery {
  background: var(--clientgreen);
  padding: 1rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--appwhite);
}

.app-container > .base .content .view-details form .mapsQuery span {
  font-family: "AppFont Medium", sans-serif;
}
.app-container > .base .content .view-details form .mapsQuery .queryAddress {
  gap: 0.3rem;
}
.app-container > .base .content .view-details form .mapsQuery a.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.3rem;
  width: 3rem;
  border: 1px solid var(--appinput-border);
}

.app-container > .base .content .view-details form .mapsQuery a.btn i {
  filter: invert(1);
}
.app-container > .base .content .view-details form .mapsQuery a.btn:hover {
  background: var(--clienttext);
  cursor: pointer;
}
.app-container > .base .content .view-details form a.checklocationmaps {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  align-items: center;
}

.app-container > .base .content .view-details form label span.undertext {
  color: var(--clienttexthover);
  font-size: 0.85rem;
  font-style: italic;
}

/*dashboard*/
.app-container > .base .content .view-details .dashboard-statistics {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  margin: 0 auto 3rem;
}

.app-container > .base .content .view-details .dashboard-statistics > div {
  background: var(--clientgreen);
  padding: 1rem;
  border-radius: 1rem;
  color: var(--appwhite);
  display: flex;
  gap: 1rem;
  align-items: center;
}

.app-container > .base .content .view-details .dashboard-statistics > div p {
  font-family: "AppFont Medium", sans-serif;
}

.app-container
  > .base
  .content
  .view-details
  .dashboard-statistics
  > div
  p.units {
  font-size: 2rem;
  line-height: 1rem;
  font-family: "AppFont Bold", sans-serif;
}

.app-container > .base .content div.warning {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 1rem 0 0;
  background: var(--appyellowbackground);
  width: fit-content;
  overflow: hidden;
  border-radius: 0.3rem;
}
.app-container > .base .content div.warning span {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--appyellow);
  padding: 0.2rem;
}
.app-container > .base .content div.warning p {
  font-weight: initial;
  font-size: 0.95rem;
  margin: 0;
  padding: 0 0.5rem;
}

.app-container > .base .content .view-details form label #category-list span {
  font-family: "AppFont", sans-serif;
  font-weight: 300;
}

.app-container > .base .content .view-details form label .sortable-list {
  list-style: none;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.app-container > .base .content .view-details form label .sortable-item {
  padding: 0.6rem 1.2rem;
  background: rgba(37, 63, 182, 0.18);
  border-radius: 0.3rem;
  cursor: grab;
  transition: background 0.2s, transform 0.2s;
}

.app-container > .base .content .view-details form label .sortable-item:hover {
  background: var(--appyellow);
  transform: scale(1.02);
}

.app-container > .base .content .view-details form label .dragging {
  opacity: 0.7;
}

.app-container > .base .content .view-details form label .over {
  border: 2px dashed var(--appyellow);
  background: var(--appyellowbackground);
}

.app-container > .base .content .view-details form .upload-button {
  display: none;
}

.app-container > .base .content .view-details form #fotopreview {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
}

.app-container > .base .content .view-details form #fotopreview #previewimg {
  width: 100%;
}

.app-container > .base .content .view-details form #fotopreview #clearimg {
  color: var(--appred);
  text-decoration: underline;
  display: none;
  cursor: pointer;
}

.app-container > .base .content .view-details form #fotopreview #clearimg.show {
  display: initial;
}

.app-container > .base .content .view-details form #previewimg-size {
  position: absolute;
  left: -20000px;
}

.app-container > .base .content .view-details .warnings {
  margin: 0.8rem 0 0;
  text-align: center;
  max-width: 480px;
  width: 100%;
}

.app-container > .base .content .view-details .warnings span.score-0 {
  background-color: var(--appwarn-error-bgcolor);
  padding: 0.3rem;
}
.app-container > .base .content .view-details .warnings span.score-1 {
  background-color: var(--appwarn-success-bgcolor);
  padding: 0.3rem;
}
.app-container > .base .content .view-details .warnings span.score-0 strong {
  color: var(--appred);
  font-size: 1rem;
}
.app-container > .base .content .view-details .warnings span.score-1 strong {
  color: var(--appblue);
  font-size: 1rem;
}

/*charts*/
.app-container > .base .content .view-details .charts-container {
  justify-content: space-between;
}
.app-container > .base .content .view-details .charts-container div {
  max-width: 320px;
}

.app-container > .base .notification {
  padding: 1rem;
  display: none; /*temporary*/
}
.app-container > .base .notification ul {
  margin: 0;
  padding: 0;
  list-style: none;
  box-shadow: 2px 2px 5px var(--applightshadow);
}
.app-container > .base .notification ul li {
  transition: 200ms;
  color: var(--appgrey);
  padding: 1rem 1.2rem;
  font-weight: 300;
  gap: 1rem;
  justify-content: space-between;
  background: var(--appwhite);
  border-radius: 0.3rem;
  border-left: 0.45rem solid;
  align-items: baseline;
  width: 320px;
  max-width: 380px;
}
.app-container > .base .notification ul li .message .title {
  font-weight: 500;
}
.app-container > .base .notification ul li.severity-0 {
  border-left: 0.45rem solid var(--appblue);
}
.app-container > .base .notification ul li.severity-1 {
  border-left: 0.45rem solid var(--appyellow);
}
.app-container > .base .notification ul li.severity-2 {
  border-left: 0.45rem solid var(--apporange);
}
.app-container > .base .notification ul li.severity-3 {
  border-left: 0.45rem solid var(--appred);
}

.app-container > .base .notification ul li a,
.app-container > .base .notification ul li a:visited {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border: 1px solid var(--appred);
  border-radius: 0.3rem;
  transition: 200ms;
}

.app-container > .base .notification ul li a:hover,
.app-container > .base .notification ul li a:active,
.app-container > .base .notification ul li a:focus-within {
  background-color: var(--appred);
  cursor: pointer;
}

.app-container > .base .notification ul li a i.close {
  filter: var(--appred-filter);
  zoom: 0.8;
}
.app-container > .base .notification ul li a:hover i.close,
.app-container > .base .notification ul li a:active i.close,
.app-container > .base .notification ul li a:focus-within i.close {
  filter: invert(1);
}

.app-container > .bottom {
  color: var(--applightgrey);
  width: 100%;
  justify-content: center;
  font-size: 0.9rem;
  height: 100%;
  align-items: flex-end;
  padding: 1rem;
}

/* pager */
.app-container > .base .content .view-details #content-pager {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  padding: 1rem 0;
  align-items: center;
}
.app-container > .base .content .view-details #content-pager .description span {
  color: var(--appblue);
  font-weight: 500;
}
.app-container > .base .content .view-details #content-pager a {
  display: flex;
}
.app-container > .base .content .view-details #content-pager .first i {
  background: url(../image/svg/first-page.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}
.app-container > .base .content .view-details #content-pager .prev i {
  background: url(../image/svg/chevron-left.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}
.app-container > .base .content .view-details #content-pager .next i {
  background: url(../image/svg/chevron-right.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}
.app-container > .base .content .view-details #content-pager .last i {
  background: url(../image/svg/last-page.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}

/* icons */
i.close {
  background: url(../image/svg/close.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}
i.home {
  background: url(../image/svg/home.svg);
  width: 24px;
  height: 24px;
  zoom: 1.3;
}
i.manage-users {
  background: url(../image/svg/manage-users.svg);
  width: 24px;
  height: 24px;
  zoom: 1.3;
}
i.user-details {
  background: url(../image/svg/user-details.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}
i.manage-logs {
  background: url(../image/svg/manage-logs.svg);
  width: 24px;
  height: 24px;
  zoom: 1.3;
}
i.profile {
  background: url(../image/svg/profile.svg);
  width: 24px;
  height: 24px;
  zoom: 1.3;
}
i.store {
  background: url(../image/svg/store.svg);
  width: 24px;
  height: 24px;
  zoom: 1.3;
}
i.tag {
  background: url(../image/svg/tag.svg);
  width: 24px;
  height: 24px;
  zoom: 1.3;
}
i.category {
  background: url(../image/svg/category.svg);
  width: 24px;
  height: 24px;
  zoom: 1.3;
}
i.logout {
  background: url(../image/svg/logout.svg);
  width: 24px;
  height: 24px;
  zoom: 1.3;
}
i.add {
  background: url(../image/svg/add.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}
i.edit {
  background: url(../image/svg/edit.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}
i.search {
  background: url(../image/svg/search.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}
i.details {
  background: url(../image/svg/details.svg);
  width: 24px;
  height: 29px;
  zoom: 1;
}
i.save {
  background: url(../image/svg/save.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}
i.delete {
  background: url(../image/svg/delete.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}
i.reorder-list {
  background: url(../image/svg/ordered-list.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}
i.add-picture {
  background: url(../image/svg/add-picture.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}
i.add-file {
  background: url(../image/svg/add-file.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}
i.warning {
  background: url(../image/svg/warning.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}
i.chevron-down {
  background: url(../image/svg/chevron-down.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}
i.chevron-up {
  background: url(../image/svg/chevron-up.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}

/* popMessage & askConfirm */

.popMessage,
.askConfirm {
  position: fixed;
  width: 100vw;
  top: 0;
  height: 100vh;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  z-index: 99999;
}

.popMessage .flexed,
.askConfirm .flexed {
  max-width: 580px;
  min-width: 320px;
  background-color: var(--appwhite);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
  margin: 1rem;
}

.popMessage .flexed p.title,
.askConfirm .flexed p.title {
  background: var(--appblue);
  color: var(--appwhite);
  font-size: 1.3rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  margin: 0;
  text-align: center;
  width: 100%;
}

.popMessage.score-0 .flexed p.title,
.askConfirm.score-0 .flexed p.title {
  background: var(--appred);
}

.popMessage .flexed p,
.askConfirm .flexed p {
  color: var(--color);
  font-size: 1rem;
  width: 100%;
  padding: 0 1rem 0.7rem 1rem;
  text-align: center;
}

.askConfirm .flexed .ctl {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  gap: 1rem;
}

.popMessage .flexed button,
.askConfirm .flexed button {
  border-radius: 10rem;
  border: 1px solid var(--appblue);
  background: var(--appblue);
  padding: 0.5rem 2rem;
  font-weight: 500;
  font-size: 1rem;
  max-width: fit-content;
  color: var(--appwhite);
  cursor: pointer;
  transition: 200ms;
  letter-spacing: 0.2rem;
  margin: 0 0 1rem;
}
.popMessage .flexed button:hover,
.askConfirm .flexed button:hover {
  background: transparent;
  color: var(--appblue);
}

.popMessage.score-0 .flexed button,
.askConfirm .flexed button.cancel {
  border: 1px solid var(--appred);
  background: var(--appred);
}
.popMessage.score-0 .flexed button:hover,
.askConfirm .flexed button.cancel:hover {
  background: transparent;
  color: var(--appred);
}

/*login*/

.login {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  gap: 1.5rem;
}

.login .box {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}

.login img.logo {
  max-width: 320px;
  width: 100%;
}
.login .warnings {
  margin: 2rem 1rem 1rem;
  max-width: 600px;
}
.login .warnings span {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.login .warnings span strong {
  font-size: 1.1rem;
  color: var(--clientgreen);
}

.login .login-entry {
  max-width: 320px;
  width: 100%;
  padding: 1.2rem;
  background: var(--clienttext);
  border-radius: 1rem;
  box-shadow: 2px 2px 5px var(--appblackshadow);
  gap: 0.5rem;
}

.login .login-entry h1 {
  font-size: 1.8rem;
  color: var(--appwhite);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.login .login-entry h3 {
  margin: 1rem 0 0;
  font-weight: 600;
  color: var(--appgrey);
}

.login .login-entry h1 i.authentication {
  background: url(../image/svg/authentication.svg);
  width: 24px;
  height: 24px;
  zoom: 2;
  filter: var(--clientgreen-filter);
}

.login .login-entry h1 i.access-recovery {
  background: url(../image/svg/access-recovery.svg);
  width: 24px;
  height: 24px;
  zoom: 2;
  filter: var(--clientgreen-filter);
}

.login .login-entry p {
  text-align: justify;
  margin: 0.3rem 0;
}
.login .login-entry a {
  color: var(--applightergrey);
  font-size: 0.95rem;
  text-decoration: underline;
  transition: 250ms;
  width: max-content;
}
.login .login-entry a:hover,
.login .login-entry a:focus {
  color: var(--appwhite);
}
.login .login-entry form button {
  display: flex;
  padding: 0.7rem 1.8rem;
  gap: 0.4rem;
  transition: 200ms;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--clienttext);
  border-radius: 5rem;
  color: var(--appwhite);
  align-items: center;
  max-width: fit-content;
  margin: 0 0 0 auto;
}
.login .login-entry form button i.done {
  filter: invert(1);
  background: url(../image/svg/done.svg);
  width: 24px;
  height: 24px;
  zoom: 1;
}
.login .login-entry form button:hover {
  background: var(--clienttexthover);
  cursor: pointer;
}

/*recovery and update pwd */
.login.recovery p {
  color: var(--appwhite);
}

/* Extra Small Screens (Mobile) */
@media only screen and (max-width: 576px) {
  /* CSS rules specific for extra small screens */
  .app-container .base .menu {
    display: none;
  }
  .app-container .content .list-container {
    flex-direction: column-reverse;
  }
  .app-container .content .view-details {
    flex-direction: column;
  }
  .app-container > .top {
    flex-direction: column;
  }
  .app-container > .top .right {
    align-items: center;
  }
  .app-container > .base {
    flex-direction: column;
  }
  .app-container .base .menu {
    width: 100%;
  }
  .app-container > .base .menu ul {
    align-items: center;
    gap: 0.3rem;
  }
  .app-container > .base .menu ul li a {
    width: max-content;
    align-items: flex-end;
  }
  .app-container > .bottom {
    text-align: center;
  }

  .app-container > .base .content h1.view-title {
    text-align: center;
  }
  .app-container > .base .content .view-details {
    text-align: center;
  }

  .app-container > .base .content #content-shortcuts {
    display: none;
  }

  .app-container > .base .content .view-details form input[type="text"],
  .app-container > .base .content .view-details form input[type="email"],
  .app-container > .base .content .view-details form input[type="tel"],
  .app-container > .base .content .view-details form input[type="password"],
  .app-container > .base .content .view-details form select,
  .app-container > .base .content .view-details form textarea {
    min-width: 100%;
  }

  .app-container > .base .content a.button.fit {
    margin: 0 auto;
  }
  .app-container > .base .content .view-controls {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }

  .app-container > .base .content .view-controls .left {
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }

  .app-container > .base .content a.button {
    max-width: fit-content;
  }

  .app-container > .base .content .view-details .charts-container {
    flex-direction: column;
    gap: 0;
  }

  .app-container > .base .content .view-details ol {
    width: fit-content;
    margin: 0 auto;
  }

  .app-container > .base .content .view-details ol {
    margin-top: 1.5rem;
  }

  .app-container > .base .content .out {
    display: none !important;
  }

  .app-container > .base .content .view-details table th,
  .app-container > .base .content .view-details table td {
    padding: 0.4rem;
  }

  .login {
    gap: 0.5rem;
  }

  .login .box {
    flex-direction: column;
    gap: 1.5rem;
  }

  .login img.logo {
    max-width: 260px;
  }

  .login .warnings {
    margin: 1rem;
  }

  form {
    row-gap: 1rem;
  }

  .app-container > .base .content .view-details .dashboard-statistics {
    flex-direction: column;
    gap: 0.4rem;
    margin: 0 auto 1.6rem;
  }
  .app-container > .base .content .view-details .dashboard-statistics > div {
    padding: 0 1rem;
    width: 100%;
    justify-content: center;
  }
  .app-container
    > .base
    .content
    .view-details
    .dashboard-statistics
    > div
    p.units {
    font-size: 1.3rem;
  }

  .app-container > .top .right .info {
    display: none;
  }

  .app-container > .base .content h1.view-title {
    font-size: 1.8rem;
  }
  .app-container > .base .content .view-details h2 {
    font-size: 1.5rem;
  }

  .app-container > .base .content .view-controls a.button:only-child {
    margin: 0;
  }

  .app-container > .base .content .screen {
    flex-direction: column-reverse;
  }
  .app-container > .base .content .searchbox {
    max-width: 100%;
    width: 100%;
    text-align: center;
  }
  .app-container > .base .content .searchbox span.title {
    text-align: center;
  }

  .app-container > .base .content .view-details table tbody td,
  .app-container > .base .content .view-details table tbody th {
    text-wrap: wrap !important;
  }

  .app-container > .base .content .view-details table tbody td.breakable {
    word-break: break-all !important;
  }

  .app-container > .base .content .view-details #content-pager {
    justify-content: center;
  }

  .app-container > .base .content .view-details form .flex-gap-4rem {
    flex-direction: column;
    gap: 0.5rem;
  }
  .app-container
    > .base
    .content
    .view-details
    form
    .queryAddress
    [type="text"] {
    min-width: auto;
  }
  .app-container > .base .content .view-details form button {
    margin: 1rem auto 0;
  }
}

/* Small Screens (Tablets) */
@media only screen and (min-width: 577px) and (max-width: 768px) {
  /* CSS rules specific for small screens */
  .app-container .base .menu {
    display: none;
  }
  .app-container .content .list-container {
    flex-direction: column-reverse;
  }
  .app-container .content .view-details {
    flex-direction: column;
  }
  .login .box {
    flex-direction: column;
  }
}

/* Medium Screens (Large Tablets) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  /* CSS rules specific for medium screens */
  .app-container .base .menu {
    display: none;
  }
  .app-container .content .list-container {
    flex-direction: column-reverse;
  }
}

/* Large Screens (Desktops) */
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
  /* CSS rules specific for large screens */
}

/* Extra Large Screens (Large Desktops) */
@media only screen and (min-width: 1441px) {
  /* CSS rules specific for extra large screens */
}