@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: #139093;
  }
  50% {
    background-color: #39BEA7;
  }
  100% {
    background-color: #139093;
  }
}
@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: #139093;
  }
  50% {
    background-color: #39BEA7;
  }
  100% {
    background-color: #139093;
  }
}
@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: #383641;
  border-radius: 50%;
  border: 6rem solid #383641;
  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: #F6F4F3;
  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;
}

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

.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: 0 25rem;
  font-size: 16rem;
  font-weight: 400;
  height: 52rem;
  border: none;
  border-radius: 10rem;
  cursor: pointer;
  color: white;
  white-space: pre;
  background-color: #126585;
}
button.not-active {
  background-color: #696969;
  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 #126585;
  color: #126585;
}
button.cancel .ico {
  background-color: #126585;
}
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: 18rem;
  height: 18rem;
  background-color: white;
  margin-right: 13rem;
}
button i.ico {
  width: 20rem;
  height: 20rem;
  background-color: white;
}

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

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

p {
  font-family: "Inter", sans-serif !important;
}

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;
}
@media (max-width: 1300px) {
  html {
    font-size: 0.45px;
  }
}
@media (min-width: 1300px) and (max-width: 1399px) {
  html {
    font-size: 0.58px;
  }
}
@media (min-width: 1400px) and (max-width: 1599px) {
  html {
    font-size: 0.7px;
  }
}
@media (min-width: 1600px) and (max-width: 1899px) {
  html {
    font-size: 0.84px;
  }
}
@media (min-width: 1900px) and (max-width: 1999px) {
  html {
    font-size: 0.8px;
  }
}
@media (min-width: 2000px) {
  html {
    font-size: 0.81px;
  }
}

body {
  padding: 0;
  margin: 0;
  background-color: black;
  background-image: url("/img/sBG.jpg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#main-container {
  width: calc(100vw - 240rem);
  height: 100vh;
}
#main-container #scrollable-container {
  width: calc(100vw - 240rem);
  animation: 0.5s forwards showMainContainer;
  height: calc(100vh - 100rem);
  background: #FAFAFA;
  overflow: auto;
  scrollbar-width: thin !important;
}
@keyframes showMainContainer {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@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;
  }
}
a {
  text-decoration: none;
}

