/* [next]/internal/font/google/geist_a71539c9.module.css [app-client] (css) */
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/fef07dbb0973bf53-s.518e079e.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/8a480f0b521d4e75-s.ea323500.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/53b9e256198e5412-s.853d50a3.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/7178b3e590c64307-s.55554cd0.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/caa3a2e1cccd8315-s.p.3b6cae6d.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Geist Fallback;
  src: local(Arial);
  ascent-override: 95.94%;
  descent-override: 28.16%;
  line-gap-override: 0.0%;
  size-adjust: 104.76%;
}

.geist_a71539c9-module__T19VSG__className {
  font-family: Geist, Geist Fallback;
  font-style: normal;
}

.geist_a71539c9-module__T19VSG__variable {
  --font-geist-sans: "Geist", "Geist Fallback";
}

/* [next]/internal/font/google/geist_mono_8d43a2aa.module.css [app-client] (css) */
@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/5ce348bf30bf5439-s.ebceb24d.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/4fa387ec64143e14-s.c36e1862.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/6306c77e7c8268e4-s.ff4a2084.woff2") format("woff2");
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/7d817b4c03b0c5f1-s.f377b9c4.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/bbc41e54d2fcbd21-s.d1207556.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/797e433ab948586e-s.p.479bea2b.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Geist Mono Fallback;
  src: local(Arial);
  ascent-override: 74.67%;
  descent-override: 21.92%;
  line-gap-override: 0.0%;
  size-adjust: 134.59%;
}

.geist_mono_8d43a2aa-module__8Li5zG__className {
  font-family: Geist Mono, Geist Mono Fallback;
  font-style: normal;
}

.geist_mono_8d43a2aa-module__8Li5zG__variable {
  --font-geist-mono: "Geist Mono", "Geist Mono Fallback";
}

/* [project]/src/css/base.css [app-client] (css) */


/* [project]/src/css/variable.css [app-client] (css) */
:root {
  --mobile-breakpoint: 900px;
  --web-breakpoint: 1440px;
  --sidebar-width: 230px;
  --header-height: 60px;
  --main-bg-color: #f3f4f6;
  --white-bg: #fff;
  --light-blue-bg: #e8f1ff;
  --green-bg: #d1f0d7;
  --droplist-bg: #f8f8f8;
  --inactive-bg: #ffeae5;
  --pending-bg: #f2f4f6;
  --slider-inactive-bg: #999ca0;
  --progress-bg: #fff5d4;
  --status-blue-bg: rgba(201, 223, 255, .5);
  --orange-bg: #f5dfc3;
  --grey-bg: #e9e9e9;
  --red-bg: #f8eded;
  --font-color: #333;
  --font-light-color: #8b98aa;
  --font-blue-color: #0b5dd8;
  --font-sub-text: #999;
  --font-green: #2fa75f;
  --font-red: #e75a5a;
  --font-grey: #555;
  --progress-text: #db9211;
  --sub-text: #777;
  --dot-bg: #d9d9d9;
  --light-blue-text: #b0b9c7;
  --font-dark: #4d4d40;
  --white-hover: #f5f5f5;
  --row-hover: rgba(255, 255, 255, .3);
  --line-color: #ddd;
  --table-border-line: #fafafa;
  --light-border: #eee;
  --search-border: #eaeaea;
  --orange-border: #d36900;
  --red: #ed6c6c;
  --green: #20a46c;
  --grey: #999;
  --dark-grey: #283e6a;
  --white: #fff;
  --yellow: #ffe18e;
  --dark-yellow: #f2c024;
  --body-color: #f2f4f6;
  --link-color: #0170ff;
  --email-color: #39b5ff;
  --input-border-color: #e9ecf1;
  --menu-active-color: #2c406e;
  --menu-color: #a1b1cf;
  --form-header-color: #32383f;
  --title-color: #2c406e;
  --section-background: #fff;
  --primary-button-background: #ffe18e;
  --primary-button-color: #2c406e;
  --danger-button-background: #ed6c6c;
  --danger-button-color: #fff;
  --label-color: #8f9eb8;
  --input-value-color: #2c406e;
  --input-placeholder-color: #ccc;
  --checkbox-checkmark-width: 60px;
}

/* [project]/src/css/component.css [app-client] (css) */
.header-wrapper {
  background-color: var(--white-bg);
  z-index: 30;
  border-radius: 12px;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  padding: 15px 20px;
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  box-shadow: 0 0 9px rgba(212, 212, 212, .63);
}

.header-wrapper .header-mobile-wrapper {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.header-wrapper .header-mobile-wrapper .header-mobile-left {
  z-index: 70;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  display: flex;
}

.header-wrapper .header-mobile-wrapper .header-mobile-left img {
  cursor: pointer;
}

.header-wrapper .header-mobile-wrapper img {
  cursor: pointer;
}

.header-wrapper .header-web-wrapper {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.header-wrapper .header-web-wrapper .header-web-title {
  color: var(--font-color);
  font-size: 1.5em;
  font-weight: 600;
}

.header-wrapper .header-web-wrapper .header-web-right {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  display: flex;
}

.pagination-wrapper {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
  display: flex;
}

.not-authorized-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  font-size: 1.2em;
  font-weight: 600;
  display: flex;
}

.header-mobile-title {
  color: var(--font-color);
  font-size: 1.2em;
  font-weight: 600;
}

.header-more-menu-button {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  flex-direction: column;
  justify-content: end;
  align-items: end;
  gap: 10px;
  display: flex;
  position: relative;
}

.header-more-menu {
  background-color: var(--white-bg);
  cursor: pointer;
  width: 95%;
  color: var(--font-color);
  border-radius: 5px;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  font-size: .8em;
  font-weight: 500;
  display: flex;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  box-shadow: 0 0 9px rgba(212, 212, 212, .63);
}

.no-device-found {
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  font-size: .8em;
  font-weight: 500;
  display: flex;
}

.action-mobile {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  flex-direction: row;
  gap: 5px;
  display: flex;
}

.action-mobile .edit-icon-wrapper {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
}

.action-mobile .edit-icon-wrapper img {
  width: 15px;
  height: 15px;
}

.action-mobile .delete-icon-wrapper {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
}

.action-mobile .delete-icon-wrapper img {
  width: 15px;
  height: 15px;
}

.more-actions-dropdown {
  z-index: 10;
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.login-page {
  background-color: var(--main-bg-color);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
}

#login-popup {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

#login-popup .logo-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

#login-popup #login-form {
  background-color: var(--white-bg);
  border: 1px solid var(--line-color);
  border-radius: 12px;
  flex-direction: column;
  gap: 1rem;
  width: 300px;
  padding: 2rem;
  display: flex;
}

#login-popup #login-form .login-form-title {
  color: var(--font-color);
  text-align: center;
  font-size: 1.2em;
  font-weight: 600;
}

#login-popup #login-form input {
  border: 1px solid var(--line-color);
  color: var(--text-color);
  background-color: #fff;
  border-radius: 8px;
  width: 95.4%;
  padding: .75rem 0 .75rem .75rem;
  font-size: .8rem;
}

#login-popup #login-form input:focus {
  outline: none;
}

#login-popup #login-form button {
  background-color: var(--font-blue-color);
  color: #ecdfcc;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: .75rem;
  font-weight: bold;
}

#login-popup #login-form .error-message {
  color: #f66;
  text-align: center;
  margin-top: 5px;
  font-size: .7rem;
}

#login-popup #login-form .forgot-password-link {
  color: var(--font-sub-text);
  text-align: right;
  margin-top: -.9rem;
  font-size: .7rem;
  text-decoration: none;
}

