@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes main_loader {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes auth_loading {
  0% {
    background-color: #237869;
  }
  50% {
    background-color: #39BEA7;
  }
  100% {
    background-color: #237869;
  }
}
@keyframes loader_dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  100% {
    content: "...";
  }
}
@keyframes toast_show {
  0% {
    margin-left: 100%;
    transform: scale(0);
  }
  100% {
    margin-left: 0;
    transform: scale(1);
  }
}
@keyframes toast_timer {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
.animated-data-loader {
  background-image: url("/anim/wave.gif");
  background-attachment: fixed;
  width: calc(100vw - 240rem);
  height: calc(100vh - 100rem);
}

.animated-basic-loader {
  background-image: url("/anim/lines.gif");
  background-attachment: fixed;
  width: 100vw;
  height: 100vh;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes main_loader {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes auth_loading {
  0% {
    background-color: #237869;
  }
  50% {
    background-color: #39BEA7;
  }
  100% {
    background-color: #237869;
  }
}
@keyframes loader_dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  100% {
    content: "...";
  }
}
@keyframes toast_show {
  0% {
    margin-left: 100%;
    transform: scale(0);
  }
  100% {
    margin-left: 0;
    transform: scale(1);
  }
}
@keyframes toast_timer {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
.animated-data-loader {
  background-image: url("/anim/wave.gif");
  background-attachment: fixed;
  width: calc(100vw - 240rem);
  height: calc(100vh - 100rem);
}

.animated-basic-loader {
  background-image: url("/anim/lines.gif");
  background-attachment: fixed;
  width: 100vw;
  height: 100vh;
}

.app-loader {
  background: black;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100vw;
  height: 100vh;
}
.app-loader .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.app-loader .content loader-circle {
  position: relative;
  width: 300rem;
  height: 300rem;
  display: block;
}
.app-loader .content loader-circle first, .app-loader .content loader-circle second, .app-loader .content loader-circle third, .app-loader .content loader-circle fourth {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #2E141F;
  border-radius: 50%;
  border: 6rem solid #2E141F;
  opacity: 0;
  animation: 1.5s forwards infinite main_loader;
}
.app-loader .content loader-circle first {
  width: 300rem;
  height: 300rem;
  animation-delay: 0.75s;
}
.app-loader .content loader-circle second {
  width: 250rem;
  height: 250rem;
  animation-delay: 0.5s;
}
.app-loader .content loader-circle third {
  width: 200rem;
  height: 200rem;
  animation-delay: 0.25s;
}
.app-loader .content loader-circle fourth {
  width: 150rem;
  height: 150rem;
  animation-delay: 0s;
}
.app-loader .content loader-circle percent {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16rem;
}
.app-loader .content txt {
  text-align: center;
  color: white;
  width: 100%;
  display: block;
  margin-top: 30rem;
  font-size: 16rem;
}
.app-loader .logo {
  position: fixed;
  top: 40rem;
  left: 40rem;
  width: 200rem;
}
.app-loader .logo img {
  max-width: 100%;
}

#login-box {
  height: 100vh;
  width: 100vw;
  position: relative;
  background-size: cover;
  background-position: center;
  background-image: url("/img/bg.png");
}
#login-box .card {
  padding: 40rem;
  border-radius: 10rem;
  width: 480rem;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  height: 480rem;
  background-color: #161515;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#login-box .logo {
  width: 100%;
  text-align: center;
  margin-bottom: 15rem;
}
#login-box .logo img {
  width: 280rem;
}
#login-box .validation-message {
  margin-bottom: 5rem;
}
#login-box input:not([type=checkbox]) {
  color: #383641;
  background: white;
  border: none;
  border-radius: 10rem;
  font-size: 16rem;
  padding: 16rem;
  box-sizing: border-box;
  margin-bottom: 16rem;
}
#login-box button {
  background-color: #39BEA7;
  color: white;
  width: 100%;
  border: none;
  border-radius: 10rem;
  font-size: 18rem;
  padding: 16rem;
  box-sizing: border-box;
  cursor: pointer;
}
#login-box p {
  color: white;
  font-size: 16rem;
}
#login-box .error {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #FB6350;
  width: 100%;
  border-radius: 0 0 10rem 10rem;
  color: white;
  transition: padding 0.5s;
  padding: 0 20rem;
}
#login-box .error.active {
  padding: 10rem 20rem;
}
#login-box .loading.active {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 0 0 10rem 10rem;
  color: white;
  transition: padding 0.5s;
  padding: 10rem 20rem;
  animation: 1s forwards infinite auth_loading;
}
#login-box .retrieve {
  color: #39BEA7;
  font-size: 18rem;
  margin-top: 18rem;
}

#error-box {
  height: 100vh;
  width: 100vw;
  position: relative;
  background-size: cover;
  background-position: center;
  background-image: url("/img/errBg.png");
}
#error-box card {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
#error-box card h1 {
  font-size: 100rem;
}

.flex {
  display: flex;
}
.flex.sb {
  justify-content: space-between;
}
.flex.en {
  justify-content: end;
}
.flex.ac {
  align-items: center;
}
.flex.as {
  align-items: start;
}

.gap-5 {
  gap: 5rem;
}
.gap-10 {
  gap: 10rem;
}
.gap-15 {
  gap: 15rem;
}
.gap-20 {
  gap: 20rem;
}
.gap-30 {
  gap: 30rem;
}
.gap-40 {
  gap: 40rem;
}
.gap-50 {
  gap: 50rem;
}

.w-100 {
  width: 100% !important;
}

.w-50 {
  width: 50% !important;
}

.clickable {
  cursor: pointer;
}

.medium {
  font-size: 15rem;
}

.big {
  font-size: 20rem;
}

.large {
  font-size: 30rem;
}

.txt-danger {
  color: #FB6350;
}

.txt-success {
  color: #39BEA7;
}

.txt-warning {
  color: #F2B164;
}

button {
  font-family: "Inter", sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10rem 15rem;
  font-size: 13rem;
  font-weight: 400;
  height: 40rem;
  border: none;
  border-radius: 10rem;
  cursor: pointer;
  color: white;
  white-space: pre;
  background-color: #0B5C5E;
  line-height: 0;
}
button.not-active {
  background-color: #383641;
  opacity: 0.5;
  cursor: auto;
}
button.not-active:hover {
  opacity: 0.5;
}
button:hover {
  opacity: 0.9;
}
button.danger {
  background-color: #FB6350;
}
button.success {
  background-color: #39BEA7;
}
button.cancel {
  background-color: white;
  border: 1rem solid #0B5C5E;
  color: #0B5C5E;
}
button.cancel .ico {
  background-color: #0B5C5E;
}
button.warning {
  background-color: #F29058;
}
button.left-opened {
  border-radius: 0 10rem 10rem 0;
}
button.both-side-opened {
  border-radius: 0;
}
button.right-opened {
  border-radius: 10rem 0 0 10rem;
}
button.unclickable {
  cursor: unset;
}
button.unclickable:hover {
  opacity: 1;
}
button:has(i) {
  padding: 0 15rem;
}
button span.ico {
  width: 15rem;
  height: 15rem;
  background-color: white;
  margin-right: 8rem;
}
button i.ico {
  width: 15rem;
  height: 15rem;
  background-color: white;
}

.icon-button {
  background-color: #383641;
  width: 15rem;
  height: 15rem;
  cursor: pointer;
}

body {
  color: #696969;
  font-family: "Inter", sans-serif !important;
  font-size: 14rem;
  line-height: 14rem;
}

p {
  font-family: "Inter", sans-serif !important;
}
p.small {
  font-size: 12rem;
}
p.smaller {
  font-size: 10rem;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

h1 {
  font-size: 44rem;
  line-height: 44rem;
}

h2 {
  font-size: 30rem;
  line-height: 30rem;
}

h3 {
  font-size: 27rem;
  line-height: 27rem;
}

h4 {
  font-size: 22rem;
  line-height: 22rem;
}

h5 {
  font-size: 18rem;
  line-height: 18rem;
}

h5 {
  font-size: 16rem;
  line-height: 16rem;
}

.valid.modified:not([type=checkbox]) {
  outline: 1rem solid #26b050;
}

.invalid {
  outline: 1rem solid red;
}

.validation-message {
  color: red;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1rem 2rem rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
}

html {
  padding: 0;
  margin: 0;
  font-size: 0.052083333vw;
}
html.smaller {
  font-size: 0.042083333vw;
}

@media (max-width: 680px) {
  html {
    font-size: 0.8px;
  }
}
body {
  padding: 0;
  margin: 0;
  background-color: black;
  background-image: url("/img/sBG.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#main-container {
  width: 100vw;
  height: 100vh;
}

@media screen and (max-width: 600px) {
  #main-container, #scrollable-container {
    width: 100vw !important;
  }
  #action-bar {
    width: 100vw;
    overflow: hidden;
  }
  #sidebar {
    width: 0rem;
    display: none;
  }
  .kanban-navi {
    width: 100vw !important;
  }
  #order-process .order-content {
    column-count: 1 !important;
  }
  #single-process-viewer card content {
    padding: 0 !important;
  }
}
.ksw-board .ksw-columns {
  display: flex;
  gap: 30rem;
  overflow: auto;
  max-height: 500rem;
  min-height: 500rem;
  min-width: 100%;
  color: white;
}
.ksw-board .ksw-columns h5 {
  margin: 0;
}
.ksw-board .ksw-columns .ksw-colcard {
  max-width: 300rem;
  min-width: 300rem;
  box-sizing: border-box;
}
.ksw-board .ksw-columns .ksw-colcard .top-header {
  padding: 5rem;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.ksw-board .ksw-columns .ksw-colcard .ksw-statuslist {
  padding: 5rem;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.ksw-board .ksw-columns .ksw-colcard .status-list {
  padding: 10rem;
  border-radius: 10rem;
  border: 1rem solid #5C222B;
  cursor: grab;
}

.ksw-cloud__items {
  display: flex;
  flex-wrap: wrap;
  gap: 10rem;
  cursor: grab;
}
.ksw-cloud__items .ksw-cloud__row {
  display: flex;
  padding: 10rem;
}

a {
  text-decoration: none;
}

.link {
  color: #1096E2 !important;
  text-decoration: underline;
  cursor: pointer;
}

.ico {
  display: inline-block;
  width: 8rem;
  height: 8rem;
  background-color: var(--ico-color, currentColor);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.ico.success {
  --ico-color: #39BEA7;
}
.ico.danger {
  --ico-color: #FB6350;
}
.ico.warning {
  --ico-color: #F29058;
}
.ico.primary {
  --ico-color: #0B5C5E;
}
.ico.ico-add-card {
  -webkit-mask-image: url("/img/ico/add-card.svg");
  mask-image: url("/img/ico/add-card.svg");
}
.ico.ico-add-circle {
  -webkit-mask-image: url("/img/ico/add-circle.svg");
  mask-image: url("/img/ico/add-circle.svg");
}
.ico.ico-add-kanban {
  -webkit-mask-image: url("/img/ico/add-kanban.svg");
  mask-image: url("/img/ico/add-kanban.svg");
}
.ico.ico-add-to-stock {
  -webkit-mask-image: url("/img/ico/add-to-stock.svg");
  mask-image: url("/img/ico/add-to-stock.svg");
}
.ico.ico-agent {
  -webkit-mask-image: url("/img/ico/agent.svg");
  mask-image: url("/img/ico/agent.svg");
}
.ico.ico-alu-windows {
  -webkit-mask-image: url("/img/ico/alu-windows.svg");
  mask-image: url("/img/ico/alu-windows.svg");
}
.ico.ico-archive {
  -webkit-mask-image: url("/img/ico/archive.svg");
  mask-image: url("/img/ico/archive.svg");
}
.ico.ico-badge {
  -webkit-mask-image: url("/img/ico/badge.svg");
  mask-image: url("/img/ico/badge.svg");
}
.ico.ico-bell {
  -webkit-mask-image: url("/img/ico/bell.svg");
  mask-image: url("/img/ico/bell.svg");
}
.ico.ico-bin {
  -webkit-mask-image: url("/img/ico/bin.svg");
  mask-image: url("/img/ico/bin.svg");
}
.ico.ico-boxes {
  -webkit-mask-image: url("/img/ico/boxes.svg");
  mask-image: url("/img/ico/boxes.svg");
}
.ico.ico-bookmark {
  -webkit-mask-image: url("/img/ico/bookmark.svg");
  mask-image: url("/img/ico/bookmark.svg");
}
.ico.ico-brain {
  -webkit-mask-image: url("/img/ico/brain.svg");
  mask-image: url("/img/ico/brain.svg");
}
.ico.ico-brush {
  -webkit-mask-image: url("/img/ico/brush.svg");
  mask-image: url("/img/ico/brush.svg");
}
.ico.ico-calculator {
  -webkit-mask-image: url("/img/ico/calculator.svg");
  mask-image: url("/img/ico/calculator.svg");
}
.ico.ico-calendar-add {
  -webkit-mask-image: url("/img/ico/calendar-add.svg");
  mask-image: url("/img/ico/calendar-add.svg");
}
.ico.ico-calendar-arrow-right {
  -webkit-mask-image: url("/img/ico/calendar-arrow-right.svg");
  mask-image: url("/img/ico/calendar-arrow-right.svg");
}
.ico.ico-calendar {
  -webkit-mask-image: url("/img/ico/calendar.svg");
  mask-image: url("/img/ico/calendar.svg");
}
.ico.ico-camera {
  -webkit-mask-image: url("/img/ico/camera.svg");
  mask-image: url("/img/ico/camera.svg");
}
.ico.ico-cancel {
  -webkit-mask-image: url("/img/ico/cancel.svg");
  mask-image: url("/img/ico/cancel.svg");
}
.ico.ico-caret-down {
  -webkit-mask-image: url("/img/ico/caret-down.svg");
  mask-image: url("/img/ico/caret-down.svg");
}
.ico.ico-castle {
  -webkit-mask-image: url("/img/ico/castle.svg");
  mask-image: url("/img/ico/castle.svg");
}
.ico.ico-circle-data {
  -webkit-mask-image: url("/img/ico/circle-data.svg");
  mask-image: url("/img/ico/circle-data.svg");
}
.ico.ico-cog-thin {
  -webkit-mask-image: url("/img/ico/cog-thin.svg");
  mask-image: url("/img/ico/cog-thin.svg");
}
.ico.ico-cog {
  -webkit-mask-image: url("/img/ico/cog.svg");
  mask-image: url("/img/ico/cog.svg");
}
.ico.ico-crane-thin {
  -webkit-mask-image: url("/img/ico/crane-thin.svg");
  mask-image: url("/img/ico/crane-thin.svg");
}
.ico.ico-crane {
  -webkit-mask-image: url("/img/ico/crane.svg");
  mask-image: url("/img/ico/crane.svg");
}
.ico.ico-credit-card {
  -webkit-mask-image: url("/img/ico/credit-card.svg");
  mask-image: url("/img/ico/credit-card.svg");
}
.ico.ico-crown {
  -webkit-mask-image: url("/img/ico/crown.svg");
  mask-image: url("/img/ico/crown.svg");
}
.ico.ico-cursor {
  -webkit-mask-image: url("/img/ico/cursor.svg");
  mask-image: url("/img/ico/cursor.svg");
}
.ico.ico-curtains {
  -webkit-mask-image: url("/img/ico/curtains.svg");
  mask-image: url("/img/ico/curtains.svg");
}
.ico.ico-danger {
  -webkit-mask-image: url("/img/ico/danger.svg");
  mask-image: url("/img/ico/danger.svg");
}
.ico.ico-delete-window {
  -webkit-mask-image: url("/img/ico/delete-window.svg");
  mask-image: url("/img/ico/delete-window.svg");
}
.ico.ico-door {
  -webkit-mask-image: url("/img/ico/door.svg");
  mask-image: url("/img/ico/door.svg");
}
.ico.ico-dollar-box {
  -webkit-mask-image: url("/img/ico/dollar-box.svg");
  mask-image: url("/img/ico/dollar-box.svg");
}
.ico.ico-dollar-circle {
  -webkit-mask-image: url("/img/ico/dollar-circle.svg");
  mask-image: url("/img/ico/dollar-circle.svg");
}
.ico.ico-dollar-pc {
  -webkit-mask-image: url("/img/ico/dollar-pc.svg");
  mask-image: url("/img/ico/dollar-pc.svg");
}
.ico.ico-edit {
  -webkit-mask-image: url("/img/ico/edit.svg");
  mask-image: url("/img/ico/edit.svg");
}
.ico.ico-folder-tick {
  -webkit-mask-image: url("/img/ico/folder-tick.svg");
  mask-image: url("/img/ico/folder-tick.svg");
}
.ico.ico-filter {
  -webkit-mask-image: url("/img/ico/filter.svg");
  mask-image: url("/img/ico/filter.svg");
}
.ico.ico-frame {
  -webkit-mask-image: url("/img/ico/frame.svg");
  mask-image: url("/img/ico/frame.svg");
}
.ico.ico-gate {
  -webkit-mask-image: url("/img/ico/gate.svg");
  mask-image: url("/img/ico/gate.svg");
}
.ico.ico-glass {
  -webkit-mask-image: url("/img/ico/glass.svg");
  mask-image: url("/img/ico/glass.svg");
}
.ico.ico-group-meeting {
  -webkit-mask-image: url("/img/ico/group-meeting.svg");
  mask-image: url("/img/ico/group-meeting.svg");
}
.ico.ico-handle {
  -webkit-mask-image: url("/img/ico/handle.svg");
  mask-image: url("/img/ico/handle.svg");
}
.ico.ico-home {
  -webkit-mask-image: url("/img/ico/home.svg");
  mask-image: url("/img/ico/home.svg");
}
.ico.ico-id {
  -webkit-mask-image: url("/img/ico/id.svg");
  mask-image: url("/img/ico/id.svg");
}
.ico.ico-income {
  -webkit-mask-image: url("/img/ico/income.svg");
  mask-image: url("/img/ico/income.svg");
}
.ico.ico-info {
  -webkit-mask-image: url("/img/ico/info.svg");
  mask-image: url("/img/ico/info.svg");
}
.ico.ico-kanban {
  -webkit-mask-image: url("/img/ico/kanban.svg");
  mask-image: url("/img/ico/kanban.svg");
}
.ico.ico-layers {
  -webkit-mask-image: url("/img/ico/layers.svg");
  mask-image: url("/img/ico/layers.svg");
}
.ico.ico-list {
  -webkit-mask-image: url("/img/ico/list.svg");
  mask-image: url("/img/ico/list.svg");
}
.ico.ico-lorry {
  -webkit-mask-image: url("/img/ico/lorry.svg");
  mask-image: url("/img/ico/lorry.svg");
}
.ico.ico-lorry-thin {
  -webkit-mask-image: url("/img/ico/lorry-thin.svg");
  mask-image: url("/img/ico/lorry-thin.svg");
}
.ico.ico-lupe-circle {
  -webkit-mask-image: url("/img/ico/lupe-circle.svg");
  mask-image: url("/img/ico/lupe-circle.svg");
}
.ico.ico-lupe {
  -webkit-mask-image: url("/img/ico/lupe.svg");
  mask-image: url("/img/ico/lupe.svg");
}
.ico.ico-mail {
  -webkit-mask-image: url("/img/ico/mail.svg");
  mask-image: url("/img/ico/mail.svg");
}
.ico.ico-message-bubble {
  -webkit-mask-image: url("/img/ico/message-bubble.svg");
  mask-image: url("/img/ico/message-bubble.svg");
}
.ico.ico-note {
  -webkit-mask-image: url("/img/ico/note.svg");
  mask-image: url("/img/ico/note.svg");
}
.ico.ico-option {
  -webkit-mask-image: url("/img/ico/option.svg");
  mask-image: url("/img/ico/option.svg");
}
.ico.ico-on-stock {
  -webkit-mask-image: url("/img/ico/on-stock.svg");
  mask-image: url("/img/ico/on-stock.svg");
}
.ico.ico-out-of-stock {
  -webkit-mask-image: url("/img/ico/out-of-stock.svg");
  mask-image: url("/img/ico/out-of-stock.svg");
}
.ico.ico-payment {
  -webkit-mask-image: url("/img/ico/payment.svg");
  mask-image: url("/img/ico/payment.svg");
}
.ico.ico-phone {
  -webkit-mask-image: url("/img/ico/phone.svg");
  mask-image: url("/img/ico/phone.svg");
}
.ico.ico-phonebook {
  -webkit-mask-image: url("/img/ico/phonebook.svg");
  mask-image: url("/img/ico/phonebook.svg");
}
.ico.ico-piggy {
  -webkit-mask-image: url("/img/ico/piggy.svg");
  mask-image: url("/img/ico/piggy.svg");
}
.ico.ico-pin-add {
  -webkit-mask-image: url("/img/ico/pin-add.svg");
  mask-image: url("/img/ico/pin-add.svg");
}
.ico.ico-pin {
  -webkit-mask-image: url("/img/ico/pin.svg");
  mask-image: url("/img/ico/pin.svg");
}
.ico.ico-plus {
  -webkit-mask-image: url("/img/ico/plus.svg");
  mask-image: url("/img/ico/plus.svg");
}
.ico.ico-printer {
  -webkit-mask-image: url("/img/ico/printer.svg");
  mask-image: url("/img/ico/printer.svg");
}
.ico.ico-production-belt {
  -webkit-mask-image: url("/img/ico/production-belt.svg");
  mask-image: url("/img/ico/production-belt.svg");
}
.ico.ico-pvc-windows {
  -webkit-mask-image: url("/img/ico/pvc-windows.svg");
  mask-image: url("/img/ico/pvc-windows.svg");
}
.ico.ico-redo {
  -webkit-mask-image: url("/img/ico/redo.svg");
  mask-image: url("/img/ico/redo.svg");
}
.ico.ico-reload {
  -webkit-mask-image: url("/img/ico/reload.svg");
  mask-image: url("/img/ico/reload.svg");
}
.ico.ico-save {
  -webkit-mask-image: url("/img/ico/save.svg");
  mask-image: url("/img/ico/save.svg");
}
.ico.ico-screw {
  -webkit-mask-image: url("/img/ico/screw.svg");
  mask-image: url("/img/ico/screw.svg");
}
.ico.ico-send-email {
  -webkit-mask-image: url("/img/ico/send-email.svg");
  mask-image: url("/img/ico/send-email.svg");
}
.ico.ico-server {
  -webkit-mask-image: url("/img/ico/server.svg");
  mask-image: url("/img/ico/server.svg");
}
.ico.ico-share {
  -webkit-mask-image: url("/img/ico/share.svg");
  mask-image: url("/img/ico/share.svg");
}
.ico.ico-shopping-cart {
  -webkit-mask-image: url("/img/ico/shopping-cart.svg");
  mask-image: url("/img/ico/shopping-cart.svg");
}
.ico.ico-smiley {
  -webkit-mask-image: url("/img/ico/smiley.svg");
  mask-image: url("/img/ico/smiley.svg");
}
.ico.ico-sort {
  -webkit-mask-image: url("/img/ico/sort.svg");
  mask-image: url("/img/ico/sort.svg");
}
.ico.ico-spray {
  -webkit-mask-image: url("/img/ico/spray.svg");
  mask-image: url("/img/ico/spray.svg");
}
.ico.ico-stock-tick {
  -webkit-mask-image: url("/img/ico/stock-tick.svg");
  mask-image: url("/img/ico/stock-tick.svg");
}
.ico.ico-stocks {
  -webkit-mask-image: url("/img/ico/stocks.svg");
  mask-image: url("/img/ico/stocks.svg");
}
.ico.ico-suitcase {
  -webkit-mask-image: url("/img/ico/suitcase.svg");
  mask-image: url("/img/ico/suitcase.svg");
}
.ico.ico-table {
  -webkit-mask-image: url("/img/ico/table.svg");
  mask-image: url("/img/ico/table.svg");
}
.ico.ico-target {
  -webkit-mask-image: url("/img/ico/target.svg");
  mask-image: url("/img/ico/target.svg");
}
.ico.ico-thumb-down {
  -webkit-mask-image: url("/img/ico/thumb-down.svg");
  mask-image: url("/img/ico/thumb-down.svg");
}
.ico.ico-thumb-up {
  -webkit-mask-image: url("/img/ico/thumb-up.svg");
  mask-image: url("/img/ico/thumb-up.svg");
}
.ico.ico-tick {
  -webkit-mask-image: url("/img/ico/tick.svg");
  mask-image: url("/img/ico/tick.svg");
}
.ico.ico-trend-down {
  -webkit-mask-image: url("/img/ico/trend-down.svg");
  mask-image: url("/img/ico/trend-down.svg");
}
.ico.ico-trend-up {
  -webkit-mask-image: url("/img/ico/trend-up.svg");
  mask-image: url("/img/ico/trend-up.svg");
}
.ico.ico-trophy {
  -webkit-mask-image: url("/img/ico/trophy.svg");
  mask-image: url("/img/ico/trophy.svg");
}
.ico.ico-undo {
  -webkit-mask-image: url("/img/ico/undo.svg");
  mask-image: url("/img/ico/undo.svg");
}
.ico.ico-upload {
  -webkit-mask-image: url("/img/ico/upload.svg");
  mask-image: url("/img/ico/upload.svg");
}
.ico.ico-user-add {
  -webkit-mask-image: url("/img/ico/user-add.svg");
  mask-image: url("/img/ico/user-add.svg");
}
.ico.ico-user {
  -webkit-mask-image: url("/img/ico/user.svg");
  mask-image: url("/img/ico/user.svg");
}
.ico.ico-users {
  -webkit-mask-image: url("/img/ico/users.svg");
  mask-image: url("/img/ico/users.svg");
}
.ico.ico-wand {
  -webkit-mask-image: url("/img/ico/wand.svg");
  mask-image: url("/img/ico/wand.svg");
}
.ico.ico-wheel {
  -webkit-mask-image: url("/img/ico/wheel.svg");
  mask-image: url("/img/ico/wheel.svg");
}
.ico.ico-wrench-thin {
  -webkit-mask-image: url("/img/ico/wrench-thin.svg");
  mask-image: url("/img/ico/wrench-thin.svg");
}
.ico.ico-wrench {
  -webkit-mask-image: url("/img/ico/wrench.svg");
  mask-image: url("/img/ico/wrench.svg");
}
.ico.ico-zoom {
  -webkit-mask-image: url("/img/ico/zoom.svg");
  mask-image: url("/img/ico/zoom.svg");
}
.ico.ico-map {
  -webkit-mask-image: url("/img/ico/pin.svg");
  mask-image: url("/img/ico/pin.svg");
}
.ico.ico-settings {
  -webkit-mask-image: url("/img/ico/cog.svg");
  mask-image: url("/img/ico/cog.svg");
}
.ico.ico-trash {
  -webkit-mask-image: url("/img/ico/bin.svg");
  mask-image: url("/img/ico/bin.svg");
}
.ico.ico-search {
  -webkit-mask-image: url("/img/ico/lupe.svg");
  mask-image: url("/img/ico/lupe.svg");
}

#tabs-bar {
  min-width: calc(100vw - 220rem);
  margin-left: 220rem;
  height: 40rem;
  text-align: right;
  color: white;
  display: flex;
  gap: 5rem;
  align-items: end;
  overflow-x: hidden;
  background: #696969;
  scroll-behavior: smooth;
}
#tabs-bar .tab {
  display: flex;
  gap: 10rem;
  height: 35rem;
  align-items: center;
  padding-left: 10rem;
  padding-right: 12rem;
  cursor: pointer;
  min-width: 220rem;
  max-width: 220rem;
  position: relative;
  border-radius: 10rem 10rem 0 0;
  border: 1rem solid white;
}
#tabs-bar .tab .tab-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 20rem;
  min-height: 20rem;
  border-radius: 5rem;
}
#tabs-bar .tab .tab-icon .ico {
  background: white;
}
#tabs-bar .tab .tab-title {
  font-size: 12rem;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150rem;
}
#tabs-bar .tab:hover {
  background: #a6a4a4;
}
#tabs-bar .tab.active {
  border: none;
  background: white;
}
#tabs-bar .tab.active .tab-title {
  color: #5C222B;
}
#tabs-bar .tab.active .tab-close {
  color: #5C222B;
}
#tabs-bar .tab .tab-close {
  align-self: start;
  cursor: pointer;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 12rem;
  top: 12rem;
  width: 9rem;
  height: 9rem;
}
#tabs-bar .tab .tab-close:hover {
  opacity: 0.2;
  color: black;
}