.ico {
  display: inline-block;
  min-width: 10rem;
  min-height: 10rem;
  background-color: black;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.ico.success {
  background-color: #39BEA7;
}
.ico.danger {
  background-color: #FB6350;
}
.ico.warning {
  background-color: #F29058;
}
.ico.primary {
  background-color: #126585;
}
.ico.ico-home {
  -webkit-mask-image: url("/img/ico/home.svg");
  mask-image: url("/img/ico/home.svg");
}
.ico.ico-things {
  -webkit-mask-image: url("/img/ico/things.svg");
  mask-image: url("/img/ico/things.svg");
}
.ico.ico-trophy {
  -webkit-mask-image: url("/img/ico/trophy.svg");
  mask-image: url("/img/ico/trophy.svg");
}
.ico.ico-print {
  -webkit-mask-image: url("/img/ico/printing.png");
  mask-image: url("/img/ico/printing.png");
}
.ico.ico-happy {
  -webkit-mask-image: url("/img/ico/happy.png");
  mask-image: url("/img/ico/happy.png");
}
.ico.ico-neutral {
  -webkit-mask-image: url("/img/ico/neutral.png");
  mask-image: url("/img/ico/neutral.png");
}
.ico.ico-sad {
  -webkit-mask-image: url("/img/ico/sad.png");
  mask-image: url("/img/ico/sad.png");
}
.ico.ico-question-bubble {
  -webkit-mask-image: url("/img/ico/question-bubble.svg");
  mask-image: url("/img/ico/question-bubble.svg");
}
.ico.ico-cart {
  -webkit-mask-image: url("/img/ico/cart.svg");
  mask-image: url("/img/ico/cart.svg");
}
.ico.ico-protocol {
  -webkit-mask-image: url("/img/ico/protocol.svg");
  mask-image: url("/img/ico/protocol.svg");
}
.ico.ico-cal-arrow {
  -webkit-mask-image: url("/img/ico/cal-arrow.svg");
  mask-image: url("/img/ico/cal-arrow.svg");
}
.ico.ico-reload {
  -webkit-mask-image: url("/img/ico/reload.svg");
  mask-image: url("/img/ico/reload.svg");
}
.ico.ico-organizer {
  -webkit-mask-image: url("/img/ico/organizer.png");
  mask-image: url("/img/ico/organizer.png");
}
.ico.ico-copy {
  -webkit-mask-image: url("/img/ico/copy.svg");
  mask-image: url("/img/ico/copy.svg");
}
.ico.ico-sms {
  -webkit-mask-image: url("/img/ico/sms.svg");
  mask-image: url("/img/ico/sms.svg");
}
.ico.ico-social {
  -webkit-mask-image: url("/img/ico/social-media.png");
  mask-image: url("/img/ico/social-media.png");
}
.ico.ico-clock {
  -webkit-mask-image: url("/img/ico/clock.svg");
  mask-image: url("/img/ico/clock.svg");
}
.ico.ico-PZ {
  -webkit-mask-image: url("/img/ico/PZ.png");
  mask-image: url("/img/ico/PZ.png");
}
.ico.ico-WZ {
  -webkit-mask-image: url("/img/ico/WZ.png");
  mask-image: url("/img/ico/WZ.png");
}
.ico.ico-checklist {
  -webkit-mask-image: url("/img/ico/checklist.svg");
  mask-image: url("/img/ico/checklist.svg");
}
.ico.ico-check-mark {
  -webkit-mask-image: url("/img/ico/check-mark.svg");
  mask-image: url("/img/ico/check-mark.svg");
}
.ico.ico-database {
  -webkit-mask-image: url("/img/ico/database.png");
  mask-image: url("/img/ico/database.png");
}
.ico.ico-kanban {
  -webkit-mask-image: url("/img/ico/kanban.png");
  mask-image: url("/img/ico/kanban.png");
}
.ico.ico-list {
  -webkit-mask-image: url("/img/ico/list.png");
  mask-image: url("/img/ico/list.png");
}
.ico.ico-send {
  -webkit-mask-image: url("/img/ico/send.png");
  mask-image: url("/img/ico/send.png");
}
.ico.ico-calendar {
  -webkit-mask-image: url("/img/ico/calendar.svg");
  mask-image: url("/img/ico/calendar.svg");
}
.ico.ico-phonebook {
  -webkit-mask-image: url("/img/ico/phonebook.svg");
  mask-image: url("/img/ico/phonebook.svg");
}
.ico.ico-lorry {
  -webkit-mask-image: url("/img/ico/lorry.svg");
  mask-image: url("/img/ico/lorry.svg");
}
.ico.ico-table {
  -webkit-mask-image: url("/img/ico/table.png");
  mask-image: url("/img/ico/table.png");
}
.ico.ico-eye {
  -webkit-mask-image: url("/img/ico/eye.png");
  mask-image: url("/img/ico/eye.png");
}
.ico.ico-eye-crossed {
  -webkit-mask-image: url("/img/ico/eye-crossed.svg");
  mask-image: url("/img/ico/eye-crossed.svg");
}
.ico.ico-lock {
  -webkit-mask-image: url("/img/ico/lock.png");
  mask-image: url("/img/ico/lock.png");
}
.ico.ico-hammer {
  -webkit-mask-image: url("/img/ico/hammer.png");
  mask-image: url("/img/ico/hammer.png");
}
.ico.ico-truck {
  -webkit-mask-image: url("/img/ico/truck.png");
  mask-image: url("/img/ico/truck.png");
}
.ico.ico-scale {
  -webkit-mask-image: url("/img/ico/scale.svg");
  mask-image: url("/img/ico/scale.svg");
}
.ico.ico-arrow-up {
  -webkit-mask-image: url("/img/ico/arrow-up.svg");
  mask-image: url("/img/ico/arrow-up.svg");
}
.ico.ico-arrow-down {
  -webkit-mask-image: url("/img/ico/arrow-down.svg");
  mask-image: url("/img/ico/arrow-down.svg");
}
.ico.ico-arrow-right {
  -webkit-mask-image: url("/img/ico/arrow-right.svg");
  mask-image: url("/img/ico/arrow-right.svg");
}
.ico.ico-tools {
  -webkit-mask-image: url("/img/ico/tools.svg");
  mask-image: url("/img/ico/tools.svg");
}
.ico.ico-pie-chart {
  -webkit-mask-image: url("/img/ico/pie-chart.svg");
  mask-image: url("/img/ico/pie-chart.svg");
}
.ico.ico-pie-chart {
  -webkit-mask-image: url("/img/ico/pie-chart.svg");
  mask-image: url("/img/ico/pie-chart.svg");
}
.ico.ico-trigger {
  -webkit-mask-image: url("/img/ico/trigger.png");
  mask-image: url("/img/ico/trigger.png");
}
.ico.ico-chat {
  -webkit-mask-image: url("/img/ico/chat.svg");
  mask-image: url("/img/ico/chat.svg");
}
.ico.ico-wand {
  -webkit-mask-image: url("/img/ico/wand.svg");
  mask-image: url("/img/ico/wand.svg");
}
.ico.ico-map {
  -webkit-mask-image: url("/img/ico/map.png");
  mask-image: url("/img/ico/map.png");
}
.ico.ico-cog {
  -webkit-mask-image: url("/img/ico/cog.svg");
  mask-image: url("/img/ico/cog.svg");
}
.ico.ico-cogs {
  -webkit-mask-image: url("/img/ico/cogs.png");
  mask-image: url("/img/ico/cogs.png");
}
.ico.ico-caret-right {
  -webkit-mask-image: url("/img/ico/caret-right.png");
  mask-image: url("/img/ico/caret-right.png");
}
.ico.ico-caret-left {
  -webkit-mask-image: url("/img/ico/caret-left.png");
  mask-image: url("/img/ico/caret-left.png");
}
.ico.ico-caret-down {
  -webkit-mask-image: url("/img/ico/caret-down.png");
  mask-image: url("/img/ico/caret-down.png");
}
.ico.ico-caret-up {
  -webkit-mask-image: url("/img/ico/caret-up.png");
  mask-image: url("/img/ico/caret-up.png");
}
.ico.ico-lupe {
  -webkit-mask-image: url("/img/ico/lupe.png");
  mask-image: url("/img/ico/lupe.png");
}
.ico.ico-bell {
  -webkit-mask-image: url("/img/ico/bell.svg");
  mask-image: url("/img/ico/bell.svg");
}
.ico.ico-envelope {
  -webkit-mask-image: url("/img/ico/envelope.png");
  mask-image: url("/img/ico/envelope.png");
}
.ico.ico-flag {
  -webkit-mask-image: url("/img/ico/flag.png");
  mask-image: url("/img/ico/flag.png");
}
.ico.ico-undo {
  -webkit-mask-image: url("/img/ico/undo-arrow.png");
  mask-image: url("/img/ico/undo-arrow.png");
}
.ico.ico-bookmark-delete {
  -webkit-mask-image: url("/img/ico/bookmark-delete.png");
  mask-image: url("/img/ico/bookmark-delete.png");
}
.ico.ico-plus-circle {
  -webkit-mask-image: url("/img/ico/plus-circle.png");
  mask-image: url("/img/ico/plus-circle.png");
}
.ico.ico-plus {
  -webkit-mask-image: url("/img/ico/plus.svg");
  mask-image: url("/img/ico/plus.svg");
}
.ico.ico-filter {
  -webkit-mask-image: url("/img/ico/filter.png");
  mask-image: url("/img/ico/filter.png");
}
.ico.ico-back {
  -webkit-mask-image: url("/img/ico/back.png");
  mask-image: url("/img/ico/back.png");
}
.ico.ico-forward {
  -webkit-mask-image: url("/img/ico/forward.png");
  mask-image: url("/img/ico/forward.png");
}
.ico.ico-minimize {
  -webkit-mask-image: url("/img/ico/minimize.png");
  mask-image: url("/img/ico/minimize.png");
}
.ico.ico-maximize {
  -webkit-mask-image: url("/img/ico/maximize.svg");
  mask-image: url("/img/ico/maximize.svg");
}
.ico.ico-close {
  -webkit-mask-image: url("/img/ico/close.png");
  mask-image: url("/img/ico/close.png");
}
.ico.ico-message-bubble {
  -webkit-mask-image: url("/img/ico/message-bubble.svg");
  mask-image: url("/img/ico/message-bubble.svg");
}
.ico.ico-normalize {
  -webkit-mask-image: url("/img/ico/normalize.png");
  mask-image: url("/img/ico/normalize.png");
}
.ico.ico-export {
  -webkit-mask-image: url("/img/ico/export.png");
  mask-image: url("/img/ico/export.png");
}
.ico.ico-cancel {
  -webkit-mask-image: url("/img/ico/cancel.png");
  mask-image: url("/img/ico/cancel.png");
}
.ico.ico-trash {
  -webkit-mask-image: url("/img/ico/trash.svg");
  mask-image: url("/img/ico/trash.svg");
}
.ico.ico-accept {
  -webkit-mask-image: url("/img/ico/accept.png");
  mask-image: url("/img/ico/accept.png");
}
.ico.ico-edit {
  -webkit-mask-image: url("/img/ico/edit.svg");
  mask-image: url("/img/ico/edit.svg");
}
.ico.ico-aluminium_okna {
  -webkit-mask-image: url("/img/ico/aluminium_okna.svg");
  mask-image: url("/img/ico/aluminium_okna.svg");
}
.ico.ico-brama {
  -webkit-mask-image: url("/img/ico/brama.svg");
  mask-image: url("/img/ico/brama.svg");
}
.ico.ico-drzwi {
  -webkit-mask-image: url("/img/ico/drzwi.svg");
  mask-image: url("/img/ico/drzwi.svg");
}
.ico.ico-izolator_rolka {
  -webkit-mask-image: url("/img/ico/izolator_rolka.svg");
  mask-image: url("/img/ico/izolator_rolka.svg");
}
.ico.ico-klamki {
  -webkit-mask-image: url("/img/ico/klamki.svg");
  mask-image: url("/img/ico/klamki.svg");
}
.ico.ico-kotwy {
  -webkit-mask-image: url("/img/ico/kotwy.svg");
  mask-image: url("/img/ico/kotwy.svg");
}
.ico.ico-materialy_montazowe {
  -webkit-mask-image: url("/img/ico/materialy_montazowe.svg");
  mask-image: url("/img/ico/materialy_montazowe.svg");
}
.ico.ico-purenity {
  -webkit-mask-image: url("/img/ico/purenity.svg");
  mask-image: url("/img/ico/purenity.svg");
}
.ico.ico-szyby {
  -webkit-mask-image: url("/img/ico/szyby.svg");
  mask-image: url("/img/ico/szyby.svg");
}
.ico.ico-zaluzje {
  -webkit-mask-image: url("/img/ico/zaluzje.svg");
  mask-image: url("/img/ico/zaluzje.svg");
}
.ico.ico-okna-pvc {
  -webkit-mask-image: url("/img/ico/okna-pvc.svg");
  mask-image: url("/img/ico/okna-pvc.svg");
}
.ico.ico-box {
  -webkit-mask-image: url("/img/ico/box.png");
  mask-image: url("/img/ico/box.png");
}
.ico.ico-organization {
  -webkit-mask-image: url("/img/ico/organization.png");
  mask-image: url("/img/ico/organization.png");
}
.ico.ico-paint {
  -webkit-mask-image: url("/img/ico/paint.png");
  mask-image: url("/img/ico/paint.png");
}
.ico.ico-property {
  -webkit-mask-image: url("/img/ico/property.png");
  mask-image: url("/img/ico/property.png");
}
.ico.ico-save {
  -webkit-mask-image: url("/img/ico/save.png");
  mask-image: url("/img/ico/save.png");
}
.ico.ico-star {
  -webkit-mask-image: url("/img/ico/star.png");
  mask-image: url("/img/ico/star.png");
}
.ico.ico-podium {
  -webkit-mask-image: url("/img/ico/podium.png");
  mask-image: url("/img/ico/podium.png");
}
.ico.ico-customer {
  -webkit-mask-image: url("/img/ico/customer.png");
  mask-image: url("/img/ico/customer.png");
}
.ico.ico-money {
  -webkit-mask-image: url("/img/ico/money.png");
  mask-image: url("/img/ico/money.png");
}
.ico.ico-ordered {
  -webkit-mask-image: url("/img/ico/ordered.png");
  mask-image: url("/img/ico/ordered.png");
}
.ico.ico-onstock {
  -webkit-mask-image: url("/img/ico/onstock.svg");
  mask-image: url("/img/ico/onstock.svg");
}
.ico.ico-outofstock, .ico.ico-partiallyonstock, .ico.ico-partiallyoutofstock {
  -webkit-mask-image: url("/img/ico/outofstock.svg");
  mask-image: url("/img/ico/outofstock.svg");
}
.ico.ico-user {
  -webkit-mask-image: url("/img/ico/user.png");
  mask-image: url("/img/ico/user.png");
}
.ico.ico-id {
  -webkit-mask-image: url("/img/ico/id.png");
  mask-image: url("/img/ico/id.png");
}
.ico.ico-note {
  -webkit-mask-image: url("/img/ico/note.svg");
  mask-image: url("/img/ico/note.svg");
}
.ico.ico-meeting {
  -webkit-mask-image: url("/img/ico/meeting.png");
  mask-image: url("/img/ico/meeting.png");
}
.ico.ico-video {
  -webkit-mask-image: url("/img/ico/video.png");
  mask-image: url("/img/ico/video.png");
}
.ico.ico-info {
  -webkit-mask-image: url("/img/ico/info.png");
  mask-image: url("/img/ico/info.png");
}
.ico.ico-warning {
  -webkit-mask-image: url("/img/ico/warning.png");
  mask-image: url("/img/ico/warning.png");
}
.ico.ico-camera {
  -webkit-mask-image: url("/img/ico/camera.png");
  mask-image: url("/img/ico/camera.png");
}
.ico.ico-crane {
  -webkit-mask-image: url("/img/ico/crane.png");
  mask-image: url("/img/ico/crane.png");
}
.ico.ico-diamond {
  -webkit-mask-image: url("/img/ico/diamond.png");
  mask-image: url("/img/ico/diamond.png");
}
.ico.ico-building {
  -webkit-mask-image: url("/img/ico/building.png");
  mask-image: url("/img/ico/building.png");
}
.ico.ico-service {
  -webkit-mask-image: url("/img/ico/wrench.svg");
  mask-image: url("/img/ico/wrench.svg");
}
.ico.ico-adddamage {
  -webkit-mask-image: url("/img/ico/adddamage.svg");
  mask-image: url("/img/ico/adddamage.svg");
}
.ico.ico-addstock {
  -webkit-mask-image: url("/img/ico/addstock.svg");
  mask-image: url("/img/ico/addstock.svg");
}
.ico.ico-pin {
  -webkit-mask-image: url("/img/ico/pin.png");
  mask-image: url("/img/ico/pin.png");
}
.ico.ico-share {
  -webkit-mask-image: url("/img/ico/share.png");
  mask-image: url("/img/ico/share.png");
}
.ico.ico-paperclip {
  -webkit-mask-image: url("/img/ico/paperclip.png");
  mask-image: url("/img/ico/paperclip.png");
}
.ico.ico-creator {
  -webkit-mask-image: url("/img/ico/creator.png");
  mask-image: url("/img/ico/creator.png");
}
.ico.ico-bank {
  -webkit-mask-image: url("/img/ico/bank.svg");
  mask-image: url("/img/ico/bank.svg");
}
.ico.ico-circle {
  -webkit-mask-image: url("/img/ico/circle.svg");
  mask-image: url("/img/ico/circle.svg");
}
.ico.ico-sort {
  -webkit-mask-image: url("/img/ico/sort.png");
  mask-image: url("/img/ico/sort.png");
}
.ico.ico-creategroup {
  -webkit-mask-image: url("/img/ico/creategroup.png");
  mask-image: url("/img/ico/creategroup.png");
}
.ico.ico-bookmark {
  -webkit-mask-image: url("/img/ico/bookmark.png");
  mask-image: url("/img/ico/bookmark.png");
}
.ico.ico-bookmark-open {
  -webkit-mask-image: url("/img/ico/bookmark-open.svg");
  mask-image: url("/img/ico/bookmark-open.svg");
}
.ico.ico-wrench {
  -webkit-mask-image: url("/img/ico/wrench.svg");
  mask-image: url("/img/ico/wrench.svg");
}
.ico.ico-suitcase {
  -webkit-mask-image: url("/img/ico/suitcase.svg");
  mask-image: url("/img/ico/suitcase.svg");
}
.ico.ico-wrapped-note {
  -webkit-mask-image: url("/img/ico/wrapped-note.png");
  mask-image: url("/img/ico/wrapped-note.png");
}
.ico.ico-package {
  -webkit-mask-image: url("/img/ico/package.svg");
  mask-image: url("/img/ico/package.svg");
}
.ico.ico-dollar {
  -webkit-mask-image: url("/img/ico/dollar.svg");
  mask-image: url("/img/ico/dollar.svg");
}
.ico.ico-boxes {
  -webkit-mask-image: url("/img/ico/boxes.svg");
  mask-image: url("/img/ico/boxes.svg");
}
.ico.ico-download {
  -webkit-mask-image: url("/img/ico/download.svg");
  mask-image: url("/img/ico/download.svg");
}
.ico.ico-upload {
  -webkit-mask-image: url("/img/ico/upload.svg");
  mask-image: url("/img/ico/upload.svg");
}
.ico.ico-stand {
  -webkit-mask-image: url("/img/ico/stand.svg");
  mask-image: url("/img/ico/stand.svg");
}
.ico.ico-trend-up {
  -webkit-mask-image: url("/img/ico/trend-up.svg");
  mask-image: url("/img/ico/trend-up.svg");
  background-color: #39BEA7;
}
.ico.ico-trend-down {
  -webkit-mask-image: url("/img/ico/trend-down.svg");
  mask-image: url("/img/ico/trend-down.png");
  background-color: #FB6350;
}
.ico.ico-trend-stable {
  -webkit-mask-image: url("/img/ico/arrow-right.svg");
  mask-image: url("/img/ico/arrow-right.svg");
  background-color: #F2B164;
}
.ico.ico-thumb-up {
  -webkit-mask-image: url("/img/ico/thumb-up.png");
  mask-image: url("/img/ico/thumb-up.png");
}
.ico.ico-thumb-down {
  -webkit-mask-image: url("/img/ico/thumb-down.png");
  mask-image: url("/img/ico/thumb-down.png");
}
.ico.ico-crown {
  -webkit-mask-image: url("/img/ico/crown.svg");
  mask-image: url("/img/ico/crown.svg");
}
.ico.rep-collect {
  -webkit-mask-image: url("/img/ico/rep-collect.svg");
  mask-image: url("/img/ico/rep-collect.svg");
}
.ico.rep-credit-card {
  -webkit-mask-image: url("/img/ico/rep-credit-card.svg");
  mask-image: url("/img/ico/rep-credit-card.svg");
}
.ico.rep-dollar-bill {
  -webkit-mask-image: url("/img/ico/rep-dollar-bill.svg");
  mask-image: url("/img/ico/rep-dollar-bill.svg");
}
.ico.rep-dollar-coin {
  -webkit-mask-image: url("/img/ico/rep-dollar-coin.svg");
  mask-image: url("/img/ico/rep-dollar-coin.svg");
}
.ico.rep-pc-money {
  -webkit-mask-image: url("/img/ico/rep-pc-money.svg");
  mask-image: url("/img/ico/rep-pc-money.svg");
}
.ico.rep-plus {
  -webkit-mask-image: url("/img/ico/rep-plus.svg");
  mask-image: url("/img/ico/rep-plus.svg");
}

#sidebar {
  transition: width 1s;
  background: black;
  z-index: 1;
  position: sticky;
  height: 100vh;
  top: 0;
  width: 240rem;
}
#sidebar .logo {
  padding: 30rem 40rem 10rem 30rem;
  max-width: 100%;
  display: flex;
}
#sidebar .logo img {
  max-width: 100%;
}
#sidebar .navi-column {
  margin-top: 20rem;
  padding: 12rem;
  height: calc(100vh - 140rem);
  overflow-x: auto;
  scrollbar-width: thin;
  color: white;
  cursor: pointer;
}
#sidebar .navi-column .ico {
  background-color: white;
}
#sidebar .navi-column .category-container {
  margin-bottom: 5rem;
}
#sidebar .navi-column .category-container:hover, #sidebar .navi-column .category-container.opened {
  background: #383641;
  border-radius: 5rem;
}
#sidebar .navi-column .category-container:hover .category .caret, #sidebar .navi-column .category-container.opened .category .caret {
  background-color: #F29058;
}
#sidebar .navi-column .category-container:hover .category .cat-image, #sidebar .navi-column .category-container.opened .category .cat-image {
  background-color: #F29058;
}
#sidebar .navi-column .category-container:hover .category .cat-name, #sidebar .navi-column .category-container.opened .category .cat-name {
  font-weight: 700;
}
#sidebar .navi-column .category-container .category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15rem;
}
#sidebar .navi-column .category-container .category .cat-image {
  width: 25rem;
  height: 25rem;
}
#sidebar .navi-column .category-container .category .cat-name {
  width: 100rem;
  font-size: 12rem;
}
#sidebar .navi-column .category-container .category .caret {
  width: 12rem;
  height: 12rem;
}
#sidebar .navi-column .category-container .modules-container {
  padding-bottom: 5rem;
}
#sidebar .navi-column .category-container .modules-container .module {
  display: flex;
  align-items: center;
  gap: 10rem;
  padding: 10rem 0 10rem 30rem;
}
#sidebar .navi-column .category-container .modules-container .module:hover {
  background: rgba(0, 0, 0, 0.2);
  color: #F29058;
}
#sidebar .navi-column .category-container .modules-container .module .mod-name {
  font-size: 12rem;
}
#sidebar .navi-column .category-container .modules-container .module.module-opened {
  background: rgba(0, 0, 0, 0.2);
  color: #F29058;
}
#sidebar .navi-column .category-container .modules-container .module .caret {
  width: 10rem;
  height: 10rem;
}