.overlay {
  background-color: rgba(0, 0, 0, .5);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.menubar-container {
  background-color: var(--white-bg);
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
  padding: 15px;
  display: flex;
  position: relative;
}

@media screen and (max-width: 900px) {
  .menubar-container {
    width: -moz-fit-content;
    width: fit-content;
  }
}

.menubar-container .menubar-top {
  flex-direction: row;
  gap: 5px;
  display: flex;
}

.menubar-container .menubar-top .menubar-top-logo .logo-img {
  width: 40px;
  height: 40px;
}

.menubar-container .menubar-top .menubar-top-text {
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  display: flex;
}

.menubar-container .menubar-top .menubar-top-text .menubar-top-title {
  font-size: .7em;
}

.menubar-container .menubar-top .menubar-top-text .menubar-top-subtitle {
  font-size: .9em;
  font-weight: 900;
}

.menubar-container .menubar-content {
  scrollbar-width: none;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 24px 0;
  display: flex;
  overflow-y: scroll;
}

.menubar-container .menubar-content .menubar-items {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.menubar-container .menubar-content .menubar-item .menubar-title-item-wrapper {
  cursor: pointer;
  border-radius: 9px;
  flex-direction: row;
  gap: 10px;
  padding: 9px;
  text-decoration: none;
  display: flex;
}

.menubar-container .menubar-content .menubar-item .menubar-title-item-wrapper .item-icon .icon-img {
  width: 15px;
  height: 15px;
}

.menubar-container .menubar-content .menubar-item .menubar-title-item-wrapper .menubar-title-item {
  color: var(--font-light-color);
  font-size: .8em;
  font-weight: 500;
  text-decoration: none;
}

.menubar-container .menubar-content .menubar-item .menubar-title-item-wrapper .menubar-selected-title {
  color: var(--font-blue-color);
  font-weight: 600;
}

.menubar-container .menubar-content .menubar-item .menu-selected {
  background-color: var(--light-blue-bg);
}

.menubar-container .menubar-content .menubar-item .menubar-subItem {
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding-top: 10px;
  padding-left: 30px;
  display: flex;
}

.menubar-container .menubar-content .menubar-item .menubar-subItem .subItem {
  color: var(--font-light-color);
  padding: 10px 0;
  font-size: .8em;
  text-decoration: none;
}

.menubar-container .menubar-content .menubar-item .menubar-subItem .subMenu-selected {
  color: var(--font-blue-color);
  font-weight: 600;
}

.menubar-container .menubar-admin {
  background-color: var(--white-bg);
  flex-direction: column;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  bottom: 12px;
}

.menubar-container .menubar-admin .menubar-line-admin {
  border: .6px solid var(--line-color);
  width: 100%;
}

.menubar-container .menubar-admin .menubar-details-admin {
  flex-direction: row;
  padding-top: 10px;
  display: flex;
}

.menubar-container .menubar-admin .menubar-details-admin .menubar-profile-admin {
  object-fit: cover;
  border-radius: 9999px;
  width: 30px;
  height: 30px;
}

.menubar-container .menubar-admin .menubar-details-admin .menubar-profile-admin .admin-dp {
  object-fit: cover;
  border-radius: 9999px;
  width: 100%;
  height: 100%;
}

.menubar-container .menubar-admin .menubar-details-admin .menubar-text-admin {
  flex-direction: column;
  gap: 5px;
  padding-left: 10px;
  display: flex;
}

.menubar-container .menubar-admin .menubar-details-admin .menubar-text-admin .menubar-name-admin {
  text-underline-offset: 3.5px;
  text-decoration: underline;
  -webkit-text-decoration-color: var(--font-blue-color);
  text-decoration-color: var(--font-blue-color);
  font-size: .9em;
  font-weight: 500;
}

.menubar-container .menubar-admin .menubar-details-admin .menubar-text-admin .menubar-name-admin a {
  text-decoration: none;
  color: var(--font-blue-color) !important;
}

.menubar-container .menubar-admin .menubar-details-admin .menubar-text-admin .menubar-status-admin {
  font-size: .8em;
}

.menubar-container .menubar-admin .menubar-details-admin .logout-btn {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  padding-left: 40px;
}

.table-container {
  position: relative;
  overflow-y: auto;
}

.table-container table {
  border-collapse: collapse;
  padding: 0 20px;
}

.table-container table thead {
  z-index: 2;
  box-shadow: 0 1px 0 var(--table-header-border-color);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.selected-index {
  background-color: var(--white-hover) !important;
}

table.table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}

table.table thead.table-header tr.table-header-row {
  border-bottom: 2px solid var(--table-border-line);
}

table.table thead.table-header tr.table-header-row th.table-header-data {
  z-index: 2;
  color: #999;
  text-align: left;
  background-color: #fff;
  padding: .8rem 1.3rem;
  font-size: .8em;
  font-weight: 500;
}

table.table thead.table-header tr.table-header-row th.table-header-data div.draggable-header span.column-name {
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  display: flex;
}

table.table tbody.table-body tr.table-body-row {
  background-color: var(--white-bg);
  border-bottom: 2px solid var(--table-border-line);
  transition: all .5s;
}

table.table tbody.table-body tr.table-body-row td.table-body-data {
  color: var(--font-color);
  border-bottom: var(--table-border-line);
  padding: 1.5rem;
  font-size: .8rem;
  line-height: 1.4;
}

table.table tbody.table-body tr.table-body-row:hover {
  background: rgba(255, 255, 255, .3);
}

table.table tbody.table-body::-webkit-scrollbar {
  width: 8px;
}

table.table tbody.table-body::-webkit-scrollbar-track {
  background: none;
}

table.table tbody.table-body::-webkit-scrollbar-thumb {
  background-color: #333;
  border-radius: 4px;
}

table.table-scroll .table-header-row .table-header-data {
  border-bottom: 1px solid #f6f7f9;
  box-shadow: 0 15px 25px -15px rgba(44, 64, 110, .03);
}

.action {
  flex-direction: row;
  gap: 10px;
  display: flex;
  position: relative;
}

.action .edit-icon-wrapper {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
}

.action .delete-icon-wrapper {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
}

.category-name-and-img {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  display: flex;
}

.stats-container {
  background-color: var(--white-bg);
  border-radius: 12px;
  flex-direction: column;
  min-height: 200px;
  padding: 15px 20px;
  display: flex;
}

@media screen and (max-width: 900px) {
  .stats-container {
    background-color: rgba(0, 0, 0, 0) !important;
    padding: 0 !important;
  }
}

.stats-container .no-data-available {
  color: var(--font-sub-text);
  margin: 50px auto;
  font-size: .9em;
}

.stats-container .stats-top-row {
  flex-direction: row;
  justify-content: space-between;
  padding: 0 0 15px;
  display: flex;
}

@media screen and (max-width: 900px) {
  .stats-container .stats-top-row {
    display: none !important;
  }
}

.stats-container .stats-top-row .stats-title {
  font-size: 1.1em;
  font-weight: 600;
}

.stats-container .stats-top-row .stats-right {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  display: flex;
}

.stats-container .stats-top-row .stats-right .manage-cards-and-droplist {
  position: relative;
}

.stats-container .stats-top-row .stats-right .manage-cards-and-droplist .manage-cards {
  color: var(--font-blue-color);
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  font-weight: 450;
  text-decoration: underline;
  display: flex;
}

.stats-container .stats-top-row .stats-right .manage-cards-and-droplist .manage-cards:hover {
  font-weight: 480;
  transition: all .5s;
}

.stats-container .stats-top-row .stats-right .date-input-wrapper .date-range .date-droplist-wrapper .droplist-btn {
  background-color: var(--droplist-bg);
  color: var(--font-blue-color);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  display: flex;
}

.stats-container .stats-cards-wrapper {
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  display: flex;
}

@media screen and (max-width: 900px) {
  .stats-container .stats-cards-wrapper {
    flex-direction: column !important;
  }
}

.stats-container .stats-cards-wrapper .stats-card {
  border: 1px solid var(--light-border);
  white-space: nowrap;
  cursor: pointer;
  border-radius: 12px;
  flex-direction: column;
  flex: 1;
  gap: 20px;
  padding: 16px;
  display: inline-flex;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-top {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-top .stats-card-top-left {
  flex-direction: row;
  align-items: center;
  gap: 5px;
  display: flex;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-top .stats-card-top-left .main-label {
  color: var(--font-color);
  font-size: .9em;
  font-weight: 600;
}

@media screen and (max-width: 900px) {
  .stats-container .stats-cards-wrapper .stats-card .stats-card-top .stats-card-top-left .main-label {
    font-size: .8em !important;
  }
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-top .stats-card-top-left .main-status {
  border-radius: 10px;
  padding: 4px 8px;
  font-size: .6em;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-top .stats-card-top-left .green {
  background-color: var(--white-bg);
  color: var(--font-green);
  border: 1px solid var(--font-green);
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-top .stats-card-top-left .orange {
  background-color: var(--white-bg);
  color: var(--orange-border);
  border: 1px solid var(--orange-border);
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-top .stats-card-top-left .red {
  background-color: var(--white-bg);
  color: var(--font-red);
  border: 1px solid var(--font-red);
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-top .stats-card-top-right {
  flex-direction: row;
  gap: 5px;
  display: flex;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-top .stats-card-top-right .time-stamp {
  color: var(--font-color);
  font-size: .6em;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-content {
  flex-direction: row;
  gap: 35px;
  display: flex;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-content .stats-card-left {
  flex-direction: column;
  justify-content: center;
  row-gap: 23px;
  margin: 27px 0 0 5px;
  display: flex;
}

@media screen and (max-width: 900px) {
  .stats-container .stats-cards-wrapper .stats-card .stats-card-content .stats-card-left {
    row-gap: 12px;
    margin: 24px 0 0 5px !important;
  }
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-content .stats-card-left .label {
  color: var(--font-color);
  font-size: .7em;
  font-weight: 500;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-content .stats-card-middle {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-content .stats-card-middle .axis-name {
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-content .stats-card-middle .axis-name .tx {
  font-size: .7em;
  font-weight: 350;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-content .stats-card-middle .battery-value {
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-content .stats-card-middle .temp-value {
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-content .value {
  font-size: 1.3em;
  font-weight: 600;
}

@media screen and (max-width: 900px) {
  .stats-container .stats-cards-wrapper .stats-card .stats-card-content .value {
    font-size: .9em !important;
  }
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-content .stats-card-right {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-content .stats-card-right .axis-name {
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-content .stats-card-right .axis-name .rx {
  font-size: .7em;
  font-weight: 350;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-content .stats-card-right .battery-value {
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-content .stats-card-right .battery-value .rx-value {
  font-size: 1.3em;
  font-weight: 900;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-content .stats-card-right .temp-value {
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

.stats-container .stats-cards-wrapper .stats-card .stats-card-content .stats-card-right .temp-value .rx-value {
  font-size: 1.3em;
  font-weight: 900;
}

.stats-container .stats-cards-wrapper .green {
  background-color: var(--green-bg);
}

.stats-container .stats-cards-wrapper .green.selected {
  border: 2px solid #2fa75f;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .145);
}

.stats-container .stats-cards-wrapper .orange {
  background-color: var(--orange-bg);
}

.stats-container .stats-cards-wrapper .orange.selected {
  border: 2px solid #d36900;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .145);
}

.stats-container .stats-cards-wrapper .grey {
  background-color: var(--grey-bg);
}

.stats-container .stats-cards-wrapper .grey.selected {
  border: 2px solid #6e6e6e;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .145);
}

.delete-text-wrapper {
  flex-direction: column;
  gap: 25px;
  padding: 0 20px 25px;
  display: flex;
}

.delete-text-wrapper .delete-text {
  color: var(--font-sub-text);
  font-size: .8em;
}

.delete-text-wrapper .delete-action-btn {
  flex-direction: row;
  justify-content: end;
  gap: 10px;
  display: flex;
}

dialog.delete-modal {
  width: 90vw;
  max-width: 500px;
  color: var(--text-color);
  z-index: 1000;
  background: #fff;
  border: none;
  border-radius: 10px;
  flex-direction: column;
  margin: auto;
  padding: 0;
  display: flex;
  position: relative;
}

dialog.delete-modal::backdrop {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background-color: rgba(0, 0, 0, .5);
}

dialog.delete-modal .delete-modal-content {
  flex-direction: column;
  padding: 0;
  display: flex;
}

dialog.delete-modal .delete-modal-content .delete-modal-header {
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  padding: 15px 25px;
  display: flex;
  position: relative;
}

dialog.delete-modal .delete-modal-content .delete-modal-header h2 {
  color: var(--text-color);
  margin: 0;
  font-size: 1.2em;
  font-weight: 600;
}

dialog.delete-modal .delete-modal-content .delete-modal-header .delete-modal-close {
  cursor: pointer;
  background: none;
  border: none;
  padding: 5px;
}

dialog.delete-modal .delete-modal-content .delete-modal-header .delete-modal-close img {
  width: 10px;
  height: 10px;
}

dialog.delete-modal .delete-modal-content .delete-modal-header .delete-modal-close:hover {
  opacity: .7;
}

dialog.delete-modal .delete-modal-content .delete-modal-body {
  padding: 25px;
}

dialog.delete-modal .delete-modal-content .delete-modal-body p {
  color: var(--font-sub-text);
  margin: 0;
  font-size: .9em;
  font-weight: 300;
  line-height: 1.5;
}

dialog.delete-modal .delete-modal-content .delete-modal-footer {
  border-top: 1px solid #eee;
  flex-direction: row;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 25px;
  display: flex;
}

dialog.delete-modal .delete-modal-content .delete-modal-footer .delete-modal-btn-cancel {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  min-width: 80px;
  padding: 7px 10px;
  font-size: .9em;
  font-weight: 600;
  transition: all .2s;
}

dialog.delete-modal .delete-modal-content .delete-modal-footer .delete-modal-btn-cancel:hover {
  opacity: .9;
}

dialog.delete-modal .delete-modal-content .delete-modal-footer .delete-modal-btn-cancel:active {
  transform: scale(.98);
}

dialog.delete-modal .delete-modal-content .delete-modal-footer .delete-modal-btn-confirm {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  min-width: 80px;
  padding: 7px 10px;
  font-size: .9em;
  font-weight: 600;
  transition: all .2s;
}

dialog.delete-modal .delete-modal-content .delete-modal-footer .delete-modal-btn-confirm:hover {
  opacity: .9;
}

dialog.delete-modal .delete-modal-content .delete-modal-footer .delete-modal-btn-confirm:active {
  transform: scale(.98);
}

dialog.delete-modal .delete-modal-content .delete-modal-footer .delete-modal-btn-cancel {
  color: var(--font-blue-color);
  border: 1px solid var(--font-blue-color);
  background-color: rgba(0, 0, 0, 0);
}

dialog.delete-modal .delete-modal-content .delete-modal-footer .delete-modal-btn-cancel:hover {
  opacity: .7;
}

dialog.delete-modal .delete-modal-content .delete-modal-footer .delete-modal-btn-confirm {
  background-color: var(--font-red);
  color: var(--white-bg);
}

dialog.delete-modal .delete-modal-content .delete-modal-footer .delete-modal-btn-confirm:hover {
  opacity: .7;
}

dialog.modal {
  max-width: 90vw;
  max-height: 50vh;
  color: var(--text-color);
  z-index: 10;
  scrollbar-width: none;
  background: #fff;
  border: none;
  border-radius: 10px;
  flex-direction: column;
  margin: auto;
  padding: 0;
  display: flex;
  position: relative;
  overflow-y: auto;
}

dialog.modal::backdrop {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background-color: rgba(0, 0, 0, .5);
}

dialog.modal .header {
  justify-content: space-between;
  align-items: center;
  padding: 0 25px;
  display: flex;
  position: relative;
}

dialog.modal .header h2 {
  color: var(--text-color);
  font-size: 1.05em;
  font-weight: 600;
}

dialog.modal .header button.close-button {
  cursor: pointer;
  background: none;
  border: none;
}

dialog.modal .header button.close-button img.modal-close {
  width: 10px;
}

dialog.modal .body {
  padding: 15px 30px 40px;
}

dialog.modal .footer {
  border-top: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  padding: 20px 50px;
  display: flex;
}

label.error-label {
  color: var(--font-red);
  font-size: .7em;
  font-weight: 600;
}

.input-element-wrapper.error, .date-input.error, .select-field-inner .select-box.error, textarea.input-element.error, .time-input-display.error {
  border: 1px solid var(--font-red);
  border-radius: 8px;
}

.success-message, .error-message {
  letter-spacing: .01em;
  font-size: .9em;
  display: inline-block;
}

.read-state-value {
  color: var(--input-value-color);
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 500;
}

.input-display-text {
  color: #2c406e;
  font-size: 1.07em;
}

.success-message {
  color: var(--font-green);
}

.error-message {
  color: var(--font-red);
  font-size: .7em;
  font-weight: 500;
}

.date-rangeInput-wrapper {
  flex-direction: row;
  gap: 10px;
  display: flex;
}

.date-rangeInput-wrapper .date-field {
  flex-direction: row;
  width: 100%;
  display: flex;
}

.date-rangeInput-wrapper .date-input-btn {
  border: 1px solid var(--search-border);
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  width: 110px;
  padding: 6px 7px;
  transition: all .5s;
  display: flex;
}

.date-rangeInput-wrapper .date-input-btn .date-input {
  width: 100%;
}

.date-rangeInput-wrapper .date-input-btn .date-input .date-label {
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

.date-rangeInput-wrapper .date-input-btn .date-input .date-label .placeholder {
  color: var(--font-sub-text);
  font-size: .64em;
}

.date-rangeInput-wrapper .date-input-btn .date-input .date-label .readable-date {
  color: var(--font-sub-text);
  font-size: .7em;
}

.date-rangeInput-wrapper .date-input-btn .from-to {
  font-size: .7em;
}

.date-rangeInput-wrapper .filter {
  width: 75px;
}

.date-rangeInput-wrapper .date-input-btn:hover {
  background-color: var(--white-hover);
}

.date-rangeInput-wrapper .to-date-input-btn {
  position: relative;
}

.date-rangeInput-wrapper .from-date-input-btn {
  position: relative;
}

.table-page-header {
  background-color: var(--white-bg);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 30px;
  display: flex;
}

.table-page-header .table-page-header-left .title {
  color: var(--font-color);
  font-size: 1.2em;
  font-weight: 600;
}

.table-page-header .table-page-header-right {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.table-page-header .table-page-header-right .filter-btn-droplist-wrapper {
  position: relative;
}

#open-filters-form-button {
  background-color: var(--white-bg);
  color: var(--font-blue-color);
  border: 1px solid var(--font-blue-color);
  cursor: pointer;
  border-radius: 10px;
  padding: 7px 18px;
  font-weight: 600;
  transition: all .5s;
}

#open-filters-form-button:hover {
  transform: translateY(-1px);
}

#open-add-form-button {
  background-color: var(--font-blue-color);
  color: var(--white-bg);
  border: 1px solid var(--font-blue-color);
  cursor: pointer;
  border-radius: 10px;
  padding: 7px 20px;
  font-weight: 450;
  transition: all .5s;
}

@media screen and (max-width: 900px) {
  #open-add-form-button {
    padding: 7px 14px;
    font-size: .65em;
  }
}

#open-add-form-button:hover {
  transform: translateY(-1px);
}

#open-more-button {
  background-color: var(--table-border-line);
  border: none;
  border-radius: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
  display: flex;
}

#open-more-button .more-icon {
  width: 13px;
  height: 13px;
}

.calendar {
  z-index: 3;
  background-color: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 20px;
  margin-top: 0;
  padding: 10px;
  font-size: .6em;
  position: absolute;
  top: 40px;
  right: 0;
  box-shadow: 0 16px 25px #eee;
}

.calendar .date-header {
  margin-bottom: 10px;
}

.calendar .date-header .date-input {
  letter-spacing: .05em;
  width: 105px;
  padding: 4px 5px;
  font-size: 1.1em;
}

.calendar .date-header .time-input {
  float: right;
  letter-spacing: .05em;
  width: 90px;
  padding: 4px 5px;
  font-size: 1.1em;
}

.calendar table.calendar-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: auto;
}

.calendar table.calendar-table thead.calendar-header {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.calendar table.calendar-table thead.calendar-header tr.calendar-header-row.controls-row td.calendar-header-data .control-data.arrow {
  cursor: pointer;
  border: 0;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  margin-left: 0;
  display: flex;
}

.calendar table.calendar-table thead.calendar-header tr.calendar-header-row.controls-row td.calendar-header-data .control-data.month-year {
  justify-content: center;
  margin-bottom: 10px;
  font-size: 1.1em;
  display: flex;
}

.calendar table.calendar-table thead.calendar-header tr.calendar-header-row.controls-row td.calendar-header-data .month-year {
  color: #282c34;
  font-size: 1.07em;
  font-weight: 500;
}

.calendar table.calendar-table thead.calendar-header tr.calendar-header-row.controls-row td.calendar-header-data .month-year .month-wrapper {
  position: relative;
}

.calendar table.calendar-table thead.calendar-header tr.calendar-header-row.controls-row td.calendar-header-data .month-year .month-wrapper .calendar-months-list {
  background-color: var(--white);
  border-radius: 5px;
  max-height: 300px;
  position: absolute;
  top: 100%;
  left: -20px;
  overflow-y: auto;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, .1);
}

.calendar table.calendar-table thead.calendar-header tr.calendar-header-row.controls-row td.calendar-header-data .month-year .month-wrapper .calendar-months-list .calendar-month-item {
  color: var(--light-text);
  padding: 7px 20px;
}

.calendar table.calendar-table thead.calendar-header tr.calendar-header-row.controls-row td.calendar-header-data .month-year .month-wrapper .calendar-months-list .calendar-month-item:hover {
  font-weight: 500px;
  color: var(--dark-text);
  background-color: #f6f6f6;
}

.calendar table.calendar-table thead.calendar-header tr.calendar-header-row.controls-row td.calendar-header-data .month-year .year-wrapper {
  margin-left: 9px;
  position: relative;
}

.calendar table.calendar-table thead.calendar-header tr.calendar-header-row.controls-row td.calendar-header-data .month-year .year-wrapper .calendar-years-list {
  background-color: var(--white);
  border-radius: 5px;
  max-height: 300px;
  position: absolute;
  top: 100%;
  left: -20px;
  overflow-y: auto;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, .1);
}

.calendar table.calendar-table thead.calendar-header tr.calendar-header-row.controls-row td.calendar-header-data .month-year .year-wrapper .calendar-years-list .calendar-year-item {
  color: var(--light-text);
  padding: 7px 20px;
}

.calendar table.calendar-table thead.calendar-header tr.calendar-header-row.controls-row td.calendar-header-data .month-year .year-wrapper .calendar-years-list .calendar-year-item:hover {
  font-weight: 500px;
  color: var(--dark-text);
  background-color: #f6f6f6;
}

.calendar table.calendar-table thead.calendar-header tr.calendar-header-row.controls-row td.calendar-header-data.arrow-cell .control-data {
  width: 100%;
  height: 100%;
}

.calendar table.calendar-table thead.calendar-header tr.calendar-header-row.controls-row td.disabled {
  opacity: .25;
  pointer-events: none;
}

.calendar table.calendar-table thead.calendar-header tr.calendar-header-row.weeks-row th {
  color: rgba(101, 109, 122, .6);
  font-weight: normal;
}

.calendar table.calendar-table tbody.calendar-body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.calendar table.calendar-table tbody.calendar-body tr.calendar-body-row td.calendar-body-data {
  cursor: pointer;
  text-align: center;
  padding: 3px;
  font-weight: 500;
}

.calendar table.calendar-table tbody.calendar-body tr.calendar-body-row td.calendar-body-data .day-wrapper {
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 14px;
  padding: 2px;
  display: flex;
}

.calendar table.calendar-table tbody.calendar-body tr.calendar-body-row td.selected-day {
  color: #fff !important;
  font-weight: bold !important;
}

.calendar table.calendar-table tbody.calendar-body tr.calendar-body-row td.selected-day .day-wrapper {
  background-color: #00f;
  border-radius: 7px;
}

.calendar table.calendar-table tbody.calendar-body tr.calendar-body-row td.today {
  position: relative;
}

.calendar table.calendar-table tbody.calendar-body tr.calendar-body-row td.today:after {
  content: "";
  background-color: #30c4b8;
  border-radius: 999px;
  width: 4px;
  height: 4px;
  position: absolute;
  bottom: 2px;
  left: calc(50% - 4px);
}

.calendar table.calendar-table tbody.calendar-body tr.calendar-body-row td.disabled {
  pointer-events: none;
  color: #ccc !important;
}

.calendar .date-footer {
  justify-content: space-between;
  margin-top: 10px;
  display: flex;
}

.calendar .date-footer .calendar-control-button {
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 5px;
  outline: 0;
  width: 47px;
  padding: 6px 0;
  font-weight: 500;
}

.calendar .date-footer .clear-button {
  color: var(--light-text);
  background-color: #fff;
  border: 1px solid #f2f2f2;
  font-size: .9em;
}

.calendar .date-footer .set-button {
  color: var(--white-bg);
  background-color: var(--font-blue-color);
  font-size: .9em;
}

.calendar .left-icon {
  width: 10px;
  height: 10px;
}

.calendar .right-icon {
  width: 10px;
  height: 10px;
}

:scope.disabled .date-input {
  color: #aab1c1;
  cursor: pointer;
  pointer-events: none;
  background-color: #fafafa;
  border: 1px solid #e9ecf1;
}

.select-input > div {
  border: 1px solid var(--input-border-color);
  border-radius: 5px;
}

.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input {
  width: 100%;
  font-size: .85em;
  position: relative;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) label.error-label {
  color: var(--red);
  font-weight: 500;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) label.read-state-label {
  letter-spacing: .043em;
  color: var(--label-color);
  cursor: default;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: .95em;
  font-weight: 500;
  display: inline-block;
  overflow: hidden;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) > .select-input {
  background-color: #fff;
  height: 34px;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner {
  background-color: #fff;
  height: 34px;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .time-input-display {
  background-color: #fff;
  height: 34px;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) > textarea {
  width: 100%;
  color: var(--input-value-color);
  border: 1px solid var(--input-border-color);
  border-radius: 5px;
  padding: 0 20px;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) > textarea:focus {
  outline: none;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .hidden-div {
  width: 100%;
  color: var(--input-value-color);
  border: 1px solid var(--input-border-color);
  border-radius: 5px;
  padding: 0 20px;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .hidden-div:focus {
  outline: none;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner > .select-top {
  width: 100%;
  color: var(--input-value-color);
  border: 1px solid var(--input-border-color);
  border-radius: 5px;
  padding: 0 20px;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner > .select-top:focus {
  outline: none;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) > textarea {
  resize: none;
  margin-top: 5px;
  padding: 17px 20px;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner {
  position: relative;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner .select-box {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 1px solid var(--input-border-color);
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0 5px 15px;
  display: flex;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner .select-box input[type="text"] {
  cursor: pointer;
  width: 100%;
  color: var(--font-color);
  caret-color: rgba(0, 0, 0, 0);
  border: 0;
  outline: 0;
  font-size: .75em;
  line-height: .5em;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner .select-box input[type="text"].option-selected::placeholder {
  color: var(--font-color);
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner .select-box .select-box-left {
  color: var(--font-color);
  padding: 8px 0;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner .select-box .select-box-left .placeholder {
  color: var(--font-color);
  opacity: .5;
  font-size: .93em;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner .select-box .select-box-left::placeholder {
  color: var(--font-color);
  font-size: 1.1em;
  font-weight: 450;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner .select-box .select-box-right {
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-right: 15px;
  display: flex;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner .select-options {
  z-index: 2;
  background-color: var(--white-bg);
  border: 1px solid #f6f7f9;
  flex-direction: column;
  width: calc(100% - 20px);
  max-height: 202px;
  padding: 10px;
  display: flex;
  position: absolute;
  top: 38px;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 0 10px #e5e5e5;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner .select-options button.select-option {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: var(--font-color);
  background-color: #fff;
  border: 0;
  outline: 0;
  flex-shrink: 0;
  align-items: center;
  padding: 10px 15px;
  font-size: .7em;
  font-weight: 400;
  display: flex;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner .select-options button.select-option .suggestion-character.match {
  font-weight: 500;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner .select-options button.select-option:hover {
  color: var(--font-color);
  background-color: var(--pending-bg);
  border-radius: 8px;
  font-weight: 500;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner .select-options button.select-option:first-child {
  border-radius: $ option-border-radius$ option-border-radius 0 0;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner .select-options button.select-option:last-child {
  border-radius: 0 0$ option-border-radius$ option-border-radius;
}

:is(.input, .select-field, .radio-field, .checkbox-field, .file-field, .drop-down-multiselect, .time-input) .select-field-inner .select-options .select-options-no-data {
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  height: 50px;
  color: var(--font-color);
  background-color: #fff;
  border: 0;
  outline: 0;
  flex-shrink: 0;
  align-items: center;
  padding-left: 15px;
  display: flex;
}

.drop-list-wrapper {
  z-index: 3;
  background-color: var(--white-bg);
  border-radius: 8px;
  flex-direction: column;
  gap: 10px;
  width: max-content;
  display: flex;
  position: absolute;
  top: 45px;
  right: 0;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .09);
}

.drop-list-wrapper .drop-list-header {
  color: var(--font-color);
  padding: 10px 10px 0;
  font-size: .8em;
  font-weight: 500;
}

.drop-list-wrapper .drop-list-line {
  border: 1px solid var(--light-border);
  width: 100%;
  margin: 0;
}

.link {
  top: 26px;
}

.manage-drop-list {
  flex-direction: column;
  gap: 8px;
  padding: 5px 5px 10px;
  display: flex;
}

.manage-drop-list .active-stats {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.manage-drop-list .active-stats .active-title {
  padding: 5px 30px 5px 10px;
  font-size: .8em;
}

.manage-drop-list .active-stats .stat-active-list {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 5px 30px 5px 5px;
  transition: all .5s;
  display: flex;
}

.manage-drop-list .active-stats .stat-active-list:hover {
  background-color: var(--pending-bg);
  border-radius: 8px;
}

.manage-drop-list .inactive-stats {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.manage-drop-list .inactive-stats .active-title {
  padding: 5px 30px 5px 10px;
  font-size: .8em;
}

.manage-drop-list .inactive-stats .stat-active-list {
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  padding: 5px 30px 5px 5px;
  transition: all .5s;
  display: flex;
}

.manage-drop-list .inactive-stats .stat-active-list:hover {
  background-color: var(--pending-bg);
  border-radius: 8px;
}

.manage-drop-list .stat-name {
  color: var(--font-sub-text);
  font-size: .7em;
}

.manage-drop-list .active {
  color: var(--font-color);
  font-size: .7em;
  font-weight: 500;
}

.filtee-toggle {
  color: #72a24d;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  background-color: var(--slider-inactive-bg);
  cursor: pointer;
  border-radius: 24px;
  transition: all .4s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.slider:before {
  content: "";
  background-color: var(--white-bg);
  border-radius: 50%;
  width: 8.5px;
  height: 8.5px;
  transition: all .2s;
  position: absolute;
  bottom: 1.76px;
  left: 2px;
}

input:checked + .slider {
  background-color: var(--font-blue-color);
}

input:checked + .slider:before {
  transform: translateX(6px);
}

.toggle-button:focus-visible {
  outline-offset: 2px;
  border: 5px;
  border-radius: 24px;
  outline: 1px dashed #24ab53;
}

.toggle-button.toggled:focus-visible {
  outline-offset: 2px;
  border-radius: 24px;
  outline: 1px dashed #f0f6f2;
  height: 24px;
}

.toggle-switch {
  width: 19px;
  height: 12px;
  display: inline-block;
  position: relative;
}

.quick-filter-section {
  flex-direction: column;
  gap: 15px;
  padding: 10px;
  display: flex;
}

.quick-filter-section .filter-heading-wrapper {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.quick-filter-section .filter-heading-wrapper .heading-label {
  color: var(--font-sub-text);
  font-size: .7em;
}

.quick-filter-section .filter-heading-wrapper .clear-btn {
  color: var(--font-blue-color);
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  font-size: .7em;
}

.quick-filter-section .quick-filter-items {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.quick-filter-section .quick-filter-items .quick-filter .quick-filter-label {
  cursor: pointer;
  flex-direction: row;
  justify-content: space-between;
  font-size: .7em;
  display: flex;
}

.date-input-wrapper .date-range .date-drop-list-wrapper .drop-list-btn {
  background-color: var(--droplist-bg);
  color: var(--font-blue-color);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  display: flex;
}

.date-input-wrapper .date-range .date-drop-input-wrapper {
  flex-direction: row;
  gap: 10px;
  display: flex;
}

.date-input-wrapper .date-range .date-drop-input-wrapper .hidden-input-from {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
}

.date-input-wrapper .date-range .date-drop-input-wrapper .hidden-input-to {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
}

.date-input-wrapper .date-range .date-drop-input-wrapper .drop-input-btn {
  white-space: nowrap;
  border: 1px solid var(--search-border);
  color: var(--font-sub-text);
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 6px;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 5px 10px;
  display: inline-flex;
}

.date-input-wrapper .date-range .date-drop-input-wrapper .drop-input-btn .to {
  font-size: .8em;
}

.date-input-wrapper .date-range .date-drop-input-wrapper .drop-input-btn .from {
  font-size: .8em;
}

.drop-down-wrapper {
  position: relative;
}

.drop-down-wrapper .drop-down {
  border: 1px solid var(--light-border);
  border-radius: 6px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  display: flex;
}

.drop-down-wrapper .drop-down .drop-down-label {
  font-size: .7em;
}

.drop-down-wrapper .drop-down-items-list {
  background-color: var(--white-bg);
  border-radius: 8px;
  flex-direction: column;
  gap: 10px;
  width: calc(100% - 1px);
  padding: 10px;
  display: flex;
  position: absolute;
  top: 35px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .09);
}

.drop-down-wrapper .drop-down-items-list .drop-down-item-wrapper {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.drop-down-wrapper .drop-down-items-list .drop-down-item-wrapper .drop-down-item {
  color: var(--font-sub-text);
  padding: 10px;
  font-size: .7em;
}

.drop-down-wrapper .drop-down-items-list .drop-down-item-wrapper .drop-down-item:hover {
  color: var(--font-blue-color);
  font-weight: 600;
}

.drop-down-wrapper .drop-down-items-list .drop-down-item-wrapper:hover {
  background-color: var(--light-border);
}

.overlay {
  z-index: 100;
  background-color: rgba(0, 0, 0, .506);
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.overlay .right-side-panel {
  background-color: var(--white-bg);
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  width: 440px;
  height: 100vh;
  padding: 0 15px;
  display: flex;
  position: absolute;
  right: 0;
}

@media screen and (max-width: 900px) {
  .overlay .right-side-panel {
    border-radius: 12px 12px 0 0;
    width: 100vw;
    height: 50vh;
    bottom: 0;
  }
}

.overlay .right-side-panel .right-panel-top-row {
  flex-direction: column;
  display: flex;
}

.overlay .right-side-panel .right-panel-top-row .right-panel-heading-row {
  flex-direction: row;
  justify-content: space-between;
  padding: 15px 0;
  display: flex;
}

.overlay .right-side-panel .right-panel-top-row .right-panel-heading-row .right-panel-heading {
  color: var(--font-color);
  font-size: 1.1em;
  font-weight: 600;
}

.overlay .right-side-panel .right-panel-top-row .right-panel-heading-row .right-panel-close-icon {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
}

.overlay .right-side-panel .right-panel-children-container {
  scrollbar-width: none;
  flex-direction: column;
  height: 700px;
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
}

.edit-wrapper {
  box-sizing: border-box;
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.edit-wrapper .edit-section {
  flex-direction: row;
  align-items: end;
  gap: 1rem;
  display: flex;
}

.edit-wrapper .edit-section .input-wrapper {
  flex-direction: column;
  flex: 1;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.edit-wrapper .edit-section .input-wrapper .input-label {
  color: var(--font-sub-text);
  font-size: .8em;
}

.edit-wrapper .edit-section .input-wrapper .input-element-wrapper {
  display: flex;
}

.edit-wrapper .edit-section .input-wrapper .input-element-wrapper .input {
  border: 1px solid var(--search-border);
  border-radius: 8px;
  padding: 11px 0 11px 15px;
}

.edit-wrapper .edit-section .input-wrapper .input:focus {
  outline: none;
}

.tabs-wrapper {
  cursor: pointer;
  flex-direction: row;
  gap: 25px;
  margin-top: 15px;
  display: flex;
}

.tabs-wrapper .tab-item {
  color: var(--font-sub-text);
  font-size: .8em;
  font-weight: 400;
  display: flex;
}

.tabs-wrapper .tab-item:hover {
  transition: all .5s;
  transform: translateY(-1px);
}

.tabs-wrapper .active {
  color: var(--font-blue-color);
  text-underline-offset: 7px;
  z-index: 1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.basic-details-wrapper {
  flex-direction: column;
  gap: 15px;
  padding: 13px 0;
  display: flex;
}

.basic-details-wrapper .basic-details-top-section {
  color: var(--font-color);
  font-size: .75em;
  font-weight: 450px;
}

.basic-details-wrapper .basic-details-middle-section {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.basic-details-wrapper .basic-details-middle-section .basic-details-middle-top {
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  display: flex;
}

.basic-details-wrapper .basic-details-middle-section .basic-details-middle-top .basic-details-middle-left {
  flex-direction: row;
  gap: 15px;
  display: flex;
}

.basic-details-wrapper .basic-details-middle-section .basic-details-middle-top .basic-details-middle-left .profile-image-wrapper .company-icon {
  width: 34px;
  height: 34px;
}

.basic-details-wrapper .basic-details-middle-section .basic-details-middle-top .basic-details-middle-left .basic-details-middle-text {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.basic-details-wrapper .basic-details-middle-section .basic-details-middle-top .basic-details-middle-left .basic-details-middle-text .basic-details-middle-main-label-wrapper {
  flex-direction: row;
  gap: 10px;
  display: flex;
}

.basic-details-wrapper .basic-details-middle-section .basic-details-middle-top .basic-details-middle-left .basic-details-middle-text .basic-details-middle-main-label-wrapper .basic-details-middle-main-label {
  color: var(--font-color);
  font-size: .9em;
  font-weight: 600;
}

.basic-details-wrapper .basic-details-middle-section .basic-details-middle-top .basic-details-middle-left .basic-details-middle-text .basic-details-middle-main-label-wrapper .status-icon-wrapper {
  margin-top: 1px;
}

.basic-details-wrapper .basic-details-middle-section .basic-details-middle-top .basic-details-middle-left .basic-details-middle-text .basic-details-middle-main-label-wrapper .status-icon-wrapper .status-icon {
  width: 15px;
  height: 15px;
}

.basic-details-wrapper .basic-details-middle-section .basic-details-middle-top .basic-details-middle-left .basic-details-middle-text .basic-details-middle-sub-label {
  color: var(--font-sub-text);
  font-size: .7em;
}

.review-panel-header {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.review-panel-header .link-like-button-wrapper {
  position: relative;
}

.review-panel-header .link-like-button-wrapper .tag-input-drop-list {
  right: 0;
}

.review-panel-header .tag-input-wrapper {
  flex-direction: column;
  display: flex;
}

.review-panel-header .tag-input-wrapper .label {
  color: var(--font-sub-text);
  padding-left: 15px;
  font-size: .75em;
}

.review-panel-header .tag-input-wrapper .tag-input-container {
  border: 1px solid var(--light-border);
  border-radius: 6px;
  flex-flow: wrap;
  gap: 10px;
  width: 275px;
  height: 60px;
  margin: 10px;
  padding: 10px;
  display: flex;
  overflow-y: auto;
}

.review-panel-header .tag-input-wrapper .tag-input-container .tag-wrapper {
  background-color: var(--table-border-line);
  border-radius: 6px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: -moz-fit-content;
  height: fit-content;
  padding: 5px;
  display: flex;
}

.review-panel-header .tag-input-wrapper .tag-input-container .tag-wrapper .tag {
  color: var(--font-color);
  font-size: .75em;
  font-weight: 400;
}

.review-panel-header .tag-input-wrapper .tag-input-container .tag-wrapper .close-btn {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
}

.review-panel-header .tag-input-wrapper .tag-input-container .tag-wrapper .close-btn .close-img {
  width: 11px;
  height: 11px;
}

.review-panel-header .tag-input-wrapper .tag-input-container .tag-input {
  border: none;
}

.review-panel-header .tag-input-wrapper .tag-input-container .tag-input:focus {
  border: none;
  outline: none;
}

.review-panel-header .tag-input-wrapper .action-button-wrapper {
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 10px 10px;
  display: flex;
}

.key-value-section {
  flex-direction: column;
  gap: 25px;
  display: flex;
}

.key-value-section .key-values-wrapper {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.key-value-section .key-values-wrapper .key-value-label {
  color: var(--font-sub-text);
  font-size: .7em;
}

.key-value-section .key-values-wrapper .key-value-label.strong {
  color: var(--font-color);
  font-size: .8em;
  font-weight: 550;
}

.key-value-section .key-values-wrapper .key-value-value {
  color: var(--font-color);
  font-size: .7em;
  font-weight: 550;
}

.key-value-section .key-values-wrapper .key-value-value.strong {
  color: var(--font-grey);
  font-weight: 400;
}

.basic-details-bottom-section {
  flex-direction: column;
  gap: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
}

.basic-details-bottom-section .basic-details-bottom-top-section {
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

.basic-details-bottom-section .basic-details-bottom-top-section .basic-details-bottom-top-label {
  color: var(--font-color);
  font-size: .75em;
}

.panel-bottom-section-wrapper {
  flex-direction: row;
  justify-content: space-between;
  padding: 10px 0;
  display: flex;
}

.add-view {
  justify-content: end;
}

.expand-collapse-items {
  flex-direction: column;
  gap: 15px;
  display: flex;
}

.expand-collapse-items:hover {
  transition: all .5s;
  transform: translateY(-1px);
}

.expand-collapse-container {
  flex-direction: column;
  display: flex;
}

.expand-collapse-container .collapse-section {
  cursor: pointer;
  flex-direction: row;
  justify-content: space-between;
  padding: 0;
  display: flex;
}

.expand-collapse-container .collapse-section .expand-collapse-left {
  flex-direction: row;
  gap: 10px;
  display: flex;
}

.expand-collapse-container .collapse-section .expand-collapse-left .expand-collapse-wrapper {
  background-color: var(--table-border-line);
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  display: flex;
}

.expand-collapse-container .collapse-section .expand-collapse-left .expand-collapse-wrapper .expand-collapse-icon {
  width: 15px;
  height: 15px;
}

.expand-collapse-container .collapse-section .expand-collapse-left .expand-collapse-middle-section {
  flex-direction: column;
  display: flex;
}

.expand-collapse-container .collapse-section .expand-collapse-left .expand-collapse-middle-section .main-label {
  color: var(--font-color);
  font-size: .8em;
  font-weight: 550;
}

.expand-collapse-container .collapse-section .expand-collapse-left .expand-collapse-middle-section .sub-label-wrapper {
  flex-direction: row;
  align-items: end;
  height: 20px;
  display: flex;
}

.expand-collapse-container .collapse-section .expand-collapse-left .expand-collapse-middle-section .sub-label-wrapper .sub-label-text {
  color: var(--font-grey);
  font-size: .7em;
  font-weight: 400;
}

.expand-collapse-container .collapse-section .expand-collapse-left .expand-collapse-middle-section .sub-label-wrapper .dot {
  color: var(--dot-bg);
  padding-left: 5px;
  font-size: 1.5em;
}

.expand-collapse-container .collapse-section .expand-collapse-left .expand-collapse-middle-section .sub-label-wrapper .record-button-droplist-wrapper {
  position: relative;
}

.expand-collapse-container .collapse-section .expand-collapse-left .expand-collapse-middle-section .sub-label-wrapper .record-button-droplist-wrapper .sub-label-btn {
  color: var(--font-sub-text);
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  font-size: .65em;
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}

.expand-collapse-container .expand-section {
  padding-left: 35px;
}

.expand-collapse-container .expanded {
  padding-top: 20px;
}

.summary-header-wrapper {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 25px;
  margin-bottom: 25px;
  display: flex;
}

.summary-header-wrapper .summary-header-left {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.summary-header-wrapper .summary-header-left .main-label {
  font-size: .9em;
  font-weight: 500;
}

.summary-header-wrapper .summary-header-left .total-count {
  font-size: 1.3em;
  font-weight: 600;
}

.action-button-wrapper {
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

.upload-container {
  width: 100%;
}

.upload-container .input-label {
  color: var(--font-sub-text);
  font-size: .73em;
}

.upload-container .upload-container-full-width {
  width: 100%;
  padding-top: 10px;
}

.upload-container .upload-container-half-width {
  width: 100%;
  padding-top: 8px;
}

.upload-container .upload-container-half-width .dashed-image-wrapper {
  justify-content: center;
  display: flex;
}

.upload-container .upload-container-half-width .dashed-image-wrapper .image-wrapper {
  width: 200px;
  height: 140px;
  padding: 10px;
  position: relative;
}

.upload-container .upload-container-half-width .dashed-image-wrapper .image-wrapper .uploaded-img {
  object-fit: fill;
  width: 100%;
  height: 100%;
}

.upload-container .upload-container-half-width .dashed-image-wrapper .image-wrapper .edit-button-wrapper {
  cursor: pointer;
  background-color: #000;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  display: flex;
  position: absolute;
  top: 10px;
  right: 10px;
}

.upload-container .upload-container-half-width .dashed-image-wrapper .image-wrapper .edit-button-wrapper .edit-button {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
}

.upload-container .upload-container-half-width .dashed-image-wrapper .image-wrapper .edit-button-wrapper .edit-button .edit-icon {
  cursor: pointer;
  width: 15px;
  height: 15px;
}

.upload-container .upload-wrapper {
  text-align: center;
  cursor: pointer;
  border-radius: 20px;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  display: flex;
}

.upload-container .upload-wrapper .upload-box {
  flex-direction: column;
  width: 50%;
  display: flex;
}

.upload-container .upload-wrapper .upload-box .doc-details {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.upload-container .upload-wrapper .upload-box .doc-details .upload-button-wrapper .upload-button {
  color: var(--font-blue-color);
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  font-size: .7em;
}

.upload-container .upload-wrapper .upload-box .doc-details .doc-type {
  color: var(--light-blue-text);
  font-size: .6em;
}

.upload-container .upload-wrapper .upload-box .doc-details .doc-size {
  color: var(--light-blue-text);
  font-size: .6em;
}

.upload-container .file-upload-input {
  display: none;
}

.message-wrapper {
  z-index: 500;
  justify-content: center;
  display: flex;
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
}

@media screen and (max-width: 900px) {
  .message-wrapper {
    top: 30px;
  }
}

.message-wrapper .message {
  white-space: nowrap;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: max-content;
  padding: 10px 20px;
  font-size: .8em;
  display: inline-flex;
  box-shadow: 0 3px 10px 1px rgba(0, 0, 0, .04);
}

.message-wrapper .message .close-icon {
  cursor: pointer;
  width: 8px;
  height: 8px;
}

.message-wrapper .success {
  background-color: var(--green-bg);
  color: var(--font-green);
}

.message-wrapper .error {
  background-color: var(--inactive-bg);
  color: var(--font-red);
}

.gate-details-wrapper {
  background-color: var(--white-bg);
  border-radius: 12px;
  flex-direction: column;
  gap: 20px;
  padding: 20px 20px 10px;
  display: flex;
}

.gate-details-wrapper .gate-name {
  color: var(--font-color);
  font-size: 1.1em;
  font-weight: 600;
}

.gate-details-wrapper .gate-content-wrapper {
  flex-direction: row;
  gap: 20px;
  display: flex;
}

@media screen and (max-width: 900px) {
  .gate-details-wrapper .gate-content-wrapper {
    flex-direction: column !important;
  }
}

.gate-details-wrapper .gate-content-wrapper .gate-card {
  border: 1px solid var(--grey-bg);
  border-radius: 12px;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 20px 0 20px 10px;
  display: flex;
}

@media screen and (max-width: 900px) {
  .gate-details-wrapper .gate-content-wrapper .gate-card {
    width: auto !important;
  }
}

.gate-details-wrapper .gate-content-wrapper .gate-card .label-wrapper {
  flex-direction: row;
  align-items: center;
  gap: 5px;
  display: flex;
}

.gate-details-wrapper .gate-content-wrapper .gate-card .label-wrapper .label {
  font-size: .85em;
  font-weight: 500;
}

.gate-details-wrapper .gate-content-wrapper .gate-card .label-wrapper .axis {
  font-size: .75em;
  font-weight: 400;
}

.gate-details-wrapper .gate-content-wrapper .gate-card .value {
  font-size: 1.3em;
  font-weight: 600;
}

.device-details-wrapper {
  flex-direction: row;
  justify-content: center;
  padding: 20px;
  display: flex;
}

.device-details-wrapper .device-left {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.device-details-wrapper .device-left .device-left-img {
  transform-origin: center;
  width: 100px;
  height: 100px;
  display: block;
}

@media screen and (max-width: 900px) {
  .device-details-wrapper .device-left .device-left-img {
    width: 50px;
    height: 50px;
  }
}

.device-details-wrapper .device-status {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  display: flex;
}

@media screen and (max-width: 900px) {
  .device-details-wrapper .device-status {
    margin-top: 20px;
  }
}

.device-details-wrapper .device-status img {
  width: 100%;
}

@media screen and (max-width: 900px) {
  .device-details-wrapper .device-status img {
    width: 80%;
  }
}

.device-details-wrapper .device-status .beam-status {
  color: var(--white-bg);
  border-radius: 50px;
  align-items: center;
  padding: 2px 10px;
  font-size: .65em;
  display: flex;
}

.device-details-wrapper .green {
  background-color: var(--font-green);
  border: 1px solid var(--font-green);
}

.device-details-wrapper .orange {
  color: var(--orange-bg);
  border: 1px solid var(--orange-bg);
}

.device-details-wrapper .grey {
  background-color: var(--grey-bg);
  border: 1px solid var(--grey-bg);
}

.device-details-wrapper .red {
  background-color: var(--font-red);
  border: 1px solid var(--font-red);
}

.device-details-wrapper .device-right {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.device-details-wrapper .device-right .device-right-img {
  transform-origin: center;
  width: 100px;
  height: 100px;
  display: block;
}

@media screen and (max-width: 900px) {
  .device-details-wrapper .device-right .device-right-img {
    width: 50px;
    height: 50px;
  }
}

.device-details-wrapper .device-name {
  color: var(--font-color);
  text-align: center;
  font-size: .9em;
  font-weight: 600;
}

@media screen and (max-width: 900px) {
  .device-details-wrapper .device-name {
    text-align: center;
    font-size: .7em;
  }
}

.device-details-wrapper .sub-label {
  color: var(--grey);
  font-size: .7em;
}

@media screen and (max-width: 900px) {
  .device-details-wrapper .sub-label {
    font-size: .5em;
  }
}

.device-details-wrapper .value {
  color: var(--font-color);
  font-size: 1.5em;
  font-weight: 700;
}

@media screen and (max-width: 900px) {
  .device-details-wrapper .value {
    font-size: 1em;
  }
}

.gate-details-header {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.gate-details-header .gate-details-right {
  width: 330px;
}

.chart-section-wrapper {
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 20px;
  display: grid;
}

@media screen and (max-width: 900px) {
  .chart-section-wrapper {
    flex-direction: column !important;
    display: flex !important;
  }
}

.chart-section-wrapper .chart-section {
  border: 1px solid var(--light-border);
  background-color: #fff;
  border-radius: 12px;
  flex-direction: column;
  display: flex;
  box-shadow: 0 0 5px rgba(238, 238, 238, .447);
}

.chart-section-wrapper .chart-section .chart-title {
  padding: 20px 20px 0;
  font-size: 1em;
  font-weight: 500;
}

.no-data-available {
  width: 100%;
  height: 100%;
  color: var(--font-sub-text);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  font-weight: 400;
  display: flex;
}

.activity-log-wrapper {
  background-color: var(--white-bg);
  border-radius: 14.18px;
  flex-direction: column;
  padding: 0 20px 20px;
  display: flex;
}

.activity-log-wrapper .activity-container {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.activity-log-wrapper .activity-container .activity-top-wrapper {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.activity-log-wrapper .activity-container .activity-top-wrapper .label {
  padding-top: 20px;
  font-size: 1.2em;
  font-weight: 500;
}

@media screen and (max-width: 900px) {
  .activity-log-wrapper .activity-container .activity-top-wrapper .label {
    padding-top: 10px;
    font-size: 1em;
  }
}

@media screen and (max-width: 900px) {
  .activity-log-wrapper .activity-container .activity-top-wrapper {
    padding-top: 10px;
  }
}

.activity-log-wrapper .activity-container .activity-top-wrapper .right-content {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  display: flex;
}

.activity-log-wrapper .activity-container .activity-top-wrapper .right-content .last-update-wrapper {
  flex-direction: row;
  gap: 5px;
  display: flex;
}

.activity-log-wrapper .activity-container .activity-top-wrapper .right-content .last-update-wrapper .last-update-label {
  color: var(--font-sub-text);
  font-size: .7em;
  font-weight: 500;
}

.activity-log-wrapper .activity-container .activity-top-wrapper .right-content .last-update-wrapper .last-update-value {
  color: var(--font-sub-text);
  font-size: .7em;
  font-weight: 500;
}

.activity-log-wrapper .activity-container .action-wrapper {
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

@media screen and (max-width: 900px) {
  .activity-log-wrapper .activity-container .action-wrapper {
    display: inline-flex !important;
  }
}

.activity-log-wrapper .activity-container .action-wrapper .left-content {
  flex-direction: row;
  gap: 10px;
  display: flex;
}

@media screen and (max-width: 900px) {
  .activity-log-wrapper .activity-container .action-wrapper .left-content {
    display: none !important;
  }
}

.activity-log-wrapper .activity-container .action-wrapper .right-content {
  flex-direction: row;
  gap: 10px;
  height: 31px;
  display: flex;
  position: relative;
}

@media screen and (max-width: 900px) {
  .activity-log-wrapper .activity-container .action-wrapper .right-content .search-input {
    padding: 6px 12px !important;
  }
}

@media screen and (max-width: 900px) {
  .activity-log-wrapper .activity-container .action-wrapper .right-content #open-filters-form-button {
    padding: 7px 11px !important;
  }
}

.activity-log-wrapper .activity-container .activity-wrapper {
  flex-direction: column;
  gap: 25px;
  display: flex;
}

.activity-log-wrapper .activity-container .activity-wrapper .activity-details-wrapper {
  flex-direction: row;
  gap: 15px;
  display: flex;
  position: relative;
}

.activity-log-wrapper .activity-container .activity-wrapper .activity-details-wrapper .type-icon {
  z-index: 1;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  padding: 3px;
  display: flex;
}

.activity-log-wrapper .activity-container .activity-wrapper .activity-details-wrapper .vertical-line {
  border: 1px solid var(--light-border);
  width: 0;
  height: 55px;
  z-index: 0px;
  position: absolute;
  left: 12px;
}

.activity-log-wrapper .activity-container .activity-wrapper .activity-details-wrapper .red {
  background-color: var(--red-bg);
}

.activity-log-wrapper .activity-container .activity-wrapper .activity-details-wrapper .grey {
  background-color: var(--pending-bg);
}

.activity-log-wrapper .activity-container .activity-wrapper .activity-details-wrapper .activity-details {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.activity-log-wrapper .activity-container .activity-wrapper .activity-details-wrapper .activity-details .sub-label {
  color: var(--font-sub-text);
  font-size: .8em;
}

.activity-log-wrapper .activity-container .activity-wrapper .activity-details-wrapper .activity-details .activity {
  color: var(--font-dark);
  font-size: .9em;
}

.status-right-green {
  background-color: var(--green-bg);
  width: -moz-fit-content;
  width: fit-content;
  color: var(--font-green);
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  padding: 5px 15px;
  font-size: .65em;
  font-weight: 500;
  display: flex;
}

.light-line {
  border: .5px solid var(--light-border);
  width: 100%;
  margin: 4px;
}

.status-right-grey {
  background-color: var(--pending-bg);
  width: -moz-fit-content;
  width: fit-content;
  color: var(--font-sub-text);
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  padding: 5px 15px;
  font-size: .65em;
  font-weight: 500;
  display: flex;
}

.status-right-red {
  background-color: var(--inactive-bg);
  width: -moz-fit-content;
  width: fit-content;
  color: var(--font-red);
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  padding: 5px 15px;
  font-size: .65em;
  font-weight: 500;
  display: flex;
}

.link-like-button {
  color: var(--font-blue-color);
  cursor: pointer;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  font-size: .7em;
  text-decoration: underline;
  transition: all .5s;
}

.link-like-button:hover {
  font-weight: 490;
}

.button-wrapper {
  align-items: flex-start;
}

.without-bg-btn {
  white-space: nowrap;
  background-color: var(--white-bg);
  border: 1px solid var(--font-blue-color);
  max-width: 100%;
  color: var(--font-blue-color);
  cursor: pointer;
  border-radius: 5px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-size: .7em;
  display: inline-flex;
}

.delete-btn {
  white-space: nowrap;
  border: 1px solid var(--font-red);
  background-color: var(--font-red);
  max-width: 100%;
  color: var(--white-bg);
  cursor: pointer;
  border-radius: 8px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  font-size: .7em;
  transition: all .5s;
  display: inline-flex;
}

.delete-btn:hover {
  transform: translateY(-1px);
}

.with-bg-btn {
  white-space: nowrap;
  background-color: var(--font-blue-color);
  border: 1px solid var(--font-blue-color);
  max-width: 100%;
  color: var(--white-bg);
  cursor: pointer;
  border-radius: 8px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  font-size: .7em;
  display: inline-flex;
}

.with-bg-btn:hover {
  opacity: .8;
}

.arrow-left-icon {
  width: 14px;
  height: 14px;
  transition: transform .2s;
}

.without-bg-btn:hover .arrow-left-icon {
  transform: translateX(-2px);
}

.without-bg-btn:hover .arrow-right-icon {
  transform: translateX(2px);
}

.arrow-right-icon {
  width: 14px;
  height: 14px;
  transition: transform .2s;
}

.search-input {
  background-color: var(--white-bg);
  border: 1px solid var(--search-border);
  border-radius: 8px;
  padding: 6px 15px;
  text-decoration: none;
  transition: all .5s;
}

.search-input:hover {
  background-color: var(--white-hover);
}

.search-input::placeholder {
  color: var(--font-sub-text);
  font-size: .9em;
}

.search-input:focus {
  color: var(--font-sub-text);
  border: 1.7px solid var(--search-border);
  outline: none;
}

.record-item {
  white-space: nowrap;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 15px;
  display: flex;
}

.record-item .record-label {
  color: var(--font-sub-text);
  font-size: .7em;
}

.record-item .record-value {
  color: var(--font-sub-text);
  font-size: .7em;
}

.total-value-wrapper {
  flex-direction: row;
  justify-content: space-between;
  padding: 5px 14px;
  font-size: .75em;
  font-weight: 500;
  display: flex;
}

.disable {
  opacity: .5;
  cursor: not-allowed;
}

.empty-disputes {
  flex-direction: row;
  justify-content: center;
  margin: 50px 10px;
  display: flex;
}

.empty-disputes .empty-text {
  color: var(--font-grey);
  font-size: .8em;
}

.dashboard-details-wrapper {
  background-color: var(--white-bg);
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.cross-icon {
  width: 15px;
  height: 15px;
}

.key-with-img {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  display: flex;
}

.dashed-border, .dashed-image-wrapper {
  background-image: repeating-linear-gradient(45deg, #eaeaea, #eaeaea, 10px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0) 20px), repeating-linear-gradient(135deg, #eaeaea, #eaeaea, 10px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0) 20px), repeating-linear-gradient(225deg, #eaeaea, #eaeaea, 10px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0) 20px), repeating-linear-gradient(315deg, #eaeaea, #eaeaea, 10px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0) 20px);
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
  background-size: 1.5px 100%, 100% 1.5px, 1.5px 100%, 100% 1.5px;
  border-radius: 14px;
}

/* [project]/src/css/main.css [app-client] (css) */
@font-face {
  font-family: SF Pro Display;
  src: url("/static/sf-pro-display/SFPRODISPLAYBLACKITALIC.OTF") format("opentype");
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: SF Pro Display;
  src: url("/static/sf-pro-display/SFPRODISPLAYBOLD.OTF") format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: SF Pro Display;
  src: url("/static/sf-pro-display/SFPRODISPLAYLIGHTITALIC.OTF") format("opentype");
  font-weight: 300;
  font-style: italic;
}

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Helvetica Neue’, sans-serif;
}

.main {
  box-sizing: border-box;
}

.page-container {
  background-color: var(--main-bg-color);
  scrollbar-width: none;
  box-sizing: border-box;
  grid-template-columns: 210px 1fr;
  gap: 30px;
  height: 100vh;
  display: grid;
  overflow: auto;
}

@media screen and (max-width: 900px) {
  .page-container {
    flex-direction: column !important;
    width: 100% !important;
    display: flex !important;
  }
}

.page-container .left-container {
  height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

@media screen and (max-width: 900px) {
  .page-container .left-container {
    display: none !important;
  }
}

.page-container .main-content {
  background-color: var(--main-bg-color);
  flex-direction: column;
  gap: 15px;
  margin: 20px;
  display: flex;
}

.page-container .main-content .main-content-body {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

#devtools-indicator {
  display: none !important;
}

.nextjs-toast, [class*="nextjs-toast"], [class*="toast"] {
  visibility: hidden !important;
  opacity: 0 !important;
  display: none !important;
}

/*# sourceMappingURL=%5Broot-of-the-server%5D__76bb0528._.css.map*/