.tab-content-wrapper {
  width: 100%;
  height: calc(100vh - 90rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
}

.tab-content-header {
  width: calc(100vw - 76rem);
  height: 60rem;
}
.tab-content-header .tab-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.tab-content-header .tab-header .left-section {
  display: flex;
  gap: 20rem;
  align-items: center;
}
.tab-content-header .tab-header sep {
  display: block;
  width: 1rem;
  border-right: 3rem solid #5C222B;
  height: 22rem;
}
.tab-content-header .tab-header .card-title {
  font-size: 16rem;
  font-weight: 500;
  color: #5C222B;
}
.tab-content-header .tab-header .header-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5rem;
  height: 20rem;
  width: 20rem;
}
.tab-content-header .tab-header .header-icon .ico {
  width: 12rem;
  height: 12rem;
}
.tab-content-header .tab-header .actions-section {
  display: flex;
  gap: 7rem;
  align-items: center;
}
.tab-content-header .tab-header .actions-section .action-button {
  width: 35rem;
  height: 35rem;
  border-radius: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.tab-content-header .tab-header .actions-section .action-button .ico {
  width: 18rem;
  height: 18rem;
}

.tab-content {
  margin: 20rem 0 30rem 0;
  width: calc(100% - 76rem);
  height: calc(100vh - 150rem);
  overflow: auto; /* scroll tylko tu */
  animation: 0.5s forwards showMainContainer;
}
.tab-content.data-view {
  position: relative;
}
.tab-content.data-view .data-count-bar {
  position: fixed;
  bottom: 5rem;
  width: inherit;
  height: 20rem;
  background: #D9D9D9;
  text-align: center;
  font-size: 12rem;
  color: #393641;
  line-height: 20rem;
}

.tab-history-nav {
  display: flex;
  gap: 7rem;
}
.tab-history-nav .nav-btn {
  background: #E8E8E8;
  border-radius: 10rem;
  border: none;
  cursor: pointer;
  height: 35rem;
  width: 35rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tab-history-nav .nav-btn .ico {
  width: 18rem;
  height: 18rem;
}
.tab-history-nav .nav-btn.disabled {
  cursor: not-allowed;
  opacity: 0.1;
}

@keyframes showMainContainer {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#top-navbar {
  background: #383641;
  height: 50rem;
  text-align: right;
  position: sticky;
  top: 0;
  color: white;
  z-index: 1;
  display: flex;
  gap: 20rem;
  align-items: center;
  justify-content: end;
}
#top-navbar logo-section {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  background: black;
  height: 90rem;
  width: 220rem;
}
#top-navbar logo-section img {
  height: 40rem;
}
#top-navbar .widgets {
  display: flex;
  gap: 20rem;
  height: 50rem;
  align-items: center;
}
#top-navbar .widget {
  padding: 8rem;
  cursor: pointer;
  border-radius: 8rem;
}
#top-navbar .widget.active {
  display: flex;
  align-items: center;
  height: 100%;
  background: #F29058 !important;
  border-radius: 0 !important;
  justify-content: center;
}
#top-navbar .widget:hover {
  background-color: #F29058;
}
#top-navbar .widget .ico {
  background-color: white;
  width: 20rem;
  height: 20rem;
  padding: 9rem;
}

#user-widget {
  margin-right: 24rem;
  cursor: pointer;
  height: 24rem;
}
#user-widget sep {
  background: white;
  height: 1rem;
  width: 100%;
  margin: 4rem 0;
}
#user-widget options {
  width: 100%;
  position: absolute;
  top: 50rem;
  right: 0;
  background: #5C222B;
  display: flex;
  padding: 10rem 0;
  flex-direction: column;
  border-radius: 0 0 10rem 10rem;
  box-shadow: 8px 8px 24px 0px rgb(66, 68, 90);
}
#user-widget options option {
  padding: 5rem 20rem;
  text-align: left;
  font-size: 14rem;
}
#user-widget options option:hover {
  background-color: #F29058;
}

#multi-search {
  position: relative;
  z-index: 4;
}
#multi-search input {
  background: white;
  width: 431rem;
}
#multi-search .search-results-box {
  z-index: 4;
  position: absolute;
  top: 40rem;
  background: white;
  text-align: left;
  padding: 18rem 26rem;
  width: 400rem;
  left: 10rem;
  max-height: 477rem;
  overflow-y: auto;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  border-radius: 0 0 16rem 16rem;
  border: 1px solid #116585;
}
#multi-search .search-results-box p {
  cursor: pointer;
  font-size: 14rem;
  color: #5C222B;
  font-weight: 400;
  margin: 0;
  padding: 8rem 0;
}
#multi-search .search-results-box p:hover {
  background-color: #696969;
}
#multi-search .search-results-box p.sep {
  font-size: 15rem;
  font-weight: 500;
  margin-bottom: 12rem;
  cursor: auto;
}
#multi-search .search-results-box p.sep:hover {
  background-color: white;
}
#multi-search .search-results-box p.sep:not(:first-child) {
  border-top: 1rem solid #D5D5D5;
  padding-top: 12rem;
  margin: 12rem 0;
}

.chat-shell {
  height: 100%;
  display: flex;
  gap: 12px;
  background: white;
  color: #101828;
}
.chat-shell.split .sidebar {
  width: 360px;
  min-width: 320px;
  max-width: 420px;
}
.chat-shell.fullscreen .sidebar {
  display: none;
}
.chat-shell .sidebar,
.chat-shell .content {
  background: #ffffff;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  overflow: hidden;
}
.chat-shell .sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat-shell .sidebar .sidebar-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.92) 100%);
  border-bottom: 1px solid rgba(16, 24, 40, 0.1);
  padding: 10px 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.chat-shell .sidebar .sidebar-header .header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.chat-shell .sidebar .users {
  padding: 10px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.1);
}
.chat-shell .sidebar .users .users-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(16, 24, 40, 0.65);
  margin: 2px 0 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.chat-shell .sidebar .users .user-item {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  outline: none;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 10px;
  padding: 10px 10px;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.chat-shell .sidebar .users .user-item:focus-visible {
  box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.2);
}
.chat-shell .sidebar .users .user-item:hover {
  background: #fbfcfe;
  border-color: rgba(16, 24, 40, 0.18);
  transform: translateY(-1px);
}
.chat-shell .sidebar .users .user-item:active {
  transform: translateY(0);
}
.chat-shell .sidebar .users .user-item .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(16, 24, 40, 0.35);
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75);
}
.chat-shell .sidebar .users .user-item.online .dot {
  background: #12b76a;
}
.chat-shell .sidebar .users .user-item.offline .dot {
  background: rgba(16, 24, 40, 0.35);
}
.chat-shell .sidebar .users .user-item .uname {
  font-weight: 650;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-shell .sidebar .users .user-item .uid {
  font-size: 11px;
  color: rgba(16, 24, 40, 0.65);
  max-width: 140px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-shell .sidebar .sep {
  border: none;
  border-top: 1px solid rgba(16, 24, 40, 0.1);
  margin: 0;
}
.chat-shell .sidebar .thread-list {
  padding: 10px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.chat-shell .sidebar .thread-list::-webkit-scrollbar {
  width: 10px;
}
.chat-shell .sidebar .thread-list::-webkit-scrollbar-thumb {
  background: rgba(16, 24, 40, 0.12);
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.9);
}
.chat-shell .sidebar .thread-list::-webkit-scrollbar-track {
  background: transparent;
}
.chat-shell .sidebar .thread-list .thread-item {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  outline: none;
  text-align: left;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 10px;
  padding: 10px 10px;
  background: #ffffff;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.chat-shell .sidebar .thread-list .thread-item:focus-visible {
  box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.2);
}
.chat-shell .sidebar .thread-list .thread-item:hover {
  background: #fbfcfe;
  border-color: rgba(16, 24, 40, 0.18);
  transform: translateY(-1px);
}
.chat-shell .sidebar .thread-list .thread-item:active {
  transform: translateY(0);
}
.chat-shell .sidebar .thread-list .thread-item.active {
  border-color: rgba(45, 108, 223, 0.45);
  box-shadow: 0 0 0 2px rgba(45, 108, 223, 0.1);
}
.chat-shell .sidebar .thread-list .thread-item .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.chat-shell .sidebar .thread-list .thread-item .title {
  font-weight: 650;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-shell .sidebar .thread-list .thread-item .preview {
  font-size: 12px;
  color: rgba(16, 24, 40, 0.65);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 6px;
}
.chat-shell .sidebar .thread-list .thread-item .meta {
  font-size: 11px;
  color: rgba(16, 24, 40, 0.45);
  margin-top: 6px;
}
.chat-shell .sidebar .thread-list .thread-item .badge {
  font-size: 12px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 999px;
  background: #101828;
  color: #ffffff;
  flex: 0 0 auto;
}
.chat-shell .content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  min-height: 0;
}
.chat-shell .content .empty {
  width: 100%;
  display: grid;
  place-items: center;
  color: rgba(16, 24, 40, 0.65);
  background: #ffffff;
}
.chat-shell .content .thread-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #ffffff;
}
.chat-shell .content .thread-shell .thread-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.1);
  background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.92) 100%);
}
.chat-shell .content .thread-shell .thread-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.chat-shell .content .thread-shell .thread-title strong {
  font-size: 14px;
  font-weight: 750;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-shell .content .thread-shell .thread-title .small {
  font-size: 12px;
  color: rgba(16, 24, 40, 0.65);
  white-space: nowrap;
}
.chat-shell .content .thread-shell .thread-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.chat-shell .content .thread-shell .members-panel {
  border-bottom: 1px solid rgba(16, 24, 40, 0.1);
  padding: 10px 12px;
  background: #fbfcfe;
}
.chat-shell .content .thread-shell .members-panel .members-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-shell .content .thread-shell .members-panel .member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 10px;
  background: #ffffff;
}
.chat-shell .content .thread-shell .members-panel .member-row .member-id {
  font-weight: 650;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-shell .content .thread-shell .members-panel .members-note {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(16, 24, 40, 0.65);
}
.chat-shell .content .thread-shell .thread-chat {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  background: #ffffff;
}
.chat-shell .muted {
  color: rgba(16, 24, 40, 0.65);
}
.chat-shell .small {
  font-size: 12px;
}
.chat-shell .error {
  border: 1px solid rgba(217, 45, 32, 0.22);
  background: rgba(217, 45, 32, 0.1);
  color: #7a271a;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
.chat-shell .btn {
  outline: none;
  border: 1px solid rgba(16, 24, 40, 0.1);
  background: #ffffff;
  color: #101828;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 650;
  font-size: 13px;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.chat-shell .btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.2);
}
.chat-shell .btn:hover {
  background: #fbfcfe;
  border-color: rgba(16, 24, 40, 0.18);
  transform: translateY(-1px);
}
.chat-shell .btn:active {
  transform: translateY(0);
}
.chat-shell .btn.danger {
  border-color: rgba(217, 45, 32, 0.35);
  color: #d92d20;
}
.chat-shell .btn.danger:hover {
  background: rgba(217, 45, 32, 0.1);
  border-color: rgba(217, 45, 32, 0.45);
}
.chat-shell .btn.danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.chat-shell .btn.primary {
  border-color: rgba(45, 108, 223, 0.5);
  background: #2d6cdf;
  color: #ffffff;
}
.chat-shell .btn.primary:hover {
  background: #2a66d4;
  border-color: rgba(45, 108, 223, 0.65);
}
@media (max-width: 980px) {
  .chat-shell {
    gap: 10px;
  }
  .chat-shell.split .sidebar {
    width: 320px;
    min-width: 280px;
  }
}
@media (max-width: 820px) {
  .chat-shell {
    padding: 6px;
  }
  .chat-shell.split {
    flex-direction: column;
  }
  .chat-shell.split .sidebar {
    width: 100%;
    max-width: none;
    min-height: 280px;
  }
}

.chat-window {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  /* TOP BAR */
  /* MESSAGES SCROLLER */
  /* COMPOSER pinned bottom */
  /* Shared controls */
}
.chat-window .topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.1);
  background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.92) 100%);
}
.chat-window .topbar .spacer {
  flex: 1 1 auto;
  min-width: 0;
}
.chat-window .topbar .typing {
  font-size: 12px;
  color: rgba(16, 24, 40, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}
.chat-window .messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  background: #f6f7fb;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.chat-window .messages::-webkit-scrollbar {
  width: 10px;
}
.chat-window .messages::-webkit-scrollbar-thumb {
  background: rgba(16, 24, 40, 0.12);
  border-radius: 999px;
  border: 2px solid rgb(246, 247, 251);
}
.chat-window .messages::-webkit-scrollbar-track {
  background: transparent;
}
.chat-window .messages .muted {
  color: rgba(16, 24, 40, 0.65);
  padding: 6px 2px;
}
.chat-window .messages .msg {
  background: #ffffff;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 12px;
  padding: 10px 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.chat-window .messages .msg.deleted {
  opacity: 0.75;
}
.chat-window .messages .msg .head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 12px;
  color: rgba(16, 24, 40, 0.65);
}
.chat-window .messages .msg .head .sender {
  font-weight: 700;
  color: #101828;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.chat-window .messages .msg .head .time {
  white-space: nowrap;
}
.chat-window .messages .msg .head .edit {
  white-space: nowrap;
  color: rgba(16, 24, 40, 0.5);
}
.chat-window .messages .msg .head .actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 0 0 auto;
}
.chat-window .messages .msg .reply-chip {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  background: rgba(45, 108, 223, 0.08);
  color: rgba(16, 24, 40, 0.85);
  font-size: 12px;
}
.chat-window .messages .msg .body {
  margin-top: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.35;
  color: #101828;
  /* jeżeli RenderBodyWithMentions generuje span/linki - to będzie wyglądać dobrze */
}
.chat-window .messages .msg .body a,
.chat-window .messages .msg .body .mention {
  color: #2d6cdf;
  text-decoration: none;
  font-weight: 650;
}
.chat-window .messages .msg .body a:hover,
.chat-window .messages .msg .body .mention:hover {
  text-decoration: underline;
}
.chat-window .messages .msg .editbox {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-window .messages .msg .editbox .textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  border: 1px solid rgba(16, 24, 40, 0.15);
  border-radius: 10px;
  padding: 10px;
  outline: none;
}
.chat-window .messages .msg .editbox .textarea:focus {
  border-color: rgba(45, 108, 223, 0.5);
  box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.2);
}
.chat-window .messages .msg .editbox .row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.chat-window .messages .msg .files {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chat-window .messages .msg .files .file {
  font-size: 12px;
  color: rgba(16, 24, 40, 0.85);
  border: 1px dashed rgba(16, 24, 40, 0.2);
  background: rgba(16, 24, 40, 0.02);
  border-radius: 10px;
  padding: 6px 10px;
}
.chat-window .messages .msg .reactions {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chat-window .composer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  border-top: 1px solid rgba(16, 24, 40, 0.1);
  background: #ffffff;
  padding: 10px 12px;
  /* Reply bar nad inputem */
  /* Mention picker nad inputem, “przyklejony” do kompozytora */
}
.chat-window .composer .replybar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(45, 108, 223, 0.2);
  background: rgba(45, 108, 223, 0.08);
  color: rgba(16, 24, 40, 0.85);
  font-size: 12px;
  margin-bottom: 10px;
}
.chat-window .composer .replybar .icon-btn {
  margin-left: auto;
}
.chat-window .composer .composer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.chat-window .composer .composer-row .file-input {
  flex: 0 0 auto;
  max-width: 180px;
}
.chat-window .composer .composer-row .input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(16, 24, 40, 0.15);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}
.chat-window .composer .composer-row .input:focus {
  border-color: rgba(45, 108, 223, 0.5);
  box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.2);
}
.chat-window .composer .mention-picker {
  margin-top: 10px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.12);
  max-height: 220px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.chat-window .composer .mention-picker::-webkit-scrollbar {
  width: 10px;
}
.chat-window .composer .mention-picker::-webkit-scrollbar-thumb {
  background: rgba(16, 24, 40, 0.12);
  border-radius: 999px;
  border: 2px solid rgb(255, 255, 255);
}
.chat-window .composer .mention-picker .mention-item {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  color: #101828;
  font-weight: 650;
}
.chat-window .composer .mention-picker .mention-item:hover {
  background: rgba(16, 24, 40, 0.04);
}
.chat-window .composer .mention-picker .mention-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(45, 108, 223, 0.2);
}
.chat-window .btn {
  border: 1px solid rgba(16, 24, 40, 0.1);
  background: #ffffff;
  color: #101828;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 650;
  font-size: 13px;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.chat-window .btn:hover {
  background: #fbfcfe;
  border-color: rgba(16, 24, 40, 0.18);
  transform: translateY(-1px);
}
.chat-window .btn:active {
  transform: translateY(0);
}
.chat-window .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.chat-window .btn.primary {
  border-color: rgba(45, 108, 223, 0.5);
  background: #2d6cdf;
  color: #ffffff;
}
.chat-window .btn.primary:hover {
  background: #2a66d4;
  border-color: rgba(45, 108, 223, 0.65);
}
.chat-window .icon-btn {
  border: 1px solid rgba(16, 24, 40, 0.1);
  background: #ffffff;
  color: rgba(16, 24, 40, 0.85);
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.chat-window .icon-btn:hover {
  background: rgba(16, 24, 40, 0.04);
  border-color: rgba(16, 24, 40, 0.18);
  transform: translateY(-1px);
}
.chat-window .icon-btn:active {
  transform: translateY(0);
}
.chat-window .icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.2);
}
.chat-window .reaction {
  border: 1px solid rgba(16, 24, 40, 0.1);
  background: #ffffff;
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  color: rgba(16, 24, 40, 0.85);
  transition: background 120ms ease, border-color 120ms ease;
}
.chat-window .reaction:hover {
  background: rgba(16, 24, 40, 0.04);
  border-color: rgba(16, 24, 40, 0.18);
}
.chat-window .reaction.mine {
  border-color: rgba(45, 108, 223, 0.35);
  background: rgba(45, 108, 223, 0.1);
  color: #101828;
}
@media (max-width: 820px) {
  .chat-window .topbar .typing {
    max-width: 40%;
  }
  .chat-window .composer .composer-row {
    flex-wrap: wrap;
  }
  .chat-window .composer .composer-row .file-input {
    max-width: 100%;
    width: 100%;
  }
  .chat-window .composer .composer-row .btn.primary {
    width: 100%;
  }
  .chat-window .messages {
    padding: 10px;
  }
  .chat-window .messages .msg .head .sender {
    max-width: 160px;
  }
}