#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: space-between;
}
#top-navbar breadcrumbs {
  display: flex;
  align-items: center;
  margin-left: 30rem;
  gap: 20rem;
}
#top-navbar breadcrumbs i {
  width: 21rem;
  height: 21rem;
  background-color: #696969;
}
#top-navbar breadcrumbs .first {
  color: #696969;
}
#top-navbar breadcrumbs caret {
  width: 14rem;
  height: 14rem;
  background: white;
}
#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: #126585 !important;
  border-radius: 0 !important;
  justify-content: center;
}
#top-navbar .widget:hover {
  background-color: #696969;
}
#top-navbar .widget .ico {
  background-color: white;
  width: 24rem;
  height: 24rem;
  padding: 10rem;
}

#user-widget {
  margin: 0 30rem;
  cursor: pointer;
}
#user-widget img {
  height: 30rem;
  width: 30rem;
  border-radius: 100%;
}
#user-widget sep {
  background: white;
  height: 1rem;
  width: 100%;
  margin: 10rem 0;
}
#user-widget options {
  width: 106rem;
  position: fixed;
  top: 50rem;
  right: 0;
  background: #383641;
  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: #063749;
}

#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: #383641;
  font-weight: 400;
  margin: 0;
  padding: 8rem 0;
}
#multi-search .search-results-box p:hover {
  background-color: #F6F4F3;
}
#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;
}

#minimized-chat {
  display: none;
}
#minimized-chat.minimized {
  z-index: 2;
  display: block !important;
  position: fixed;
  bottom: 120rem;
  right: 10rem;
  width: 80rem;
  height: 80rem;
  cursor: pointer;
}
#minimized-chat.minimized minicounter {
  border-radius: 50%;
  background: #FB6350;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  color: white;
  margin: 0 auto;
  width: 26rem;
  height: 26rem;
}
#minimized-chat.minimized:hover {
  transform: scale(0.9);
}
#minimized-chat.minimized img {
  width: 80rem;
  height: 80rem;
  border-radius: 50%;
}