/* =========================
   MODALS (Create group / Add members)
   ========================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(16, 24, 40, 0.55);
  /* delikatny blur jeżeli wspierany */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal {
  width: 720px;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.28), 0 2px 8px rgba(16, 24, 40, 0.1);
  overflow: hidden;
}

/* Górna część (nagłówek) */
.modal-title {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.modal-title strong {
  font-size: 14px;
  color: #101828;
  letter-spacing: 0.2px;
}

/* Treść: przewijana jeśli jest dużo userów w pickerze */
.modal > .error,
.modal > .form-row,
.modal > .picker,
.modal > .muted {
  padding-left: 16px;
  padding-right: 16px;
}

.modal {
  /* Picker użytkowników */
  /* Dół: akcje */
}
.modal .error {
  margin: 12px 16px 0 16px;
  border: 1px solid rgba(217, 45, 32, 0.25);
  background: rgba(217, 45, 32, 0.06);
  color: rgb(120, 22, 14);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
}
.modal .form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
}
.modal .form-row .label {
  font-size: 12px;
  color: rgba(16, 24, 40, 0.7);
}
.modal .form-row .input {
  width: 100%;
  border: 1px solid rgba(16, 24, 40, 0.15);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}
.modal .form-row .input:focus {
  border-color: rgba(45, 108, 223, 0.55);
  box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.2);
}
.modal .muted {
  padding-top: 8px;
  padding-bottom: 0;
  color: rgba(16, 24, 40, 0.65);
}
.modal .small {
  font-size: 12px;
}
.modal .picker {
  margin: 12px 16px 0 16px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 14px;
  background: rgba(16, 24, 40, 0.02);
  padding: 10px;
  max-height: 300px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overscroll-behavior: contain;
}
.modal .picker::-webkit-scrollbar {
  width: 10px;
}
.modal .picker::-webkit-scrollbar-thumb {
  background: rgba(16, 24, 40, 0.14);
  border-radius: 999px;
  border: 2px solid rgb(246, 247, 251);
}
.modal .picker::-webkit-scrollbar-track {
  background: transparent;
}
.modal .picker .pick-item {
  border: 1px solid rgba(16, 24, 40, 0.12);
  background: #ffffff;
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  color: rgba(16, 24, 40, 0.9);
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.modal .picker .pick-item:hover {
  background: rgba(16, 24, 40, 0.04);
  border-color: rgba(16, 24, 40, 0.2);
  transform: translateY(-1px);
}
.modal .picker .pick-item:active {
  transform: translateY(0);
}
.modal .picker .pick-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.2);
}
.modal .picker .pick-item.selected {
  border-color: rgba(45, 108, 223, 0.5);
  background: rgba(45, 108, 223, 0.1);
  color: #101828;
}
.modal .modal-actions {
  margin-top: 14px;
  padding: 12px 16px;
  border-top: 1px solid rgba(16, 24, 40, 0.1);
  background: rgba(255, 255, 255, 0.96);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  /* jeżeli przyciski są te same co w reszcie UI */
}
.modal .modal-actions .btn {
  border: 1px solid rgba(16, 24, 40, 0.1);
  background: #ffffff;
  color: #101828;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 650;
  font-size: 13px;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.modal .modal-actions .btn:hover {
  background: #fbfcfe;
  border-color: rgba(16, 24, 40, 0.18);
  transform: translateY(-1px);
}
.modal .modal-actions .btn:active {
  transform: translateY(0);
}
.modal .modal-actions .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.modal .modal-actions .btn.primary {
  border-color: rgba(45, 108, 223, 0.55);
  background: #2d6cdf;
  color: #ffffff;
}
.modal .modal-actions .btn.primary:hover {
  background: #2a66d4;
}

/* Responsywność */
@media (max-width: 820px) {
  .modal-backdrop {
    padding: 12px;
  }
  .modal {
    width: 100%;
    max-height: calc(100vh - 24px);
  }
  .modal .picker {
    max-height: 240px;
  }
  .modal .modal-actions {
    flex-direction: column-reverse;
  }
  .modal .modal-actions .btn {
    width: 100%;
  }
}
/* Redukcja animacji jeśli user ma preferencje */
@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal .picker .pick-item,
  .modal .modal-actions .btn {
    transition: none;
  }
}
#notifications-widget {
  width: 480rem;
  max-height: 600rem;
  position: fixed;
  top: 50rem;
  right: 126rem;
  width: 430rem;
  z-index: 1;
  background: white;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  border-radius: 0rem 0rem 16rem 16rem;
}
#notifications-widget ntf-header {
  display: flex;
  padding: 10rem 18rem;
  justify-content: space-between;
  align-items: center;
  background: #0B5C5E;
  color: white;
  font-size: 17rem;
}
#notifications-widget ntf-header txt {
  display: flex;
  align-items: center;
  gap: 5rem;
}
#notifications-widget ntf-header .ico {
  background: white;
  width: 22rem;
  height: 22rem;
}
#notifications-widget ntf-header .ico-close {
  cursor: pointer;
  width: 18rem;
  height: 18rem;
}
#notifications-widget readall {
  display: flex;
  gap: 8rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 13rem;
  color: #1096E2;
  height: 40rem;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  text-decoration: underline;
}
#notifications-widget readall span {
  width: 14rem;
  height: 14rem;
  background-color: #1096E2;
}
#notifications-widget ntf-content {
  overflow: auto;
  min-height: 200rem;
  max-height: 400rem;
  display: block;
  padding: 5rem 0;
}
#notifications-widget ntf-content notification {
  display: block;
  padding: 17rem 14rem 0 17rem;
}
#notifications-widget ntf-content notification:last-child nt-content {
  border-bottom: none !important;
}
#notifications-widget ntf-content notification nt-content {
  display: block;
  border-bottom: 1rem solid #E9E9E9;
  padding-bottom: 12rem;
}
#notifications-widget ntf-content notification nt-content top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rem;
  align-items: center;
}
#notifications-widget ntf-content notification nt-content top el {
  display: flex;
  gap: 10rem;
  align-items: center;
}
#notifications-widget ntf-content notification nt-content top el i {
  width: 15rem;
  height: 18rem;
}
#notifications-widget ntf-content notification nt-content top el hd-txt {
  font-size: 14rem;
  font-weight: 500;
  color: black;
}
#notifications-widget ntf-content notification nt-content top div {
  display: flex;
  gap: 15rem;
  font-size: 12rem;
  align-items: center;
}
#notifications-widget ntf-content notification nt-content top div .ico-close {
  width: 12rem;
  height: 12rem;
  cursor: pointer;
  background-color: #383641;
}
#notifications-widget ntf-content notification nt-content txt {
  font-size: 12rem;
}
#notifications-widget ntf-content notification nt-content url {
  font-size: 12rem;
  margin-top: 10rem;
  display: block;
  text-decoration: none !important;
  font-weight: 600;
}
#notifications-widget ntf-content notification nt-content url span {
  background-color: #1096E2;
  margin-right: 5rem;
}

.widget {
  display: flex;
  align-items: center;
  gap: 5rem;
  position: relative;
}
.widget .badge {
  position: absolute;
  right: 10%;
  top: 5%;
  background-color: #FB6350;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  min-width: 18rem;
}
.widget .badge:empty {
  color: red;
}

#emoji-panel {
  position: absolute;
  bottom: 76rem;
  right: 0;
  width: 100%;
  height: 200rem;
  overflow: auto;
  z-index: 1;
  background-color: white;
  border-top: 3rem solid #696969;
}
#emoji-panel .container {
  padding: 10rem;
  display: flex;
  column-gap: 20rem;
  flex-wrap: wrap;
}
#emoji-panel .container p {
  cursor: pointer;
}

img.avatar {
  border-radius: 100%;
}

.status-bar {
  width: fit-content;
  min-width: 150rem;
  padding: 5rem 20rem;
  color: white;
  border-radius: 10rem;
  display: flex;
  align-items: center;
}
.status-bar .ico {
  width: 15rem;
  height: 16rem;
}

#desktop {
  user-select: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, 150rem);
  grid-auto-rows: 150rem;
  gap: 20rem;
  padding: 40rem;
  width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100vh - 102rem);
}
#desktop .desktop-item.icon {
  width: 147rem;
  height: 143rem;
  background: rgba(217, 217, 217, 0.1);
  border-radius: 30rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
#desktop .desktop-item.icon .icon-img {
  width: 55rem;
  height: 55rem;
  border-radius: 16rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36rem;
  color: white;
}
#desktop .desktop-item.icon .icon-txt {
  margin-top: 14rem;
  width: 100rem;
  text-align: center;
  color: white;
  font-size: 17rem;
  font-weight: 600;
  line-height: 120%;
}
#desktop .desktop-item.icon .icon-desc {
  width: 100rem;
  text-align: center;
  color: white;
  font-size: 14rem;
  font-weight: 400;
  line-height: 120%;
}
#desktop .desktop-item.icon .ico {
  width: 25rem;
  height: 25rem;
  background-color: white;
}

.desktop-icon:active {
  transform: scale(1.1);
  cursor: grabbing;
}

.desktop-item.widget {
  width: 100%;
  height: 100%;
  background: #222;
  color: white;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}

.weather-widget {
  width: 100%;
}

.widget-content h4 {
  margin: 0 0 6px 0;
  font-size: 16px;
}

#desktop {
  user-select: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, 150rem);
  grid-auto-rows: 150rem;
  gap: 20rem;
  padding: 40rem;
  width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100vh - 102rem);
}
#desktop .desktop-item.icon {
  width: 147rem;
  height: 143rem;
  background: rgba(217, 217, 217, 0.1);
  border-radius: 30rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
#desktop .desktop-item.icon .icon-img {
  width: 55rem;
  height: 55rem;
  border-radius: 16rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36rem;
  color: white;
}
#desktop .desktop-item.icon .icon-txt {
  margin-top: 14rem;
  width: 100rem;
  text-align: center;
  color: white;
  font-size: 17rem;
  font-weight: 600;
  line-height: 120%;
}
#desktop .desktop-item.icon .icon-desc {
  width: 100rem;
  text-align: center;
  color: white;
  font-size: 14rem;
  font-weight: 400;
  line-height: 120%;
}
#desktop .desktop-item.icon .ico {
  width: 25rem;
  height: 25rem;
  background-color: white;
}

.desktop-icon:active {
  transform: scale(1.1);
  cursor: grabbing;
}

.desktop-item.widget {
  width: 100%;
  height: 100%;
  background: #222;
  color: white;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}

.weather-widget {
  width: 100%;
}

.widget-content h4 {
  margin: 0 0 6px 0;
  font-size: 16px;
}

.app-guard-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 15, 15, 0.88);
  backdrop-filter: blur(5px);
  z-index: 999999; /* Absolutny wierzch interfejsu */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.app-guard-box {
  background-color: #222222;
  border: 1px solid #3c3c3c;
  border-radius: 8px;
  padding: 40px 30px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
  color: #e0e0e0;
  font-family: system-ui, -apple-system, sans-serif;
}

.guard-icon {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.guard-icon.expired {
  color: #ff3b30;
  font-size: 40px;
}

.error-details-text {
  background-color: #1a1a1a;
  border-left: 4px solid #ff9500;
  padding: 12px;
  border-radius: 4px;
  font-size: 14px;
  color: #ffb347;
  text-align: left;
  margin: 20px 0;
  word-break: break-word;
}

.retry-info {
  font-size: 13px;
  color: #aaaaaa;
  margin-bottom: 20px;
}

.guard-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.btn-guard {
  display: inline-block;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s, opacity 0.2s;
}

.btn-guard.btn-danger {
  background-color: #ff3b30;
  color: #ffffff;
}

.btn-guard.btn-danger:hover {
  background-color: #e03026;
}

.btn-guard.btn-secondary {
  background-color: #3a3a3c;
  color: #ffffff;
  border: 1px solid #48484a;
}

.btn-guard.btn-secondary:hover:not(:disabled) {
  background-color: #48484a;
}

.btn-guard:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Animowany spinner dla efektu szukania sieci */
.spinner-pulse {
  width: 40px;
  height: 40px;
  background-color: #ff9500;
  border-radius: 50%;
  animation: pulseScale 1.4s infinite ease-in-out;
}

@keyframes pulseScale {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
#customer-process {
  width: 840rem;
  padding: 0 20rem;
}
#customer-process notes-wrapper {
  width: 100%;
  max-height: 200rem;
  overflow: auto;
}
#customer-process notes-wrapper note-element {
  margin-bottom: 20rem;
  display: block;
}

#basic-order-data .show-customer-data {
  height: 47rem;
  background-color: #237869;
  border-radius: 10rem;
  color: white;
  font-size: 16rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /* color: $teal-dark;
  font-weight: 700;
  cursor: pointer;
  line-height: 46rem;
  width: 100%;
  text-align: center;

  span {
      background-color: $teal-dark;
  }*/
}
#basic-order-data .show-customer-data span {
  width: 16rem;
  height: 16rem;
  background-color: white;
}
#basic-order-data .statuses-wrapper {
  margin-top: 10rem;
  display: flex;
  gap: 10rem;
  align-items: center;
}
#basic-order-data .statuses-wrapper status {
  border-radius: 8rem;
  display: flex;
  padding: 5rem;
  align-items: center;
  min-width: 42rem;
  min-height: 42rem;
  background: #E9E9E9;
  /*&.active {
      background: $mint-dark;
      opacity: 1;

      img {
          filter: none;
      }
  }

  img {
      filter: grayscale(100%);
  }*/
}
#basic-order-data .statuses-wrapper status img {
  width: 26rem;
  height: 26rem;
  margin: 0 auto;
}

#order-assembly-data.marg {
  padding: 20rem;
}
#order-assembly-data .ico-tools {
  background-color: #FB6350;
  width: 40rem;
  height: 40rem;
}
#order-assembly-data brown-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #5C222B;
  height: 63rem;
  border-radius: 10rem;
  width: 100%;
}
#order-assembly-data brown-box label {
  color: white;
  font-weight: 600;
}
#order-assembly-data brown-box display {
  color: white;
}