#chat.minimized {
  display: none !important;
}
#chat.elementary {
  height: calc(100vh - 70rem);
  position: fixed;
  top: 50rem;
  right: 0;
  width: 430rem;
  z-index: 2;
  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;
}
#chat.elementary #chatbox url {
  padding: 20rem 0 40rem 0;
  text-align: center;
  margin-bottom: 40rem;
}
#chat.elementary .show-fullscreen {
  display: flex;
  align-items: center;
  gap: 12rem;
  width: 100%;
  padding-top: 15rem;
  padding-left: 30rem;
  border-top: 1rem solid #C7C7C8;
}
#chat.elementary .show-fullscreen .ico {
  margin-top: 2rem;
  width: 18rem;
  height: 18rem;
  background-color: #0090DF;
}
#chat.elementary .chat-navi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #126585;
  height: 44rem;
  color: white;
  text-align: right;
  padding: 10rem 20rem 10rem 20rem;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3294117647);
  font-size: 17rem;
}
#chat.elementary .chat-navi .ico-caret-left {
  width: 18rem;
  height: 18rem;
  background-color: white;
  cursor: pointer;
}
#chat.elementary .chat-navi .ico-envelope {
  background: white;
  width: 22rem;
  height: 22rem;
}
#chat.elementary .chat-navi .ico-close, #chat.elementary .chat-navi .ico-maximize, #chat.elementary .chat-navi .ico-edit, #chat.elementary .chat-navi .ico-minimize {
  background-color: white;
  cursor: pointer;
  height: 18rem;
  width: 18rem;
}
#chat.elementary .chat-navi user-navi {
  display: flex;
  gap: 15rem;
  align-items: center;
}
#chat.elementary .chat-navi user-navi img {
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
}
#chat.elementary .chat-actions {
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rem 20rem;
  border-bottom: 1rem solid #C7C7C8;
}
#chat.elementary .chat-actions .search-input:before {
  top: 8rem;
  width: 18rem;
  height: 18rem;
}
#chat.elementary .chat-actions .search-input .ico-bookmark-delete {
  top: 4rem;
  right: 8rem;
  background-color: #FB6350;
}
#chat.elementary .chat-actions .search-input input {
  border: 1rem solid #C7C7C8;
  color: black;
  font-weight: 300 !important;
  height: 34rem;
  border-radius: 22rem;
  font-size: 14rem;
}
#chat.elementary .chat-actions .ico {
  cursor: pointer;
  width: 27rem;
  height: 27rem;
  background: #0090DF;
}
#chat.elementary .receivers-container {
  height: calc(100vh - 225rem);
  display: block;
  overflow: auto;
}
#chat.elementary .receivers-container receiver {
  padding: 35rem 20rem;
  display: flex;
  align-items: center;
  gap: 20rem;
  height: 50rem;
  position: relative;
  cursor: pointer;
  border-bottom: 1px solid lightgray;
}
#chat.elementary .receivers-container receiver:hover {
  background: #0090DF;
}
#chat.elementary .receivers-container receiver:hover name, #chat.elementary .receivers-container receiver:hover txt, #chat.elementary .receivers-container receiver:hover .not-read {
  color: white;
}
#chat.elementary .receivers-container receiver left {
  position: relative;
}
#chat.elementary .receivers-container receiver left status {
  position: absolute;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  right: -5rem;
  top: 25rem;
}
#chat.elementary .receivers-container receiver left status.logged {
  background-color: #39BEA7;
}
#chat.elementary .receivers-container receiver left status.not-logged {
  background-color: #FB6350;
}
#chat.elementary .receivers-container receiver left img {
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
}
#chat.elementary .receivers-container receiver right {
  display: inline-grid;
}
#chat.elementary .receivers-container receiver right name {
  font-size: 14rem;
  font-weight: 500;
  letter-spacing: 0.00177646em;
  line-height: 14rem;
  margin: 0px 0px 10rem 0px;
  font-style: normal;
  white-space: normal;
  color: #383641;
}
#chat.elementary .receivers-container receiver right txt {
  font-size: 11rem;
  line-height: 11rem;
}
#chat.elementary .receivers-container receiver right txt.not-read {
  color: #0090DF;
  font-weight: 700;
}
#chat.elementary .message-container {
  overflow: auto;
  padding: 10rem 20rem 110rem 20rem;
  display: grid;
  height: calc(100vh - 200rem);
  align-content: baseline;
}
#chat.elementary .message-container message {
  display: grid;
  gap: 5rem;
  margin-bottom: 10rem;
}
#chat.elementary .message-container message url {
  color: red !important;
  padding: 0 !important;
  text-align: right !important;
  margin: 0 !important;
}
#chat.elementary .message-container message msg-content {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  padding: 6rem 10rem;
  width: fit-content;
  border-radius: 5rem;
  max-width: 310rem;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 18rem;
}
#chat.elementary .message-container message.own {
  justify-self: start;
}
#chat.elementary .message-container message.own msg-content {
  margin-left: 35rem;
  justify-self: start;
  background: #EAEAEA;
}
#chat.elementary .message-container message.own msg-data {
  justify-content: start;
}
#chat.elementary .message-container message.not-own {
  justify-self: end;
}
#chat.elementary .message-container message.not-own msg-content {
  margin-right: 35rem;
  justify-self: end;
}
#chat.elementary .message-container message.not-own msg-data {
  justify-content: end;
  flex-direction: row-reverse;
}
#chat.elementary .message-container message msg-data {
  display: flex;
  gap: 12rem;
  align-items: center;
}
#chat.elementary .message-container message msg-data img {
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
}
#chat.elementary .message-container .chat-img {
  max-width: 100%;
}
#chat.elementary .write-control {
  border-radius: 0 0 10rem 10rem;
  margin: 10rem 0;
  padding: 10rem;
  border-top: 1rem solid #C7C7C8;
  background-color: #F6F4F3;
  position: relative;
  display: flex;
  gap: 1rem;
}
#chat.elementary .write-control textarea {
  word-break: break-word;
  width: 100%;
  padding: 10rem 0 5rem 15rem !important;
  border: none;
  font-size: 16rem;
  border: 1rem solid #126585;
  border-radius: 10rem 0 0 10rem;
  line-height: 21rem;
}
#chat.elementary .write-control .action {
  width: 36rem;
  background: #124f66;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 10rem;
}
#chat.elementary .write-control .action.send-button {
  border-radius: 0 5rem 5rem 0;
}
#chat.elementary .write-control .action .ico {
  background: white;
  width: 16rem;
  height: 20rem;
}
#chat.fullscreen {
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 2;
  background: #D9D9D9;
  padding: 20rem;
}
#chat.fullscreen #chatbox url {
  padding: 20rem 0 40rem 0;
  text-align: center;
  margin-bottom: 40rem;
}
#chat.fullscreen .column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #126585;
  height: 44rem;
  border-radius: 10rem 10rem 0 0;
  color: white;
  text-align: right;
  padding: 10rem 20rem 10rem 20rem;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3294117647);
  font-size: 17rem;
}
#chat.fullscreen .column-header .ico {
  background-color: white;
  cursor: pointer;
  height: 18rem;
  width: 18rem;
}
#chat.fullscreen .column-header user-navi {
  display: flex;
  gap: 20rem;
  align-items: center;
}
#chat.fullscreen .column-header user-navi img {
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
}
#chat.fullscreen .chat-content {
  display: flex;
  gap: 30rem;
}
#chat.fullscreen .chat-content .receivers-column {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3294117647);
  border-radius: 10rem;
  background: white;
  width: 30%;
  height: calc(100vh - 42rem);
}
#chat.fullscreen .chat-content .receivers-column .chat-actions {
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rem 20rem;
  border-bottom: 1rem solid #C7C7C8;
}
#chat.fullscreen .chat-content .receivers-column .chat-actions .search-input:before {
  top: 8rem;
  width: 18rem;
  height: 18rem;
}
#chat.fullscreen .chat-content .receivers-column .chat-actions .search-input .ico-bookmark-delete {
  top: 4rem;
  right: 8rem;
  background-color: #FB6350;
}
#chat.fullscreen .chat-content .receivers-column .chat-actions .search-input input {
  border: 1rem solid #C7C7C8;
  color: black;
  font-weight: 300 !important;
  height: 34rem;
  border-radius: 22rem;
  font-size: 14rem;
}
#chat.fullscreen .chat-content .receivers-column .chat-actions .ico {
  cursor: pointer;
  width: 27rem;
  height: 27rem;
  background: #0090DF;
}
#chat.fullscreen .chat-content .receivers-column .receivers-container {
  height: calc(100vh - 140rem);
  display: block;
  overflow: auto;
}
#chat.fullscreen .chat-content .receivers-column .receivers-container receiver {
  padding: 30rem 20rem;
  display: flex;
  align-items: center;
  gap: 20rem;
  height: 50rem;
  position: relative;
  cursor: pointer;
  border-bottom: 1px solid lightgray;
}
#chat.fullscreen .chat-content .receivers-column .receivers-container receiver:hover {
  background: #0090DF;
}
#chat.fullscreen .chat-content .receivers-column .receivers-container receiver:hover name, #chat.fullscreen .chat-content .receivers-column .receivers-container receiver:hover txt {
  color: white;
}
#chat.fullscreen .chat-content .receivers-column .receivers-container receiver left {
  position: relative;
}
#chat.fullscreen .chat-content .receivers-column .receivers-container receiver left status {
  position: absolute;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  right: -5rem;
  top: 25rem;
}
#chat.fullscreen .chat-content .receivers-column .receivers-container receiver left status.logged {
  background-color: #39BEA7;
}
#chat.fullscreen .chat-content .receivers-column .receivers-container receiver left status.not-logged {
  background-color: #FB6350;
}
#chat.fullscreen .chat-content .receivers-column .receivers-container receiver left img {
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
}
#chat.fullscreen .chat-content .receivers-column .receivers-container receiver right {
  display: inline-grid;
}
#chat.fullscreen .chat-content .receivers-column .receivers-container receiver right name {
  font-size: 14rem;
  font-weight: normal;
  letter-spacing: 0.00177646em;
  line-height: 14rem;
  margin: 0px 0px 10rem 0px;
  font-style: normal;
  white-space: normal;
  color: #383641;
}
#chat.fullscreen .chat-content .receivers-column .receivers-container receiver right txt {
  font-size: 10rem;
  line-height: 10rem;
}
#chat.fullscreen .chat-content .conversation-column {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3294117647);
  border-radius: 10rem;
  background: white;
  width: 95%;
  height: calc(100vh - 44rem);
}
#chat.fullscreen .chat-content .conversation-column .message-container {
  overflow: auto;
  padding: 10rem 20rem 110rem 20rem;
  display: grid;
  height: calc(100vh - 180rem);
  align-content: baseline;
}
#chat.fullscreen .chat-content .conversation-column .message-container message {
  display: grid;
  gap: 5rem;
  margin-bottom: 30rem;
}
#chat.fullscreen .chat-content .conversation-column .message-container message url {
  color: red !important;
  padding: 0 !important;
  text-align: left !important;
  margin: 0 !important;
}
#chat.fullscreen .chat-content .conversation-column .message-container message msg-content {
  margin-left: 35rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  padding: 6rem 10rem;
  width: fit-content;
  border-radius: 5rem;
  line-height: 18rem;
}
#chat.fullscreen .chat-content .conversation-column .message-container message.own {
  justify-self: start;
}
#chat.fullscreen .chat-content .conversation-column .message-container message.own msg-content {
  justify-self: start;
  background: #EAEAEA;
}
#chat.fullscreen .chat-content .conversation-column .message-container message.own msg-data {
  justify-content: start;
}
#chat.fullscreen .chat-content .conversation-column .message-container message.not-own {
  justify-self: start;
}
#chat.fullscreen .chat-content .conversation-column .message-container message.not-own msg-content {
  justify-self: start;
}
#chat.fullscreen .chat-content .conversation-column .message-container message.not-own msg-data {
  justify-content: start;
}
#chat.fullscreen .chat-content .conversation-column .message-container message msg-data {
  display: flex;
  gap: 12rem;
  align-items: center;
}
#chat.fullscreen .chat-content .conversation-column .message-container message msg-data img {
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
}
#chat.fullscreen .chat-content .conversation-column .message-container .chat-img {
  max-width: 100%;
}
#chat.fullscreen .chat-content .conversation-column .write-control {
  margin-top: 20rem;
  padding: 10rem;
  border-top: 1rem solid #C7C7C8;
  position: relative;
  display: flex;
  gap: 1rem;
  background: #eaeaea;
}
#chat.fullscreen .chat-content .conversation-column .write-control textarea {
  word-break: break-word;
  width: 100%;
  padding: 10rem 0 5rem 15rem !important;
  border: none;
  font-size: 16rem;
  border: 1rem solid #126585;
  border-radius: 10rem 0 0 10rem;
  line-height: 21rem;
}
#chat.fullscreen .chat-content .conversation-column .write-control .action {
  width: 36rem;
  background: #124f66;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 10rem;
}
#chat.fullscreen .chat-content .conversation-column .write-control .action.send-button {
  border-radius: 0 5rem 5rem 0;
}
#chat.fullscreen .chat-content .conversation-column .write-control .action .ico {
  background: white;
  width: 16rem;
  height: 20rem;
}
#chat.fullscreen .show-fullscreen {
  display: none;
}
#chat name {
  color: #383641;
  font-weight: 600;
}
#chat date {
  font-size: 12rem;
}
#chat .process-empty-data {
  margin-top: 35vh;
}

#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: #126585;
  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: #0090DF;
  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: #0090DF;
}
#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 #C7C7C8;
  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: #696969;
}
#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: #0090DF;
  margin-right: 5rem;
}

.widget {
  display: flex;
  align-items: center;
  gap: 5rem;
  position: relative;
}
.widget counter {
  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 counter: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 #F6F4F3;
}
#emoji-panel .container {
  padding: 10rem;
  display: flex;
  column-gap: 20rem;
  flex-wrap: wrap;
}
#emoji-panel .container p {
  cursor: pointer;
}

#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: #139093;
  border-radius: 10rem;
  color: white;
  font-size: 16rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /* color: $turqoise;
  font-weight: 700;
  cursor: pointer;
  line-height: 46rem;
  width: 100%;
  text-align: center;

  span {
      background-color: $turqoise;
  }*/
}
#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;
  background: #F6F4F3;
  width: 50rem;
  height: 50rem;
  align-items: center;
  /*&.active {
      background: $dark-green;
      opacity: 1;

      img {
          filter: none;
      }
  }

  img {
      filter: grayscale(100%);
  }*/
}
#basic-order-data .statuses-wrapper status img {
  width: 30rem;
  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: #383641;
  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;
}