.costs-section .elements-wrapper {
  margin-top: 18rem;
}
.costs-section .elements-wrapper .element-card {
  border: 1rem solid rgba(105, 105, 105, 0.9607843137);
}
.costs-section .elements-wrapper .element-card.costs-summary {
  background: #F4F4F4;
  padding-left: 27rem;
  padding-right: 27rem;
}
.costs-section .elements-wrapper .element-card .element-header {
  padding-left: 27rem;
  justify-content: space-between;
  border-bottom: 1rem solid rgba(105, 105, 105, 0.9607843137);
}
.costs-section .elements-wrapper .element-card .element-header .main-info {
  color: #5C222B;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 3%;
}
.costs-section .elements-wrapper .element-card .element-header .main-info .ico {
  width: 14rem;
  height: 14rem;
}
.costs-section .elements-wrapper .element-card .element-header .card-navi {
  border-left: 1rem solid #696969;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 12rem;
}
.costs-section .elements-wrapper .element-card .element-header .quick-actions {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: end;
  gap: 26rem;
}
.costs-section .elements-wrapper .element-card .element-content {
  padding-left: 27rem;
  display: flex;
  padding-top: 0;
  padding-bottom: 0;
}
.costs-section .elements-wrapper .element-card .element-content .quick-actions .quick-action {
  display: flex;
  padding: 10rem 20rem;
  gap: 23rem;
  align-items: center;
}
.costs-section .elements-wrapper .element-card .element-content .quick-actions .quick-action:not(:last-child) {
  border-bottom: 1rem solid #696969;
}
.costs-section .elements-wrapper .element-card .element-content .quick-actions .quick-action .quick-action-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  background: red;
}
.costs-section .elements-wrapper .element-card .element-content .quick-actions .quick-action .quick-action-icon .ico {
  width: 20rem;
  height: 20rem;
}
.costs-section .quick-actions {
  border-left: 1rem solid #696969;
  min-width: 210rem;
  max-width: 210rem;
}

.attachments-section .element-card {
  border: 1rem solid #696969;
}
.attachments-section .element-card .element-header {
  border-bottom: 1rem solid #696969;
  justify-content: space-between;
}
.attachments-section .element-card .element-header .main-info, .attachments-section .element-card .element-header .who-created {
  white-space: pre;
}
.attachments-section .element-card .element-header .card-navi {
  border-left: 1rem solid #696969;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 12rem;
}
.attachments-section .element-card .element-header .card-navi .ico {
  background-color: rgba(105, 105, 105, 0.9607843137);
}
.attachments-section .element-card .element-content {
  padding-left: 40rem;
  padding-right: 40rem;
}
.attachments-section .element-card .element-content row {
  gap: 40rem;
}
.attachments-section .element-card .element-content .att-ico {
  width: 40rem;
  cursor: pointer;
}

.notes-section .element-header {
  border-bottom: 1rem solid #696969;
  justify-content: space-between;
  border-radius: 8rem 8rem 0 0;
}
.notes-section .element-header.note-type {
  background: #F29058;
  color: white;
  border-bottom: none;
}
.notes-section .element-header.note-type sep {
  border-color: white !important;
}
.notes-section .element-header.note-type .ico {
  background-color: white !important;
}
.notes-section .element-header.note-type strong {
  color: white;
}
.notes-section .element-header .main-info {
  display: flex;
  align-items: center;
}
.notes-section .element-header .main-info .ico {
  width: 14rem;
  height: 14rem;
}
.notes-section .element-header .main-info .ico-pin {
  cursor: pointer;
}
.notes-section .element-header .main-info .ico-pin.non-priority {
  opacity: 0.3;
}
.notes-section .element-header .main-info sep {
  margin: 0 15rem;
  width: 2rem;
  height: 27rem;
  border-left: 1rem solid black;
}
.notes-section .element-header .main-info, .notes-section .element-header .who-created {
  white-space: pre;
}
.notes-section .element-header .card-navi {
  border-left: 1rem solid #696969;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 12rem;
}
.notes-section .element-header .card-navi .ico {
  background-color: rgba(105, 105, 105, 0.9607843137);
}
.notes-section .elements-wrapper {
  margin-top: 18rem;
}
.notes-section .element-content {
  border: 1rem solid #696969;
  border-top: none;
  border-radius: 0 0 8rem 8rem;
  padding-left: 20rem;
  padding-right: 20rem;
  line-height: 120%;
  font-size: 13rem;
  color: #5C222B;
}

#order-stats stats-card {
  border: 1rem solid #383641;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 30rem 0;
  border-radius: 10rem;
  padding: 20rem 38rem;
  align-items: center;
}
#order-stats stats-card .warning {
  color: #F29058;
}
#order-stats stats-card .danger {
  color: #FB6350;
}
#order-stats stats-card .success {
  color: #39BEA7;
}
#order-stats stats-card left {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
#order-stats stats-card left price {
  font-size: 35rem;
  font-weight: 700;
}
#order-stats stats-card left txt {
  font-size: 19rem;
  font-weight: 600;
  line-height: 30rem;
}
#order-stats stats-card left marge {
  font-size: 20rem;
  font-weight: 600;
  margin-bottom: -5rem;
}
#order-stats stats-card left marge span {
  width: 20rem;
  height: 24rem;
  margin-bottom: -4rem;
}
#order-stats stats-card right {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
#order-stats stats-card right txt {
  font-size: 18rem;
  font-weight: bold;
  margin-top: 10rem;
}
#order-stats stats-card right stats-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
#order-stats stats-card right stats-wrapper place {
  font-size: 75rem;
  font-weight: bold;
  margin-top: 30rem;
}
#order-stats stats-card right stats-wrapper span {
  font-size: 18rem;
  margin-top: 6rem;
  color: #383641;
  font-weight: 400;
}

#order-process {
  min-width: 100%;
}
#order-process .order-card {
  margin-bottom: 10px;
  width: 100%;
  border-radius: 10rem;
  border: solid #5C222B;
  border-width: 0 1rem 1rem 1rem;
}
#order-process .order-card .order-head-navi {
  border-radius: 10rem 10rem 0 0;
  display: flex;
  align-items: center;
  width: 100%;
  background: #5C222B;
  color: white;
  padding: 14rem 23rem;
  font-size: 14rem;
  letter-spacing: 10%;
  font-weight: 500;
  text-transform: uppercase;
}
#order-process .order-card .order-head-navi .ico {
  background-color: white;
  width: 20rem;
  height: 20rem;
  cursor: pointer;
}
#order-process .order-card .order-card-content:not(:has(#order-assembly-data)) {
  padding: 10rem 23rem;
}
#order-process .order-row {
  width: 100%;
  margin-top: 20rem;
}
#order-process .order-content {
  display: flex;
  gap: 20rem;
  width: 100%;
}
#order-process .order-content .order-col {
  display: flex;
  flex-direction: column;
  gap: 20rem;
  width: 100%;
  min-width: 45%;
}

#organization-process {
  width: 840rem;
  padding: 0 20rem;
}

#contact-process {
  width: 844rem;
  padding: 0 20rem;
}
#contact-process notes-wrapper {
  width: 100%;
  max-height: 200rem;
  overflow: auto;
}
#contact-process notes-wrapper note-element {
  margin-bottom: 20rem;
  display: block;
}

#todotask-process {
  width: 840rem;
  padding: 0 20rem;
}

#chatgroup-process {
  width: 520rem;
  padding: 0 20rem;
}
#chatgroup-process .group-avatar {
  width: 200rem;
  height: 200rem;
  border-radius: 100%;
  margin: 0 auto;
  margin-bottom: 20rem;
}

#warehouseop-process {
  width: 840rem;
  padding: 0 20rem;
}
#warehouseop-process .table-row {
  margin-top: 30rem;
  overflow: auto;
  max-height: 200rem;
}
#warehouseop-process documents {
  overflow: auto;
  max-height: 196rem;
  display: block;
}
#warehouseop-process documents .doc, #warehouseop-process documents .att {
  cursor: pointer;
}
#warehouseop-process documents .doc a, #warehouseop-process documents .att a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12rem 10rem;
  border-bottom: 1rem solid #E9E9E9;
  color: #5C222B;
}
#warehouseop-process documents .doc a:hover, #warehouseop-process documents .att a:hover {
  background: #0B5C5E;
  color: white;
}
#warehouseop-process documents .doc a icon, #warehouseop-process documents .att a icon {
  border-radius: 5rem;
  padding: 5rem 10rem;
  display: flex;
  color: white;
}
#warehouseop-process documents .doc a icon span, #warehouseop-process documents .att a icon span {
  background-color: white;
  width: 14rem;
  height: 14rem;
}
#warehouseop-process documents .doc a icon.PZ, #warehouseop-process documents .att a icon.PZ {
  background: #39BEA7;
}
#warehouseop-process documents .doc a icon.WZ, #warehouseop-process documents .att a icon.WZ {
  background: #F2B164;
}
#warehouseop-process documents .doc a icon.file, #warehouseop-process documents .att a icon.file {
  background: #FB6350;
}

#product-process {
  width: 844rem;
  padding: 0 20rem;
}
#product-process .table-row {
  margin-top: 30rem;
  overflow: auto;
  max-height: 200rem;
}
#product-process datarow.ordered {
  color: #0B5C5E;
}
#product-process datarow.ordered span {
  background: #0B5C5E;
}
#product-process datarow.onstock {
  color: #39BEA7;
}
#product-process datarow.onstock span {
  background: #39BEA7;
}
#product-process datarow.outofstock {
  color: #F29058;
}
#product-process datarow.outofstock span {
  background: #F29058;
}
#product-process datarow span {
  width: 20rem;
  height: 20rem;
}
#product-process documents {
  overflow: auto;
  max-height: 200rem;
  display: block;
  margin-top: 30rem;
}
#product-process documents .doc, #product-process documents .att {
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12rem 10rem;
  border-bottom: 1rem solid #E9E9E9;
  color: #5C222B;
}
#product-process documents .doc a, #product-process documents .att a {
  font-size: 16rem;
  color: #1096E2;
  text-decoration: underline;
}
#product-process documents .doc a .ico, #product-process documents .att a .ico {
  width: 18rem;
  height: 18rem;
  background: #1096E2;
}
#product-process documents .doc icon, #product-process documents .att icon {
  border-radius: 5rem;
  padding: 5rem 10rem;
  display: flex;
  color: white;
  width: 40rem;
}
#product-process documents .doc icon span, #product-process documents .att icon span {
  background-color: white;
  width: 14rem;
  height: 14rem;
}
#product-process documents .doc icon.PZ, #product-process documents .att icon.PZ {
  background: #39BEA7;
}
#product-process documents .doc icon.WZ, #product-process documents .att icon.WZ {
  background: #F2B164;
}
#product-process documents .doc icon.file, #product-process documents .att icon.file {
  background: #FB6350;
}
#product-process .operation-container {
  padding-top: 30rem;
  max-height: 320rem;
  overflow: auto;
}
#product-process current-status {
  margin-bottom: 20rem;
  display: flex;
  align-items: center;
  gap: 12rem;
}
#product-process current-status status-ico {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
}
#product-process current-status status-ico .ico {
  width: 13rem;
  height: 13rem;
  background: white;
}
#product-process current-status status-ico.allOnStock {
  background: #39BEA7;
}
#product-process current-status status-ico.notOnStock {
  background: #FB6350;
}
#product-process current-status status-ico.partiallyOnStock {
  background: #F2B164;
}
#product-process current-status status-ico.partiallyOut {
  background: #D35D65;
}
#product-process current-status status-ico.allOut {
  background: #4E2436;
}
#product-process current-status txt {
  font-size: 20rem;
  font-weight: 500;
}
#product-process current-status txt.allOnStock {
  color: #39BEA7;
}
#product-process current-status txt.notOnStock {
  color: #FB6350;
}
#product-process current-status txt.partiallyOnStock {
  color: #F2B164;
}
#product-process current-status txt.partiallyOut {
  color: #D35D65;
}
#product-process current-status txt.allOut {
  color: #4E2436;
}
#product-process sep {
  margin-left: 40rem;
  display: block;
  border-left: 4rem dotted #5C222B;
  height: 30rem;
}
#product-process history-box {
  display: flex;
  align-items: center;
  gap: 17rem;
  margin-left: 30rem;
}
#product-process history-box status-ico {
  display: block;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: #5C222B;
  margin-left: 5rem;
}
#product-process history-box info-box txt {
  display: block;
  line-height: 24rem;
  font-weight: 600;
  color: #5C222B;
}

#windowstand-process {
  width: 744rem;
}
#windowstand-process notes-wrapper {
  width: 100%;
}
#windowstand-process documents {
  overflow: auto;
  max-height: 200rem;
  display: block;
  margin-top: 30rem;
}
#windowstand-process documents .doc, #windowstand-process documents .att {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12rem 10rem;
  border-bottom: 1rem solid #E9E9E9;
  color: #5C222B;
}
#windowstand-process documents .doc a, #windowstand-process documents .att a {
  font-size: 16rem;
  color: #1096E2;
  text-decoration: underline;
}
#windowstand-process documents .doc a .ico, #windowstand-process documents .att a .ico {
  width: 18rem;
  height: 18rem;
  background: #1096E2;
}
#windowstand-process documents .doc icon, #windowstand-process documents .att icon {
  border-radius: 5rem;
  padding: 5rem 10rem;
  display: flex;
  color: white;
  width: 40rem;
}
#windowstand-process documents .doc icon span, #windowstand-process documents .att icon span {
  background-color: white;
  width: 14rem;
  height: 14rem;
}
#windowstand-process documents .doc icon.PZ, #windowstand-process documents .att icon.PZ {
  background: #39BEA7;
}
#windowstand-process documents .doc icon.WZ, #windowstand-process documents .att icon.WZ {
  background: #F2B164;
}
#windowstand-process documents .doc icon.file, #windowstand-process documents .att icon.file {
  background: #FB6350;
}
#windowstand-process .operation-container {
  padding-top: 30rem;
  max-height: 320rem;
  overflow: auto;
}
#windowstand-process current-status {
  margin-bottom: 20rem;
  display: flex;
  align-items: center;
  gap: 12rem;
}
#windowstand-process current-status status-ico {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
}
#windowstand-process current-status status-ico .ico {
  width: 13rem;
  height: 13rem;
  background: white;
}
#windowstand-process current-status status-ico.allOnStock {
  background: #39BEA7;
}
#windowstand-process current-status status-ico.notOnStock {
  background: #FB6350;
}
#windowstand-process current-status status-ico.partiallyOnStock {
  background: #F2B164;
}
#windowstand-process current-status status-ico.partiallyOut {
  background: #D35D65;
}
#windowstand-process current-status status-ico.allOut {
  background: #4E2436;
}
#windowstand-process current-status txt {
  font-size: 20rem;
  font-weight: 500;
}
#windowstand-process current-status txt.allOnStock {
  color: #39BEA7;
}
#windowstand-process current-status txt.notOnStock {
  color: #FB6350;
}
#windowstand-process current-status txt.partiallyOnStock {
  color: #F2B164;
}
#windowstand-process current-status txt.partiallyOut {
  color: #D35D65;
}
#windowstand-process current-status txt.allOut {
  color: #4E2436;
}
#windowstand-process sep {
  margin-left: 40rem;
  display: block;
  border-left: 4rem dotted #5C222B;
  height: 30rem;
}
#windowstand-process history-box {
  display: flex;
  align-items: center;
  gap: 17rem;
  margin-left: 30rem;
}
#windowstand-process history-box status-ico {
  display: block;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: #5C222B;
  margin-left: 5rem;
}
#windowstand-process history-box info-box txt {
  display: block;
  line-height: 24rem;
  font-weight: 600;
  color: #5C222B;
}

#damage-box hide-dmg-row {
  cursor: pointer;
  border-bottom: 1rem solid #5C222B;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#damage-box hide-dmg-row mark {
  border: 1rem solid #5C222B;
  width: 12rem;
  height: 12rem;
  background: white;
  border-radius: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#damage-box hide-dmg-row mark .ico {
  background: #39BEA7;
}
#damage-box hide-dmg-row txt {
  font-size: 18rem;
  padding: 10rem;
  font-weight: 600;
  color: #5C222B;
}
#damage-box hide-dmg-row txt.repaired {
  text-decoration: line-through;
  color: #39BEA7;
}
#damage-box damage {
  padding: 0 40rem;
  border-radius: 10rem;
  background: #696969;
}
#damage-box damage dmg-buttons {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  gap: 15rem;
  justify-content: end;
}
#damage-box damage dmg-buttons button {
  width: 100%;
}

tr-header {
  display: flex;
  width: 100%;
  background: #C9DDE9;
  height: 50rem;
  align-items: center;
  padding: 0 28rem;
}
tr-header div {
  color: #5C222B;
  font-size: 18rem;
}

tr-action-box {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 28rem;
  height: 116rem;
  border-bottom: 1rem solid #E9E9E9;
}
tr-action-box icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46rem;
  height: 46rem;
  background: #0B5C5E;
  border-radius: 10rem;
}
tr-action-box icon .ico {
  background: white;
  width: 24rem;
  height: 24rem;
}
tr-action-box ico-txt {
  margin-top: 10rem;
  display: block;
  color: #0B5C5E;
  font-weight: 600;
  font-size: 16rem;
  text-transform: uppercase;
}
tr-action-box status-box {
  color: white;
  background: #F29058;
  padding: 10rem 20rem;
  border-radius: 10rem;
}

tr-opened-box {
  display: flex;
  width: 100%;
  padding: 30rem 51rem;
  justify-content: space-between;
}
tr-opened-box txt-hd {
  color: #0B5C5E;
  font-weight: 600;
  font-size: 18rem;
  display: block;
  margin-bottom: 20rem;
}

smileys {
  width: 100%;
  display: flex;
  gap: 10rem;
  align-items: center;
}
smileys img {
  cursor: pointer;
  width: 30rem;
  height: 30rem;
  filter: grayscale(1);
  opacity: 0.4;
}
smileys img.selected, smileys img:hover {
  filter: grayscale(0);
  opacity: 1;
}

#salechance-process {
  width: 95vw;
  height: 90vh;
  padding: 0 20rem;
}
#salechance-process .scrollable-tabpage {
  height: 55vh;
  overflow: auto;
  margin-top: 30rem;
}
#salechance-process filter-info {
  display: block;
  text-align: right;
  font-size: 16rem;
  font-weight: 500;
}
#salechance-process survey-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20rem;
}
#salechance-process survey {
  width: 100%;
  border-radius: 10rem;
  background: #f7f7f7;
  border: 1rem solid #E9E9E9;
}
#salechance-process survey.edit {
  background: white;
}
#salechance-process survey survey-head {
  border-radius: 10rem 10rem 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 45rem;
  padding: 0 21rem;
  background: #383641;
  color: white;
}
#salechance-process survey survey-head .ico {
  width: 15rem;
  height: 15rem;
  background-color: white;
}
#salechance-process survey survey-head .ico.ico-caret-down, #salechance-process survey survey-head .ico.ico-caret-up {
  cursor: pointer;
}
#salechance-process survey survey-head txt {
  font-weight: 500;
  font-size: 16rem;
}
#salechance-process survey survey-info {
  padding-left: 21rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rem solid #E9E9E9;
}
#salechance-process survey survey-info desc {
  color: #5C222B;
  font-size: 16rem;
  font-weight: 500;
}
#salechance-process survey survey-info whocreated {
  height: 45rem;
  padding: 0 20rem;
  display: flex;
  gap: 10rem;
  align-items: center;
  border-left: 1rem solid #E9E9E9;
  gap: 10rem;
}
#salechance-process survey survey-info whocreated img {
  width: 25rem;
  height: 25rem;
  border: 1rem solid #E9E9E9;
}
#salechance-process survey survey-info whocreated div {
  font-size: 14rem;
  font-weight: 500;
}
#salechance-process survey survey-info actions {
  display: flex;
}
#salechance-process survey survey-info actions div {
  border-left: 1rem solid #E9E9E9;
  height: 45rem;
  width: 50rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#salechance-process survey survey-info actions div .ico {
  cursor: pointer;
  background-color: #383641;
  width: 16rem;
  height: 16rem;
}
#salechance-process survey questions {
  padding: 30rem;
  display: block;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
#salechance-process survey questions selection-info {
  display: block;
  font-size: 14rem;
}
#salechance-process survey questions question {
  font-size: 16rem;
  font-weight: 500;
  color: #5C222B;
}
#salechance-process survey questions text-answer {
  padding: 20rem 0;
}
#salechance-process survey questions answers {
  padding: 20rem 0;
  display: flex;
  flex-direction: column;
  gap: 10rem;
}
#salechance-process survey questions answers answer {
  padding-left: 20rem;
  cursor: pointer;
  display: flex;
  gap: 15rem;
  font-size: 14rem;
}
#salechance-process survey questions answers answer::before {
  content: "";
  display: block;
  width: 14rem;
  height: 14rem;
  background-image: url("/img/utils/off.png");
  background-size: cover;
}
#salechance-process survey questions answers answer.chosen::before {
  background-image: url("/img/utils/on.png");
}
#salechance-process #salechance-stats {
  display: flex;
  padding: 30rem;
  gap: 15rem;
}
#salechance-process #salechance-stats big-tile {
  margin-bottom: 16rem;
  display: flex;
  gap: 18rem;
  align-items: center;
  width: 100%;
  padding: 10rem 15rem;
  border-radius: 10rem;
  border: 1rem solid #E9E9E9;
  background: #E9E9E9;
}
#salechance-process #salechance-stats big-tile icon-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 57rem;
  height: 98rem;
  border-radius: 10rem;
}
#salechance-process #salechance-stats big-tile icon-box .ico {
  background: white;
  width: 28rem;
  height: 28rem;
  height: 28rem;
}
#salechance-process #salechance-stats big-tile txt {
  display: block;
  font-weight: 600;
  font-size: 20rem;
  line-height: 26rem;
}
#salechance-process #salechance-stats big-tile value {
  font-weight: 800;
  font-size: 64rem;
  line-height: 120%;
}
#salechance-process #salechance-stats statbox {
  margin-bottom: 16rem;
  display: flex;
  gap: 18rem;
  align-items: center;
  width: 100%;
  padding: 10rem 15rem;
  border-radius: 10rem;
  border: 1rem solid #E9E9E9;
  background: #E9E9E9;
}
#salechance-process #salechance-stats statbox icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 57rem;
  height: 57rem;
  border-radius: 10rem;
  background: #39BEA7;
}
#salechance-process #salechance-stats statbox icon .ico {
  width: 32rem;
  height: 32rem;
  background: white;
}
#salechance-process #salechance-stats statbox txt {
  display: block;
  font-size: 20rem;
  color: #5C222B;
  font-weight: 600;
  line-height: 140%;
}
#salechance-process #salechance-stats statbox value {
  display: block;
  font-size: 24rem;
  color: #5C222B;
  line-height: 140%;
}
#salechance-process #salechance-stats statbox txt-hd {
  font-size: 20rem;
  color: #5C222B;
  display: block;
  padding-bottom: 15rem;
  padding-top: 10rem;
}
#salechance-process #salechance-stats statbox txt-lw {
  font-size: 14rem;
  color: #5C222B;
  display: block;
  margin-top: 10rem;
}
#salechance-process #salechance-stats statbox smiley-results {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#salechance-process #salechance-stats statbox smiley-results smiley-icons {
  display: flex;
  align-items: center;
  padding: 7rem 0;
  width: 70%;
  justify-content: space-around;
  border-bottom: 1rem solid #E9E9E9;
}
#salechance-process #salechance-stats statbox smiley-results smiley-icons img {
  width: 23rem;
  height: 23rem;
  filter: grayscale(1);
  opacity: 0.4;
}
#salechance-process #salechance-stats statbox smiley-results smiley-icons img.active {
  filter: grayscale(0);
  opacity: 1;
}
#salechance-process print-view {
  display: none;
}

row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 20rem 0;
  gap: 16rem;
  align-items: end;
}
row.sb {
  justify-content: space-between;
}
row.ac {
  align-items: center;
}
row.ct {
  justify-content: center;
}
row.bord-b {
  border-bottom: 1rem solid #696969;
}
row.bord-t {
  border-top: 1rem solid #696969;
}
row.no-margin {
  margin: 0;
}
row.no-margin-bottom {
  margin-bottom: 0;
}
row.no-wrap {
  flex-wrap: nowrap;
}
row.margin-small {
  margin: 10rem 0;
}
row row-cl {
  width: 50%;
}

grid {
  display: grid;
  margin: 20rem 0;
  grid-gap: 16rem;
}
grid.g-10 {
  grid-gap: 10rem;
}
grid.g-20 {
  grid-gap: 20rem;
}
grid.two {
  grid-template-columns: auto auto;
}
grid.three {
  grid-template-columns: auto auto auto;
}
grid.four {
  grid-template-columns: auto auto auto auto;
}
grid.five {
  grid-template-columns: auto auto auto auto auto;
}
grid.six {
  grid-template-columns: auto auto auto auto auto auto;
}
grid.fifty-fifty {
  grid-template-columns: 50% 50%;
}

img.rounded {
  border-radius: 50%;
}
img.img-big {
  width: 50rem;
  height: 50rem;
}
img.img-medium {
  width: 30rem;
  height: 30rem;
}
img.img-small {
  width: 20rem;
  height: 20rem;
}

medal {
  border-radius: 50%;
  width: 50rem;
  height: 50rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
medal i {
  width: 30rem;
  height: 30rem;
  background-color: white !important;
}

h-4 {
  font-size: 22rem;
  color: #0B5C5E;
  font-weight: 700;
}

span {
  margin-right: 10rem;
}

strong {
  color: black;
}
strong.danger {
  color: #FB6350;
}

databox {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

datarow {
  display: flex;
  gap: 10rem;
  padding: 2rem 0;
  flex-wrap: wrap;
  align-items: center;
}
datarow span {
  width: 15rem;
  height: 15rem;
  background: #0B5C5E !important;
}

label {
  font-size: 14rem;
  font-weight: 500;
  margin-bottom: 6rem;
}
label:empty {
  height: 14rem;
}

label-req {
  font-size: 14rem;
  font-weight: 500;
  margin-bottom: 6rem;
}
label-req::before {
  content: "*";
  color: #FB6350;
}

display {
  font-size: 14rem;
  color: black;
  font-weight: 400;
}
display.danger {
  color: #FB6350;
}
display.success {
  color: #39BEA7;
}
display.warning {
  color: #F2B164;
}
display i {
  width: 40rem;
  height: 40rem;
}
display.box {
  color: white;
  padding: 10rem;
  border-radius: 10rem;
  display: block;
  text-align: center;
}
display:empty::before {
  content: "BRAK";
  color: #FB6350;
}

url {
  font-size: 16rem;
  color: #1096E2;
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
}

#single-process-viewer table, #creator-viewer table {
  border-collapse: collapse;
  user-select: none;
  width: 100%;
}
#single-process-viewer table th, #creator-viewer table th {
  font-weight: 400;
  background: #124e66;
  color: white;
  padding: 0 30rem;
  text-align: center;
  border-right: 1rem solid #D0E9E9;
  border-left: 1rem solid #D0E9E9;
}
#single-process-viewer table th txt, #creator-viewer table th txt {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* number of lines to show */
}
#single-process-viewer table tr, #creator-viewer table tr {
  border-bottom: 1rem solid rgba(0, 0, 0, 0.3);
  text-align: center;
  height: 50rem;
  color: black;
  background-color: white;
  min-width: fit-content;
}
#single-process-viewer table tr:nth-child(2n), #creator-viewer table tr:nth-child(2n) {
  background-color: #f3f2f7;
}
#single-process-viewer table tr td, #creator-viewer table tr td {
  padding: 0 30rem;
  white-space: nowrap;
}

.process-empty-data {
  width: 100%;
  text-align: center;
  margin: 10rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rem;
  position: relative;
}
.process-empty-data img {
  width: 200rem;
}
.process-empty-data p {
  margin: 0;
}
.process-empty-data h3 {
  margin: 0;
}
.process-empty-data input[type=file] {
  position: absolute;
  min-height: 100%;
}
.process-empty-data.full-screen {
  margin: 0 !important;
  height: 100%;
  justify-content: center;
}
.process-empty-data.full-screen h3 {
  margin-top: 20rem !important;
}
.process-empty-data.full-screen img {
  width: 300rem;
}

.elements-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  width: 100%;
  margin-bottom: 8rem;
}

.elements-section-header {
  display: flex;
  flex-direction: column;
  gap: 10rem;
}

.element-card {
  border-radius: 8rem;
}
.element-card .element-header {
  display: flex;
  align-items: center;
  height: 36rem;
  padding-left: 20rem;
  gap: 12rem;
}
.element-card .element-header .main-info {
  font-size: 14rem;
}
.element-card .element-header .who-created {
  display: flex;
  align-items: center;
  gap: 4rem;
  font-size: 11rem;
}
.element-card .element-header .card-navi {
  cursor: pointer;
}
.element-card .element-header .card-navi .ico {
  width: 14rem;
  height: 14rem;
}
.element-card .element-content {
  padding-top: 20rem;
  padding-bottom: 20rem;
}

.scr-note-box {
  padding: 10rem;
  max-height: 300rem;
  overflow: auto;
  border-radius: 5rem;
  border: 1rem solid #E9E9E9;
}

#customer-creator, #emailtemplate-creator, #smstemplate-creator {
  width: 820rem;
}

#organization-creator {
  width: 820rem;
}

/* Kontener podglądu wybranej ikony nad tabami */
.selected-icon-preview {
  display: flex;
  align-items: center;
  gap: 15rem;
  margin-bottom: 15rem;
  padding: 10rem;
  background: var(--bg-light);
  border-radius: 6rem;
  border: 1rem solid var(--border-color);
}

.selected-icon-preview .preview-label {
  font-size: 11rem;
  color: var(--text-muted);
}

.selected-icon-preview .preview-value {
  display: flex;
  align-items: center;
  gap: 8rem;
  font-weight: bold;
  color: var(--primary-color);
}

.selected-icon-preview .preview-value i {
  font-size: 18rem;
}

.selected-icon-preview .preview-value span {
  font-size: 12rem;
}

.selected-icon-preview .preview-empty {
  font-size: 12rem;
  font-style: italic;
  color: var(--danger-color);
}

/* Siatka dla samych ikon */
.icon-picker-grid {
  display: grid;
  /* Automatyczne kolumny dopasowane do kwadratów ok. 42rem */
  grid-template-columns: repeat(auto-fill, minmax(42rem, 1fr));
  gap: 8rem;
  padding: 12rem 4rem;
  max-height: 280rem;
  overflow-y: auto;
}

/* Pojedynczy kafel ikony (teraz jako mniejszy kwadrat) */
.icon-picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  padding: 8rem;
  border: 1rem solid var(--border-color, #e0e0e0);
  border-radius: 6rem;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  background-color: transparent;
}

.icon-picker-item:hover {
  background-color: var(--bg-hover, #f5f5f5);
  border-color: var(--text-muted, #a0a0a0);
}

/* Stan aktywny */
.icon-picker-item.active {
  background-color: #e0f0ff;
  border-color: #0055ff;
  box-shadow: 0 0 0 2rem rgba(0, 85, 255, 0.15);
}

/* Skalowanie samej ikony wewnątrz kafelka względem bazy 12rem */
.icon-picker-item i {
  font-size: 20rem;
  transition: transform 0.15s ease;
}

.icon-picker-item.active i {
  color: #0055ff;
  transform: scale(1.1);
}

#warehouse-creator {
  width: 820rem;
}
#warehouse-creator .table-row {
  margin-top: 30rem;
  overflow: auto;
  width: 820rem !important;
  max-height: 236rem;
}
#warehouse-creator .ui-number {
  width: 80rem;
  text-align: center;
  height: 30rem;
  border-radius: 0;
}

#todotask-creator {
  width: 820rem;
}

#chatgroup-creator {
  width: 420rem;
}
#chatgroup-creator .group-avatar {
  width: 106rem;
  height: 106rem;
  border-radius: 100%;
  margin: 0 auto;
  margin-bottom: 20rem;
}

#repair-creator {
  width: 820rem;
}

#surveytemplate-creator {
  width: 820rem;
}
#surveytemplate-creator question-box {
  max-height: 50vh;
  overflow: auto;
  display: block;
}
#surveytemplate-creator question-box question {
  display: block;
  border: 1rem solid #E9E9E9;
  padding: 20rem;
  margin: 20rem 0;
  background: #E9E9E9;
}
#surveytemplate-creator question-box question q-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#surveytemplate-creator question-box question q-head .ico-message-bubble {
  width: 20rem;
  height: 20rem;
  background: #383641;
}
#surveytemplate-creator question-box question q-head txt {
  font-weight: 500;
  font-size: 20rem;
}

#salechance-creator {
  width: 880rem;
}
#salechance-creator .group-avatar {
  width: 106rem;
  height: 106rem;
  border-radius: 100%;
  margin: 0 auto;
  margin-bottom: 20rem;
}

creator-section {
  display: flex;
  border-top: 1rem solid #696969;
  padding-top: 30rem;
  padding-bottom: 60rem;
}
creator-section .section-header {
  min-width: 250rem;
  max-width: 250rem;
  font-size: 15rem;
  color: #383641;
  font-weight: 500;
  align-items: start;
}
creator-section .section-inputs {
  display: flex;
  row-gap: 35rem;
  column-gap: 15rem;
  align-items: start;
  flex-wrap: wrap;
}
creator-section.pv .section-inputs {
  column-gap: 85rem;
}

.tags-cluster {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10rem;
}
.tags-cluster .tag-wrapper {
  padding: 5rem 10rem;
  border-radius: 10rem;
  display: flex;
  align-items: center;
}
.tags-cluster .tag-wrapper .tag-data {
  font-size: 12rem;
  color: white;
  display: flex;
  align-items: center;
  gap: 5rem;
}
.tags-cluster .tag-wrapper .tag-data .ico {
  width: 16rem;
  height: 16rem;
}
.tags-cluster .tag-wrapper .remove-button {
  color: white;
  cursor: pointer;
}

.address-actions-wrapper {
  font-size: 12rem;
  color: #383641;
  display: flex;
  align-items: center;
  padding: 11rem 0rem 11rem 15rem;
  background: #E9E9E9;
  height: 40rem;
  gap: 15rem;
}
.address-actions-wrapper .actions {
  display: flex;
}
.address-actions-wrapper .actions button {
  border-radius: 0;
}

#action-bar {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
#action-bar .actions-section {
  display: flex;
  gap: 15rem;
}
#action-bar .actions-section .action {
  cursor: pointer;
  height: 35rem;
  background: #E8E8E8;
  border-radius: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12rem;
  gap: 10rem;
}
#action-bar .actions-section .action:hover {
  border: 1rem inset #FB6350;
}
#action-bar .actions-section .action:hover .ico {
  background-color: #F2B164;
}
#action-bar .actions-section .action .ico {
  height: 14rem;
  width: 14rem;
  background-color: #2E141F;
}
#action-bar .actions-section .action txt {
  color: #2E141F;
  transition: all 0.5s;
  font-size: 12rem;
  font-weight: 500;
  text-wrap: nowrap;
}
#action-bar .options-section {
  display: flex;
  gap: 20rem;
  position: relative;
}
#action-bar .options-section .data-range {
  z-index: 21;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: auto;
}
#action-bar .options-section .data-range .data-range-dropdown {
  top: 0;
  position: absolute;
  border-radius: 10rem;
  display: flex;
  flex-direction: column;
  background-color: #E8E8E8;
}
#action-bar .options-section .data-range .data-range-dropdown .range {
  justify-content: start;
}
#action-bar .options-section .data-range .data-range-dropdown .range:hover {
  background: #FB6350;
}
#action-bar .options-section .data-range .data-range-dropdown .range:hover .range-txt {
  color: white;
}
#action-bar .options-section .data-range .range {
  cursor: pointer;
  padding: 0 15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35rem;
  gap: 8rem;
  background-color: #E8E8E8;
  border-radius: 10rem;
}
#action-bar .options-section .data-range .range.chosen {
  border: 1rem solid #FB6350;
}
#action-bar .options-section .data-range .range .range-txt {
  color: #2E141F;
  text-wrap: nowrap;
  font-size: 12rem;
  font-weight: 500;
}
#action-bar .options-section .data-range .range-icon {
  width: 19rem;
  height: 19rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5rem;
}
#action-bar .options-section .data-view {
  display: flex;
  gap: 7rem;
  align-items: center;
}
#action-bar .options-section .data-view::after {
  margin-left: 10rem;
  content: "|";
  font-size: 20rem;
  color: #2E141F;
}
#action-bar .options-section .data-view::before {
  margin-right: 10rem;
  content: "|";
  font-size: 20rem;
  color: #2E141F;
}
#action-bar .options-section .data-view .view {
  cursor: pointer;
  height: 35rem;
  width: 35rem;
  background: #E8E8E8;
  border-radius: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#action-bar .options-section .data-view .view .ico {
  background-color: #2E141F;
  width: 19rem;
  height: 19rem;
}
#action-bar .options-section .data-view .view.active {
  border: 1rem solid #FB6350;
}
#action-bar .options-section .data-view .view.active .ico {
  background-color: #FB6350;
}
#action-bar .options-section .data-view .view.disabled {
  cursor: auto;
  opacity: 0.5;
}
#kanban {
  display: flex;
  gap: 10rem;
  width: fit-content;
}
#kanban .column {
  min-width: 335rem;
  display: flex;
  flex-direction: column;
}
#kanban .column .column-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
}
#kanban .column .column-header .stats {
  display: flex;
  gap: 5rem;
}
#kanban .column .column-header .stats .stat-item {
  padding: 5rem 15rem;
  color: white;
  border-radius: 8rem 8rem 0 0;
  background: #5C222B;
  font-size: 10rem;
}
#kanban .column .column-header .stats .stat-item span {
  margin-right: 5rem;
}
#kanban .column .column-header .stats .stat-item .ico {
  background-color: white;
}
#kanban .column .column-header .title {
  font-size: 14rem;
  font-weight: 600;
  line-height: 30rem;
  min-height: 35rem;
  color: white;
  padding-left: 20rem;
  border-radius: 0 10rem 0 0;
  background: #5C222B;
}
#kanban .column .column-header .col-bar {
  height: 8rem;
  width: 100%;
}
#kanban .column .content {
  position: relative;
  min-height: calc(100vh - 360rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8rem;
  background-color: transparent;
}
#kanban .column .content::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--col);
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}
#kanban .column .content > * {
  position: relative;
  z-index: 1;
}
#kanban .column .content.drag-over::before {
  background-color: #E9E9E9;
  opacity: 1;
}
#kanban .column .content .kanban-card {
  max-width: 350rem;
  cursor: all-scroll;
  user-select: none;
}

#table {
  /* Wysokość wierszy stała */
  /* Nagłówek sticky */
  /* Lewy-górny róg (DD): sticky w pionie i poziomie, ponad wszystkim */
  /* Pierwsza kolumna (checkboxy) – sticky w poziomie */
}
#table table {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
#table thead th, #table tbody td {
  padding: 0 20rem 0 20rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
#table td.selected {
  background: #0B5C5E !important;
  color: white !important;
}
#table tr {
  height: 40rem;
  border-bottom: 1rem solid rgba(0, 0, 0, 0.3);
  background-color: #D9D9D9;
  color: #393641;
  font-size: 13rem;
}
#table tr:nth-child(2n) {
  background-color: #F6F6F6;
}
#table thead th {
  height: 60rem;
  position: sticky;
  top: 0; /* jeśli masz action-bar sticky, podmień na var(--actionbar-h) */
  z-index: 20;
  background: #5C222B;
  color: #fff;
  font-weight: 400;
  text-align: left;
}
#table thead th txt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 16rem;
  text-wrap: auto;
  width: 100%;
}
#table thead th:first-child {
  border-radius: 20rem 0 0 0;
  left: 0;
  z-index: 50;
  width: 60rem;
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.12), 0 1px 0 rgba(0, 0, 0, 0.12);
  background: #5C222B;
}
#table thead th:last-child {
  border-radius: 0 20rem 0 0;
}
#table td.tick {
  position: sticky;
  left: 0;
  z-index: 25; /* pod rogiem (50), nad resztą komórek */
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.06);
  background-clip: padding-box;
  background: inherit;
}

/* Checkbox ikona */
bulkbox {
  display: block;
  width: 20rem;
  height: 20rem;
  background-image: url("/img/utils/off.png");
  background-size: contain;
  cursor: pointer;
}
bulkbox.active {
  background-image: url("/img/utils/on.png");
}

#list {
  padding-right: 20rem;
}
#list .list-header {
  margin: 15rem 0 10rem 0;
  display: flex;
  gap: 20rem;
}
#list .list-header txt {
  font-size: 22rem;
  color: #5C222B;
  font-weight: 500;
}
#list .threshold {
  padding-top: 30rem;
}
#list .threshold .threshold-card:has(.order-list-component) {
  padding-top: 10rem;
}
#list .threshold hd {
  padding-bottom: 5rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 1rem solid gray;
  cursor: pointer;
}
#list .threshold hd txt {
  font-size: 17rem;
  font-weight: 700;
}
#list .threshold hd .ico {
  width: 15rem;
  height: 15rem;
}

#map-element-container {
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 240rem;
}

#selectionmode-control {
  background: white;
  padding: 20rem;
  position: fixed;
  z-index: 1;
  top: 100rem;
  right: 80rem;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  width: 300rem;
}
#selectionmode-control .ui-dropdown {
  width: 100% !important;
}
#selectionmode-control .ui-dropdown .data-display {
  width: 100% !important;
}

.gm-style-iw-d {
  margin-top: -40rem !important;
}
.gm-style-iw-d h3 {
  text-align: center;
}