#order-prod-serv-box wrapper {
  display: flex;
  flex-direction: column;
  gap: 20rem;
}
#order-prod-serv-box wrapper .prod-serv-el {
  background: white;
  width: 100%;
  border: 1rem solid #C7C7C8;
  border-radius: 10rem;
  border-left: 16rem solid #C7C7C8;
}
#order-prod-serv-box wrapper .prod-serv-el.warning {
  border-color: #F2B164;
}
#order-prod-serv-box wrapper .prod-serv-el.success {
  border-color: #39BEA7;
}
#order-prod-serv-box wrapper .prod-serv-el head-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1rem solid #C7C7C8;
}
#order-prod-serv-box wrapper .prod-serv-el head-wrap elhead {
  padding: 6rem 20rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#order-prod-serv-box wrapper .prod-serv-el head-wrap elhead eltitle {
  display: flex;
  gap: 8rem;
  align-items: center;
  font-size: 16rem;
  font-weight: 700;
  text-transform: uppercase;
}
#order-prod-serv-box wrapper .prod-serv-el head-wrap elhead eltitle .ico {
  width: 20rem;
  height: 20rem;
  background-color: #696969;
}
#order-prod-serv-box wrapper .prod-serv-el head-wrap elhead statuswrapper {
  display: flex;
  gap: 10rem;
  align-items: center;
}
#order-prod-serv-box wrapper .prod-serv-el head-wrap elhead statuswrapper statusbox {
  padding: 5rem;
  border: 1rem solid #C7C7C8;
  display: flex;
  gap: 5rem;
  align-items: center;
  border-radius: 5rem;
}
#order-prod-serv-box wrapper .prod-serv-el head-wrap elhead statuswrapper statusbox .ico {
  width: 14rem;
  height: 14rem;
}
#order-prod-serv-box wrapper .prod-serv-el head-wrap trashwrap {
  padding: 10rem 20rem;
  border-left: 1rem solid #C7C7C8;
}
#order-prod-serv-box wrapper .prod-serv-el head-wrap trashwrap .ico {
  width: 20rem;
  height: 20rem;
  background-color: #696969;
  cursor: pointer;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap {
  display: flex;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap elcontent {
  width: 100%;
  padding: 4rem 20rem;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap elcontent grid {
  margin: 6rem 0;
  grid-gap: 16rem;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: space-between;
  border-left: 1rem solid #C7C7C8;
  min-width: 30%;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option {
  min-height: 70rem;
  padding: 0 20rem;
  display: flex;
  align-items: center;
  height: 100%;
  gap: 10rem;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option wrapper {
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  background-color: #C7C7C8;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10rem;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.ordered, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.finished, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.payed, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.allOnStock {
  background-color: #C9EDE7 !important;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.ordered wrapper, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.finished wrapper, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.payed wrapper, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.allOnStock wrapper {
  background-color: #39BEA7 !important;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.ordered wrapper .ico, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.finished wrapper .ico, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.payed wrapper .ico, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.allOnStock wrapper .ico {
  background-color: #1C6A5D !important;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.ordered display, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.finished display, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.payed display, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.allOnStock display {
  color: #139093 !important;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.not-ordered wrapper, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.not-finished wrapper, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.notOnStock wrapper, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.not-payed wrapper {
  background-color: #FB6350;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.not-ordered wrapper .ico, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.not-finished wrapper .ico, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.notOnStock wrapper .ico, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.not-payed wrapper .ico {
  background-color: #9e3026;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.not-ordered display, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.not-finished display, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.notOnStock display, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.not-payed display {
  color: #FB6350;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.partiallyOnStock wrapper, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.partially-payed wrapper, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.partiallyOut wrapper {
  background-color: #F2B164;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.partiallyOnStock wrapper .ico, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.partially-payed wrapper .ico, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.partiallyOut wrapper .ico {
  background-color: #C75510;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.partiallyOnStock display, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.partially-payed display, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.partiallyOut display {
  color: #F29058;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.partiallyOut, #order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.allOut {
  background-color: #C9EDE7;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.allOut wrapper {
  background-color: #FF719D;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option.unavailable {
  opacity: 0.3;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option i {
  width: 20rem;
  height: 20rem;
  background-color: white;
}
#order-prod-serv-box wrapper .prod-serv-el content-wrap status-content status-option:not(:last-child) {
  border-bottom: 1rem solid #C7C7C8;
}
#order-prod-serv-box .summary {
  flex-wrap: nowrap;
  background-color: #EAEAEA;
  padding: 20rem 40rem;
  border-radius: 10rem;
  border: 1rem solid #C7C7C8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
}
#order-prod-serv-box .summary .sum {
  padding-left: 30rem;
  border-left: 1rem solid #C7C7C8;
}

#order-attachments .process-empty-data button {
  position: relative;
}
#order-attachments .process-empty-data button form {
  width: 140rem;
}
#order-attachments .process-empty-data button span {
  position: absolute;
  left: 20rem;
}
#order-attachments .process-empty-data button txt {
  position: absolute;
  right: 30rem;
  font-size: 16rem;
}
#order-attachments attachment-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15rem;
  margin-top: 20rem;
}
#order-attachments attachment-wrapper order-attachment {
  border: 1rem solid #C7C7C8;
  border-radius: 10rem;
  background: #f7f7f7;
}
#order-attachments attachment-wrapper order-attachment header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rem 0 30rem;
  border-bottom: 1rem solid #C7C7C8;
  height: 45rem;
}
#order-attachments attachment-wrapper order-attachment header-section div {
  border-left: 1rem solid #C7C7C8;
  padding-left: 10rem;
}
#order-attachments attachment-wrapper order-attachment header-section info-box {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 16rem;
}
#order-attachments attachment-wrapper order-attachment header-section whocreated {
  display: flex;
  gap: 10rem;
  align-items: center;
}
#order-attachments attachment-wrapper order-attachment header-section whocreated img {
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  border: 1rem solid #C7C7C8;
}
#order-attachments attachment-wrapper order-attachment header-section whocreated div {
  font-size: 14rem;
}
#order-attachments attachment-wrapper order-attachment header-section actions {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45rem;
  padding-left: 18rem;
  border-left: 1rem solid #C7C7C8;
}
#order-attachments attachment-wrapper order-attachment header-section actions .ico-trash {
  cursor: pointer;
  background-color: #696969;
  width: 16rem;
  height: 16rem;
}
#order-attachments attachment-wrapper order-attachment content-section {
  display: flex;
  gap: 42rem;
  padding: 20rem 30rem 30rem 30rem;
}
#order-attachments attachment-wrapper order-attachment content-section icon-section {
  cursor: pointer;
}
#order-attachments attachment-wrapper order-attachment content-section icon-section img {
  max-width: 46rem;
}
#order-attachments attachment-wrapper order-attachment content-section data-section {
  width: 100%;
}
#order-attachments attachment-wrapper order-attachment content-section data-section title-section {
  display: block;
  margin-bottom: 20rem;
}
#order-attachments attachment-wrapper order-attachment content-section data-section title-section display {
  font-size: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  cursor: pointer;
  max-width: 640rem;
  color: #0090DF;
}
#order-attachments pagination {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 10rem;
  padding: 10rem 0;
}
#order-attachments pagination page {
  border: 1rem solid #C7C7C8;
  padding: 10rem;
  display: block;
  min-width: 40rem;
  text-align: center;
  border-radius: 10rem;
  cursor: pointer;
}
#order-attachments pagination page.active {
  background: #0090DF;
  color: white;
}

#salechance-process #order-attachments icon-section img {
  height: 60rem;
}

#order-notes notes-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20rem;
}
#order-notes email-parse {
  text-align: center;
  display: block;
  margin: 10rem 0;
}
#order-notes email-parse txt {
  background: #126585;
  color: white;
  padding: 5rem 15rem;
  border-radius: 5rem;
}
#order-notes email-parse txt a {
  text-decoration: underline;
  cursor: pointer;
  color: white;
}
#order-notes email-parse parse-options {
  margin-top: 15rem;
  display: flex;
  gap: 20rem;
  justify-content: center;
}

note-element {
  width: 100%;
  border-radius: 10rem;
  background: #f7f7f7;
  border: 1rem solid #C7C7C8;
}
note-element top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1rem solid #C7C7C8;
  height: 45rem;
  padding-left: 21rem;
  color: white;
}
note-element top .ico {
  background-color: white;
}
note-element top.no-type {
  color: #F6F4F3;
  padding-left: 0;
}
note-element top.no-type .ico {
  background-color: #696969;
}
note-element top.no-type whocreated {
  border: none;
}
note-element top note-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
note-element top note-head.event-hd {
  color: black;
}
note-element top note-head.event-hd .ico {
  background: #696969;
}
note-element top note-head note-type {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16rem;
}
note-element top note-head note-type .ico {
  width: 15rem;
  height: 15rem;
}
note-element top note-head status {
  display: flex;
  height: 45rem;
  align-items: center;
  border-left: 1rem solid #C7C7C8;
  padding: 0 20rem;
  gap: 6rem;
}
note-element top note-head status display {
  font-weight: 600;
}
note-element top note-head status .ico {
  display: none;
}
note-element top note-head whocreated {
  height: 45rem;
  padding: 0 20rem;
  display: flex;
  gap: 10rem;
  align-items: center;
  border-left: 1rem solid #C7C7C8;
  gap: 10rem;
}
note-element top note-head whocreated img {
  width: 25rem;
  height: 25rem;
  border: 1rem solid #C7C7C8;
}
note-element top note-head whocreated div {
  font-size: 14rem;
  font-weight: 500;
}
note-element top actions {
  display: flex;
}
note-element top actions div {
  border-left: 1rem solid #C7C7C8;
  height: 45rem;
  width: 50rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
note-element top actions div .ico {
  cursor: pointer;
  width: 16rem;
  height: 16rem;
}
note-element note-content {
  padding: 0 21rem;
  display: block;
}
note-element note-content p {
  font-size: 14rem;
  line-height: 120%;
  color: #383641;
}
note-element note-content note-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 20rem;
  margin: 20rem 0;
}
note-element note-content note-attachments note-att {
  cursor: pointer;
  display: flex;
  gap: 15rem;
  align-items: center;
}
note-element note-content note-attachments note-att img {
  width: 15rem;
}
note-element note-content note-attachments note-att .ico-cancel {
  background-color: #FB6350;
  cursor: pointer;
}

#order-stats stats-card {
  border: 1rem solid #696969;
  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: #696969;
  font-weight: 400;
}

#order-process {
  min-width: 95vw;
}
#order-process .order-card {
  margin-bottom: 10px;
  width: 100%;
  border-radius: 16rem;
  border: 1rem solid #696969;
}
#order-process .order-card .order-head-navi {
  border-radius: 16rem 16rem 0 0;
  display: flex;
  align-items: center;
  width: 100%;
  background: #126585;
  color: white;
  justify-content: space-between;
  padding: 15rem 20rem;
  font-size: 16rem;
  font-weight: 600;
}
#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 20rem;
}
#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 #C7C7C8;
  color: #383641;
}
#warehouseop-process documents .doc a:hover, #warehouseop-process documents .att a:hover {
  background: #126585;
  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;
}

#userdata-process {
  width: 840rem;
  padding: 0 20rem;
}
#userdata-process .user-avatar {
  width: 100rem;
  height: 100rem;
  border-radius: 50%;
  background-size: contain;
}
#userdata-process .user-avatar input {
  max-height: 100rem !important;
  height: 100rem !important;
}

#product-process {
  width: 844rem;
  padding: 0 20rem;
}
#product-process .table-row {
  margin-top: 30rem;
  overflow: auto;
  max-height: 200rem;
}
#product-process datarow.ordered {
  color: #126585;
}
#product-process datarow.ordered span {
  background: #126585;
}
#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 #C7C7C8;
  color: #383641;
}
#product-process documents .doc a, #product-process documents .att a {
  font-size: 16rem;
  color: #0090DF;
  text-decoration: underline;
}
#product-process documents .doc a .ico, #product-process documents .att a .ico {
  width: 18rem;
  height: 18rem;
  background: #0090DF;
}
#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: #FF719D;
}
#product-process current-status status-ico.allOut {
  background: #9000FF;
}
#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: #FF719D;
}
#product-process current-status txt.allOut {
  color: #9000FF;
}
#product-process sep {
  margin-left: 40rem;
  display: block;
  border-left: 4rem dotted #383641;
  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: #383641;
  margin-left: 5rem;
}
#product-process history-box info-box txt {
  display: block;
  line-height: 24rem;
  font-weight: 600;
  color: #383641;
}

#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 #C7C7C8;
  color: #383641;
}
#windowstand-process documents .doc a, #windowstand-process documents .att a {
  font-size: 16rem;
  color: #0090DF;
  text-decoration: underline;
}
#windowstand-process documents .doc a .ico, #windowstand-process documents .att a .ico {
  width: 18rem;
  height: 18rem;
  background: #0090DF;
}
#windowstand-process documents .doc icon, #windowstand-process documents .att icon {
  border-radius: 5rem;
  padding: 5rem 10rem;
  display: flex;
  color: white;
  width: 65rem;
}
#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: #FF719D;
}
#windowstand-process current-status status-ico.allOut {
  background: #9000FF;
}
#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: #FF719D;
}
#windowstand-process current-status txt.allOut {
  color: #9000FF;
}
#windowstand-process sep {
  margin-left: 40rem;
  display: block;
  border-left: 4rem dotted #383641;
  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: #383641;
  margin-left: 5rem;
}
#windowstand-process history-box info-box txt {
  display: block;
  line-height: 24rem;
  font-weight: 600;
  color: #383641;
}

#damage-box hide-dmg-row {
  cursor: pointer;
  border-bottom: 1rem solid #383641;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#damage-box hide-dmg-row mark {
  border: 1rem solid #383641;
  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: #383641;
}
#damage-box hide-dmg-row txt.repaired {
  text-decoration: line-through;
  color: #39BEA7;
}
#damage-box damage {
  padding: 0 40rem;
  border-radius: 10rem;
  background: #EAEAEA;
}
#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: #383641;
  font-size: 18rem;
}

tr-action-box {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 28rem;
  height: 116rem;
  border-bottom: 1rem solid #C7C7C8;
}
tr-action-box icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46rem;
  height: 46rem;
  background: #126585;
  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: #126585;
  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: #126585;
  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 #C7C7C8;
}
#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: #696969;
  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 #C7C7C8;
}
#salechance-process survey survey-info desc {
  color: #383641;
  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 #C7C7C8;
  gap: 10rem;
}
#salechance-process survey survey-info whocreated img {
  width: 25rem;
  height: 25rem;
  border: 1rem solid #C7C7C8;
}
#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 #C7C7C8;
  height: 45rem;
  width: 50rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#salechance-process survey survey-info actions div .ico {
  cursor: pointer;
  background-color: #696969;
  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: #383641;
}
#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 #C7C7C8;
  background: #FAFAFA;
}
#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 #C7C7C8;
  background: #FAFAFA;
}
#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: #383641;
  font-weight: 600;
  line-height: 140%;
}
#salechance-process #salechance-stats statbox value {
  display: block;
  font-size: 24rem;
  color: #383641;
  line-height: 140%;
}
#salechance-process #salechance-stats statbox txt-hd {
  font-size: 20rem;
  color: #383641;
  display: block;
  padding-bottom: 15rem;
  padding-top: 10rem;
}
#salechance-process #salechance-stats statbox txt-lw {
  font-size: 14rem;
  color: #383641;
  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 #C7C7C8;
}
#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 #EAEAEA;
}
row.bord-t {
  border-top: 1rem solid #EAEAEA;
}
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: #126585;
  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: #126585 !important;
}

label {
  font-size: 16rem;
  font-weight: 500;
  line-height: 27rem;
}

label-req {
  font-size: 16rem;
  font-weight: 500;
  line-height: 27rem;
}
label-req::before {
  content: "*";
  color: #FB6350;
}

display {
  font-size: 16rem;
  color: black;
  font-weight: 400;
  line-height: 20rem;
}
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: #0090DF;
  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 #4B8AA2;
  border-left: 1rem solid #4B8AA2;
}
#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;
}
.process-empty-data img {
  width: 200rem;
}
.process-empty-data txt {
  font-weight: 500;
  margin: 10rem 0;
  font-size: 20rem;
}

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

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

#organization-creator {
  width: 820rem;
}

#property-creator {
  width: 820rem;
}

#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 #C7C7C8;
  padding: 20rem;
  margin: 20rem 0;
  background: #FAFAFA;
}
#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: #696969;
}
#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;
}

.icons-select {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto;
  justify-content: space-between;
  width: 100%;
  grid-gap: 20rem;
}
.icons-select icon-option {
  cursor: pointer;
  padding: 10rem;
  display: flex;
  align-items: center;
}
.icons-select icon-option.chosen {
  background: #126585;
  border-radius: 10rem;
  color: white;
}
.icons-select icon-option .ico {
  width: 40rem;
  height: 40rem;
}

note-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 25rem;
  margin-top: 20rem;
}
note-attachments note-att {
  display: flex;
  gap: 10rem;
  align-items: center;
}
note-attachments note-att img {
  width: 15rem;
}
note-attachments note-att .ico-cancel {
  background-color: #FB6350;
  cursor: pointer;
}
note-attachments note-att .ico-edit {
  background-color: #0090DF;
  cursor: pointer;
}

#action-bar {
  background: #696969;
  color: white;
  height: 50rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5rem 30rem;
}
#action-bar .actions-section {
  display: flex;
  gap: 15rem;
}
#action-bar .actions-section .action {
  cursor: pointer;
  display: flex;
  gap: 10rem;
  align-items: center;
}
#action-bar .actions-section .action:hover .ico {
  background-color: #F2B164;
}
#action-bar .actions-section .action:not(:last-child)::after {
  margin-left: 5rem;
  content: "|";
  font-size: 20rem;
  color: #EAEAEA;
}
#action-bar .actions-section .action .ico {
  height: 16rem;
  width: 16rem;
  background-color: white;
}
#action-bar .actions-section .action txt {
  color: #F6F4F3;
  transition: all 0.5s;
  font-size: 14rem;
}
#action-bar .options-section {
  display: flex;
  gap: 20rem;
}
#action-bar .options-section .data-range {
  display: flex;
  align-items: center;
  gap: 10rem;
}
#action-bar .options-section .data-range::after {
  margin-left: 10rem;
  content: "|";
  font-size: 20rem;
  color: #EAEAEA;
}
#action-bar .options-section .data-range .range {
  cursor: pointer;
  font-size: 14rem;
  line-height: 18rem;
  height: 40rem;
  padding: 10rem 20rem;
  background: #4f4f4f;
  border-radius: 10rem;
  position: relative;
  text-align: center;
}
#action-bar .options-section .data-range .range.active {
  padding-left: 40rem;
  color: #FB6350;
}
#action-bar .options-section .data-range .range.active::before {
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-image: url("/img/ico/eye.png");
  content: "";
  position: absolute;
  left: 8rem;
  top: 14rem;
  width: 20rem;
  height: 10rem;
  background-color: #FB6350;
}
#action-bar .options-section .data-range .range.not-active {
  padding-left: 40rem;
  color: white;
}
#action-bar .options-section .data-range .range.not-active::before {
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-image: url("/img/ico/eye-slashed.png");
  content: "";
  position: absolute;
  left: 8rem;
  top: 12rem;
  width: 20rem;
  height: 15rem;
  background-color: white;
}
#action-bar .options-section .data-view {
  display: flex;
  gap: 10rem;
  align-items: center;
}
#action-bar .options-section .data-view::after {
  margin-left: 10rem;
  content: "|";
  font-size: 20rem;
  color: #EAEAEA;
}
#action-bar .options-section .data-view .view {
  cursor: pointer;
  height: 40rem;
  width: 40rem;
  padding: 10rem;
  background: #4f4f4f;
  border-radius: 10rem;
  position: relative;
}
#action-bar .options-section .data-view .view .ico {
  background-color: white;
  width: 20rem;
  height: 20rem;
}
#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;
}
#action-bar .options-section .search {
  display: flex;
  align-items: center;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes main_loader {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes auth_loading {
  0% {
    background-color: #139093;
  }
  50% {
    background-color: #39BEA7;
  }
  100% {
    background-color: #139093;
  }
}
@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;
}

#kanban {
  display: flex;
  padding: 20rem 30rem;
  gap: 10rem;
  width: fit-content;
}
#kanban .column {
  min-width: 350rem;
}
#kanban .column.freezer {
  margin-left: 30rem;
}
#kanban .column.freezer .stat-item {
  color: black !important;
}
#kanban .column.freezer .stat-item .ico {
  background-color: black !important;
}
#kanban .column.freezer .title {
  color: black;
}
#kanban .column.freezer .content {
  background-color: #D9D9D9;
}
#kanban .column.freezer .kanban-card {
  width: 388rem;
  min-width: 388rem;
  padding: 0 18rem;
}
#kanban .column.freezer .kanban-card .basic-kanban-card {
  background-color: white;
}
#kanban .column .title {
  font-size: 16rem;
  line-height: 30rem;
  min-height: 30rem;
  color: white;
  padding-left: 20rem;
  border-radius: 0 10rem 0 0;
}
#kanban .column .stats {
  display: flex;
  gap: 5rem;
}
#kanban .column .stats .stat-item {
  padding: 5rem 15rem;
  color: white;
  border-radius: 8rem 8rem 0 0;
}
#kanban .column .stats .stat-item span {
  margin-right: 5rem;
}
#kanban .column .stats .stat-item .ico {
  background-color: white;
}
#kanban .column .content {
  min-height: calc(100vh - 220rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8rem;
}
#kanban .column .content.drag-over {
  background: #F2F2F2;
}
#kanban .column .content .kanban-card {
  max-width: 350rem;
  cursor: all-scroll;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.kanban-navi {
  pointer-events: none;
  position: fixed;
  right: 0;
  bottom: 20rem;
  width: calc(100vw - 240rem);
  display: flex;
  justify-content: space-between;
}
.kanban-navi .scroll-btn {
  pointer-events: all;
  color: white;
  background-color: #124457;
  cursor: pointer;
  opacity: 0.5;
  transition: all 1s;
  padding: 20rem 0;
}
.kanban-navi .scroll-btn:hover {
  opacity: 0.9;
}
.kanban-navi .scroll-btn.left {
  border-radius: 0 30rem 30rem 0;
  padding-right: 15rem;
}
.kanban-navi .scroll-btn.right {
  border-radius: 30rem 0 0 30rem;
  padding-left: 15rem;
}
.kanban-navi .scroll-btn .ico {
  height: 40rem;
  width: 40rem;
  background-color: white;
}
.kanban-navi .undo {
  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;
  background-color: white;
  cursor: pointer;
  padding: 5rem 20rem;
  animation: 1s forwards toast_show;
  min-height: 100rem;
}
.kanban-navi .undo:hover {
  background-color: #124457;
  color: white;
}
.kanban-navi .undo:hover content {
  color: white;
}
.kanban-navi .undo:hover .ico {
  transform: rotate(360deg);
  background-color: white;
}
.kanban-navi .undo timer {
  width: 100%;
  height: 5rem;
  position: absolute;
  top: -1rem;
  left: 0;
  background: #F6F4F3;
}
.kanban-navi .undo timer fill {
  animation: forwards toast_timer;
  animation-duration: 10s;
  width: 100%;
  height: 100%;
  display: block;
  background: #0090DF;
}
.kanban-navi .undo img {
  width: 40rem;
  height: 40rem;
}
.kanban-navi .undo data {
  display: flex;
  flex-direction: column;
  gap: 10rem;
}
.kanban-navi .undo data data-title {
  font-size: 16rem;
  font-weight: 400;
}
.kanban-navi .undo data content {
  font-size: 16rem;
  font-weight: 600;
  color: #383641;
}

#table table {
  border-collapse: collapse;
  border-right: 3px solid #124457;
  min-width: 100%;
}
#table table th {
  font-weight: 400;
  background: #124e66;
  color: white;
  padding: 0 30rem;
  text-align: center;
  border-right: 1rem solid #4B8AA2;
  border-left: 1rem solid #4B8AA2;
}
#table table th txt {
  overflow: hidden;
  line-height: 16rem;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* number of lines to show */
}
#table table tr {
  border-bottom: 1rem solid rgba(0, 0, 0, 0.3);
  text-align: center;
  height: 56rem;
  color: black;
  background-color: white;
  min-width: fit-content;
}
#table table tr:nth-child(2n) {
  background-color: #f3f2f7;
}
#table table tr td {
  border: 0px solid white !important;
  padding: 10rem 30rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#table main {
  color: #0090DF;
  font-weight: bold;
}
#table plaque {
  min-width: 200rem;
  color: white;
  padding: 5rem 10rem;
  border-radius: 5rem;
  white-space: nowrap;
  display: block;
}
#table plaque.short {
  min-width: fit-content;
}
#table plaque.short .ico {
  margin-right: 10rem;
  background-color: white;
}
#table .avatar {
  border-radius: 50%;
  width: 36rem;
  height: 36rem;
}
#table good {
  color: #39BEA7;
  font-weight: 700;
}
#table bad {
  color: #FB6350;
  font-weight: 700;
}
#table nodata::before {
  content: "BRAK";
  color: #FB6350;
  font-weight: 700;
}
#table true, #table false {
  display: block;
  width: 20rem;
  height: 20rem;
  background-size: cover;
  text-align: center;
  margin: 0 auto;
}
#table true {
  background-image: url("/img/utils/on.png");
}
#table false {
  background-image: url("/img/utils/off.png");
}
#table medal {
  border-radius: 50%;
  width: 36rem;
  height: 36rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#table medal i {
  width: 20rem;
  height: 20rem;
  background-color: white;
}

.table-navi {
  pointer-events: none;
  position: fixed;
  right: 0;
  bottom: 20rem;
  width: calc(100vw - 240rem);
  display: flex;
  justify-content: space-between;
}
.table-navi .scroll-btn {
  pointer-events: all;
  color: white;
  background-color: #124457;
  cursor: pointer;
  opacity: 0.5;
  transition: all 1s;
  padding: 20rem 0;
}
.table-navi .scroll-btn:hover {
  opacity: 0.9;
}
.table-navi .scroll-btn.left {
  border-radius: 0 30rem 30rem 0;
  padding-right: 15rem;
}
.table-navi .scroll-btn.right {
  border-radius: 30rem 0 0 30rem;
  padding-left: 15rem;
}
.table-navi .scroll-btn .ico {
  height: 40rem;
  width: 40rem;
  background-color: white;
}

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: 20rem;
}
#list .list-header {
  margin: 15rem 0 10rem 0;
  display: flex;
  gap: 20rem;
}
#list .list-header txt {
  font-size: 22rem;
  color: #383641;
  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;
}