.calendar-container {
  width: 100%;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: #f3f4f6;
  user-select: none;
  /* ====== TUNING LAYOUTU (jedno źródło prawdy) ====== */
  --week-base-height: 96rem; /* minimalna wysokość „pustego” tygodnia */
  --day-number-offset: 10rem; /* ile miejsca od góry zajmuje nagłówek dnia/numerek */
  --lane-height: 60rem; /* wysokość jednego lane */
  --lane-gap: 3rem; /* odstęp między lane’ami */
  --lane-pad-y: 18rem; /* padding góra/dół w warstwie eventów */
  --week-extra-bottom: 0rem; /* zapas na dół (cień/obramowanie) */
  /* ====== TYDZIEŃ ====== */
  /* ====== WARSTWA EVENTÓW ====== */
  /* ====== DRAG STATE ====== */
}
.calendar-container .calendar-header {
  background: #2f2f3a;
  color: #ffffff;
  padding: 10rem 16rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.calendar-container .calendar-header .calendar-navigation {
  display: flex;
  align-items: center;
  gap: 8rem;
}
.calendar-container .calendar-header .calendar-navigation .current-period {
  margin-left: 12rem;
  font-weight: 600;
}
.calendar-container .calendar-header .calendar-navigation .btn-nav {
  width: 32rem;
  height: 32rem;
  border: none;
  border-radius: 4rem;
  background: #3a3a45;
  color: #ffffff;
  cursor: pointer;
}
.calendar-container .calendar-header .calendar-navigation .btn-nav:hover {
  background: #4a4a55;
}
.calendar-container .calendar-header .calendar-actions {
  display: flex;
  gap: 6rem;
}
.calendar-container .calendar-header .calendar-actions .btn-view {
  padding: 6rem 12rem;
  border-radius: 4rem;
  border: none;
  background: #4a4a55;
  color: #ffffff;
  font-size: 13rem;
  cursor: pointer;
}
.calendar-container .calendar-header .calendar-actions .btn-view.active {
  background: #0ea5a4;
}
.calendar-container .calendar-header .calendar-actions .btn-view:hover {
  background: #0b8b8a;
}
.calendar-container .calendar-grid-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #3a3a45;
}
.calendar-container .calendar-grid-headers .weekday-header {
  padding: 8rem;
  text-align: center;
  font-weight: 600;
  font-size: 13rem;
  color: #ffffff;
  border-right: 1rem solid #4a4a55;
}
.calendar-container .calendar-grid-headers .weekday-header:nth-child(7n) {
  border-right: none;
}
.calendar-container .calendar-scroll {
  height: 70vh;
  overflow-y: auto;
  background: #ffffff;
}
.calendar-container .calendar-week-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  box-sizing: border-box;
  /* klucz: rodzic ma wysokość adekwatną do liczby lane’ów */
  min-height: 11.66dvh;
  height: calc(var(--day-number-offset) + 2 * var(--lane-pad-y) + max(var(--lane-count), 1) * var(--lane-height) + (max(var(--lane-count), 1) - 1) * var(--lane-gap) + var(--week-extra-bottom));
  /* dodatkowy fizyczny zapas na dół (dla cieni) */
  padding-bottom: var(--week-extra-bottom);
}
.calendar-container .calendar-day {
  position: relative;
  padding: 4rem;
  border-right: 1rem solid #e0e0e0;
  border-bottom: 1rem solid #e0e0e0;
  background: #ffffff;
  overflow: hidden;
  /* ważne: nie wymuszamy już wysokości na komórce dnia */
  min-height: 0;
}
.calendar-container .calendar-day.other-month {
  background: #f0f0f0 !important;
}
.calendar-container .calendar-day.today {
  background: #fde8e8;
}
.calendar-container .calendar-day.weekend {
  background: #eef4f4;
}
.calendar-container .calendar-day.holiday {
  background: #fff4d6;
}
.calendar-container .calendar-day:nth-child(7n) {
  border-right: none;
}
.calendar-container .calendar-day .day-number {
  font-size: 12rem;
  font-weight: 600;
  color: #8c8c8c;
  margin-bottom: 4rem;
}
.calendar-container .week-events-layer {
  pointer-events: none;
  position: absolute;
  /* top wg offsetu; bottom wg zapasu */
  inset: var(--day-number-offset) 0 var(--week-extra-bottom) 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: var(--lane-height);
  gap: var(--lane-gap);
  /* korzystamy z lane-pad-y */
  padding: var(--lane-pad-y) 4rem;
}
.calendar-container .calendar-item.segment {
  pointer-events: auto; /* segmenty są interaktywne */
  background: #ffffff;
  border: 1rem solid #d9d9d9;
  border-radius: 4rem;
  cursor: grab;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.06);
  /* opcjonalnie: stabilna wysokość karty = wysokość lane
  (jeśli chcesz stałą wysokość kart niezależnie od zawartości) */
  height: var(--lane-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.calendar-container .calendar-item.segment:hover {
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.18);
}
.calendar-container .calendar-item.segment:active {
  cursor: grabbing;
}
.calendar-container.is-dragging .week-events-layer {
  pointer-events: none;
}
.calendar-container.is-dragging .calendar-item.segment {
  pointer-events: none;
  box-shadow: none;
}

.card-root {
  position: relative;
  width: 100%;
  height: 100%;
}
.card-root .cal-wrapper {
  padding: 4rem 6rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.card-root .cal-wrapper .first-row {
  display: flex;
  justify-content: space-between;
}
.card-root .cal-wrapper .first-row .days {
  background-image: url(/img/status/calendar.svg);
  background-size: contain;
  width: 16rem;
  height: 16rem;
  text-align: center;
}
.card-root .cal-wrapper .second-row {
  font-size: 12rem;
  font-weight: 500;
}
.card-root .cal-wrapper .third-row {
  line-height: 4rem;
  font-size: 10rem;
}

.order-card-popover {
  position: fixed;
  z-index: 9999;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  padding: 10px;
  max-height: 360px;
  overflow: auto;
}

.basic-kanban-card {
  border-radius: 10rem;
  border: 1rem solid #E9E9E9;
  min-height: 100rem;
  padding: 15rem;
  background: white;
  margin: 0 5rem;
}
.basic-kanban-card.order-kc {
  position: relative;
}
.basic-kanban-card.order-kc wrapper {
  width: 100%;
  display: flex;
}
.basic-kanban-card.order-kc wrapper info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8rem;
}
.basic-kanban-card.order-kc wrapper info info-option {
  display: flex;
  gap: 15rem;
  align-items: center;
  color: #5C222B;
}
.basic-kanban-card.order-kc wrapper info info-option .ico {
  background: #5C222B;
}
.basic-kanban-card.order-kc wrapper info info-option.danger {
  color: #FB6350;
}
.basic-kanban-card.order-kc wrapper info info-option.danger .ico {
  background: #FB6350;
}
.basic-kanban-card.order-kc wrapper info info-option.success {
  color: #39BEA7;
}
.basic-kanban-card.order-kc wrapper info info-option.success .ico {
  background: #39BEA7;
}
.basic-kanban-card.order-kc wrapper info info-option.id {
  font-weight: 500;
  color: #1096E2;
}
.basic-kanban-card.order-kc wrapper info info-option.id i {
  background-color: #1096E2;
}
.basic-kanban-card.order-kc wrapper info info-option i {
  width: 16rem;
  height: 16rem;
  background-color: #383641;
}
.basic-kanban-card.order-kc wrapper info info-option txt {
  font-weight: 500;
  font-size: 16rem;
  max-width: 250rem;
  line-height: 20rem;
}
.basic-kanban-card.order-kc products {
  margin-top: 20rem;
  display: flex;
  column-gap: 6rem;
  row-gap: 6rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.basic-kanban-card.order-kc products product {
  display: flex;
  align-items: center;
  gap: 5rem;
  padding: 5rem 10rem;
}
.basic-kanban-card.order-kc products product.ordered {
  border: 1rem solid #383641;
  border-radius: 5rem;
}
.basic-kanban-card.order-kc products product.partiallyOnStock {
  background-color: #F29058;
  border-color: #F29058;
}
.basic-kanban-card.order-kc products product.partiallyOnStock i {
  background-color: white;
}
.basic-kanban-card.order-kc products product.partiallyOnStock txt {
  color: white;
}
.basic-kanban-card.order-kc products product.allOnStock {
  background-color: #39BEA7;
  border-color: #39BEA7;
}
.basic-kanban-card.order-kc products product.allOnStock i {
  background-color: white;
}
.basic-kanban-card.order-kc products product.allOnStock txt {
  color: white;
}
.basic-kanban-card.order-kc products product.partiallyOut {
  background-color: #D35D65;
  border-color: #D35D65;
}
.basic-kanban-card.order-kc products product.partiallyOut i {
  background-color: white;
}
.basic-kanban-card.order-kc products product.partiallyOut txt {
  color: white;
}
.basic-kanban-card.order-kc products product.allOut {
  background-color: #4E2436;
  border-color: #4E2436;
}
.basic-kanban-card.order-kc products product.allOut i {
  background-color: white;
}
.basic-kanban-card.order-kc products product.allOut txt {
  color: white;
}
.basic-kanban-card.order-kc products product i {
  background-color: #383641;
  width: 18rem;
  height: 18rem;
}
.basic-kanban-card.order-kc products product txt {
  font-size: 18rem;
}
.basic-kanban-card.order-kc nodata {
  width: 100%;
  text-align: center;
  color: #FB6350;
  display: block;
}
.basic-kanban-card.order-kc stats {
  position: absolute;
  right: 10rem;
  top: 10rem;
}
.basic-kanban-card.order-kc statuses {
  position: absolute;
  top: 10rem;
  right: 40rem;
  display: flex;
  gap: 8rem;
}
.basic-kanban-card.order-kc statuses:has(img) {
  background: #696969;
  padding: 4rem 20rem 4rem 10rem;
  border-radius: 5rem 0 0 5rem;
}
.basic-kanban-card.order-kc statuses img {
  width: 20rem;
}
.basic-kanban-card.order-kc active-damage {
  display: block;
  height: 25rem;
  line-height: 22rem;
  margin-top: 15rem;
  font-size: 13rem;
  text-align: center;
  border-top: 1rem solid #E9E9E9;
  border-bottom: 1rem solid #E9E9E9;
}
.basic-kanban-card.salechance-kc sale-kb-header {
  display: flex;
  margin-bottom: 20rem;
  margin-top: -5rem;
  gap: 10rem;
  align-items: center;
}
.basic-kanban-card.salechance-kc sale-kb-header ready-box {
  padding: 3rem 10rem;
  display: flex;
  gap: 10rem;
  border-radius: 5rem;
  align-items: center;
  color: white;
  height: 25rem;
}
.basic-kanban-card.salechance-kc sale-kb-header ready-box .ico {
  background-color: white;
  width: 13rem;
  height: 13rem;
}
.basic-kanban-card.salechance-kc sale-kb-header agent {
  position: relative;
}
.basic-kanban-card.salechance-kc sale-kb-header agent other-agents {
  position: absolute;
  top: -12.5rem;
  left: 0;
  width: 25rem;
  height: 25rem;
  background: rgba(0, 0, 0, 0.2);
  color: white;
  display: flex;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
}
.basic-kanban-card.salechance-kc sale-kb-header agent img {
  width: 25rem;
  height: 25rem;
  border-radius: 50%;
  border: 1rem solid #5C222B;
}
.basic-kanban-card.salechance-kc chance-perc {
  width: 64rem;
  height: 25rem;
  display: flex;
  gap: 5rem;
  align-items: center;
  justify-content: center;
  border-radius: 5rem;
}
.basic-kanban-card.salechance-kc chance-perc .ico {
  background: white;
  width: 13rem;
  height: 13rem;
}
.basic-kanban-card.salechance-kc chance-perc txt {
  color: white;
  font-weight: 600;
  font-size: 13rem;
}
.basic-kanban-card.salechance-kc products {
  margin-top: 0;
}
.basic-kanban-card.passed-out {
  border-left: 12rem solid #FB6350;
}
.basic-kanban-card.todotask-kc.archived {
  opacity: 0.5;
}
.basic-kanban-card.todotask-kc wrapper {
  display: flex;
  flex-direction: column;
  gap: 10rem;
}
.basic-kanban-card.todotask-kc wrapper top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.basic-kanban-card.todotask-kc wrapper top type {
  padding: 5rem 10rem;
  color: white;
  border-radius: 5rem;
}
.basic-kanban-card.todotask-kc wrapper top type .ico {
  background: white;
}
.basic-kanban-card.todotask-kc wrapper center {
  text-align: left;
}
.basic-kanban-card.todotask-kc wrapper center hd-title {
  display: block;
  font-size: 16rem;
  font-weight: 500;
  line-height: 24rem;
}
.basic-kanban-card.todotask-kc wrapper center whocreated {
  font-size: 12rem;
}
.basic-kanban-card.todotask-kc wrapper bottom img {
  border-radius: 50%;
  width: 24rem;
  height: 24rem;
}
.basic-kanban-card damage {
  padding: 10rem 0;
  display: block;
}
.basic-kanban-card damage:not(:last-child) {
  border-bottom: 1rem solid #E9E9E9;
}
.basic-kanban-card damage.repaired dmg-section txt {
  text-decoration: line-through;
}
.basic-kanban-card damage dmg-section {
  display: flex;
  gap: 7rem;
  font-size: 13rem;
}
.basic-kanban-card damage dmg-section .dmg-title {
  font-size: 14rem;
  color: #5C222B;
  font-weight: 600;
}
.basic-kanban-card damage dmg-section .ico {
  background-color: #383641;
  width: 13rem;
  height: 13rem;
}
.basic-kanban-card damage dmg-section:not(:last-child) {
  margin-bottom: 8rem;
}
.basic-kanban-card priority {
  padding: 5rem 10rem;
  background: #5C222B;
  border-radius: 5rem;
}
.basic-kanban-card priority .ico {
  background: #F2B164;
}

.order-list-component, .todotask-list-component {
  padding: 20rem 0;
  display: flex;
  gap: 20rem;
  width: 100%;
}
.order-list-component.completed top, .todotask-list-component.completed top {
  opacity: 0.5;
}
.order-list-component.completed bottom, .todotask-list-component.completed bottom {
  opacity: 0.5;
}
.order-list-component:nth-last-child(n+3), .todotask-list-component:nth-last-child(n+3) {
  border-bottom: 1rem solid #E9E9E9;
}
.order-list-component quick-action, .todotask-list-component quick-action {
  position: relative;
}
.order-list-component quick-action trigger, .todotask-list-component quick-action trigger {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24rem;
  height: 24rem;
  border: 1rem solid gray;
  border-radius: 5rem;
  cursor: pointer;
}
.order-list-component quick-action trigger ico, .todotask-list-component quick-action trigger ico {
  background-color: #39BEA7;
  width: 20rem;
  height: 20rem;
}
.order-list-component quick-action menu, .todotask-list-component quick-action menu {
  min-width: 200rem;
  position: absolute;
  top: 10rem;
  left: 0;
  padding: 10rem 0;
  background: white;
  box-shadow: 0rem 14rem 8rem -8rem rgb(66, 68, 90);
  border: 1rem solid #126585;
  z-index: 5;
  border-radius: 0 10rem 10rem 10rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.order-list-component quick-action menu .menu-label, .todotask-list-component quick-action menu .menu-label {
  padding: 10rem 20rem;
}
.order-list-component quick-action menu sep, .todotask-list-component quick-action menu sep {
  border-bottom: 1rem solid #383641;
  padding-top: 5rem;
  margin-bottom: 5rem;
}
.order-list-component quick-action menu item, .todotask-list-component quick-action menu item {
  padding: 10rem 20rem;
  display: flex;
  align-items: center;
  gap: 10rem;
  cursor: pointer;
  white-space: nowrap;
}
.order-list-component quick-action menu item:hover, .todotask-list-component quick-action menu item:hover {
  background: #696969;
}
.order-list-component quick-action menu item ico, .todotask-list-component quick-action menu item ico {
  width: 16rem;
  height: 16rem;
  background: #39BEA7;
}
.order-list-component quick-action menu item ico.closed, .todotask-list-component quick-action menu item ico.closed {
  background: white;
  border: 1rem solid #0B5C5E;
  border-radius: 4rem;
}
.order-list-component data, .todotask-list-component data {
  width: 100%;
}
.order-list-component data top, .todotask-list-component data top {
  padding-bottom: 10rem;
  display: flex;
  justify-content: space-between;
}
.order-list-component data top left, .todotask-list-component data top left {
  display: flex;
  gap: 10rem;
}
.order-list-component data top left priority, .todotask-list-component data top left priority {
  padding: 5rem 10rem;
  border-radius: 5rem;
  background: #5C222B;
}
.order-list-component data top left priority ico, .todotask-list-component data top left priority ico {
  background-color: #F2B164;
  width: 20rem;
  height: 20rem;
}
.order-list-component data top left status-box, .todotask-list-component data top left status-box {
  padding: 5rem 10rem;
  border-radius: 5rem;
  color: white;
  display: flex;
  align-items: center;
}
.order-list-component data top left status-box span, .todotask-list-component data top left status-box span {
  background-color: white;
  width: 20rem;
  height: 20rem;
}
.order-list-component data top left process-link, .todotask-list-component data top left process-link {
  font-size: 18rem;
  font-weight: 700;
  cursor: pointer;
  align-self: center;
}
.order-list-component data top left process-link:hover, .todotask-list-component data top left process-link:hover {
  text-decoration: underline;
  color: #0B5C5E;
}
.order-list-component data bottom, .todotask-list-component data bottom {
  display: flex;
  gap: 15rem;
  align-items: center;
}
.order-list-component data bottom users, .todotask-list-component data bottom users {
  display: flex;
  gap: 15rem;
  align-items: center;
}
.order-list-component data bottom users user, .todotask-list-component data bottom users user {
  display: flex;
  align-items: center;
  gap: 5rem;
}
.order-list-component data bottom users user img, .todotask-list-component data bottom users user img {
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
}

.order-map-component {
  margin: 0 0 20rem 20rem;
  background: white;
  width: 354rem;
}
.order-map-component .id {
  cursor: pointer;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes main_loader {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes auth_loading {
  0% {
    background-color: #237869;
  }
  50% {
    background-color: #39BEA7;
  }
  100% {
    background-color: #237869;
  }
}
@keyframes loader_dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  100% {
    content: "...";
  }
}
@keyframes toast_show {
  0% {
    margin-left: 100%;
    transform: scale(0);
  }
  100% {
    margin-left: 0;
    transform: scale(1);
  }
}
@keyframes toast_timer {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
.animated-data-loader {
  background-image: url("/anim/wave.gif");
  background-attachment: fixed;
  width: calc(100vw - 240rem);
  height: calc(100vh - 100rem);
}

.animated-basic-loader {
  background-image: url("/anim/lines.gif");
  background-attachment: fixed;
  width: 100vw;
  height: 100vh;
}

.loader-bar {
  position: fixed;
  top: 90rem;
  left: 0;
  width: 100%;
  height: 6rem;
  background-color: #1096E2;
  animation: loader-animation 1s infinite linear;
  z-index: 9999;
}

@keyframes loader-animation {
  0% {
    left: -100%;
    width: 100%;
  }
  50% {
    left: 25%;
    width: 50%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}
.dialog-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 200ms ease-out;
}

.dialog-box {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  padding: 24px;
  max-width: 90vw;
  width: 400px;
  animation: slideIn 200ms ease-out;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dialog-box p {
  line-height: 120%;
}

.dialog-box h3 {
  margin: 0;
  font-size: 18px;
}

.dialog-box p {
  margin: 0;
  font-size: 16px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.dialog-actions button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #1976d2;
  color: white;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-size: 14px;
}

.dialog-actions button:hover {
  background-color: #1565c0;
}

.dialog-actions button.cancel {
  background-color: #e0e0e0;
  color: #333;
}

.dialog-actions button.cancel:hover {
  background-color: #bdbdbd;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideIn {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
#empty-data-container {
  background: #E9E9E9;
  height: calc(100vh - 100rem);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#empty-data-container img {
  margin: 20rem 0;
}
#empty-data-container p {
  width: 50%;
  line-height: 20rem;
  text-align: center;
}

.fileexplorer {
  display: flex;
  gap: 80rem 40rem;
  padding: 80rem 40rem;
  cursor: pointer;
  flex-wrap: wrap;
}
.fileexplorer .file-explorer-element {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10rem;
  height: 100rem;
}
.fileexplorer .file-explorer-element ex-icon {
  display: block;
}
.fileexplorer .file-explorer-element ex-icon img {
  height: 100rem;
}
.fileexplorer .file-explorer-element.chosen img {
  background: #1096E2;
  padding: 10rem;
}
.fileexplorer .file-explorer-element txt {
  width: 100rem;
  display: block;
  font-size: 18rem;
  line-height: 120%;
}
.fileexplorer options {
  position: absolute;
  top: -40rem;
  display: flex;
}
.fileexplorer options button {
  background: none;
  width: 30rem;
  padding: 0 !important;
}
.fileexplorer options a {
  display: flex;
  width: 40rem;
  align-items: center;
}

#order-data-manager {
  position: fixed;
  left: 620rem;
  z-index: 2;
  border-radius: 10rem;
  background: white;
  padding: 30rem 20rem;
  width: auto;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
#order-data-manager card {
  display: flex;
  gap: 20rem;
  align-items: center;
}
#order-data-manager card sep {
  height: 20rem;
  border-right: 1rem dashed #0B5C5E;
}

#filter-creator {
  position: fixed;
  z-index: 2;
  border-radius: 10rem;
  background: white;
  padding: 15rem 20rem 20rem 20rem;
  width: 320rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
#filter-creator txt {
  font-size: 17rem;
  color: #5C222B;
  font-weight: 500;
}
#filter-creator .data-display, #filter-creator .ui-number-container, #filter-creator .ui-date, #filter-creator input {
  width: 100%;
}
#filter-creator card {
  margin-top: 15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#filter-creator card sep {
  height: 20rem;
  border-right: 1rem dashed #0B5C5E;
}
#filter-creator card button-box {
  width: 100%;
  display: flex;
  gap: 20rem;
  padding-top: 15rem;
}
#filter-creator card button-box button {
  width: 100%;
}
#filter-creator.filters-applied {
  top: 140rem;
  padding-top: 10rem;
}

.applied-filters-bar {
  background: #696969;
  width: calc(100% - 76rem);
  font-size: 10rem;
  display: flex;
  padding: 8rem 11rem;
  gap: 8rem;
  align-items: center;
  border-radius: 10rem;
  flex-wrap: wrap;
}
.applied-filters-bar .filter {
  padding: 6rem 10rem;
  background: white;
  border-radius: 10rem;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 4rem;
}
.applied-filters-bar .filter.erase {
  background: #0B5C5E;
  color: white;
  cursor: pointer;
}
.applied-filters-bar .filter span {
  margin-left: 4rem;
  margin-right: 0;
  cursor: pointer;
}

#single-process-viewer {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
#single-process-viewer.minimized {
  background-color: transparent;
  height: 55rem;
  bottom: 0;
  justify-content: start;
  gap: 50rem;
}
#single-process-viewer.minimized card {
  padding-bottom: 0;
}
#single-process-viewer.minimized card p {
  font-size: 16rem;
  font-weight: 600;
  color: white;
}
#single-process-viewer.minimized card content {
  display: none;
}
#single-process-viewer card {
  padding-bottom: 30rem;
  width: fit-content;
  background: white;
  border-radius: 20rem;
  min-width: 20vw;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  transition: all 0.5s;
}
#single-process-viewer card.maximized {
  min-width: 95vw;
  min-height: 95vh;
}
#single-process-viewer card.maximized content {
  height: calc(100vh - 80rem);
}
#single-process-viewer card navi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F29058;
  border-radius: 20rem 20rem 0 0;
  padding: 0 30rem;
  height: 45rem;
}
#single-process-viewer card navi section {
  display: flex;
  align-items: center;
  gap: 20rem;
}
#single-process-viewer card navi section sep {
  color: white;
  font-weight: 900;
  font-size: 20rem;
}
#single-process-viewer card navi section .ico {
  background-color: white;
  width: 18rem;
  height: 18rem;
  cursor: pointer;
}
#single-process-viewer card navi section .ico.not-active {
  background-color: #383641;
  cursor: inherit;
  opacity: 0.3;
}
#single-process-viewer card content {
  display: block;
  max-height: calc(100vh - 80rem);
  padding: 0 30rem;
}
#single-process-viewer card content.scrollable process-header wrapper {
  box-shadow: 0px 15px 10px -15px #111;
}
#single-process-viewer card content:has(#order-process) {
  overflow: auto;
}
#single-process-viewer process-header {
  background-color: white;
}
#single-process-viewer process-header wrapper {
  background-color: white;
  position: sticky;
  top: 0rem;
  z-index: 1;
  height: 80rem;
  justify-content: space-between;
  display: flex;
  align-items: center;
}
#single-process-viewer process-header wrapper pr-title {
  font-size: 22rem;
  line-height: 22rem;
  color: #0B5C5E;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5rem;
}
#single-process-viewer process-header wrapper pr-title span {
  width: 35rem;
  height: 35rem;
  background-color: #0B5C5E;
}
#single-process-viewer process-header wrapper pr-title span.empty {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent !important;
  border: 1rem solid #0B5C5E;
  border-radius: 10rem;
}
#single-process-viewer process-header wrapper pr-title span.empty i {
  width: 24rem;
  height: 24rem;
  background-color: #39BEA7;
}
#single-process-viewer process-header wrapper process-option {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47rem;
  height: 44rem;
  background-color: #0B5C5E;
  border-radius: 10rem;
}
#single-process-viewer process-header wrapper process-option.text-action {
  color: white;
  width: 100rem;
}
#single-process-viewer process-header wrapper process-option.text-action.not-active {
  background: #E9E9E9;
  color: #E9E9E9;
  cursor: initial;
  opacity: 0.3;
}
#single-process-viewer process-header wrapper process-option.danger {
  background-color: #FB6350;
}
#single-process-viewer process-header wrapper process-option.success {
  background-color: #39BEA7;
}
#single-process-viewer process-header wrapper process-option i {
  width: 16rem;
  height: 16rem;
  background-color: white;
}

#creator-viewer {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
#creator-viewer card {
  border: 1rem solid #0B5C5E;
  min-width: 744rem;
  background: white;
  border-radius: 20rem;
  min-width: 20vw;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  transition: all 0.5s;
}
#creator-viewer card creator-title {
  display: flex;
  gap: 15rem;
  align-items: center;
  font-size: 22rem;
  margin-bottom: 37rem;
  font-weight: 500;
  color: #0B5C5E !important;
}
#creator-viewer card creator-title span.ico {
  background-color: #0B5C5E;
  width: 35rem;
  height: 35rem;
}
#creator-viewer card content {
  display: block;
  max-height: calc(100vh - 80rem);
  padding: 30rem;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes main_loader {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes auth_loading {
  0% {
    background-color: #237869;
  }
  50% {
    background-color: #39BEA7;
  }
  100% {
    background-color: #237869;
  }
}
@keyframes loader_dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  100% {
    content: "...";
  }
}
@keyframes toast_show {
  0% {
    margin-left: 100%;
    transform: scale(0);
  }
  100% {
    margin-left: 0;
    transform: scale(1);
  }
}
@keyframes toast_timer {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
.animated-data-loader {
  background-image: url("/anim/wave.gif");
  background-attachment: fixed;
  width: calc(100vw - 240rem);
  height: calc(100vh - 100rem);
}

.animated-basic-loader {
  background-image: url("/anim/lines.gif");
  background-attachment: fixed;
  width: 100vw;
  height: 100vh;
}

#toast-viewer {
  position: fixed;
  bottom: 40rem;
  right: 10rem;
  height: 100vh;
  width: 400rem;
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column-reverse;
  gap: 20rem;
}
#toast-viewer toast {
  user-select: none;
  position: relative;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  gap: 20rem;
  border-radius: 0 0 10rem 10rem;
  pointer-events: all;
  align-items: center;
  width: 100%;
  background-color: white;
  cursor: pointer;
  padding: 20rem;
  animation: 1s forwards toast_show;
  min-height: 100rem;
}
#toast-viewer toast.success fill {
  background: #39BEA7;
}
#toast-viewer toast.warning fill {
  background: #F2B164;
}
#toast-viewer toast.error fill {
  background: #FB6350;
}
#toast-viewer toast.info fill {
  background: #0B5C5E;
}
#toast-viewer toast timer {
  width: 100%;
  height: 5rem;
  position: absolute;
  top: 0rem;
  left: 0;
  background: #696969;
}
#toast-viewer toast timer fill {
  animation: forwards toast_timer;
  width: 100%;
  height: 100%;
  display: block;
}
#toast-viewer toast img {
  width: 40rem;
  height: 40rem;
}
#toast-viewer toast data {
  display: flex;
  flex-direction: column;
  gap: 10rem;
}
#toast-viewer toast data data-title {
  font-size: 16rem;
  color: #5C222B;
  font-weight: 500;
}
.search-engine-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}
.search-engine-container .search-box {
  display: block;
  text-align: center;
}
.search-engine-container .search-box img {
  width: 500rem;
  margin-bottom: 40rem;
}
.search-engine-container .search-box .last-search-items {
  display: flex;
  gap: 30rem;
  cursor: pointer;
  justify-content: center;
}
.search-engine-container .search-box .last-search-items .last-item {
  display: block;
  text-align: center;
  width: 80rem;
}
.search-engine-container .search-box .last-search-items .last-item:hover {
  transform: scale(0.95);
}
.search-engine-container .search-box .last-search-items .last-item .last-icon {
  border-radius: 50%;
  width: 80rem;
  height: 80rem;
  background: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-engine-container .search-box .last-search-items .last-item .last-icon .ico {
  width: 30rem;
  height: 30rem;
  background-color: white;
}

#upload-panel {
  position: fixed;
  bottom: 24rem;
  left: 24rem;
  width: 400rem;
  max-height: 440rem;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10rem);
  border: 1rem solid #E9E9E9;
  border-radius: 16rem;
  padding: 16rem;
  box-shadow: 0 6rem 30rem rgba(0, 0, 0, 0.12);
  font-family: system-ui, sans-serif;
  font-size: 22rem;
  color: #5C222B;
  z-index: 100;
  opacity: 0;
  transform: translateY(20rem);
  transition: all 0.3s ease;
}
#upload-panel.visible {
  opacity: 1;
  transform: translateY(0);
}
#upload-panel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rem;
  height: 35rem;
}
#upload-panel .panel-header h4 {
  font-size: 24rem;
  font-weight: 600;
  color: #0B5C5E;
}
#upload-panel .panel-header .close-btn {
  background: transparent;
  border: none;
  font-size: 28rem;
  line-height: 1;
  color: #383641;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 0;
}
#upload-panel .panel-header .close-btn:hover {
  color: #FB6350;
}
#upload-panel .job {
  background: #E9E9E9;
  border: 1rem solid #696969;
  border-radius: 12rem;
  padding: 12rem;
  margin-bottom: 12rem;
  transition: background 0.25s ease, transform 0.15s ease;
}
#upload-panel .job:hover {
  background: #E9E9E9;
  transform: translateY(-1rem);
}
#upload-panel .job .job-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18rem;
  font-weight: 500;
  margin-bottom: 6rem;
}
#upload-panel .job .job-header .job-name {
  color: #5C222B;
  max-width: 260rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 20rem;
}
#upload-panel .job .job-header .job-name a {
  color: #1096E2;
  text-decoration: none;
}
#upload-panel .job .job-header .job-name a:hover {
  text-decoration: underline;
}
#upload-panel .job .job-header .job-progress {
  color: #383641;
}
#upload-panel .job .progress-bar {
  background: #696969;
  border-radius: 16rem;
  height: 8rem;
  overflow: hidden;
}
#upload-panel .job .progress-bar .progress-fill {
  background: #1096E2;
  height: 100%;
  border-radius: 16rem;
  transition: width 0.3s ease;
}
#upload-panel .job .status {
  font-size: 17rem;
  margin-top: 6rem;
  font-weight: 500;
}
#upload-panel .job .status.success {
  color: #39BEA7;
}
#upload-panel .job .status.error {
  color: #FB6350;
}
#upload-panel .job .actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6rem;
}
#upload-panel .job .actions button {
  font-size: 17rem;
  color: #FB6350;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
#upload-panel .job .actions button:hover {
  color: rgb(249.8603351955, 54.5530726257, 30.1396648045);
}

.search-input {
  position: relative;
}
.search-input .ico-lupe-circle {
  position: absolute;
  left: 12rem;
  top: 50%;
  transform: translateY(-50%);
  width: 17rem;
  height: 19rem;
}
.search-input .ico-cancel {
  cursor: pointer;
  position: absolute;
  right: 12rem;
  top: 50%;
  transform: translateY(-50%);
  background: #FB6350;
  width: 17rem;
  height: 17rem;
}
.search-input input {
  padding: 0 36rem 0 40rem;
}
.search-input.action-bar-search-input input {
  font-size: 12rem;
  height: 35rem;
  border-radius: 20rem;
  background: #E8E8E8;
  border-color: #5C222B;
}
.search-input.action-bar-search-input input:focus {
  outline: none;
}

tooltip {
  cursor: help;
}

databox label, databox label-req, datarow label, datarow label-req {
  position: relative;
}
databox label tooltip, databox label-req tooltip, datarow label tooltip, datarow label-req tooltip {
  position: absolute;
  left: -20rem;
  top: -7rem;
}
databox label tooltip .ico, databox label-req tooltip .ico, datarow label tooltip .ico, datarow label-req tooltip .ico {
  width: 20rem;
  height: 16rem;
}