#box-calendar {
  padding: 20rem;
}
#box-calendar table, #box-calendar td, #box-calendar th {
  border-color: #C7C7C8;
}
#box-calendar th {
  background: #383641 !important;
}
#box-calendar th .fc-col-header {
  height: 31rem;
}
#box-calendar th .fc-col-header a {
  padding: 12rem 0;
  font-size: 12rem;
  font-weight: 500;
  color: white;
  text-transform: capitalize;
}
#box-calendar .fc-daygrid-body {
  z-index: 0 !important;
}
#box-calendar usr img {
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
}
#box-calendar .fc-day-sun, #box-calendar .fc-day-sat {
  background: rgb(19, 144, 147);
}
#box-calendar .fc-day-sun:not(.fc-col-header-cell), #box-calendar .fc-day-sat:not(.fc-col-header-cell) {
  background: rgba(19, 144, 147, 0.2);
}
#box-calendar .notes-container {
  position: absolute;
  right: 20rem;
  display: flex;
  gap: 20rem;
}
#box-calendar .notes-container button {
  height: 41rem;
  border-radius: 5rem;
  background: #F2B164;
  color: #383641;
}
#box-calendar .notes-container button span, #box-calendar .notes-container button i {
  background: #383641;
}
#box-calendar yel-note {
  border-top: 5rem solid rgb(242, 177, 100);
  display: block;
  border-radius: 5rem;
  gap: 7rem;
  background: rgba(242, 177, 100, 0.5);
  padding: 15rem;
  overflow: hidden;
}
#box-calendar yel-note yct {
  color: #383641;
  width: 100%;
  font-size: 16rem;
  line-height: 140%;
  white-space: pre-wrap;
}
#box-calendar yel-note span {
  width: 20rem;
  height: 20rem;
  background: #383641;
}
#box-calendar .fc-daygrid-day-event {
  margin-bottom: 40rem;
}
#box-calendar .fc-toolbar-chunk div {
  display: flex;
  align-items: center;
  gap: 5rem;
}
#box-calendar .fc-toolbar-chunk h2 {
  width: 258rem;
  text-transform: capitalize;
  background-color: #383641;
  color: white;
  height: 41rem;
  line-height: 41rem;
  font-size: 16rem !important;
  font-weight: 400;
  text-align: center;
}
#box-calendar .fc-toolbar-chunk button {
  height: 41rem;
  padding: 0 30rem;
  background-color: #383641;
  border: none;
}
#box-calendar .fc-toolbar-chunk button.fc-prev-button, #box-calendar .fc-toolbar-chunk button.fc-next-button {
  width: 41rem;
  padding: 0.4em 0.65em !important;
}
#box-calendar .fc-day {
  background-color: rgb(246, 246, 246);
  color: #383641;
}
#box-calendar .fc-day.fc-day-other:not(.fc-day-sun, .fc-day-sat) {
  color: white;
  background: rgb(234, 234, 234) !important;
  color: rgba(56, 54, 65, 0.5);
}
#box-calendar .fc-daygrid-day-top {
  opacity: 1;
  padding: 5rem;
}
#box-calendar .fc-h-event, #box-calendar .fc-event {
  background: white;
  border: none;
}
#box-calendar .fc-day-today {
  background-color: rgba(251, 99, 80, 0.3) !important;
}
#box-calendar .fc-day-today .fc-daygrid-day-number {
  color: white;
  background: #383641;
  border-radius: 5rem;
}
#box-calendar .fc-daygrid-dot-event {
  padding: 0 !important;
}
#box-calendar .fc-daygrid-event-harness {
  /*        margin-bottom: 4rem;
  border-radius: 10rem;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3294117647);*/
}
#box-calendar .fc-daygrid-event-harness a {
  display: block !important;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  margin: 5rem 10rem;
  /*hdt {
      display: block;
      font-size: 14rem;
      color: $dark-brown;
      font-weight: 500;
  }

  list-style-type {
      display: block;
  }

  users {
      display: flex;
      gap: 4rem;
  }*/
}
#box-calendar .fc-daygrid-event-harness a cbd {
  display: flex;
  display: flex;
  border-radius: 5rem;
  height: 48rem;
  gap: 7rem;
}
#box-calendar .fc-daygrid-event-harness a cbd.assmbly {
  height: 80rem;
}
#box-calendar .fc-daygrid-event-harness a cbd.priority {
  background: rgba(251, 99, 80, 0.15);
}
#box-calendar .fc-daygrid-event-harness a cbd.priority ctt {
  color: #0090DF;
}
#box-calendar .fc-daygrid-event-harness a cbd cimg {
  width: 21rem;
  border-radius: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#box-calendar .fc-daygrid-event-harness a cbd cimg .ico {
  background-color: white;
  width: 11rem;
  height: 11rem;
}
#box-calendar .fc-daygrid-event-harness a cbd cdata {
  display: grid;
  padding: 3rem;
}
#box-calendar .fc-daygrid-event-harness a cbd cdata ctt {
  color: #126585;
  font-weight: 500;
  font-size: 12rem;
}
#box-calendar .fc-daygrid-event-harness a cbd cdata ctn {
  font-size: 10rem;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt {
  display: flex;
  flex-direction: column;
  width: fit-content;
  width: 100%;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt.danger {
  border: 2rem solid #FB6350;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt bar {
  width: 100%;
  background-color: #0090DF;
  display: block;
  height: 5rem;
  border-radius: 5rem 5rem 0 0;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt cnt {
  padding: 12rem;
  display: block;
  color: #383641;
  width: 100%;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt cnt .ico-id {
  background: #0090DF;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt cnt hdr {
  display: flex;
  justify-content: space-between;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt cnt hdr name {
  display: block;
  font-size: 20rem;
  color: #0090DF;
  font-weight: 500;
  line-height: 120%;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt cnt .cal-cont {
  position: relative;
  display: block;
  width: 26rem;
  height: 26rem;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt cnt .cal-cont dt {
  position: absolute;
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #39BEA7;
  font-weight: 700;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt cnt .cal-cont img {
  width: 26rem;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt cnt .crane-cont {
  display: block;
  background: #C7C7C8;
  width: 26rem;
  height: 26rem;
  border-radius: 5rem;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt cnt pl-row {
  display: flex;
  align-items: center;
  height: 20rem;
  gap: 40rem;
  margin-top: 4rem;
  overflow: hidden;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt cnt pl-row el {
  display: flex;
  align-items: center;
  gap: 7rem;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt cnt pl-row el.plaque {
  border-radius: 5rem;
  height: 20rem;
  padding: 5rem 10rem;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt cnt pl-row el.plaque p {
  color: white;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt cnt pl-row el .ico {
  width: 16rem;
  height: 16rem;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt cnt pl-row el:has(.ico-id) p {
  color: #0090DF;
}
#box-calendar .fc-daygrid-event-harness a pl-cnt cnt icons {
  display: flex;
  gap: 10rem;
}

.basic-kanban-card {
  border-radius: 10rem;
  border: 1rem solid #C7C7C8;
  min-height: 100rem;
  padding: 15rem;
}
.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: #383641;
}
.basic-kanban-card.order-kc wrapper info info-option .ico {
  background: #383641;
}
.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: #0090DF;
}
.basic-kanban-card.order-kc wrapper info info-option.id i {
  background-color: #0090DF;
}
.basic-kanban-card.order-kc wrapper info info-option i {
  width: 16rem;
  height: 16rem;
  background-color: #696969;
}
.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 #696969;
  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: #FF719D;
  border-color: #FF719D;
}
.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: #9000FF;
  border-color: #9000FF;
}
.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: #696969;
  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: #EAEAEA;
  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 #C7C7C8;
  border-bottom: 1rem solid #C7C7C8;
}
.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 #383641;
}
.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 #C7C7C8;
}
.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: #383641;
  font-weight: 600;
}
.basic-kanban-card damage dmg-section .ico {
  background-color: #696969;
  width: 13rem;
  height: 13rem;
}
.basic-kanban-card damage dmg-section:not(:last-child) {
  margin-bottom: 8rem;
}
.basic-kanban-card priority {
  padding: 5rem 10rem;
  background: #383641;
  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 #C7C7C8;
}
.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 #696969;
  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: #F6F4F3;
}
.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 #126585;
  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: #383641;
}
.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: #126585;
}
.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: #139093;
  }
  50% {
    background-color: #39BEA7;
  }
  100% {
    background-color: #139093;
  }
}
@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;
}

#data-loader {
  z-index: 10;
  width: 100vw;
  height: 100vh;
  position: relative;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.2);
}
#data-loader bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 40rem;
  width: 100vw;
  background-color: #124457;
  border-top: 1rem solid #0090DF;
}
#data-loader bar anim {
  position: absolute;
  background-size: cover;
  left: 0;
  bottom: 0;
  height: 40rem;
  width: 100vw;
  background-image: url("/anim/wave.gif");
  justify-content: center;
  display: flex;
  align-items: center;
}
#data-loader bar txt {
  color: white;
  font-size: 20rem;
}
#data-loader bar txt::after {
  content: "";
  color: white;
  font-size: 20rem;
  animation: 1s forwards infinite loader_dots;
}

#dialog-viewer {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
}
#dialog-viewer dialog-card {
  padding: 30rem;
  padding-bottom: 20rem;
  max-width: 500rem;
  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;
}
#dialog-viewer dialog-card.danger {
  border: 3rem solid #FB6350;
}
#dialog-viewer dialog-card.danger .accept {
  background-color: #FB6350;
}
#dialog-viewer dialog-card.danger dialog-title {
  color: #FB6350;
}
#dialog-viewer dialog-card.info {
  border: 3rem solid #126585;
}
#dialog-viewer dialog-card.info dialog-title {
  color: #126585;
}
#dialog-viewer dialog-card.success {
  border: 3rem solid #39BEA7;
}
#dialog-viewer dialog-card.success dialog-title {
  color: #39BEA7;
}
#dialog-viewer dialog-card.warning {
  border: 3rem solid #F29058;
}
#dialog-viewer dialog-card.warning dialog-title {
  color: #F29058;
}
#dialog-viewer dialog-card top {
  display: flex;
  gap: 15rem;
  align-items: center;
}
#dialog-viewer dialog-card top dialog-title {
  font-size: 22rem;
  line-height: 40rem;
}
#dialog-viewer dialog-card top img {
  width: 24rem;
  height: 24rem;
}
#dialog-viewer dialog-card dialog-message {
  padding: 20rem 0;
  display: block;
  font-size: 16rem;
  line-height: 20rem;
}
#dialog-viewer dialog-card dialog-buttons {
  margin-top: 20rem;
  display: flex;
  justify-content: end;
  gap: 15rem;
}

#file-viewer {
  position: fixed;
  top: 2.5vh;
  left: 2.5vw;
  z-index: 9;
}
#file-viewer card {
  background: white;
  height: 95vh;
  width: 95vw;
  display: block;
  border-radius: 20rem;
  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;
}
#file-viewer card navi {
  display: flex;
  justify-content: end;
  align-items: center;
  background: #39BEA7;
  border-radius: 20rem 20rem 0 0;
  padding: 0 30rem;
  height: 45rem;
}
#file-viewer card navi section {
  display: flex;
  align-items: center;
  gap: 20rem;
}
#file-viewer card navi section sep {
  color: white;
  font-weight: 900;
  font-size: 20rem;
}
#file-viewer card navi section .ico {
  background-color: white;
  width: 18rem;
  height: 18rem;
  cursor: pointer;
}
#file-viewer card navi section .ico.not-active {
  background-color: #696969;
  cursor: inherit;
}
#file-viewer card file-viewer-title {
  padding: 20rem 30rem;
  display: block;
  color: #383641;
  font-size: 20rem;
}
#file-viewer card nofiledata {
  padding: 30rem;
  height: calc(50% - 60rem);
  background: #F6F4F3;
  display: block;
}
#file-viewer card iframe {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100% - 90rem);
  padding: 0 30rem 30rem 30rem;
  border: none;
}