input {
  color: #383641;
  max-height: 40rem;
  height: 40rem;
  font-size: 12rem;
  line-height: 100%;
  padding: 11rem 20rem 11rem 15rem;
  border: 1rem solid #383641;
  border-radius: 10rem;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
input.left-opened {
  border-radius: 0 10rem 10rem 0;
}
input.both-side-opened {
  border-radius: 0;
}
input.right-opened {
  border-radius: 10rem 0 0 10rem;
}
input::placeholder {
  color: #696969;
  font-weight: 400;
}
input:focus {
  outline: none;
}

textarea {
  border: 1rem solid #0B5C5E;
  border-radius: 10rem;
  font-size: 17rem;
  line-height: 22rem;
  padding: 16rem 20rem 15rem 20rem;
  font-family: "Inter", sans-serif;
  resize: none;
}

.ui-number-container {
  display: flex;
}
.ui-number-container btn {
  display: flex;
  align-items: center;
  font-size: 16rem;
  line-height: 16rem;
  font-weight: 900;
  padding: 12rem;
  border: 1rem solid #0B5C5E;
  cursor: pointer;
  color: white;
  user-select: none;
  background: #D0E9E9;
}
.ui-number-container btn.plus {
  border-radius: 0 10rem 10rem 0;
}
.ui-number-container btn.minus {
  border-radius: 10rem 0 0 10rem;
}
.ui-number-container .ui-number.steps {
  border-radius: unset;
  border-right: none;
  border-left: none;
}
.ui-number-container .ui-number.max {
  border-radius: 10rem 0 0 10rem;
  border-right: none;
}

.ui-date {
  /* Stylizacja dla widoku wyboru miesięcy */
  /* Stylizacja dla widoku wyboru lat */
  /* Dodatkowe stylizacje dla lepszego wyglądu */
  cursor: pointer;
  position: relative;
}
.ui-date::before {
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-image: url("/img/ico/calendar.svg");
  content: "";
  position: absolute;
  left: 14rem;
  top: 10rem;
  width: 18rem;
  height: 18rem;
  background-color: #0B5C5E;
}
.ui-date input {
  padding-left: 40rem;
  cursor: pointer;
}
.ui-date .calendar {
  position: absolute;
  top: 40px;
  left: 0;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 1000;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.ui-date .calendar-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10rem;
}
.ui-date .calendar-header span {
  font-size: 18rem;
  display: block;
  font-weight: 600;
  line-height: 40rem;
  text-transform: capitalize;
  text-align: center;
  margin: 0 auto;
}
.ui-date .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.ui-date .calendar-day, .ui-date .calendar-header-day {
  text-align: center;
  padding: 10px;
  cursor: pointer;
}
.ui-date .calendar-day.current-day, .ui-date .calendar-header-day.current-day {
  background: #0B5C5E;
  color: white;
  border-radius: 10rem;
}
.ui-date .calendar-day.disabled-day, .ui-date .calendar-header-day.disabled-day {
  color: red;
}
.ui-date .calendar-day.today-day, .ui-date .calendar-header-day.today-day {
  background: #0B5C5E;
  color: white;
}
.ui-date .calendar-header-day {
  font-weight: bold;
}
.ui-date .calendar-day:hover {
  background-color: #f0f0f0;
  color: black;
}
.ui-date .calendar-day:hover.disabled-day {
  color: red;
}
.ui-date .selected-day {
  background-color: #007bff;
  color: white;
}
.ui-date .empty-day {
  visibility: hidden;
}
.ui-date .month-selection {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ui-date .month-item {
  padding: 8px;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.ui-date .month-item:hover {
  background-color: #0B5C5E;
  color: white;
}
.ui-date .year-selection {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ui-date .year-item {
  padding: 8px;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.ui-date .year-item:hover {
  background-color: #0B5C5E;
  color: white;
}
.ui-date .calendar .month-item.selected,
.ui-date .calendar .year-item.selected {
  background-color: #007bff;
  color: white;
}
.ui-date .calendar .month-item.disabled,
.ui-date .calendar .year-item.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.validation-error {
  position: relative;
}
.validation-error error {
  top: -10rem;
  position: absolute;
  background: #FB6350;
  color: white;
  padding: 3rem 15rem;
}

.wysiwyg .toolbar {
  display: flex;
  align-items: center;
  background: #D9D9D9;
  padding: 8rem;
  gap: 2rem;
  border-radius: 8rem 8rem 0 0;
}
.wysiwyg .toolbar .color-btn {
  position: relative;
  width: 25rem;
  height: 21rem;
  border-radius: 4rem;
  overflow: hidden;
  cursor: pointer;
  background: white;
}
.wysiwyg .toolbar .color-btn input[type=color] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  padding: 0;
  border: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  z-index: 1;
}
.wysiwyg .toolbar .color-btn input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.wysiwyg .toolbar .color-btn input[type=color]::-webkit-color-swatch {
  border: none;
}
.wysiwyg .toolbar .color-btn img.icon-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  pointer-events: none;
}
.wysiwyg .toolbar .color-btn:hover {
  filter: brightness(0.95);
}
.wysiwyg .toolbar-button {
  cursor: pointer;
  border-radius: 4rem;
  background: white;
  color: #383641;
  line-height: 0;
}
.wysiwyg .toolbar-button img {
  height: 21rem;
  width: 25rem;
}
.wysiwyg .toolbar-button:hover {
  filter: brightness(0.95);
}
.wysiwyg textarea.html-view {
  border-radius: 0 0 8rem 8rem;
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 0 0 8rem 8rem;
  resize: none;
  outline: none;
  background-color: #1e1e1e;
  color: #d4d4d4;
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 14rem;
  line-height: 1.5;
  padding: 15rem;
  tab-size: 4;
}
.wysiwyg textarea.html-view::-webkit-scrollbar {
  width: 10rem;
  background: #1e1e1e;
}
.wysiwyg textarea.html-view::-webkit-scrollbar-thumb {
  background: #424242;
  border-radius: 5rem;
  border: 2px solid #1e1e1e;
}
.wysiwyg textarea.html-view::-webkit-scrollbar-thumb:hover {
  background: #4f4f4f;
}
.wysiwyg textarea.html-view::selection {
  background-color: #264f78;
  color: white;
}
.wysiwyg .editor {
  min-height: 100rem;
  padding: 16rem 19rem;
  line-height: 120%;
  font-size: 13rem;
  font-family: "Inter", sans-serif;
  border: 1rem solid #696969;
  border-top: none;
  border-radius: 0 0 8rem 8rem;
}
.wysiwyg .editor h1 {
  font-size: 24rem;
  line-height: 30rem;
}
.wysiwyg .editor h2 {
  font-size: 20rem;
  line-height: 24rem;
}
.wysiwyg .editor a {
  color: #1096E2;
  text-decoration: underline;
  cursor: pointer;
}
.wysiwyg .editor:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06) inset;
}
.wysiwyg .editor:empty:before {
  content: attr(placeholder);
  color: #888;
}
.wysiwyg .editor img {
  max-width: 100%;
  height: auto;
}

input[type=file] {
  width: 100%;
  opacity: 0;
  cursor: pointer !important;
}

.wrapped-file-upload {
  cursor: pointer;
  display: inline-block;
  transition: background 0.3s;
}
.wrapped-file-upload input[type=file] {
  display: none;
}

.custom-file-upload {
  position: relative;
  border: 1rem dashed #1096E2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1096E2;
  width: 100%;
  font-size: 13rem;
  transition: all 1s;
  cursor: pointer !important;
  height: 70rem;
}
.custom-file-upload input {
  position: absolute;
}

.custom-file-upload.dragged-over {
  background: #1096e2;
  color: white;
}

.ui-dropdown {
  position: relative;
  display: flex;
  min-width: 200rem;
}
.ui-dropdown.multi {
  position: relative;
  min-width: 300rem;
}
.ui-dropdown.multi display {
  cursor: pointer;
}
.ui-dropdown.multi .options {
  padding-top: 5rem;
}
.ui-dropdown.multi .options .selected-options {
  position: sticky;
  top: 0;
  background: white;
  gap: 5rem;
  padding: 6rem 17rem;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  z-index: 2;
}
.ui-dropdown.multi .options .selected-options span {
  white-space: nowrap;
  display: inline;
  vertical-align: middle;
  background: #CFEAF9;
  font-size: 11rem;
  padding: 1rem 8rem;
  border-radius: 5rem;
  cursor: pointer;
  margin: 0 !important;
}
.ui-dropdown.multi .options .selected-options span strong {
  margin-left: 5rem;
}
.ui-dropdown .data-display {
  min-width: 200rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12rem;
  max-height: 52rem;
  height: 40rem;
  font-size: 12rem;
  line-height: 20rem;
  padding: 11rem 15rem;
  border: 1rem solid #0B5C5E;
  color: #383641;
  font-weight: 500;
  background: white;
  justify-content: space-between;
  border-radius: 10rem 0 0 10rem;
}
.ui-dropdown .data-display wrap {
  gap: 12rem;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ui-dropdown .data-display txt {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ui-dropdown .data-display txt.not-chosen {
  color: #383641;
  font-weight: 400;
}
.ui-dropdown .data-display .ico {
  width: 16rem;
  height: 16rem;
}
.ui-dropdown .data-display .ico.ico-caret-down {
  background-color: #0B5C5E;
  width: 23rem;
  height: 13rem;
}
.ui-dropdown .data-display img {
  width: 29rem !important;
  height: 29rem !important;
  border: 1rem solid #383641;
}
.ui-dropdown .data-display:only-child {
  border-radius: 10rem;
}
.ui-dropdown .create-button {
  background-color: #0B5C5E;
  border-left: none;
  border-radius: 0;
}
.ui-dropdown .create-button.last {
  border-radius: 0 10rem 10rem 0;
}
.ui-dropdown .edit-button {
  background-color: #F29058;
  border-radius: 0;
}
.ui-dropdown .delete-button {
  background-color: #FB6350;
  border-radius: 0 10rem 10rem 0;
  border-left: none;
  border-right: none;
}
.ui-dropdown .search-input {
  min-width: 140rem;
  width: 100%;
  z-index: 2;
}
.ui-dropdown .search-input input {
  width: 100%;
}
.ui-dropdown .options {
  padding-top: 10rem;
  z-index: 1;
  position: absolute;
  background: white;
  border: 1rem solid gray;
  font-size: 12rem;
  left: 0;
  top: 34rem;
  max-height: 200rem;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  border-radius: 0 0 10rem 10rem;
  scrollbar-width: thin;
  box-shadow: 0rem 14rem 8rem -8rem rgb(66, 68, 90);
}
.ui-dropdown .options .option {
  gap: 12rem;
  display: flex;
  cursor: default;
  font-size: 12rem;
  line-height: 120%;
  height: 33rem;
  align-items: center;
  padding: 6rem 17rem;
  color: #383641;
}
.ui-dropdown .options .option:hover {
  background: #CFEAF9;
  height: auto;
  min-height: 33rem;
}
.ui-dropdown .options .option:hover txt {
  overflow: visible;
  white-space: break-spaces;
}
.ui-dropdown .options .option .ico {
  width: 16rem;
  height: 16rem;
}
.ui-dropdown .options .option txt {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ui-dropdown .options .load-more {
  border-top: 1px solid #1096E2;
  color: #1096E2;
  font-weight: 600;
  padding: 10rem;
  cursor: pointer;
  text-align: center;
}
.ui-dropdown.color-picker .chosen-color {
  height: 24rem;
  width: 64rem;
  border-radius: 5rem;
  border: 1rem solid #383641;
}
.ui-dropdown.color-picker .options {
  display: flex;
  flex-wrap: wrap;
  gap: 5rem;
  padding: 10rem;
}
.ui-dropdown.color-picker .color-to-choose {
  height: 24rem;
  width: 24rem;
  border-radius: 5rem;
  border: 1rem solid #383641;
  cursor: pointer;
}
.ui-dropdown.color-picker .color-to-choose:hover {
  transform: scale(0.9);
}

.in-edit {
  position: relative;
}
.in-edit.closed {
  cursor: pointer;
  width: fit-content;
}
.in-edit.closed.hide-icon {
  width: 100%;
}
.in-edit.closed:not(.hide-icon):hover display {
  color: #1096E2 !important;
  text-decoration: underline;
}
.in-edit .edited-value {
  z-index: 2;
  background: white;
  padding: 10rem;
  border-radius: 8rem;
}
.in-edit .edit-card {
  top: 0;
  position: absolute;
  padding: 20rem;
  border-radius: 10rem;
  z-index: 2;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  background: white;
  width: 380rem;
}
.in-edit .edit-card input, .in-edit .edit-card .ui-dropdown, .in-edit .edit-card .data-display, .in-edit .edit-card .search-input {
  width: 100%;
}
.in-edit .edit-card .click-outside {
  background: unset !important;
}
.in-edit .edit-card .edit-buttons {
  display: flex;
  justify-content: end;
  padding-top: 20rem;
  gap: 10rem;
}

.progress-bar {
  min-width: 100rem;
  border-radius: 8rem;
  position: relative;
}
.progress-bar.sharp {
  margin: 4rem 0;
}
.progress-bar.sharp .fill {
  border-radius: 0;
  border-radius: 8rem;
}
.progress-bar.sharp .progress-text {
  display: none;
}
.progress-bar .progress-text {
  top: 0;
  color: black !important;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.progress-bar .fill {
  height: 100%;
  position: relative;
  border-radius: 8rem;
}

.progress-circle {
  position: relative;
}
.progress-circle cone {
  display: flex;
  border-radius: 50%;
  background: conic-gradient(var(--cone-color) var(--progress), #696969 0deg);
  font-size: 0;
  justify-content: center;
  margin-bottom: 1rem;
  background-color: red;
}
.progress-circle cone-inside {
  position: absolute;
  background: white;
  border-radius: 50%;
  top: 3rem;
  left: 3rem;
  background-size: cover;
}
.progress-circle cone-data {
  color: white;
  background: var(--color);
  padding: 1rem 4rem 1rem 4rem;
  font-size: 10rem;
  text-align: center;
  width: fit-content;
  border-radius: 3rem;
  display: block;
  margin: 0 auto;
}

.tab-control {
  width: 100%;
}
.tab-control tab-navi {
  display: flex;
  gap: 40rem;
  flex-wrap: nowrap;
  border-bottom: 1rem solid #E9E9E9;
}
.tab-control tab-navi tab-option {
  cursor: pointer;
  font-size: 13rem;
  padding: 20rem;
  display: block;
  text-align: center;
  position: relative;
}
.tab-control tab-navi tab-option.danger {
  color: #FB6350;
}
.tab-control tab-navi tab-option.active {
  color: #0B5C5E;
  font-weight: 600;
}
.tab-control tab-navi tab-option.active::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  bottom: -4rem;
  border-radius: 3rem;
  left: 0;
  height: 7rem;
  background: #0B5C5E;
}

.accordion {
  overflow: hidden;
}
.accordion .accordion-header {
  margin: 0;
  padding: 10rem;
  font-size: 20rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1rem solid #5C222B;
}

.accordion-header:hover {
  background-color: #e9ecef;
}

.accordion-arrow {
  transition: transform 0.2s ease;
  font-size: 22rem;
}

.accordion-arrow.expanded {
  transform: rotate(180deg);
}

.accordion-collapse {
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion-collapse.collapse {
  max-height: 0;
}

.accordion-collapse.show {
  max-height: unset;
}

.accordion-body {
  padding: 20rem;
  background-color: #fff;
}

keyword-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10rem 20rem;
}
keyword-wrapper keyword {
  color: #1096E2;
  background: #E9E9E9;
  border-radius: 10rem;
  padding: 10rem 20rem;
  display: block;
  cursor: pointer;
}
keyword-wrapper keyword:hover {
  color: black;
  background: #1096E2;
  border-radius: 10rem;
}

.ui-switch {
  display: flex;
  align-items: center;
  gap: 20rem;
  max-width: fit-content;
  cursor: pointer;
}
.ui-switch img {
  max-width: 20rem;
  max-height: 20rem;
}

.validator {
  width: 100%;
  justify-content: end;
  display: flex;
  gap: 10rem;
  padding-top: 5rem;
}

.validation-errors {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 10rem;
  margin: 20rem 0;
}
.validation-errors error {
  color: #FB6350;
  font-weight: 600;
}

.outside-overlay {
  /* domyślnie transparent; dodaj np.: background: rgba(0,0,0,.4); */
}

/* kontent */
.outside-content {
  position: relative; /* ważne: ponad overlay'em */
  z-index: 1;
  /* ustaw pozycjonowanie wg potrzeb (center, top-right itd.) */
}

/* root – pełny viewport */
.outside-root {
  /* puste; style są inline (position:fixed; inset:0; z-index:…) */
}

#reports-page {
  padding: 33rem 41rem;
}
#reports-page report-header {
  display: block;
  border-bottom: 1rem solid #E9E9E9;
}
#reports-page report-header div {
  display: flex;
  gap: 14rem;
  align-items: center;
}
#reports-page report-header span {
  width: 22rem;
  height: 22rem;
}
#reports-page report-header txt-hd {
  font-size: 24rem;
  font-weight: 700;
  color: #5C222B;
}
#reports-page report-header txt {
  font-size: 14rem;
  color: #5C222B;
  display: block;
  line-height: 26rem;
  margin: 13rem 0;
}
#reports-page .info-card {
  background: white;
  border: 1px solid #E9E9E9;
  border-radius: 16rem;
  padding: 14rem 21rem 30rem 21rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#reports-page .info-card mn-ico {
  display: flex;
  width: 40rem;
  height: 100rem;
  justify-content: center;
  border-radius: 10rem;
  align-items: center;
}
#reports-page .info-card mn-ico .ico {
  background: white;
  width: 26rem;
  height: 26rem;
}
#reports-page .info-card mn-ico.green {
  background: #39BEA7;
}
#reports-page .info-card mn-ico.red {
  background: #FB6350;
}
#reports-page .info-card mn-ico.brown {
  background: #943B47;
}
#reports-page .info-card.double {
  display: flex;
  margin-bottom: 20rem;
  align-items: end;
}
#reports-page .info-card.double .left-part {
  width: 50%;
  border-right: 1rem dashed #707070;
}
#reports-page .info-card.double .right-part {
  width: 50%;
  margin-left: 37rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  gap: 20rem;
}
#reports-page .info-card.double .right-part .value {
  font-size: 20rem;
}
#reports-page .info-card .row-50 {
  width: 100%;
  display: grid;
  grid-template-columns: 50% 50%;
}
#reports-page .info-card .row-100 {
  width: 100%;
  display: flex;
  gap: 20rem;
  align-items: center;
}
#reports-page .info-card .row-100.success .value {
  color: #39BEA7;
}
#reports-page .info-card .row-100.success .ico {
  background: #39BEA7;
}
#reports-page .info-card .row-100.danger .value {
  color: #FB6350;
}
#reports-page .info-card .row-100.danger .ico {
  background: #FB6350;
}
#reports-page .info-card .row-100.stable .value {
  color: #0B5C5E;
}
#reports-page .info-card .row-100.stable .ico {
  background: #0B5C5E;
}
#reports-page .info-card .row-100 .ico {
  width: 20rem;
  height: 20rem;
}
#reports-page .info-card .trend {
  display: flex;
  gap: 8rem;
  align-items: center;
  margin-bottom: 15rem;
}
#reports-page .info-card .trend div {
  font-size: 16rem;
}
#reports-page .info-card .trend div.ico {
  width: 20rem;
  height: 20rem;
}
#reports-page .info-card .name {
  font-size: 22rem;
  line-height: 26rem;
  font-weight: 500;
  margin-bottom: 24rem;
  color: #5C222B;
}
#reports-page .info-card .label {
  font-size: 16rem;
  margin-bottom: 16rem;
}
#reports-page .info-card .value {
  font-size: 26rem;
  font-weight: bold;
  color: #5C222B;
}
#reports-page .info-card .value.success {
  color: #39BEA7;
}
#reports-page .info-card .value.danger {
  color: #FB6350;
}
#reports-page .section {
  padding-bottom: 40rem;
}
#reports-page .section:not(:last-child) {
  border-bottom: 1rem solid #E9E9E9;
}
#reports-page .section .title {
  height: 80rem;
  display: flex;
  align-items: center;
  gap: 14rem;
  font-size: 22rem;
  font-weight: 600;
  color: #5C222B;
}
#reports-page .section .title .ico {
  width: 22rem;
  height: 22rem;
  background-color: #5C222B;
}
#reports-page table-container {
  max-height: 400rem;
  overflow-y: auto;
  overflow-x: hidden;
}
#reports-page table {
  border-collapse: collapse;
  width: 100%;
}
#reports-page table thead {
  position: sticky;
  top: 0;
}
#reports-page table img {
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
}
#reports-page table th {
  font-weight: 400;
  background: #124e66;
  color: white;
  padding: 0 30rem;
  text-align: center;
  border-right: 1rem solid #D0E9E9;
  border-left: 1rem solid #D0E9E9;
}
#reports-page table th txt {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* number of lines to show */
}
#reports-page table tr {
  border-bottom: 1rem solid rgba(0, 0, 0, 0.3);
  text-align: center;
  height: 50rem;
  color: black;
  background-color: white;
  min-width: fit-content;
}
#reports-page table tr:nth-child(2n) {
  background-color: #f3f2f7;
}
#reports-page table tr td {
  padding: 0 30rem;
  white-space: nowrap;
}
#reports-page grid.four {
  grid-template-columns: 25% calc(25% - 16rem) calc(25% - 16rem) calc(25% - 16rem) !important;
}
#reports-page .grid-50 {
  display: flex;
  width: 100%;
  gap: 23rem;
}
#reports-page .grid-50 .info-card {
  width: 100%;
  flex-direction: row;
}

#dashboard-page {
  padding: 30rem 41rem;
}
#dashboard-page d-row {
  display: flex;
  gap: 30rem;
}
#dashboard-page d-row d-col-4 {
  display: block;
  width: 25%;
}
#dashboard-page d-row d-col2 {
  display: block;
  width: 50%;
}
#dashboard-page .usr-data {
  margin-top: 80rem;
  text-align: center;
}
#dashboard-page .usr-data h5 {
  font-size: 20rem;
  line-height: 0;
  color: #5C222B;
}
#dashboard-page .usr-data h6 {
  font-size: 16rem;
  line-height: 0;
}
#dashboard-page d-hd {
  display: block;
  font-size: 26rem;
  color: #5C222B;
  font-weight: 500;
  margin-bottom: 26rem;
}
#dashboard-page .usr-photo {
  width: 140rem;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
#dashboard-page report-header {
  display: block;
  border-bottom: 1rem solid #E9E9E9;
}
#dashboard-page report-header div {
  display: flex;
  gap: 14rem;
  align-items: center;
}
#dashboard-page report-header span {
  width: 22rem;
  height: 22rem;
}
#dashboard-page report-header txt-hd {
  font-size: 24rem;
  font-weight: 700;
  color: #5C222B;
}
#dashboard-page report-header txt {
  font-size: 14rem;
  color: #5C222B;
  display: block;
  line-height: 26rem;
  margin: 13rem 0;
}
#dashboard-page .info-card {
  width: 100%;
  position: relative;
  background: white;
  border: 1px solid #E9E9E9;
  border-radius: 16rem;
  padding: 21rem 21rem 30rem 21rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20rem;
}
#dashboard-page .info-card big-ico {
  width: 30rem;
  height: 30rem;
}
#dashboard-page .info-card arrow {
  width: 20rem;
  height: 20rem;
}
#dashboard-page .info-card s-hd, #dashboard-page .info-card s-text {
  display: block;
  line-height: 120%;
}
#dashboard-page .info-card s-hd {
  color: #5C222B;
  font-size: 16rem;
}
#dashboard-page .info-card mn-ico {
  display: flex;
  width: 40rem;
  height: 100rem;
  justify-content: center;
  border-radius: 10rem;
  align-items: center;
}
#dashboard-page .info-card mn-ico .ico {
  background: white;
  width: 26rem;
  height: 26rem;
}
#dashboard-page .info-card mn-ico.green {
  background: #39BEA7;
}
#dashboard-page .info-card mn-ico.red {
  background: #FB6350;
}
#dashboard-page .info-card mn-ico.brown {
  background: #943B47;
}
#dashboard-page .info-card.double {
  display: flex;
  margin-bottom: 20rem;
  align-items: end;
}
#dashboard-page .info-card.double .left-part {
  width: 50%;
  border-right: 1rem dashed #707070;
}
#dashboard-page .info-card.double .right-part {
  width: 50%;
  margin-left: 37rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  gap: 20rem;
}
#dashboard-page .info-card.double .right-part .value {
  font-size: 20rem;
}
#dashboard-page .info-card .row-50 {
  width: 100%;
  display: grid;
  grid-template-columns: 50% 50%;
}
#dashboard-page .info-card .row-100 {
  width: 100%;
  display: flex;
  gap: 20rem;
  align-items: center;
}
#dashboard-page .info-card .row-100.success .value {
  color: #39BEA7;
}
#dashboard-page .info-card .row-100.success .ico {
  background: #39BEA7;
}
#dashboard-page .info-card .row-100.danger .value {
  color: #FB6350;
}
#dashboard-page .info-card .row-100.danger .ico {
  background: #FB6350;
}
#dashboard-page .info-card .row-100.stable .value {
  color: #0B5C5E;
}
#dashboard-page .info-card .row-100.stable .ico {
  background: #0B5C5E;
}
#dashboard-page .info-card .row-100 .ico {
  width: 20rem;
  height: 20rem;
}
#dashboard-page .info-card .trend {
  display: flex;
  gap: 8rem;
  align-items: center;
  margin-bottom: 15rem;
}
#dashboard-page .info-card .trend div {
  font-size: 16rem;
}
#dashboard-page .info-card .trend div.ico {
  width: 20rem;
  height: 20rem;
}
#dashboard-page .info-card .name {
  font-size: 22rem;
  line-height: 26rem;
  font-weight: 500;
  margin-bottom: 24rem;
  color: #5C222B;
}
#dashboard-page .info-card .label {
  font-size: 16rem;
  margin-bottom: 16rem;
}
#dashboard-page .info-card .value {
  font-size: 26rem;
  font-weight: bold;
  color: #5C222B;
}
#dashboard-page .info-card .value.success {
  color: #39BEA7;
}
#dashboard-page .info-card .value.danger {
  color: #FB6350;
}
#dashboard-page .section {
  padding-bottom: 40rem;
}
#dashboard-page .section:not(:last-child) {
  border-bottom: 1rem solid #E9E9E9;
}
#dashboard-page .section .title {
  height: 80rem;
  display: flex;
  align-items: center;
  gap: 14rem;
  font-size: 22rem;
  font-weight: 600;
  color: #5C222B;
}
#dashboard-page .section .title .ico {
  width: 22rem;
  height: 22rem;
  background-color: #5C222B;
}
#dashboard-page table-container {
  max-height: 400rem;
  overflow-y: auto;
  overflow-x: hidden;
}
#dashboard-page table {
  border-collapse: collapse;
  width: 100%;
}
#dashboard-page table thead {
  position: sticky;
  top: 0;
}
#dashboard-page table img {
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
}
#dashboard-page table th {
  font-weight: 400;
  background: #124e66;
  color: white;
  padding: 0 30rem;
  text-align: center;
  border-right: 1rem solid #D0E9E9;
  border-left: 1rem solid #D0E9E9;
}
#dashboard-page table th txt {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* number of lines to show */
}
#dashboard-page table tr {
  border-bottom: 1rem solid rgba(0, 0, 0, 0.3);
  text-align: center;
  height: 50rem;
  color: black;
  background-color: white;
  min-width: fit-content;
}
#dashboard-page table tr:nth-child(2n) {
  background-color: #f3f2f7;
}
#dashboard-page table tr td {
  padding: 0 30rem;
  white-space: nowrap;
}