#empty-data-container {
  background: #FAFAFA;
  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: #0090DF;
  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 #126585;
}

#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: #383641;
  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 #126585;
}
#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-container {
  background: #EAEAEA;
  width: calc(100vw - 240rem);
  transition: all 0.2s;
  height: 0;
  z-index: 1;
  display: flex;
  gap: 5rem;
  align-items: center;
  overflow: hidden;
}
#applied-filters-container.opened {
  padding: 20rem;
}
#applied-filters-container found {
  min-width: fit-content;
}
#applied-filters-container option {
  background: white;
  cursor: pointer;
  padding: 5rem 10rem;
  border-radius: 5rem;
}

#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: #696969;
  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: #126585;
  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: #126585;
}
#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 #126585;
  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: #126585;
  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: #FAFAFA;
  color: #C7C7C8;
  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 #126585;
  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: #126585 !important;
}
#creator-viewer card creator-title span.ico {
  background-color: #126585;
  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: #139093;
  }
  50% {
    background-color: #39BEA7;
  }
  100% {
    background-color: #139093;
  }
}
@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 {
  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.danger fill {
  background: #FB6350;
}
#toast-viewer toast.info fill {
  background: #126585;
}
#toast-viewer toast timer {
  width: 100%;
  height: 5rem;
  position: absolute;
  top: 0rem;
  left: 0;
  background: #F6F4F3;
}
#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: #383641;
  font-weight: 500;
}
.search-input {
  position: relative;
}
.search-input .ico {
  position: absolute;
  cursor: pointer;
  background-color: #FB6350;
  width: 30rem;
  height: 20rem;
  right: 6rem;
  top: 16rem;
}
.search-input::before {
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-image: url("/img/ico/lupe.png");
  content: "";
  position: absolute;
  left: 20rem;
  top: 14rem;
  width: 21rem;
  height: 21rem;
  background-color: #696969;
}
.search-input input {
  padding: 0 40rem 0 50rem;
}
.search-input.multisearch-input input {
  height: 40rem;
  background-color: #4f4f4f !important;
  color: white;
  border: none;
  font-size: 18rem;
  border-radius: 20rem;
  padding-left: 60rem;
  padding-right: 30rem;
}
.search-input.multisearch-input::before {
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-image: url("/img/ico/lupe.png");
  content: "";
  position: absolute;
  left: 16rem;
  top: 9rem;
  width: 20rem;
  height: 20rem;
  background-color: white;
}
.search-input.multisearch-input .ico {
  top: 10rem;
}
.search-input.action-bar-search-input::before {
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-image: url("/img/ico/lupe.png");
  content: "";
  position: absolute;
  left: 16rem;
  top: 9rem;
  width: 20rem;
  height: 20rem;
  background-color: white;
}
.search-input.action-bar-search-input input {
  height: 40rem;
  background-color: #4f4f4f;
  color: white;
  border: none;
  font-size: 18rem;
  border-radius: 20rem;
  padding-left: 60rem;
  padding-right: 30rem;
}
.search-input.action-bar-search-input .ico {
  top: 10rem;
}
.search-input.warehouse-search {
  width: 100%;
  margin-top: 20rem;
}
.search-input.warehouse-search input {
  width: 100%;
}

tooltip {
  cursor: help;
}

input {
  color: #383641;
  max-height: 52rem;
  height: 52rem;
  font-size: 17rem;
  line-height: 17rem;
  padding: 16rem 20rem 15rem 20rem;
  border: 1rem solid #126585;
  border-radius: 10rem;
  font-family: "Inter", sans-serif;
  font-weight: 500;
}
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;
}

textarea {
  border: 1rem solid #126585;
  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 #126585;
  cursor: pointer;
  color: white;
  user-select: none;
  background: #4B8AA2;
}
.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.png");
  content: "";
  position: absolute;
  left: 14rem;
  top: 14rem;
  width: 16rem;
  height: 16rem;
  background-color: #4B8AA2;
}
.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: #126585;
  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: #126585;
  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: #126585;
  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: #126585;
  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;
}

.mc-display__date {
  font-size: 60rem !important;
}

.mc-display__year {
  font-size: 40rem !important;
}

.mc-display__month {
  font-size: 30rem !important;
}

.mc-display__header {
  height: 80rem !important;
}
.mc-display__header .mc-display__day {
  font-size: 26rem !important;
}

.mc-picker__header {
  min-height: 50rem !important;
}
.mc-picker__header .mc-select__data {
  width: 100% !important;
  min-width: 270rem !important;
  min-height: 100% !important;
}
.mc-picker__header .mc-select__data span {
  min-width: 50rem;
}
.mc-picker__header span {
  font-size: 20rem !important;
}

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

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

.custom-file-upload {
  position: relative;
  border: 1rem dashed #383641;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0090DF;
  width: 100%;
  font-size: 18rem;
  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: 140rem;
}
.ui-dropdown.multi {
  position: relative;
}
.ui-dropdown.multi counter {
  position: absolute;
  right: 55rem;
}
.ui-dropdown.multi .data-display elements {
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 100rem);
}
.ui-dropdown.multi .data-display elements span {
  white-space: nowrap;
  display: inline;
  vertical-align: middle;
}
.ui-dropdown.multi .data-display elements span img {
  display: inline;
  vertical-align: middle;
}
.ui-dropdown.multi .data-display elements span.ico {
  display: inline list-item;
  color: rgba(0, 0, 0, 0);
  width: 20rem;
  height: 20rem;
}
.ui-dropdown img {
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
}
.ui-dropdown .data-display {
  min-width: 140rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12rem;
  font-size: 16rem;
  max-height: 52rem;
  height: 52rem;
  font-size: 17rem;
  line-height: 20rem;
  padding: 16rem 20rem 15rem 20rem;
  border: 1rem solid #126585;
  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: #696969;
  font-weight: 400;
}
.ui-dropdown .data-display .ico {
  width: 29rem;
  height: 29rem;
}
.ui-dropdown .data-display .ico.ico-caret-down {
  background-color: #126585;
  width: 23rem;
  height: 13rem;
}
.ui-dropdown .data-display img {
  width: 29rem !important;
  height: 29rem !important;
  border: 1rem solid #696969;
}
.ui-dropdown .data-display:only-child {
  border-radius: 10rem;
}
.ui-dropdown button {
  padding: 0 17rem !important;
}
.ui-dropdown button .ico {
  width: 19rem !important;
  height: 19rem !important;
}
.ui-dropdown .create-button {
  background-color: #126585;
  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;
  z-index: 2;
}
.ui-dropdown .search-input input {
  width: 100%;
}
.ui-dropdown .options {
  padding-top: 26rem;
  z-index: 1;
  position: absolute;
  background: white;
  border: 1rem solid gray;
  font-size: 16rem;
  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: 17rem;
  line-height: 22rem;
  height: 33rem;
  align-items: center;
  padding: 6rem 20rem;
  margin-bottom: 5rem;
  color: #383641;
}
.ui-dropdown .options .option:hover {
  background: #F6F4F3;
  height: auto;
}
.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 img {
  width: 29rem !important;
  height: 29rem !important;
  border: 1rem solid #696969;
}
.ui-dropdown .options .option txt {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ui-dropdown .options .load-more {
  border-top: 1px solid #0090DF;
  color: #0090DF;
  font-weight: 600;
  padding: 10rem;
  cursor: pointer;
}
.ui-dropdown.color-picker .data-display {
  gap: 0;
}
.ui-dropdown.color-picker .data-display .ico-paint {
  width: 29rem;
  height: 29rem;
}
.ui-dropdown.color-picker .search-input {
  width: 100rem;
}
.ui-dropdown.color-picker .option {
  justify-content: center;
}
.ui-dropdown.color-picker .option .ico {
  width: 20rem;
  height: 20rem;
}

.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::after {
  position: absolute;
  right: -30rem;
  bottom: 20%;
  width: 16rem;
  height: 16rem;
  -webkit-mask-image: url("/img/ico/edit.png");
  mask-image: url("/img/ico/edit.png");
  content: "";
  display: inline-block;
  background-color: #0090DF;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.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), #EAEAEA 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 #C7C7C8;
}
.tab-control tab-navi tab-option {
  cursor: pointer;
  font-size: 16rem;
  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: #126585;
  font-weight: 600;
}
.tab-control tab-navi tab-option.active::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  bottom: -3rem;
  left: 0;
  height: 7rem;
  background: #126585;
}

.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 #383641;
}

.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: #0090DF;
  background: #FAFAFA;
  border-radius: 10rem;
  padding: 10rem 20rem;
  display: block;
  cursor: pointer;
}
keyword-wrapper keyword:hover {
  color: black;
  background: #0090DF;
  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;
}

#reports-page {
  padding: 33rem 41rem;
}
#reports-page report-header {
  display: block;
  border-bottom: 1rem solid #C7C7C8;
}
#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: #383641;
}
#reports-page report-header txt {
  font-size: 14rem;
  color: #383641;
  display: block;
  line-height: 26rem;
  margin: 13rem 0;
}
#reports-page .info-card {
  background: white;
  border: 1px solid #C7C7C8;
  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: #B28B67;
}
#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: #126585;
}
#reports-page .info-card .row-100.stable .ico {
  background: #126585;
}
#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: #383641;
}
#reports-page .info-card .label {
  font-size: 16rem;
  margin-bottom: 16rem;
}
#reports-page .info-card .value {
  font-size: 26rem;
  font-weight: bold;
  color: #383641;
}
#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 #C7C7C8;
}
#reports-page .section .title {
  height: 80rem;
  display: flex;
  align-items: center;
  gap: 14rem;
  font-size: 22rem;
  font-weight: 600;
  color: #383641;
}
#reports-page .section .title .ico {
  width: 22rem;
  height: 22rem;
  background-color: #383641;
}
#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 #4B8AA2;
  border-left: 1rem solid #4B8AA2;
}
#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: #383641;
}
#dashboard-page .usr-data h6 {
  font-size: 16rem;
  line-height: 0;
}
#dashboard-page d-hd {
  display: block;
  font-size: 26rem;
  color: #383641;
  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 #C7C7C8;
}
#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: #383641;
}
#dashboard-page report-header txt {
  font-size: 14rem;
  color: #383641;
  display: block;
  line-height: 26rem;
  margin: 13rem 0;
}
#dashboard-page .info-card {
  width: 100%;
  position: relative;
  background: white;
  border: 1px solid #C7C7C8;
  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: #383641;
  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: #B28B67;
}
#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: #126585;
}
#dashboard-page .info-card .row-100.stable .ico {
  background: #126585;
}
#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: #383641;
}
#dashboard-page .info-card .label {
  font-size: 16rem;
  margin-bottom: 16rem;
}
#dashboard-page .info-card .value {
  font-size: 26rem;
  font-weight: bold;
  color: #383641;
}
#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 #C7C7C8;
}
#dashboard-page .section .title {
  height: 80rem;
  display: flex;
  align-items: center;
  gap: 14rem;
  font-size: 22rem;
  font-weight: 600;
  color: #383641;
}
#dashboard-page .section .title .ico {
  width: 22rem;
  height: 22rem;
  background-color: #383641;
}
#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 #4B8AA2;
  border-left: 1rem solid #4B8AA2;
}
#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;
}