/*!
 * Cropper v2.3.4
 * https://github.com/fengyuanchen/cropper
 *
 * Copyright (c) 2014-2016 Fengyuan Chen and contributors
 * Released under the MIT license
 *
 * Date: 2016-09-03T05:50:45.412Z
 */
.cropper-container {
  font-size: 0;
  line-height: 0;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  direction: ltr !important;
}

.cropper-container img {
  display: block;
  width: 100%;
  min-width: 0 !important;
  max-width: none !important;
  height: 100%;
  min-height: 0 !important;
  max-height: none !important;
  image-orientation: 0deg !important;
}

.cropper-canvas,
.cropper-crop-box,
.cropper-drag-box,
.cropper-modal,
.cropper-wrap-box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.cropper-wrap-box {
  overflow: hidden;
}

.cropper-drag-box {
  opacity: 0;
  background-color: #fff;
  filter: alpha(opacity=0);
}

.cropper-dashed,
.cropper-modal {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.cropper-modal {
  background-color: #000;
}

.cropper-view-box {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  outline: #39f solid 1px;
  outline-color: rgba(51, 153, 255, 0.75);
}

.cropper-dashed {
  position: absolute;
  display: block;
  border: 0 dashed #eee;
}

.cropper-dashed.dashed-h {
  top: 33.33333%;
  left: 0;
  width: 100%;
  height: 33.33333%;
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.cropper-dashed.dashed-v {
  top: 0;
  left: 33.33333%;
  width: 33.33333%;
  height: 100%;
  border-right-width: 1px;
  border-left-width: 1px;
}

.cropper-center {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0;
  height: 0;
  opacity: 0.75;
  filter: alpha(opacity=75);
}

.cropper-center:after,
.cropper-center:before {
  position: absolute;
  display: block;
  content: " ";
  background-color: #eee;
}

.cropper-center:before {
  top: 0;
  left: -3px;
  width: 7px;
  height: 1px;
}

.cropper-center:after {
  top: -3px;
  left: 0;
  width: 1px;
  height: 7px;
}

.cropper-face,
.cropper-line,
.cropper-point {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  filter: alpha(opacity=10);
}

.cropper-face {
  top: 0;
  left: 0;
  background-color: #fff;
}

.cropper-line,
.cropper-point {
  background-color: #39f;
}

.cropper-line.line-e {
  top: 0;
  right: -3px;
  width: 5px;
  cursor: e-resize;
}

.cropper-line.line-n {
  top: -3px;
  left: 0;
  height: 5px;
  cursor: n-resize;
}

.cropper-line.line-w {
  top: 0;
  left: -3px;
  width: 5px;
  cursor: w-resize;
}

.cropper-line.line-s {
  bottom: -3px;
  left: 0;
  height: 5px;
  cursor: s-resize;
}

.cropper-point {
  width: 5px;
  height: 5px;
  opacity: 0.75;
  filter: alpha(opacity=75);
}

.cropper-point.point-e {
  top: 50%;
  right: -3px;
  margin-top: -3px;
  cursor: e-resize;
}

.cropper-point.point-n {
  top: -3px;
  left: 50%;
  margin-left: -3px;
  cursor: n-resize;
}

.cropper-point.point-w {
  top: 50%;
  left: -3px;
  margin-top: -3px;
  cursor: w-resize;
}

.cropper-point.point-s {
  bottom: -3px;
  left: 50%;
  margin-left: -3px;
  cursor: s-resize;
}

.cropper-point.point-ne {
  top: -3px;
  right: -3px;
  cursor: ne-resize;
}

.cropper-point.point-nw {
  top: -3px;
  left: -3px;
  cursor: nw-resize;
}

.cropper-point.point-sw {
  bottom: -3px;
  left: -3px;
  cursor: sw-resize;
}

.cropper-point.point-se {
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  cursor: se-resize;
  opacity: 1;
  filter: alpha(opacity=100);
}

.cropper-point.point-se:before {
  position: absolute;
  right: -50%;
  bottom: -50%;
  display: block;
  width: 200%;
  height: 200%;
  content: " ";
  opacity: 0;
  background-color: #39f;
  filter: alpha(opacity=0);
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    width: 15px;
    height: 15px;
  }
}

@media (min-width: 992px) {
  .cropper-point.point-se {
    width: 10px;
    height: 10px;
  }
}

@media (min-width: 1200px) {
  .cropper-point.point-se {
    width: 5px;
    height: 5px;
    opacity: 0.75;
    filter: alpha(opacity=75);
  }
}

.cropper-invisible {
  opacity: 0;
  filter: alpha(opacity=0);
}

.cropper-bg {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
}

.cropper-hide {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

@charset "UTF-8";
/*
|--------------------------------------------------------------------------
| Modules
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Aliases
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Partials
|--------------------------------------------------------------------------
*/
.printModal {
  font-family: sans-serif;
  display: flex;
  text-align: center;
  font-weight: 300;
  font-size: 30px;
  left: 0;
  top: 0;
  position: absolute;
  color: hsl(209, 96%, 36%);
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
}

/*
|--------------------------------------------------------------------------
| Close Button
|--------------------------------------------------------------------------
*/
.printClose {
  position: absolute;
  right: 10px;
  top: 10px;
}

.printClose:before {
  content: "×";
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 100;
  line-height: 1px;
  padding-top: 0.5em;
  display: block;
  font-size: 2em;
  text-indent: 1px;
  overflow: hidden;
  height: 1.25em;
  width: 1.25em;
  text-align: center;
  cursor: pointer;
}

.printSpinner {
  margin-top: 3px;
  margin-left: -40px;
  position: absolute;
  display: inline-block;
  width: 25px;
  height: 25px;
  border: 2px solid hsl(209, 96%, 36%);
  border-radius: 50%;
  animation: spin 0.75s infinite linear;
}

.printSpinner::before,
.printSpinner::after {
  left: -2px;
  top: -2px;
  display: none;
  position: absolute;
  content: "";
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
}

.printSpinner,
.printSpinner::before,
.printSpinner::after {
  display: inline-block;
  border-color: transparent;
  border-top-color: hsl(209, 96%, 36%);
  animation-duration: 1.2s;
}

.printSpinner::before {
  transform: rotate(120deg);
}

.printSpinner::after {
  transform: rotate(240deg);
}

/* Keyframes for the animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@font-face {
  font-family: "BreeSerif-Regular";
  src: url("BreeSerif-Regular.eot");
  src:
    url("BreeSerif-Regular.eot?#iefix") format("embedded-opentype"),
    url("BreeSerif-Regular.svg#BreeSerif-Regular") format("svg"),
    url("BreeSerif-Regular.ttf") format("truetype"),
    url("BreeSerif-Regular.woff") format("woff"),
    url("BreeSerif-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Samim;
  src: url("../fonts/Samim-FD.eot");
  src:
    url("../fonts/Samim-FD.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Samim-FD.woff") format("woff"),
    url("../fonts/Samim-FD.ttf") format("truetype");
  font-weight: normal;
  font-display: fallback;
}

@font-face {
  font-family: Samim-Bold;
  src: url("../fonts/Samim-Bold-FD.eot");
  src:
    url("../fonts/Samim-Bold-FD.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Samim-Bold-FD.woff") format("woff"),
    url("../fonts/Samim-Bold-FD.ttf") format("truetype");
  font-weight: bold;
  font-display: fallback;
}
@keyframes MyAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes myAnimation {
  0% {
    transform: skew(0);
  }
  50% {
    transform: skew(10deg);
  }
  50% {
    transform: skew(-10deg);
  }
}
@keyframes myAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@-ms-viewport {
  width: device-width;
}
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html body {
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  font-family: Samim;
  overflow: hidden;
}
html body > #root {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

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

p {
  margin-top: 0;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

pre,
code,
kbd,
samp {
  font-size: 1em;
}

kbd {
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  color: #333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}
table tr,
table td {
  user-select: none;
}

caption {
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  color: rgba(0, 0, 0, 0.54);
}

button {
  border-radius: 0;
}
button.a {
  border: none;
  background-color: transparent;
  cursor: pointer;
}

button:focus {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: none;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

[hidden] {
  display: none !important;
}

[data-color="error"] {
  color: #cc0000;
}

[data-color="success"] {
  color: rgba(95, 196, 0, 0.7);
}

[data-color="info"] {
  color: rgba(0, 132, 255, 0.5);
}

[data-color="warning"] {
  color: #cc8b00;
}

[data-color="none"] {
  color: rgba(0, 0, 0, 0.7);
}

[data-align] {
  display: block;
}

[data-align="start"] {
  text-align: start;
  width: 100%;
}

[data-align="end"] {
  text-align: end;
  width: 100%;
}

[data-align="center"] {
  text-align: center;
  width: 100%;
}

[data-align="justify"] {
  text-align: justify;
  width: 100%;
}

.group {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  justify-content: space-around;
  align-items: stretch;
  flex-grow: 0;
  text-align: center;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background-clip: border-box;
  margin: 0.5rem 0;
  font-size: 10px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  user-select: none;
}
.group:first-child {
  margin-top: 0;
}
.group > .group-head {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  min-height: 1.8rem;
  flex-grow: 0;
  letter-spacing: 0.5px;
  color: white;
  background: #222831;
  padding-right: 10px;
  padding-left: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  font-size: 12px;
  font-weight: bold;
}
.group > .group-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: stretch;
  height: auto;
  flex: 1 1 auto;
  padding: 0.25rem;
}
.group > .group-body .row {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: calc(100% - 10px);
  max-width: 99.8%;
  height: auto;
  margin: 5px 5px;
  padding: 0.1rem 0;
}
@media screen and (max-width: 450px) {
  .group > .group-body .row input {
    width: 5rem;
  }
  .group > .group-body .row label {
    min-width: auto;
  }
  .group > .group-body .row > div > label {
    max-width: 5.1rem;
  }
  .group > .group-body .row > div > span {
    max-width: 5rem;
    margin: 10px;
  }
}
.group.transparent {
  flex-grow: 1;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.row {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: calc(100% - 10px);
  max-width: 99.8%;
  height: auto;
  margin: 5px 5px;
  padding: 0.1rem 0;
}
.row.column {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: stretch;
}
.row.hide {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.has-error {
  border: 2px dotted #cc0000;
  box-shadow: inset 0 0 20px #cc0000;
}
.self-element {
  display: flex;
  /* flex-grow: 1; */
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  margin-right: 0;
  margin-bottom: 0;
  height: auto;
  padding: 1px 0;
}
.self-element > label {
  display: inline-block;
  min-width: 6rem;
  padding-left: 0.5rem;
  margin-bottom: 0;
}
.self-element.noGrow {
  flex-grow: 0 !important;
}
.self-element-key-lang {
  position: absolute;
  bottom: calc(100% - 5px);
  height: fit-content;
  font-size: 90%;
  background-color: #f5c2c7;
  border-radius: 3px;
  color: #721c24;
  padding: 3px;
  margin-right: 0.2rem;
  letter-spacing: -0.5px;
  box-shadow: none;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0.7;
  z-index: 5;
}
.self-element-key-lang::after {
  visibility: hidden;
  position: absolute;
  right: 8px;
  width: 7px;
  height: 7px;
  bottom: -3px;
  background: #f5c2c7;
  transform: rotate(45deg);
  box-shadow:
    0 0 3px 0 #f5c2c7,
    0 0 5px 0 #f5c2c7;
  z-index: -1;
}
div.self-element:focus-within .self-element-key-lang {
  bottom: calc(100% + 3px);
  border-radius: 5px;
  box-shadow:
    0 0 3px 0 #f5c2c7,
    0 0 5px 0 #f5c2c7;
  opacity: 1;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.self-element:focus-within .self-element-key-lang::after {
  content: "";
  visibility: visible;
}
.self-element.self-element-voucher-state {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  height: 100%;
}
.self-element.self-element-voucher-state.step > ul > li {
  transform: translateY(-1rem);
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.self-element.self-element-voucher-state > ul {
  position: relative;
  height: 1rem;
  overflow: hidden;
}
.self-element.self-element-voucher-state > ul > li {
  margin: 0.3rem 0;
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.self-element.self-mobile-box-array {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
}
.self-element.self-mobile-box-array > div {
  flex-grow: 0;
}
.self-element.self-mobile-box-array > div.items {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  flex-direction: row-reverse;
}
.self-element.self-phone-box-array {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
}
.self-element.self-phone-box-array > div {
  flex-grow: 0;
}
.self-element.self-phone-box-array > div.items {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  flex-direction: row-reverse;
}
.self-element.self-email-box-array {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
}
.self-element.self-email-box-array > div {
  flex-grow: 0;
}
.self-element.self-email-box-array > div.items {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  flex-direction: row-reverse;
}
.self-element.self-website-box-array {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
}
.self-element.self-website-box-array > div {
  flex-grow: 0;
}
.self-element.self-website-box-array > div.items {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  flex-direction: row-reverse;
}
.self-element.self-element-profile-section-information-item {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  margin: 0.2rem 0;
  border: 1px solid #eeeeee;
  border-radius: 5px;
}
.self-element.self-element-profile-section-information-item > .profile-section-information-item-info {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  padding: 1rem 0.5rem;
  box-shadow: inset 0 0 5px 0 #eeeeee;
}
.self-element.self-element-profile-section-information-item > .profile-section-information-item-info > p {
  word-wrap: break-word;
}
.self-element.self-element-profile-section-information-item > .profile-section-information-item-info > b {
  position: relative;
  margin-top: 0.5rem;
  color: rgba(0, 0, 0, 0.7);
  font-size: 8px;
}
.self-element.self-element-profile-section-information-item > .profile-section-information-item-subjcet {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  flex-basis: 5rem;
  padding: 0 0.5rem;
  border-left: 0.5px solid #eeeeee;
}
.self-element.self-element-profile-section-information-item > .profile-section-information-item-subjcet > h5 {
  margin-bottom: 0;
}
.self-element.self-element-profile-section-information-container {
  justify-content: center;
  cursor: pointer;
}
.self-element.self-element-profile-section-information-container > h5 {
  margin: 0 1rem;
  color: #1089ff;
}
.self-element.self-element-profile-section-information-container > label {
  min-width: auto;
  background: rgba(0, 132, 255, 0.1);
  border: 1px dotted #1089ff;
  padding: 0.7rem 1rem;
  cursor: pointer;
}
.self-element.self-element-profile-section-information-container > label > span {
  color: #1089ff;
}
.self-element.self-element-profile-section-information-container.modal > div > div {
  justify-content: center;
}
.self-element.self-element-profile-section-information-container.modal > :last-child {
  padding: 0.5rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.self-element.self-element-profile-section-information-container > :last-child {
  justify-content: center;
}
.self-element.self-element-profile-section-information-container > :last-child > button {
  padding: 0.4rem 0.7rem;
  transition: 0.3 cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-element.self-element-profile-section-information-container > :last-child > button:not(:last-child) {
  margin-left: 1rem;
}
.self-element.self-element-profile-section-information-container > :last-child > button.none {
  background: #1089ff;
  color: white;
}
.self-element.self-element-profile-section-information-container > :last-child > button.dark {
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.self-element.self-element-profile-section-information-container > :last-child > button:hover {
  box-shadow:
    0 0 20px 0 rgba(0, 0, 0, 0.2),
    0 0 10px 0 #1089ff;
  transition: 0.3 cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-element.self-element-tree-check-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  height: auto;
  margin-left: 10px;
  font-size: 12px;
}
.self-element.self-element-tree-check-box > .self-element.information-element {
  position: absolute;
  top: -10px;
  right: -10px;
}
.self-element.self-element-tree-check-box > span {
  color: rgba(0, 0, 0, 0.7) !important;
}
.self-element.self-element-tree-check-box > .font-awsome-double-checked {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  height: 100%;
}
.self-element.self-element-tree-check-box > .font-awsome-double-checked > .one-check {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  position: absolute;
  top: 5px;
  left: 10%;
}
.self-element.self-element-tree-check-box > .font-awsome-double-checked > .two-check {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  position: absolute;
  top: 5px;
  left: 32%;
}
.self-element.self-element-tree-check-box-container.disable {
  cursor: default;
  color: rgba(0, 0, 0, 0.2);
}
.self-element.text-area-box {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: flex-start;
}
.self-element.text-area-box > label {
  margin-top: 5px;
}
.self-element.text-area-box > div {
  align-items: flex-start;
}
.self-element.text-area-box > div > textarea {
  min-height: 1.5rem;
  max-height: 8rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  overflow: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.self-element.text-area-box > div > textarea::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.self-element.text-area-box > div > textarea::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.self-element.text-area-box > div > span {
  top: auto;
  bottom: -5px;
}
.self-element.self-element-radio-box {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  padding: 0.3rem 0;
}
.self-element.self-element-radio-box.disable {
  cursor: default;
  color: rgba(0, 0, 0, 0.2);
}
.self-element.self-element-radio-box.disable:hover {
  box-shadow: none;
  border-radius: none;
}
.self-element.self-element-radio-box:hover {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}
.self-element.self-element-radio-box > svg {
  margin-left: 5px;
}
.self-element.self-element-radio-box > span {
  margin-left: 5px;
}
.self-element label.disabled {
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}
.self-element input:disabled {
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}
.self-element.self-detailed-account-type {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
}
.self-element.self-detailed-account-type > select {
  max-width: 15rem;
  width: 30%;
}
.self-element.check-box {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  height: 1.7rem;
}
.self-element.check-box:hover {
  cursor: pointer;
}
.self-element.check-box:hover .check-box-icon {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
.self-element.check-box.noGrow {
  height: 1.7rem;
  flex-grow: 0;
  margin-left: 0.5rem;
}
.self-element.check-box > .check-box-icon {
  flex-grow: 0;
  width: 1.8;
  color: rgba(0, 0, 0, 0.7);
}
.self-element.check-box > label {
  margin-right: 5px;
  text-align: start;
  cursor: pointer;
}
.self-element.self-element-button-group {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  border: 1px solid rgba(0, 0, 0, 0.5);
  margin-left: 5px;
  border-radius: 5px;
  padding: 0;
  overflow: hidden;
}
.self-element.self-element-button-group:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
.self-element.self-element-button-group > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  min-width: 2.5rem;
  width: auto;
  min-height: 100%;
  background: transparent;
  overflow: hidden;
  margin: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0 5px;
}
.self-element.self-element-button-group > button:hover {
  background: rgba(0, 0, 0, 0.1);
}
.self-element.self-element-button-group > button:focus {
  outline: 0;
}
.self-element.self-element-button-group > button.active {
  background: #1089ff;
  color: white;
  font-weight: bold;
}
.self-element.information-element {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  padding-right: 3px;
  width: 15px;
  max-width: 15px;
  opacity: 0;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.self-element.information-element > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 100%;
  color: #cc0000;
  padding-top: 5px;
  opacity: 0;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.self-element.information-element.show {
  opacity: 1;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.self-element.information-element.show > span {
  opacity: 1;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.self-element > input {
  flex-grow: 1;
  min-width: 2rem;
  max-width: 100%;
}
.self-element select,
.self-element textarea {
  flex-grow: 1;
  min-width: 10rem;
  border: 1px solid rgba(0, 0, 0, 0.7);
  min-height: 24px;
  border-radius: 0.25rem;
}

div.self-comment-container {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  margin-right: 0;
  margin-bottom: 0;
  height: auto;
  padding: 1px 0;
  height: auto;
}
div.self-comment-container > label {
  display: inline-block;
  min-width: 6rem;
  padding-left: 0.5rem;
  margin-bottom: 0;
}
div.self-comment-container > textarea {
  flex-grow: 1;
  resize: vertical;
  height: 10rem;
}

div.self-simple-code {
  max-width: 4rem;
}
div.self-simple-code > input[type="text"] {
  direction: ltr;
}

div.self-audience-container {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  margin-right: 0;
  margin-bottom: 0;
  height: auto;
  padding: 1px 0;
}
div.self-audience-container > label {
  display: inline-block;
  min-width: 6rem;
  padding-left: 0.5rem;
  margin-bottom: 0;
}
div.self-audience-container > button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.3rem;
  width: 1.3rem;
  padding: 0;
  margin-right: 0.3rem;
}
div.self-audience-container > nav {
  height: 100%;
  flex-grow: 1;
}
div.self-audience-container > nav > ul {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #495057;
  background-color: #f8f9fa;
  border: 1px solid #dddddd;
  border-radius: 0.25rem;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

div.self-element {
  display: flex;
  /* flex-grow: 1; */
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  margin-right: 0;
  margin-bottom: 0;
  height: auto;
  padding: 1px 0;
}
div.self-element > label {
  display: inline-block;
  min-width: 6rem;
  padding-left: 0.5rem;
  margin-bottom: 0;
  text-align: end;
}
div.self-element > button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.3rem;
  width: 1.3rem;
  padding: 0;
  margin-right: 0.3rem;
}
div.self-element .self-element-alarm {
  position: absolute;
  top: calc(100% - 5px);
  height: fit-content;
  font-size: 90%;
  background-color: #cc0000;
  border-radius: 3px;
  color: white;
  padding: 3px;
  margin-right: 0.2rem;
  letter-spacing: -0.5px;
  box-shadow: none;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0.7;
  z-index: 10;
}
div.self-element .self-element-alarm::after {
  visibility: hidden;
  position: absolute;
  right: 8px;
  width: 7px;
  height: 7px;
  top: -3px;
  background: #cc0000;
  transform: rotate(45deg);
  box-shadow:
    0 0 3px 0 #cc0000,
    0 0 5px 0 #cc0000;
  z-index: -1;
}
div.self-element:focus-within .self-element-alarm {
  top: calc(100% + 3px);
  border-radius: 5px;
  box-shadow:
    0 0 3px 0 #cc0000,
    0 0 5px 0 #cc0000;
  opacity: 1;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.self-element:focus-within .self-element-alarm::after {
  content: "";
  visibility: visible;
}

div.self-common-tag-container {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  margin-right: 0;
  margin-bottom: 0;
  height: auto;
  padding: 1px 0;
}
div.self-common-tag-container > label {
  display: inline-block;
  min-width: 6rem;
  padding-left: 0.5rem;
  margin-bottom: 0;
}
div.self-common-tag-container > button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.3rem;
  width: 1.3rem;
  padding: 0;
  margin-right: 0.3rem;
}
div.self-common-tag-container > nav {
  height: 100%;
  flex-grow: 1;
}
div.self-common-tag-container > nav > ul {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #495057;
  background-color: #f8f9fa;
  border: 1px solid #dddddd;
  border-radius: 0.25rem;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

div.self-attachment-container {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  margin-right: 0;
  margin-bottom: 0;
  height: auto;
  padding: 1px 0;
}
div.self-attachment-container > label {
  display: inline-block;
  min-width: 6rem;
  padding-left: 0.5rem;
  margin-bottom: 0;
}
div.self-attachment-container > button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.3rem;
  width: 1.3rem;
  padding: 0;
  margin-right: 0.3rem;
}
div.self-attachment-container > nav {
  height: 100%;
  flex-grow: 1;
}
div.self-attachment-container > nav > ul {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #495057;
  background-color: #f8f9fa;
  border: 1px solid #dddddd;
  border-radius: 0.25rem;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

form .self-input:not(.self-input-read-only) {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  display: flex;
}
form .self-input:not(.self-input-read-only):hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
form .self-input:not(.self-input-read-only):focus-within {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
form .self-input:not(.self-input-read-only) > input {
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
  border: none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
  flex-grow: 1;
  padding: 0.2rem 0.75rem;
  vertical-align: middle;
  user-select: none;
  font-size: 10px;
  line-height: 1.5;
}

input {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  flex-grow: 0;
  padding: 0.2rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 0.25rem;
  vertical-align: middle;
  user-select: none;
  font-size: 10px;
  line-height: 1.5;
}

fieldset {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: stretch !important;
  justify-items: stretch !important;
  width: 100%;
  height: 100%;
}
fieldset > form {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex-grow: 1;
}

.layout__main--tabs-body > fieldset {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 100%;
  border: 0;
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.layout__main--tabs-body > fieldset::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.layout__main--tabs-body > fieldset::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.layout__main--tabs-body > fieldset > form {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-self: stretch;
  align-items: stretch;
  padding: 20px 15px 0 15px;
  font: 10px;
}
.layout__main--tabs-body > fieldset > form > :nth-last-child(1) {
  padding: 0;
}

form button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  flex-grow: 0;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  padding: 0.2rem 0.3rem;
  border: 1px solid transparent;
  background: transparent;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.7);
  border-radius: 0.25rem;
  overflow: hidden;
}
form button:not(:disabled):not(.disabled) {
  cursor: pointer;
}
form button button:focus {
  outline: 1px dotted;
  outline: 5px auto;
}

button {
  cursor: pointer;
}

.grow-self-buttons-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
}

.self-buttons-section {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  position: sticky;
  bottom: 0px;
  left: 0px;
  justify-content: space-around;
  width: 100%;
  min-height: 4rem;
  height: auto;
  flex-grow: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  background: white;
  z-index: 5;
}
.self-buttons-section > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  flex-basis: 6rem;
  min-height: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  background: transparent;
  font-size: 12px;
  font-family: Samim;
  margin: 10px;
  cursor: pointer;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.7);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-buttons-section > button:hover,
.self-buttons-section > button:focus {
  outline: 0;
  color: #1089ff;
  border-color: rgba(0, 132, 255, 0.5);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-buttons-section > button:hover::after,
.self-buttons-section > button:focus::after {
  width: 100%;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-buttons-section > button:disabled,
.self-buttons-section > button.access-denied {
  color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}
.self-buttons-section > button:disabled:hover,
.self-buttons-section > button:disabled:focus,
.self-buttons-section > button.access-denied:hover,
.self-buttons-section > button.access-denied:focus {
  color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
.self-buttons-section > button:disabled:hover::after,
.self-buttons-section > button:disabled:focus::after,
.self-buttons-section > button.access-denied:hover::after,
.self-buttons-section > button.access-denied:focus::after {
  display: none;
}
.self-buttons-section > button::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 3px;
  background: rgba(0, 132, 255, 0.5);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media screen and (max-width: 500px) {
  .self-buttons-section {
    min-height: 7rem;
  }
}

.btn {
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.btn:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

form div.self-date {
  display: flex;
}
form .self-codes:not(.self-codes-read-only) {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: row-reverse;
}
form .self-codes:not(.self-codes-read-only):hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
form .self-codes:not(.self-codes-read-only):focus-within {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
form .self-codes:not(.self-codes-read-only) > input.self-sub-code {
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
  border: none;
  border-radius: 0;
  text-align: center;
  direction: ltr;
  padding-left: 0;
  padding-right: 0;
  letter-spacing: 0.05rem;
}
form .self-codes:not(.self-codes-read-only) > input.self-sub-code::placeholder {
  color: red;
  opacity: 0.6;
}
form .self-codes:not(.self-codes-read-only) > input.self-sub-code:first-child {
  padding-left: 0.1rem;
}
form .self-codes:not(.self-codes-read-only) > input.self-sub-code:last-child {
  padding-right: 0.1rem;
}
form .self-codes:not(.self-codes-read-only) > input.self-sub-code.length-1:not([size="1"]) {
  color: red;
}
form .self-codes:not(.self-codes-read-only) > input.self-sub-code.length-2:not([size="2"]) {
  color: red;
}
form .self-codes:not(.self-codes-read-only) > input.self-sub-code.length-3:not([size="3"]) {
  color: red;
}
form .self-codes:not(.self-codes-read-only) > input.self-sub-code.length-4:not([size="4"]) {
  color: red;
}
form .self-codes:not(.self-codes-read-only) > input.self-sub-code.length-5:not([size="4"]) {
  color: red;
}
form .self-codes:not(.self-codes-read-only) > input.self-sub-code.length-6:not([size="4"]) {
  color: red;
}
form .self-codes:not(.self-codes-read-only) > input.self-sub-code.length-7:not([size="4"]) {
  color: red;
}
form .self-codes:not(.self-codes-read-only) > input.self-sub-code.length-8:not([size="4"]) {
  color: red;
}
form .self-codes:not(.self-codes-read-only) > input.self-sub-code.length-9:not([size="4"]) {
  color: red;
}
form .self-codes:not(.self-codes-read-only) > span.self-codes-separator {
  text-align: center;
  margin: auto 0;
  font-size: 0.8rem;
}
form span.self-codes-label-level-1 {
  padding-right: 0.3rem;
}
form span.self-codes-label-level-2 {
  padding-right: 0.3rem;
}
form span.self-codes-label-level-3 {
  padding-right: 0.3rem;
}
form span.self-codes-label-level-4 {
  padding-right: 0.3rem;
}
form span.self-codes-label-level-5 {
  padding-right: 0.3rem;
}
form span.self-codes-label-level-6 {
  padding-right: 0.3rem;
}
form span.self-codes-label-level-7 {
  padding-right: 0.3rem;
}
form span.self-codes-label-level-8 {
  padding-right: 0.3rem;
}
form span.self-codes-label-level-9 {
  padding-right: 0.3rem;
}

.layout__container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 100%;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-wrap: nowrap;
  overflow: hidden;
  opacity: 0;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.layout__container.show {
  opacity: 1;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.layout__container > .layout__navbar {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 2.6rem;
  max-height: 2.6rem;
  min-height: 2.6rem;
  background: #222831;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  padding: 5px;
  overflow: hidden;
  user-select: none;
}
.layout__container > .layout__row {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  min-height: calc(100vh - 10rem);
  flex-shrink: 1;
  flex-basis: 100%;
  flex-wrap: nowrap;
  background: #222831;
}
.layout__container > .layout__row.bg {
  background: #222831;
}
.layout__container > .layout__statusbar {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 1.5rem;
  max-height: 1.5rem;
  min-height: 1.5rem;
  background: #e5e5e5;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-top: 1px solid #e5e5e5;
  padding: 5px;
  overflow: hidden;
  user-select: none;
}

.layout__navbar > .layout__navbar-filter {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  padding-right: 1rem;
}
.layout__navbar > .layout__navbar-filter > .layout__navbar-filter-main {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
}
.layout__navbar > .layout__navbar-filter > .layout__navbar-filter-main > fieldset {
  position: fixed;
  top: 2.5rem;
  width: 15rem;
  height: auto;
  z-index: 10;
  box-shadow:
    0 0 10px 0 rgba(0, 0, 0, 0.2),
    0 0 15px 0 rgba(0, 0, 0, 0.2);
}
.layout__navbar > .layout__navbar-filter > .layout__navbar-filter-main > fieldset::before {
  content: "";
  position: absolute;
  top: -0.2rem;
  right: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  background: white;
  transform: rotate(45deg);
  z-index: -1;
}
.layout__navbar > .layout__navbar-filter > .layout__navbar-filter-main > fieldset > form {
  border-radius: 3px;
  padding: 0.5rem 0.5rem;
  overflow: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.layout__navbar > .layout__navbar-filter > .layout__navbar-filter-main > fieldset > form::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.layout__navbar > .layout__navbar-filter > .layout__navbar-filter-main > fieldset > form::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.layout__navbar > .layout__navbar-filter > .layout__navbar-filter-main > fieldset > form > .search-user {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  height: 100%;
}
.layout__navbar > .layout__navbar-filter > .layout__navbar-filter-main > fieldset > form > .search-user > ul {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  list-style-type: none;
}
.layout__navbar > .layout__navbar-filter > .layout__navbar-filter-main > fieldset > form > .search-user > ul > li {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  font-size: 12px;
  flex-grow: 0;
  padding: 0.3rem 0.2rem;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.layout__navbar
  > .layout__navbar-filter
  > .layout__navbar-filter-main
  > fieldset
  > form
  > .search-user
  > ul
  > li.selected,
.layout__navbar
  > .layout__navbar-filter
  > .layout__navbar-filter-main
  > fieldset
  > form
  > .search-user
  > ul
  > li:hover {
  background: #1089ff;
  color: white;
  box-shadow: inset 0 0 5px 0 rgba(0, 132, 255, 0.5);
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.layout__navbar
  > .layout__navbar-filter
  > .layout__navbar-filter-main
  > fieldset
  > form
  > .search-user
  > ul
  > li:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.layout__navbar > .layout__navbar-filter > .layout__navbar-filter-main > div {
  flex-grow: 0;
}
.layout__navbar > .layout__navbar-filter > .layout__navbar-filter-main > div > div > input {
  width: 15rem;
}
.layout__navbar > .layout__navbar-filter > button {
  border: 0;
  padding: 0.1rem 0.2rem;
  background: #1089ff;
  border-radius: 3px;
  margin-left: 0.3rem;
}
.layout__navbar > .layout__navbar-filter > button > span {
  color: white;
}
.layout__navbar > .layout__navbar-user {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  height: 100%;
  padding: 0 10px;
}
@media screen and (max-width: 350px) {
  .layout__navbar > .layout__navbar-user {
    font-size: 10px;
  }
}
.layout__navbar > .layout__navbar-user > button {
  width: 2rem;
  height: 100%;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid #eeeeee;
  background: transparent;
  color: #eeeeee;
  overflow: hidden;
}
.layout__navbar > .layout__navbar-user > button > img {
  position: relative;
  height: 100%;
  width: 100%;
}
.layout__navbar > .layout__navbar-user > button:focus {
  outline: 0;
}
@media screen and (max-width: 300px) {
  .layout__navbar > .layout__navbar-user > button {
    width: 1.3rem;
    height: 1.3rem;
  }
}
.layout__navbar > .layout__navbar-user > h5 {
  position: relative;
  margin: 0;
  margin-right: 10px;
  color: #eeeeee;
  cursor: pointer;
}
.layout__navbar > .contact-us {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  padding: 0.5rem 0.5rem;
  background: transparent;
  border: 0;
}
.layout__navbar > .contact-us > span {
  color: white;
}
.layout__navbar > .layout__navbar-logo-left {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  height: 100%;
  flex-grow: 0;
  padding: 0 10px;
  color: #eeeeee;
  overflow: hidden;
}
.layout__navbar > .layout__navbar-logo-left > h4 {
  margin: 0;
}
@media screen and (max-width: 350px) {
  .layout__navbar > .layout__navbar-logo-left {
    font-size: 10px;
  }
}
.layout__navbar > .layout__navbar-logo-left > .layout__navbar-logo-right {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  height: 100%;
  margin-right: 10px;
}
.layout__navbar > .layout__navbar-logo-left > .layout__navbar-logo-right > img {
  width: 2rem;
  height: 2rem;
  transform: perspective(800);
  filter: brightness(2.1);
}
@media screen and (max-width: 300px) {
  .layout__navbar > .layout__navbar-logo-left > .layout__navbar-logo-right > img {
    width: 1.3rem;
    height: 1.3rem;
  }
}
.layout__navbar > .self-theme {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  height: 100%;
  padding: 0 10px;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.layout__navbar > .self-theme > .toggler {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 3rem;
  justify-content: space-between;
  align-items: center;
  background: #eeeeee;
  border-radius: 10px;
  padding: 0.1rem 0.1rem;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.layout__navbar > .self-theme > .toggler > span {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px;
}
.layout__navbar > .self-theme > .toggler > span.active {
  color: #222831;
}
.layout__navbar > .self-theme > .toggler > span:not(.active) {
  background: #222831;
  border-radius: 50%;
}
.layout__navbar > .self-theme > .toggler > span:not(.active) > svg {
  visibility: hidden;
  opacity: 0;
}

.layout__row > .layout__main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  height: 100%;
  background: white;
  overflow: hidden;
}

.self-back-drop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 100;
}
.self-back-drop.transparent {
  background: transparent;
}
.self-back-drop.noEffect {
  backdrop-filter: blur(0.5px);
}

.self-back-drop.transition-open {
  animation: openBackdrop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.self-back-drop.transition-closed {
  animation: closeBackdrop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.backdrop-main-show {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
  transition: 3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1000;
}
.backdrop-main-show.bgc-transparent {
  background: transparent;
}

.backdrop-main-show.transition-open {
  animation: openBackdrop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.backdrop-main-show.transition-closed {
  animation: closeBackdrop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.modal-main-show {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  position: fixed;
  top: 5rem;
  left: 50%;
  box-shadow:
    0 0 15px 0 rgba(0, 0, 0, 0.5),
    0 0 20px 0 rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  background: white;
  transform: translateX(-50%);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: none;
  flex-grow: 0;
  font-size: 10px;
}
.modal-main-show.modal-full-screen {
  max-width: -webkit-fill-available;
  max-height: -webkit-fill-available;
  align-items: stretch;
}
.modal-main-show > .group {
  margin-bottom: 0 !important;
}

.modal-main-show.ModalOpen {
  animation: openModal 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.modal-main-show.ModalClosed {
  animation: closeModal 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.backdrop-waiting-show {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
  transition: 3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 5000;
}

.backdrop-waiting-show.transition-open {
  animation: openBackdrop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.backdrop-waiting-show.transition-closed {
  animation: closeBackdrop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.modal-waiting-show {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  position: fixed;
  top: 5rem;
  left: 50%;
  box-shadow:
    0 0 15px 0 rgba(0, 0, 0, 0.5),
    0 0 20px 0 rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  background: white;
  transform: translateX(-50%);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: transparent !important;
  box-shadow: none;
  z-index: 5010;
}

.modal-waiting-show.ModalOpen {
  animation: openModal 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.modal-waiting-show.ModalClosed {
  animation: closeModal 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.transition-show.transition-open {
  animation: transition-open 0.2s ease-in forwards;
}

.transition-show.transition-closed {
  animation: transition-close 0.2s ease-out forwards;
}

.backdrop-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  cursor: default;
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.backdrop-popup.back-drop {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(1px);
}

.popup {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 15px 0 rgba(0, 0, 0, 0.5),
    0 0 20px 0 rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  font-size: 10px;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.popup > .group {
  margin: 0;
  background: white;
}
.popup.arrow::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  outline: none;
}
.popup.right {
  transform: translate(15px, calc(-50% + 5px));
}
.popup.right::after {
  border-top: 10px solid transparent;
  border-right: 10px solid white;
  border-bottom: 10px solid transparent;
  top: 50%;
  left: -8px;
  transform: translate(0, -50%);
}
.popup.left {
  transform: translate(calc(-100% - 10px), calc(-50% + 10px));
}
.popup.left::after {
  border-top: 10px solid transparent;
  border-left: 10px solid white;
  border-bottom: 10px solid transparent;
  top: 50%;
  left: calc(100% - 2px);
  transform: translate(0, -50%);
}
.popup.bottom {
  transform: translate(-50%, 20px);
}
.popup.bottom::after {
  border-bottom: 10px solid white;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  top: -9px;
  left: 50%;
  transform: translate(-50%, 0);
}
.popup.top {
  transform: translate(calc(-50% - 5px), calc(-100% - 10px));
}
.popup.top::after {
  border-right: 10px solid transparent;
  border-top: 10px solid white;
  border-left: 10px solid transparent;
  top: calc(100% - 3px);
  left: 50%;
  transform: translate(-50%, 0);
}
.popup .self-buttons-section {
  min-height: auto;
}

.popup.ModalOpen {
  animation: openModal 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.popup.ModalClosed {
  animation: closeModal 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes transition-open {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes transition-close {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes openBackdrop {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes closeBackdrop {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes openModal {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes closeModal {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
.layout__sidebar-end {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 1.2rem;
  max-width: 1.2rem;
  height: 100%;
  background: #eeeeee;
  border-right: 0.5px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  overflow: hidden;
  user-select: none;
}
.layout__sidebar-end > .task-switcher-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 1.5rem;
  max-height: 1.5rem;
  font-size: 14px;
  background: #222831;
  color: #eeeeee;
  border: 0;
  border-radius: 0;
}
.layout__sidebar-end > .task-switcher-icon:focus {
  outline: 0;
}
.layout__sidebar-end > .task-switcher-icon:hover {
  cursor: pointer;
}
.layout__sidebar-end > .task-switcher-icon:hover > svg {
  transform: scale(1.1);
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.layout__statusbar {
  font-size: 12px;
  z-index: 0;
}
.layout__statusbar > .layout__statusbar-clock {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  height: 100%;
}
.layout__statusbar > .layout__statusbar-clock > span {
  width: 3rem;
  border-left: 1px dotted rgba(0, 0, 0, 0.2);
}
.layout__statusbar > .layout__statusbar-clock > .data-info {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  height: 100%;
  font-size: 10px;
  cursor: pointer;
}
@media screen and (max-width: 450px) {
  .layout__statusbar > .layout__statusbar-clock > .data-info {
    font-size: 8px;
  }
}
.layout__statusbar > .layout__statusbar-clock > .data-info > div {
  padding: 0 5px;
  color: rgb(0, 57, 114);
  border-left: 1px dotted rgba(0, 0, 0, 0.2);
}
.layout__statusbar > .layout__statusbar-clock > .data-info > div > :first-child {
  margin-left: 5px;
  color: rgba(0, 0, 0, 0.7);
}
.layout__statusbar > .layout__statusbar-clock > .data-info > div > b {
  margin-left: 5px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
}
.layout__statusbar > .layout__statusbar-clock > .data-info > div > span {
  margin: 0 2px;
  font-weight: 800;
}
.layout__statusbar > .layout__statusbar-clock > .data-info.disable {
  cursor: default;
}
.layout__statusbar > .layout__statusbar-clock > .data-info.blank > span {
  width: auto;
  padding-right: 5px;
}
.layout__statusbar > .layout__statusbar-status {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  padding-left: 5px;
}
.layout__statusbar > .layout__statusbar-status.successed {
  color: green;
}
.layout__statusbar > .layout__statusbar-status.failed {
  color: red;
}
.layout__statusbar > .layout__statusbar-status.loading {
  color: black;
}
.layout__statusbar > .layout__statusbar-status.loading::before {
  width: 4rem;
  text-align: center;
  content: " Loading  ";
}

.layout__main--tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  overflow: hidden;
}
.layout__main--tabs-header {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 1.75rem;
  max-height: 1.75rem;
  background: #222831;
}
.layout__main--tabs-header > ul {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  list-style: none;
  width: 78vw;
  max-width: 100%;
  height: 100%;
  border-bottom: 4px solid white;
  filter: brightness(1);
  overflow: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  padding: 0 0.5rem;
  scroll-behavior: smooth;
  margin: 0;
  z-index: 1;
}
.layout__main--tabs-header > ul::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}
.layout__main--tabs-header > ul::-webkit-scrollbar-thumb {
  background: transparent;
}
.layout__main--tabs-header > ul:hover {
  overflow-x: auto;
}
.layout__main--tabs-header > ul > li {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  height: 100%;
  width: 11rem;
  min-width: 11rem;
  max-width: 11rem;
  border: 0;
  padding: 0 10px 0 7px;
  border-top-left-radius: 0.4rem;
  border-top-right-radius: 0.4rem;
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2);
  cursor: pointer;
}
.layout__main--tabs-header > ul > li:not(:last-child) {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.layout__main--tabs-header > ul > li:hover,
.layout__main--tabs-header > ul > li:focus {
  outline: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
}
.layout__main--tabs-header > ul > li > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  height: 100%;
}
.layout__main--tabs-header > ul > li > div > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  height: 100%;
  border: 0;
  background: transparent;
  font-family: Samim;
  font-size: 10px;
  color: #eeeeee;
  cursor: pointer;
}
.layout__main--tabs-header > ul > li > div > button:focus {
  outline: 0;
}
.layout__main--tabs-header > ul > li > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  border: 0;
  background: transparent;
  max-width: 12px;
  height: 12px;
}
.layout__main--tabs-header > ul > li > button > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  color: #222831;
  font-size: 10px;
  font-weight: bold;
  padding: 2px;
}
.layout__main--tabs-header > ul > li.active {
  background: #eeeeee;
  filter: brightness(1.1);
  border: 0;
  z-index: 2;
}
.layout__main--tabs-header > ul > li.active > div > button {
  color: #222831;
}
.layout__main--tabs-header > ul > li.active::before {
  content: "";
  position: absolute;
  bottom: 0.5px;
  right: -0.15%;
  width: 100.5%;
  height: 2px;
  background: #eeeeee;
  border: 0;
  z-index: 3;
}
.layout__main--tabs-header > ul > li.active::after {
  content: "";
  position: absolute;
  bottom: -0.3px;
  right: -0.2%;
  width: 101.2%;
  height: 2px;
  background: #eeeeee;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 0;
  z-index: 2;
}
.layout__main--tabs-header > ul > li > .help-button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  opacity: 0.7;
  color: white;
  cursor: pointer;
}
.layout__main--tabs-header > ul > li > .help-button:hover {
  opacity: 1;
  color: black;
}
.layout__main--tabs-header > ul > li > .help-button:hover > span {
  background: rgba(95, 196, 0, 0.7) !important;
  border-radius: 50%;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}
.layout__main--tabs-header > ul > li > .help-button:focus {
  outline: 0;
}
.layout__main--tabs-header > ul > li > .close {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  opacity: 0.7;
  color: white;
  cursor: pointer;
}
.layout__main--tabs-header > ul > li > .close:hover {
  opacity: 1;
  color: black;
}
.layout__main--tabs-header > ul > li > .close:hover > span {
  background: #cc0000 !important;
  border-radius: 50%;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}
.layout__main--tabs-header > ul > li > .close:focus {
  outline: 0;
}
.layout__main--tabs-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 100%;
  background: #eeeeee;
  overflow: hidden;
}

.import-exel-file {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  overflow: hidden;
}
.import-exel-file > h3 {
  text-align: center;
  color: #cc0000;
}
.import-exel-file > .group {
  justify-content: flex-start;
  padding: 1rem 0.5rem;
  flex-wrap: nowrap;
  overflow-y: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.import-exel-file > .group::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.import-exel-file > .group::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.import-exel-file > .group:nth-child(2) {
  min-height: 7rem;
}
.import-exel-file > .group:nth-child(2) > div {
  flex-direction: row;
}
.import-exel-file > .group:nth-child(2) > div > div {
  width: inherit;
  max-width: auto;
}
.import-exel-file > .group > div > input {
  padding: 10px;
}
.import-exel-file > .group > div > pre {
  text-align: left;
  direction: ltr;
  font-size: 14px;
}
.import-exel-file > .group > div > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
}
.import-exel-file > .group > div > div > .export-exel-file {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  border: 6px double rgba(0, 0, 0, 0.7);
  border-collapse: collapse;
  border-spacing: 0;
  padding: 0.5rem;
  box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
  user-select: none;
}
.import-exel-file > .group > div > div > .export-exel-file > tbody > :nth-child(1) {
  background: #eeeeee;
  border-bottom: 2px double rgba(0, 0, 0, 0.7) !important;
  box-shadow: 0 0 10px 0 rgba(95, 196, 0, 0.7);
}
.import-exel-file > .group > div > div > .export-exel-file > tbody > :nth-child(1) > th {
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 0;
}
.import-exel-file > .group > div > div > .export-exel-file > tbody > :nth-child(1) > th:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.7);
}
.import-exel-file > .group > div > div > .export-exel-file > tbody > :nth-child(1) > th > div {
  width: 100%;
  height: 100%;
  padding: 0;
}
.import-exel-file > .group > div > div > .export-exel-file > tbody > :nth-child(1) > th > div > :nth-child(2) {
  display: none;
}
.import-exel-file > .group > div > div > .export-exel-file > tbody > :nth-child(1) > th > div > select {
  width: 100%;
  max-width: 100%;
  height: 100%;
  background: rgba(95, 196, 0, 0.7);
  color: white;
  border: 0;
  line-height: 1.5rem;
  cursor: pointer;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.import-exel-file > .group > div > div > .export-exel-file > tbody > :nth-child(1) > th > div > select > option {
  background: rgba(95, 196, 0, 0.7);
  color: white;
}
.import-exel-file > .group > div > div > .export-exel-file > tbody > :nth-child(1) > th > div > select:hover {
  box-shadow: inset 0 0 10px 0 white;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.import-exel-file > .group > div > div > .export-exel-file > tbody > :nth-child(1) > th > div > select.null {
  background: #cc0000;
}
.import-exel-file > .group > div > div > .export-exel-file > tbody > :nth-child(even) {
  background: #eeeeee;
}
.import-exel-file > .group > div > div > .export-exel-file > tbody > tr {
  position: relative;
  height: 2rem;
}
.import-exel-file > .group > div > div > .export-exel-file > tbody > tr:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.import-exel-file > .group > div > div > .export-exel-file > tbody > tr > th {
  text-align: center;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  padding-right: 5px;
  cursor: pointer;
}
.import-exel-file > .group > div > div > .export-exel-file > tbody > tr > td {
  text-align: center;
}
.import-exel-file > .group > div > div > .export-exel-file > tbody > tr > td:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.import-exel-file > .group > div > div > .export-exel-file > colgroup .head {
  width: 2rem;
  max-width: 2rem;
  min-width: 2rem;
  background: #eeeeee;
}

.import-json-file {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  overflow: hidden;
}
.import-json-file > .group {
  justify-content: flex-start;
  padding: 1rem 0.5rem;
  flex-wrap: nowrap;
  overflow-y: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.import-json-file > .group::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.import-json-file > .group::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.import-json-file > .group > div > input {
  padding: 10px;
}
.import-json-file > .group > div > pre {
  direction: ltr;
  text-align: start;
  font-size: 14px;
  padding: 1rem;
}

.import-text-file {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  padding: 0.5rem;
  background: white;
  border-radius: 5px;
  overflow: hidden;
}
.import-text-file > .group {
  justify-content: flex-start;
  padding: 1rem 0.5rem;
  flex-wrap: nowrap;
  overflow-y: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.import-text-file > .group::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.import-text-file > .group::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.import-text-file > .group:nth-child(2) {
  flex-grow: 0 !important;
}
.import-text-file > .group > div > input {
  padding: 10px;
}
.import-text-file > .group > div > pre {
  direction: ltr;
  text-align: start;
  font-size: 14px;
  padding: 1rem;
}

.show-text-file-table {
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  overflow: hidden;
  user-select: none;
}
.show-text-file-table > thead > tr {
  height: 2.5rem;
  border-bottom: 4px double rgba(0, 0, 0, 0.7);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent, #eeeeee);
}
.show-text-file-table > thead > tr > th {
  font-weight: bold;
  text-align: center;
  max-height: 100%;
  cursor: pointer;
}
.show-text-file-table > thead > tr > th:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.7);
}
.show-text-file-table > thead > tr > th:hover {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
.show-text-file-table > thead > tr > th > div {
  height: 100%;
}
.show-text-file-table > thead > tr > th > div > select {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}
.show-text-file-table > tbody > tr {
  height: 1.7rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.show-text-file-table > tbody > tr > td {
  text-align: center;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.show-text-file-table > tbody > tr.selected {
  border: 1px solid #1089ff;
  box-shadow: inset 0 0 25px #1089ff;
}
.show-text-file-table > tbody > tr:nth-of-type(even) {
  background: #eeeeee;
}
.show-text-file-table > tbody > tr:nth-of-type(odd) {
  background: white;
}

span.rotate > svg {
  animation: 1s myAnimation linear infinite 0s;
}

.select-active-data-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  max-height: calc(100vh - 7rem);
  min-width: 15rem;
  background: white;
  opacity: 0;
  border-radius: 10px;
  user-select: none;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.select-active-data-content.show {
  opacity: 1;
  transition: 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.335);
}
.select-active-data-content > .help-botton-select-active-data {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
  background: white;
  font-size: 16px;
  border-radius: 17px;
  z-index: 200;
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.select-active-data-content > .help-botton-select-active-data:hover,
.select-active-data-content > .help-botton-select-active-data:focus {
  outline: 0;
  color: rgba(0, 132, 255, 0.5);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.select-active-data-content > .user-data-list {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  height: 55vh;
  padding: 1rem 1rem;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.select-active-data-content > .user-data-list::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.select-active-data-content > .user-data-list::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.select-active-data-content > .user-data-list .new-data-info {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  justify-content: center;
  width: 100%;
  margin: 5px 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  padding: 0.3rem 0;
  font-size: 14px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background: #cc0000;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.select-active-data-content > .user-data-list .new-data-info > label {
  margin-left: 10px;
}
.select-active-data-content > .user-data-list .li-user-data-list {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 100%;
  margin: 5px 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  overflow: visible;
}
.select-active-data-content > .user-data-list .li-user-data-list:hover {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}
.select-active-data-content > .user-data-list .li-user-data-list:hover > .data > .swip > span {
  color: rgba(95, 196, 0, 0.7);
  border: 1px solid rgba(95, 196, 0, 0.7);
  border-radius: 2px;
}
.select-active-data-content > .user-data-list .li-user-data-list.active {
  border-bottom: 4px solid rgba(0, 132, 255, 0.5);
  box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.3);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.select-active-data-content > .user-data-list .li-user-data-list.wait-for-being-active {
  border: 1px solid #1089ff;
  box-shadow:
    0 0 10px 0 rgba(0, 132, 255, 0.5),
    inset 0 0 5px 0 rgba(0, 132, 255, 0.5);
  transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.select-active-data-content > .user-data-list .li-user-data-list .data {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  justify-content: space-around;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.select-active-data-content > .user-data-list .li-user-data-list .data > .data-info {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  padding: 1.5rem 5px;
  height: 100%;
}
.select-active-data-content > .user-data-list .li-user-data-list .data > .data-info > svg {
  font-size: 16px;
  margin-left: 10px;
}
.select-active-data-content > .user-data-list .li-user-data-list .data > .data-info > h4 {
  font-size: 12px;
  margin: 0;
}
.select-active-data-content > .user-data-list .li-user-data-list .data .swip {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-around;
  flex-grow: 0;
  width: 6rem;
  height: 4rem;
  padding-right: 15px;
  cursor: pointer;
}
.select-active-data-content > .user-data-list .li-user-data-list .data .swip:hover,
.select-active-data-content > .user-data-list .li-user-data-list .data .swip:focus {
  outline: 0;
}
.select-active-data-content > .user-data-list .li-user-data-list .data .swip:hover > button,
.select-active-data-content > .user-data-list .li-user-data-list .data .swip:focus > button {
  color: rgba(0, 0, 0, 0.7);
}
.select-active-data-content > .user-data-list .li-user-data-list .data .swip:hover > span,
.select-active-data-content > .user-data-list .li-user-data-list .data .swip:focus > span {
  color: rgba(95, 196, 0, 0.7);
  border: 1px solid rgba(95, 196, 0, 0.7);
  border-radius: 2px;
}
.select-active-data-content > .user-data-list .li-user-data-list .data .swip > span {
  color: rgba(0, 0, 0, 0.2);
  padding: 1px 3px;
}
.select-active-data-content > .user-data-list .li-user-data-list .data .swip > button {
  border: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.2);
  font-size: 14px;
}
.select-active-data-content > .user-data-list .li-user-data-list .financial-periods {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  width: 100%;
}
.select-active-data-content > .user-data-list .li-user-data-list .financial-periods ul {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  height: 1.8rem;
  overflow: hidden;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0;
}
.select-active-data-content > .user-data-list .li-user-data-list .financial-periods ul::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.select-active-data-content > .user-data-list .li-user-data-list .financial-periods ul::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.select-active-data-content > .user-data-list .li-user-data-list .financial-periods ul li {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  min-width: 4rem;
  height: 100%;
  cursor: pointer;
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.select-active-data-content > .user-data-list .li-user-data-list .financial-periods ul li:hover {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}
.select-active-data-content > .user-data-list .li-user-data-list .financial-periods ul li:first-child {
  border-left: 1px dotted rgba(0, 0, 0, 0.2);
}
.select-active-data-content
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul
  li:not(:last-child):not(:first-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.select-active-data-content > .user-data-list .li-user-data-list .financial-periods ul li.insert-new-financial-period {
  min-width: 1.5rem;
  flex-grow: 0;
  background: #cc0000;
  color: rgba(0, 0, 0, 0.7);
}
.select-active-data-content > .user-data-list .li-user-data-list .financial-periods ul li:nth-child(1) {
  flex-grow: 0;
  padding: 0 5px;
  font-size: 12px;
  font-weight: bold;
  cursor: default;
  overflow: visible;
}
.select-active-data-content > .user-data-list .li-user-data-list .financial-periods ul li:nth-child(1):hover {
  box-shadow: none;
}
.select-active-data-content > .user-data-list .li-user-data-list .financial-periods ul li.active {
  border-bottom: 2px solid rgba(0, 132, 255, 0.5);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.select-active-data-content > .user-data-list .li-user-data-list .financial-periods ul li.wait-for-being-active {
  border-bottom: 1px solid #1089ff;
  box-shadow: inset 0 0 7px 0 #1089ff;
  color: #1089ff;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.select-active-data-content > .user-data-list .li-user-data-list .financial-periods ul > .insert-new {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  height: 100%;
  color: rgba(95, 196, 0, 0.7);
  font-size: 14px;
  border: 0;
  background: transparent;
}
.select-active-data-content > .user-data-list .li-user-data-list .financial-periods ul > .insert-new:hover {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  filter: brightness(1.2);
}
.select-active-data-content > .user-data-list .li-user-data-list .info {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  padding: 0 5px;
}
.select-active-data-content > .user-data-list .li-user-data-list .info > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: center;
  height: 100%;
  padding: 0.5rem 0;
  cursor: default;
}
.select-active-data-content > .user-data-list .li-user-data-list .info > div:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.select-active-data-content > .user-data-list .li-user-data-list .info > div > h5 {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  margin: 0;
  padding: 0 5px;
  font-size: 10px;
}
.select-active-data-content > .user-data-list .li-user-data-list .info > div > h5 > :nth-child(1) {
  margin-left: 5px;
}
.select-active-data-content > .user-data-list .li-user-data-list .info > div > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  padding: 1px 3px;
}
.select-active-data-content > .user-data-list .li-user-data-list .info > div.infinite > span {
  color: #cc0000;
  border: 1px solid #cc0000;
  border-radius: 2px;
}

.tooltip-filter-head {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: flex-start;
  justify-content: space-around;
  width: auto;
  padding: 10px 10px 0 10px;
  background: white;
}
.tooltip-filter-head:focus {
  outline: 0;
}
.tooltip-filter-head > div {
  width: 100%;
}
.tooltip-filter-head > .self-buttons-section {
  min-width: 12rem;
}
.tooltip-filter-head > .self-buttons-section > button {
  flex-basis: 4rem;
}
.tooltip-filter-head.string > .self-filter {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  margin: 5px 0;
}
.tooltip-filter-head.string > .self-filter > div {
  flex-wrap: nowrap;
}
.tooltip-filter-head.string > div {
  margin: 2px 0;
}
.tooltip-filter-head.string > div > label {
  min-width: 2rem;
  width: auto;
}
.tooltip-filter-head.number > .filter-voucher-searcher-popup-list {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: flex-start;
  width: 100%;
  max-width: 16rem;
  height: 4rem;
  max-height: 4rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 3px 3px;
  overflow: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
  scroll-snap-align: center;
}
.tooltip-filter-head.number > .filter-voucher-searcher-popup-list::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.tooltip-filter-head.number > .filter-voucher-searcher-popup-list::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.tooltip-filter-head.number > .filter-voucher-searcher-popup-list > li {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-between;
  flex-grow: 0;
  height: 1.2rem;
  min-height: 1.2rem;
  border-radius: 5px;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  padding-right: 5px;
  margin: 3px 2px;
  overflow: hidden;
  cursor: default;
}
.tooltip-filter-head.number > .filter-voucher-searcher-popup-list > li > button {
  position: relative;
  opacity: 0;
  width: 10px;
  margin-right: 10px;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
}
.tooltip-filter-head.number > .filter-voucher-searcher-popup-list > li > button:focus,
.tooltip-filter-head.number > .filter-voucher-searcher-popup-list > li > button:hover {
  outline: 0;
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.tooltip-filter-head.number > .filter-voucher-searcher-popup-list > li:hover {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
.tooltip-filter-head.number > .filter-voucher-searcher-popup-list > li:hover > button {
  opacity: 1;
  transition: 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
}
.tooltip-filter-head.number > .filter-voucher-searcher-popup-list > li.multi {
  animation: 0.17s myAnim cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes myAnim {
  100% {
    box-shadow:
      inset 0 0 20px 0 #1089ff,
      0 0 5px 0 rgba(0, 132, 255, 0.5);
  }
}
.tooltip-filter-head.number label {
  min-width: auto;
}
.tooltip-filter-head.number > .self-element {
  justify-content: center;
  flex-wrap: nowrap;
  overflow: hidden;
}
.tooltip-filter-head.number > .self-element > div {
  flex-wrap: nowrap;
  flex-grow: 0;
  margin: 0.5rem 0;
}
.tooltip-filter-head.number > .self-element > button {
  width: max-content;
  padding: 2px;
  overflow: inherit;
}
.tooltip-filter-head.number > .self-element.head-list {
  justify-content: space-around;
  padding: 0 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 0;
}
.tooltip-filter-head.number > .self-element.head-list > button {
  padding: 0 10px;
  border-radius: 5px;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
}
.tooltip-filter-head.number > .self-element.head-list > button:hover {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
.tooltip-filter-head.date > .self-filter {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  width: 100%;
  margin: 5px 0;
}
.tooltip-filter-head.date > .self-filter > div {
  flex-wrap: nowrap;
}
.tooltip-filter-head.date > .self-filter > div > label {
  min-width: 1.5rem;
  width: auto;
}
.tooltip-filter-head.date > div {
  margin: 2px 0;
}
.tooltip-filter-head.date > div > label {
  min-width: 4rem;
  width: auto;
}
.tooltip-filter-head > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.prfile-data {
  padding: 0 10rem;
  background: #eeeeee;
  overflow: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.prfile-data::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.prfile-data::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.prfile-data > .prfile-data-wraper {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  user-select: none;
}
.prfile-data > .prfile-data-wraper > .profile-data-header {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: stretch;
  align-items: flex-end;
  flex-grow: 0;
  height: 15rem;
  background-repeat: no-repeat;
  background-blend-mode: color;
  background-size: cover;
  padding: 1rem 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.prfile-data > .prfile-data-wraper > .profile-data-header > .profile-header-user-info {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
}
.prfile-data > .prfile-data-wraper > .profile-data-header > .profile-header-user-info > .user-profile-image {
  position: absolute;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  border: 5px solid white;
  box-shadow:
    inset 0 0 5px 0 rgba(0, 0, 0, 0.7),
    0 0 10px 0 rgba(0, 0, 0, 0.2);
  background-repeat: no-repeat;
  background-blend-mode: color;
  background-size: cover;
}
.prfile-data > .prfile-data-wraper > .profile-data-header > .profile-header-user-info > h5 {
  margin-right: 8rem;
  color: white;
  font-size: 16px;
  font-weight: bolder;
  cursor: default;
}
.prfile-data > .prfile-data-wraper > .profile-data-header > .profile-header-active-data-info {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: flex-end;
}
.prfile-data > .prfile-data-wraper > .profile-data-header > .profile-header-active-data-info > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-between;
  flex-grow: 0;
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 0;
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.prfile-data > .prfile-data-wraper > .profile-data-header > .profile-header-active-data-info > button:hover {
  color: #1089ff;
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.prfile-data > .prfile-data-wraper > .profile-data-header > .profile-header-active-data-info > button:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.prfile-data > .prfile-data-wraper > .prfile-data-body {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: flex-start;
}
.prfile-data > .prfile-data-wraper > .prfile-data-body > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
}
.prfile-data > .prfile-data-wraper > .prfile-data-body > div:last-child {
  flex-grow: 3;
  flex-shrink: 3;
  margin-right: 0.5rem;
}

.profile-edit {
  padding: 0 10rem;
  background: #eeeeee;
  overflow: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.profile-edit::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.profile-edit::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.profile-edit > .self-buttons-section {
  z-index: 0;
}
.profile-edit > div {
  background: white;
}

.self-profile-layout {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  background: white;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  margin: 0.3rem;
}
.self-profile-layout > section {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0.5rem 1rem;
}
.self-profile-layout > section > span {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1089ff;
  border-radius: 50%;
}
.self-profile-layout > section > h5 {
  font-size: 14px;
  margin: 0 0.5rem;
}
.self-profile-layout > .self-profile-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  padding: 0.5rem 1.5rem;
}
.self-profile-layout > .self-profile-content .row {
  justify-content: space-between;
}
.self-profile-layout > .self-profile-content label {
  font-size: 14px;
}
.self-profile-layout > .self-profile-content span {
  font-size: 12px;
}

.show-summery-of-rows {
  min-width: 20rem;
}
.show-summery-of-rows > table {
  position: relative;
  width: 100%;
}
.show-summery-of-rows > table > thead {
  position: relative;
  background: rgba(0, 132, 255, 0.5);
}
.show-summery-of-rows > table > thead > tr > th {
  padding: 5px;
  text-align: center;
  color: rgba(0, 0, 0, 0.7);
}
.show-summery-of-rows > table > thead > tr > th:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.show-summery-of-rows > table > tbody {
  position: relative;
}
.show-summery-of-rows > table > tbody > tr > td {
  padding: 5px;
  text-align: center;
}
.show-summery-of-rows > table > tbody > tr > td:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.show-summery-of-rows > table > tbody > tr:nth-child(even) {
  background: rgba(0, 132, 255, 0.1);
}

form.create-new-child-parent {
  display: flex;
  flex-direction: column;
  width: 23rem;
  height: auto !important;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
form.create-new-child-parent > .group {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
form.create-new-child-parent > .group:hover {
  box-shadow: none !important;
}
form.create-new-child-parent > .buttons-section-form > button {
  flex-basis: 6rem !important;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 4px !important;
}

form.edit-child-parent {
  display: flex;
  flex-direction: column;
  width: 23rem;
  height: auto !important;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
form.edit-child-parent > .group {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
form.edit-child-parent > .group:hover {
  box-shadow: none !important;
}
form.edit-child-parent > .buttons-section-form > button {
  flex-basis: 6rem !important;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 4px !important;
}

.spiner-back-drop {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  cursor: progress;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
  z-index: 10;
}

.spiner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  cursor: progress;
}
.spiner > .spin {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 4px solid black;
  border-radius: 50%;
}
.spiner > .spin > span {
  width: 0;
  height: 0;
  border-left: 2px dotted rgba(0, 76, 218, 0.5);
  border-radius: 50%;
  animation: MyAnimShadow 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.spiner.small > .spin {
  width: 20px;
  height: 20px;
  animation: MyAnimRotateSpin 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.spiner.normal > .spin {
  width: 40px;
  height: 40px;
  animation: MyAnimRotateSpin 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.spiner.large > .spin {
  width: 60px;
  height: 60px;
  animation: MyAnimRotateSpin 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
@keyframes MyAnimRotateSpin {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(720deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes MyAnimShadow {
  0% {
    width: 0;
    height: 0;
  }
  100% {
    width: 90%;
    height: 90%;
  }
}

.back-tab-loading {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  background: transparent;
}

.group-self-grid-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  font-size: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.group-self-grid-view > .group-head-self-grid-view {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: center;
  justify-content: center;
  flex-grow: 0;
  width: 100%;
}
.group-self-grid-view > .group-head-self-grid-view > div {
  padding: 2px 2px;
}
.group-self-grid-view > .group-head-self-grid-view > h3 {
  margin: 0.6rem 0;
  color: #1089ff;
}
.group-self-grid-view > .group-body-self-grid-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: center;
  width: 100%;
  max-height: calc(100vh - 13.7rem);
  padding: 5px;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.group-self-grid-view > .group-body-self-grid-view::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.group-self-grid-view > .group-body-self-grid-view::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.group-self-grid-view > .group-body-self-grid-view > table {
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid rgba(0, 0, 0, 0.7);
  overflow: hidden;
  user-select: none;
}
.group-self-grid-view > .group-body-self-grid-view > table > thead > tr {
  height: 3rem;
  border-bottom: 4px double rgba(0, 0, 0, 0.7);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent, #eeeeee);
}
.group-self-grid-view > .group-body-self-grid-view > table > thead > tr > th {
  font-weight: bold;
  text-align: center;
  height: 3rem;
  max-height: 100%;
  cursor: pointer;
}
.group-self-grid-view > .group-body-self-grid-view > table > thead > tr > th:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.7);
}
.group-self-grid-view > .group-body-self-grid-view > table > thead > tr > th:hover {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
.group-self-grid-view > .group-body-self-grid-view > table > thead > tr > th > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden;
}
.group-self-grid-view > .group-body-self-grid-view > table > thead > tr > th > div > .filter-table {
  visibility: hidden;
  align-items: flex-start;
  position: absolute;
  bottom: -1rem;
  right: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
}
.group-self-grid-view > .group-body-self-grid-view > table > thead > tr > th > div > .filter-table:focus,
.group-self-grid-view > .group-body-self-grid-view > table > thead > tr > th > div > .filter-table:hover {
  outline: 0;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  color: #1089ff;
  transition: 0.3s cubic-bezier(1, 0, 0, 1);
}
.group-self-grid-view > .group-body-self-grid-view > table > thead > tr > th > div > .filter-table.show {
  visibility: visible;
  bottom: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
}
.group-self-grid-view > .group-body-self-grid-view > table > thead > tr > th > div > .clear-filter-table {
  visibility: hidden;
  align-items: flex-start;
  position: absolute;
  top: -1rem;
  right: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
  color: #cc0000;
}
.group-self-grid-view > .group-body-self-grid-view > table > thead > tr > th > div > .clear-filter-table:focus,
.group-self-grid-view > .group-body-self-grid-view > table > thead > tr > th > div > .clear-filter-table:hover {
  outline: 0;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  transition: 0.3s cubic-bezier(1, 0, 0, 1);
}
.group-self-grid-view > .group-body-self-grid-view > table > thead > tr > th > div > .clear-filter-table.show {
  visibility: visible;
  top: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
}
.group-self-grid-view > .group-body-self-grid-view > table > tbody {
  width: 100%;
}
.group-self-grid-view > .group-body-self-grid-view > table > tbody > tr {
  height: 2.2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.group-self-grid-view > .group-body-self-grid-view > table > tbody > tr > td {
  text-align: center;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.group-self-grid-view > .group-body-self-grid-view > table > tbody > tr > th {
  text-align: center;
  background: #eeeeee;
  cursor: cell;
  border-left: 4px double rgba(0, 0, 0, 0.7);
}
.group-self-grid-view > .group-body-self-grid-view > table > tbody > tr > th:hover {
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.2);
}
.group-self-grid-view > .group-body-self-grid-view > table > tbody > tr.selected {
  border: 1px solid #1089ff;
  box-shadow: inset 0 0 25px #1089ff;
}
.group-self-grid-view > .group-body-self-grid-view > table > tbody > tr:nth-of-type(even) {
  background: #eeeeee;
}
.group-self-grid-view > .group-body-self-grid-view > table > tbody > tr:nth-of-type(odd) {
  background: white;
}
.group-self-grid-view > .group-body-self-grid-view > table > tfoot > tr {
  position: relative;
  height: 4rem;
  border-top: 4px double rgba(0, 0, 0, 0.7);
  border-bottom: 4px double rgba(0, 0, 0, 0.7);
}
.group-self-grid-view > .group-body-self-grid-view > table > tfoot > tr > th,
.group-self-grid-view > .group-body-self-grid-view > table > tfoot > tr > td {
  border: 1px solid rgba(0, 0, 0, 0.7);
  text-align: center;
}
.group-self-grid-view > .group-body-self-grid-view > table > colgroup > col.filtered {
  background: rgba(0, 132, 255, 0.5) !important;
}
.group-self-grid-view > .group-body-self-grid-view > table > colgroup .col-row-manage {
  width: 1.5rem;
}
.group-self-grid-view > .group-body-self-grid-view > table > colgroup .col-id {
  width: 4rem;
}
.group-self-grid-view > .group-pagination-self-grid-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  width: 100%;
  align-items: center;
  padding: 0 0;
}
.group-self-grid-view > .group-foot-self-grid-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  width: 100%;
  align-items: center;
  padding: 0 0;
}

.user-info-in-navbar {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  position: fixed;
  top: 2.5rem;
  right: 1rem;
  width: 12rem;
  background: #222831;
  border: 0;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: 0.5 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 150;
}
.user-info-in-navbar {
  font-family: Samim;
}
.user-info-in-navbar > .info-user {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
}
.user-info-in-navbar > .info-user > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 2rem;
  margin: 0;
  color: white;
  font-size: 12px;
}
.user-info-in-navbar > .info-user > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
}
.user-info-in-navbar > .info-user > div > :nth-child(1) {
  margin-left: 5px;
}
.user-info-in-navbar > .info-user > div > h4 {
  color: white;
}
.user-info-in-navbar > ul {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
}
.user-info-in-navbar > ul > li {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 10px;
  padding: 0 10px;
  cursor: pointer;
}
.user-info-in-navbar > ul > li:hover {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  border-color: white;
}
.user-info-in-navbar > ul > li:hover > span {
  padding-right: 10px;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.user-info-in-navbar > ul > li > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.user-info-in-navbar > ul > li > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  max-width: 1rem;
  height: 100%;
}
.user-info-in-navbar > li {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 2.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 12px;
  padding: 0 10px;
  cursor: pointer;
}
.user-info-in-navbar > li:hover {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
.user-info-in-navbar > li:hover > span {
  padding-right: 10px;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.user-info-in-navbar > li.disable {
  color: #e5e5e5;
  background: rgba(255, 255, 255, 0.2);
}
.user-info-in-navbar > li.disable > div {
  color: #e5e5e5;
}
.user-info-in-navbar > li > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.user-info-in-navbar > li > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  max-width: 1rem;
  height: 100%;
}

.layout-sidebar-start.Small {
  width: 2.8rem;
  min-width: 2.8rem;
  max-width: 2.8rem;
}
.layout-sidebar-start.Small > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li {
  align-items: flex-end;
}
.layout-sidebar-start.Small > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li > .enter-ul {
  position: absolute;
  display: flex;
  width: 1rem;
  height: 100%;
  margin-right: 0.7rem;
  z-index: 3;
}
.layout-sidebar-start.Small > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li > button {
  justify-content: center;
  min-height: 2.5rem;
  height: 2.5rem;
}
.layout-sidebar-start.Small > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li > button > .item-icon {
  font-size: 14px;
}
.layout-sidebar-start.Small > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li > button:hover {
  border: 0;
  border-bottom: 2px solid rgba(0, 132, 255, 0.5);
  transition: 0.3 cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.layout-sidebar-start.Small
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > button:hover
  > .item-icon {
  color: rgba(0, 132, 255, 0.5);
  transition: 0.5 cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.layout-sidebar-start.Small > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li > ul {
  position: fixed;
  right: 2.5rem;
  width: 11rem;
  max-height: 50vh;
  background: #e5e5e5;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  z-index: 2;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}
.layout-sidebar-start.Small
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > ul::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}
.layout-sidebar-start.Small
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > ul::-webkit-scrollbar-thumb {
  background: transparent;
}
.layout-sidebar-start.Small > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li > ul > li {
  position: relative;
  border: 0;
}
.layout-sidebar-start.Small
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > ul
  > li.selected-thired-item
  > button {
  background: linear-gradient(to right, rgba(0, 132, 255, 0.2), white 50%);
  border-bottom: 1px solid rgba(0, 132, 255, 0.5);
}
.layout-sidebar-start.Small
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > ul
  > li.selected-thired-item
  > ul {
  border-right: 3px solid rgba(0, 132, 255, 0.5);
}
.layout-sidebar-start.Small > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li > ul > li > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
  min-height: 2.2rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.layout-sidebar-start.Small
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > ul
  > li
  > button:focus {
  outline: 0;
}
.layout-sidebar-start.Small
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > ul
  > li
  > button:hover {
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 132, 255, 0.5);
  background: linear-gradient(to right, white 50%, rgba(0, 132, 255, 0.1));
}
.layout-sidebar-start.Small
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > ul
  > li
  > button:hover
  .item-span {
  padding-right: 10px;
  transition: 0.5s ease-in-out;
}
.layout-sidebar-start.Small
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > ul
  > li
  > button:hover
  span {
  color: rgba(0, 132, 255, 0.5);
}
.layout-sidebar-start.Small
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > ul
  > li
  > button
  > span {
  width: 2rem;
  height: 100%;
  font-size: 12px;
}
.layout-sidebar-start.Small
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > ul
  > li
  > button
  > .item-span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-between;
  height: 100%;
  padding-left: 5px;
  font-size: 12px;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.layout-sidebar-start.Small > .minimize-slidebar {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 3.5rem;
  max-height: 3.5rem;
}
.layout-sidebar-start.Small > .minimize-slidebar > button {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}
.layout-sidebar-start.Small > .minimize-slidebar > button:hover {
  cursor: pointer;
}
.layout-sidebar-start.Small > .minimize-slidebar > button:active,
.layout-sidebar-start.Small > .minimize-slidebar > button:focus {
  outline: 0;
}

.filter-item-search {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
}
.filter-item-search .filter-item-search-result {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
}
.filter-item-search .filter-item-search-result > li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 100%;
}
.filter-item-search .filter-item-search-result > li > ul {
  padding: 0;
  list-style-type: none;
}
.filter-item-search .filter-item-search-result > li button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 1.7rem;
  background: transparent;
  border: 0;
  padding-left: 5px;
  transition: 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}
.filter-item-search .filter-item-search-result > li button:active,
.filter-item-search .filter-item-search-result > li button:focus {
  outline: none;
  border: none;
}
.filter-item-search .filter-item-search-result > li button:hover {
  border-right: 6px solid rgba(0, 132, 255, 0.5);
  background: linear-gradient(to right, rgba(0, 132, 255, 0.5), transparent, white);
}
.filter-item-search .filter-item-search-result > li button:hover > .item-icon {
  transform: scale(1.2) rotate(5deg);
  transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}
.filter-item-search .filter-item-search-result > li button:hover > .item-span span {
  padding-right: 0.5rem;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.filter-item-search .filter-item-search-result > li button > .item-icon {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  list-style-type: none;
  flex-grow: 0;
  width: 2rem;
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.filter-item-search .filter-item-search-result > li button > .opacity-display-show {
  display: flex;
  flex-grow: 1;
}
.filter-item-search .filter-item-search-result > li button > .opacity-display-show > .item-span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-between;
}
.filter-item-search .filter-item-search-result > li button > .opacity-display-show > .item-span span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  font-size: 10px;
  font-weight: bold;
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.filter-item-search .filter-item-search-result > li button > .item-span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-between;
}
.filter-item-search .filter-item-search-result > li button > .item-span span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  font-size: 10px;
  font-weight: bold;
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.filter-item-search .filter-item-search-result > li > .ul-head-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  width: 100%;
  padding: 0;
}
.filter-item-search .filter-item-search-result > li > .ul-head-item > li {
  width: 100%;
}
.filter-item-search .filter-item-search-result > li > .ul-head-item > li.selected-item {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  border-right: 0.5rem solid rgba(0, 102, 255, 0.03);
  background: linear-gradient(to right, white, rgba(8, 136, 228, 0.274));
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.filter-item-search .filter-item-search-result > li > .ul-head-item > li > button {
  padding: 0 15px;
  width: 100%;
}
.filter-item-search .filter-item-search-result > li > .ul-head-item > li > .ul-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  padding: 0;
}
.filter-item-search .filter-item-search-result > li > .ul-head-item > li > .ul-item > li {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
}
.filter-item-search .filter-item-search-result > li > .ul-head-item > li > .ul-item > li.selected-item {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  border-right: 0.5rem solid rgba(0, 102, 255, 0.03);
  background: linear-gradient(to right, rgba(8, 136, 228, 0.274), white);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.filter-item-search .filter-item-search-result > li > .ul-head-item > li > .ul-item > li > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  min-height: 1.7rem;
  height: auto;
  font-size: 10px;
}
.filter-item-search .span-filter {
  color: #222831;
  font-weight: bold;
  margin-left: 3px;
}
.filter-item-search .span-before_after {
  color: rgba(0, 0, 0, 0.7);
  margin-left: 3px;
}
.filter-item-search .button-filter-search {
  color: rgba(0, 0, 0, 0.7);
  margin-left: 3px;
}

.layout-sidebar-start.Small .layout-sidebar-start-main-item > ul > li > ul > li > ul {
  padding: 0;
  width: 100%;
}
.layout-sidebar-start.Small .layout-sidebar-start-main-item > ul > li > ul > li > ul > li > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 100%;
  min-height: 2rem;
  background: #e5e5e5;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.layout-sidebar-start.Small .layout-sidebar-start-main-item > ul > li > ul > li > ul > li > button:hover {
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 132, 255, 0.5);
}
.layout-sidebar-start.Small .layout-sidebar-start-main-item > ul > li > ul > li > ul > li > button:hover > span {
  color: rgba(0, 132, 255, 0.5);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.layout-sidebar-start.Small .layout-sidebar-start-main-item > ul > li > ul > li > ul > li > button > span {
  font-size: 10px;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.layout-sidebar-start {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  height: 100%;
  width: 13rem;
  min-width: 12.9rem;
  max-width: 13.1rem;
  background: #e5e5e5;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
  transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  border-top-left-radius: 1rem;
  border-botton-left-radius: 0;
  user-select: none;
  z-index: 5;
}
.layout-sidebar-start.z-index {
  z-index: inherit;
}
.layout-sidebar-start > .layout-sidebar-start-main-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  overflow: hidden;
}
.layout-sidebar-start > .layout-sidebar-start-main-item > .layout-sidebar-start-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}
.layout-sidebar-start > .layout-sidebar-start-main-item > .layout-sidebar-start-item::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}
.layout-sidebar-start > .layout-sidebar-start-main-item > .layout-sidebar-start-item::-webkit-scrollbar-thumb {
  background: transparent;
}
.layout-sidebar-start > .layout-sidebar-start-main-item > .layout-sidebar-start-item span {
  font-family: Samim;
  letter-spacing: 0.8px;
}
.layout-sidebar-start > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 100%;
  max-width: 100%;
  cursor: pointer;
}
.layout-sidebar-start > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li > ul {
  background: #f7f7f7;
}
.layout-sidebar-start > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li.selected-item {
  border-bottom: 1px solid rgba(0, 132, 255, 0.5);
}
.layout-sidebar-start > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li.selected-item > button {
  background: rgba(0, 132, 255, 0.5);
  color: white;
}
.layout-sidebar-start > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li.selected-item > button:hover {
  color: rgba(0, 132, 255, 0.5);
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li.selected-item
  > button
  .item-span
  span {
  margin-right: 10px;
  transition: 0.5s ease-in-out;
}
.layout-sidebar-start > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  height: 2rem;
  min-height: 2rem;
  max-height: 2.2rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}
.layout-sidebar-start > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li > button:hover {
  cursor: pointer;
  background: linear-gradient(to right, rgba(0, 132, 255, 0.05), white);
  border-right: 4px solid rgba(0, 132, 255, 0.5);
  border-bottom: 1px solid rgba(0, 132, 255, 0.5);
}
.layout-sidebar-start > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li > button:hover > span {
  color: rgba(0, 132, 255, 0.5);
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > button:hover
  .item-span
  > span {
  margin-right: 15px;
  transition: 0.5s ease-in-out;
}
.layout-sidebar-start > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li > button > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 2rem;
  height: 100%;
  font-size: 16px;
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > button
  > .opacity-display-hide {
  visibility: hidden;
  opacity: 0;
  transition: 0.02s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > button
  > .opacity-display-show {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  height: 100%;
  visibility: visible;
  opacity: 1;
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > button
  > .opacity-display-show
  > .item-span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding-left: 5px;
  font-size: 11px;
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > button
  > .opacity-display-show
  > .item-span
  > span {
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.layout-sidebar-start > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li > .ul-head-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  list-style: none;
  padding: 0;
  border-right: 8px solid rgba(0, 132, 255, 0.5);
}
.layout-sidebar-start > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li > .ul-head-item > li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  max-width: 100%;
}
.layout-sidebar-start > .layout-sidebar-start-main-item > .layout-sidebar-start-item > li > .ul-head-item > li > ul {
  background: #f1f4ff;
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li.selected-item-second {
  border-right: 4px solid rgba(0, 132, 255, 0.5);
  border-bottom: 1px solid rgba(0, 132, 255, 0.5);
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li.selected-item-second
  > button {
  background: rgba(0, 132, 255, 0.5);
  color: white;
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li.selected-item-second
  > button:hover {
  color: rgba(0, 132, 255, 0.5);
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li.selected-item-second
  > button
  .item-span
  span {
  margin-right: 10px;
  transition: 0.5s ease-in-out;
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li
  > button {
  position: relative;
  width: 100%;
  height: 2rem;
  min-height: 2rem;
  max-height: 2.2rem;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  padding-right: 10px;
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li
  > button:hover {
  cursor: pointer;
  background: linear-gradient(to right, rgba(0, 132, 255, 0.05), white);
  border-right: 4px solid rgba(0, 132, 255, 0.5);
  border-bottom: 1px solid rgba(0, 132, 255, 0.5);
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li
  > button:hover
  > span {
  color: rgba(0, 132, 255, 0.5);
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li
  > button:hover
  .item-span
  > span {
  margin-right: 15px;
  transition: 0.5s ease-in-out;
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li
  > button
  > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 2rem;
  height: 100%;
  font-size: 14px;
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li
  > button
  > .item-span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding-left: 15px;
  font-size: 11px;
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li
  > button
  > .item-span
  > span {
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li
  > .ul-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  list-style: none;
  padding: 0;
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li
  > .ul-item
  > li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  max-width: 100%;
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li
  > .ul-item
  > li.selected-item {
  border-right: 4px solid rgba(0, 132, 255, 0.5);
  border-bottom: 1px solid rgba(0, 132, 255, 0.5);
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li
  > .ul-item
  > li.selected-item
  > button
  span {
  margin-right: 10px;
  transition: 0.5s ease-in-out;
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li
  > .ul-item
  > li
  > button {
  position: relative;
  width: 100%;
  height: 2rem;
  min-height: 2rem;
  max-height: 2.2rem;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li
  > .ul-item
  > li
  > button:hover {
  border-right: 4px solid rgba(0, 132, 255, 0.5);
  border-bottom: 1px solid rgba(0, 132, 255, 0.5);
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li
  > .ul-item
  > li
  > button:hover
  > span {
  transition: 0.5s ease-in-out;
}
.layout-sidebar-start
  > .layout-sidebar-start-main-item
  > .layout-sidebar-start-item
  > li
  > .ul-head-item
  > li
  > .ul-item
  > li
  > button
  > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 11px;
}
.layout-sidebar-start > .opacity-display-hide-footer {
  visibility: hidden;
  opacity: 0;
  transition: 0.02s ease-in-out;
}
.layout-sidebar-start > .opacity-display-show-footer {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 3.5rem;
  max-height: 3.5rem;
  visibility: visible;
  opacity: 1;
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}
.layout-sidebar-start > .opacity-display-show-footer > .minimize-slidebar {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 100%;
}
.layout-sidebar-start > .opacity-display-show-footer > .minimize-slidebar > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.03);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.layout-sidebar-start > .opacity-display-show-footer > .minimize-slidebar > button:hover > div {
  text-shadow: 1px solid rgba(0, 0, 0, 0.5);
}
.layout-sidebar-start > .opacity-display-show-footer > .minimize-slidebar > button:hover > div .animat1 {
  animation: animait 3s infinite 1.5s;
}
.layout-sidebar-start > .opacity-display-show-footer > .minimize-slidebar > button:hover > div .animat2 {
  animation: animait 3s infinite 1.4s;
}
.layout-sidebar-start > .opacity-display-show-footer > .minimize-slidebar > button:hover > div .animat3 {
  animation: animait 3s infinite 1.3s;
}
.layout-sidebar-start > .opacity-display-show-footer > .minimize-slidebar > button:hover > div .animat4 {
  animation: animait 3s infinite 1.2s;
}
.layout-sidebar-start > .opacity-display-show-footer > .minimize-slidebar > button:hover > div .animat5 {
  animation: animait 3s infinite 1.1s;
}
.layout-sidebar-start > .opacity-display-show-footer > .minimize-slidebar > button:hover > div .animat6 {
  animation: animait 3s infinite 1s;
}
@keyframes animait {
  0% {
    color: rgba(0, 102, 255, 0.788);
  }
  100% {
    color: rgba(8, 136, 228, 0.082);
  }
}
.layout-sidebar-start > .opacity-display-show-footer > .minimize-slidebar > button > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  color: rgba(0, 81, 255, 0.05);
}

.search-top-sidebar-start {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  justify-content: space-evenly;
  height: 5rem;
  min-height: 4.9rem;
  max-height: 5.1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  user-select: none;
}
.search-top-sidebar-start > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  height: 100%;
}
.search-top-sidebar-start > .opacity-display-hide {
  opacity: 0;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.search-top-sidebar-start > .opacity-display-show {
  opacity: 1;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.7s;
}
.search-top-sidebar-start > .contents-sidebar-start {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  height: 100%;
  transition: 0.01s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.search-top-sidebar-start > .contents-sidebar-start > button {
  background: transparent;
  color: rgba(0, 0, 0, 0.7);
  border: 0;
  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.search-top-sidebar-start > .contents-sidebar-start > button:hover,
.search-top-sidebar-start > .contents-sidebar-start > button:focus {
  outline: 0;
  transform: scale(1.2);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}
.search-top-sidebar-start > :nth-child(2) > .serach-and-filter-menu-items {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
}
.search-top-sidebar-start > :nth-child(2) > .serach-and-filter-menu-items > input {
  font-family: Samim;
  height: 2rem;
  width: 5rem;
  border: 2px double rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.search-top-sidebar-start > :nth-child(2) > .serach-and-filter-menu-items > input::selection {
  user-select: none;
}
.search-top-sidebar-start > :nth-child(2) > .serach-and-filter-menu-items > input:focus {
  border: 2px solid black;
  border-radius: 10px;
  outline: 0;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.search-top-sidebar-start > :nth-child(3) > .restart-sidebar-start {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.search-top-sidebar-start > :nth-child(3) > .restart-sidebar-start:hover {
  transform: rotate(180deg) scale(1.2);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.search-top-sidebar-start .menu-select-contents {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  position: fixed;
  top: 7.1rem;
  right: 2px;
  width: 19rem;
  height: 27rem;
  border: 1px solid black;
  border-radius: 7px;
  background: #222831;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  z-index: 150;
}
.search-top-sidebar-start .menu-select-contents::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  right: 1rem;
  width: 15px;
  height: 15px;
  border: 1px solid black;
  background: #222831;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  transform: rotate(45deg);
  z-index: -1;
}
.search-top-sidebar-start .menu-select-contents > .menu-select-contentts-title {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  justify-content: space-around;
  width: 100%;
  height: 3.5rem;
  min-height: 3.4rem;
  max-height: 3.6rem;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: 1px solid black;
  background: #222831;
  padding: 0 15px;
}
.search-top-sidebar-start .menu-select-contents > .menu-select-contentts-title > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  color: white;
  height: 100%;
}
.search-top-sidebar-start .menu-select-contents > .menu-select-contentts-title > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  justify-content: space-around;
  flex-grow: 0;
  width: 5rem;
  border: 1px solid #eeeeee;
  border-radius: 15px;
  background: transparent;
  color: white;
  padding: 8px;
  cursor: pointer;
}
.search-top-sidebar-start .menu-select-contents > .menu-select-contentts-title > button:hover,
.search-top-sidebar-start .menu-select-contents > .menu-select-contentts-title > button:focus {
  border: 1px solid white;
  box-shadow:
    2px 2px 2px 1px rgba(0, 0, 0, 0.3),
    2px 2px 2px 2px rgba(0, 0, 0, 0.2),
    2px 2px 2px 3px rgba(0, 0, 0, 0.1);
  outline: 0;
}
.search-top-sidebar-start .menu-select-contents > .menu-select-contents-items {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  background: #222831;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 10px;
}
.search-top-sidebar-start .menu-select-contents > .menu-select-contents-items > button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: Samim;
  font-size: 12px;
  width: 4rem;
  height: 5.5rem;
  background: transparent;
  color: white;
  border: 0;
  padding: 10px 0;
  border-radius: 15px;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}
.search-top-sidebar-start .menu-select-contents > .menu-select-contents-items > button:focus {
  outline: 0;
}
.search-top-sidebar-start .menu-select-contents > .menu-select-contents-items > button:hover {
  background: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  color: #222831;
  outline: 0;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.search-top-sidebar-start .menu-select-contents > .menu-select-contents-items > button:hover > svg {
  animation: 1s MyAnimation infinite 5s;
}
.search-top-sidebar-start
  .menu-select-contents
  > .menu-select-contents-items
  > button
  > .show-system-active-check-icon {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  position: absolute;
  top: -5px;
  right: 0;
  height: 0.5px !important;
  max-height: 0.5px;
  color: green;
}
.search-top-sidebar-start .menu-select-contents > .menu-select-contents-items > button > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 1rem;
  line-height: 17px;
  padding: 5px;
}
.search-top-sidebar-start .menu-select-contents > .menu-select-contents-items .selected-ittem {
  background: #eeeeee;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
  outline: 0;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.search-top-sidebar-start .menu-select-contents > .menu-select-contents-items .selected-ittem > svg {
  animation: 1s MyAnimation infinite 5s;
}

.self-task-switcher-wraper {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -5rem);
  backdrop-filter: blur(5px);
}
.self-task-switcher-wraper > .self-task-switcher {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  width: 100%;
  padding: 1rem 3rem;
  user-select: none;
}
.self-task-switcher-wraper > .self-task-switcher:focus {
  outline: 0;
}
.self-task-switcher-wraper > .self-task-switcher > .info-active-tab {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  justify-content: space-between;
  flex-grow: 0;
  width: 100%;
  height: 5rem;
  font-size: 16px;
  padding: 0 0.5rem;
}
.self-task-switcher-wraper > .self-task-switcher > .main-task-switcher {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: center;
  flex-grow: 0;
  width: 100%;
  height: 60vh;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 0 1rem;
  padding-top: 0.5rem;
  overflow: hidden;
}
.self-task-switcher-wraper > .self-task-switcher > .main-task-switcher > span {
  color: rgba(0, 110, 255, 0.8);
  font-size: 12px;
  font-family: Samim;
  margin-bottom: 7px;
}
.self-task-switcher-wraper > .self-task-switcher > .main-task-switcher > .main-task-switcher-tabs {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  width: 100%;
  padding: 0.5rem;
}
.self-task-switcher-wraper > .self-task-switcher > .main-task-switcher > .main-task-switcher-tabs > .tabs-preview {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-basis: 50%;
  background: rgba(0, 0, 0, 0.2);
}
.self-task-switcher-wraper > .self-task-switcher > .main-task-switcher > .main-task-switcher-tabs > ul {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: flex-start;
  flex-basis: 50%;
  list-style-type: none;
  line-height: 1.7rem;
  margin: 0;
}
.self-task-switcher-wraper > .self-task-switcher > .main-task-switcher > .main-task-switcher-tabs > ul > li {
  display: flex;
  flex-direction: column;
  flex-basis: 45%;
  font-size: 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0 0.5rem;
  margin: 0.2rem 0.3rem;
  font-family: Samim;
  cursor: pointer;
}
.self-task-switcher-wraper
  > .self-task-switcher
  > .main-task-switcher
  > .main-task-switcher-tabs
  > ul
  > li
  > .tab-switch-info {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-between;
  flex-grow: 0;
}
.self-task-switcher-wraper
  > .self-task-switcher
  > .main-task-switcher
  > .main-task-switcher-tabs
  > ul
  > li
  > .tab-switch-info
  > button {
  position: relative;
  width: 1rem;
  background: transparent;
  box-shadow: 0;
  border: none;
  opacity: 0;
  transition: 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.self-task-switcher-wraper
  > .self-task-switcher
  > .main-task-switcher
  > .main-task-switcher-tabs
  > ul
  > li.li-focus-tab {
  border-radius: 5px;
  box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.self-task-switcher-wraper
  > .self-task-switcher
  > .main-task-switcher
  > .main-task-switcher-tabs
  > ul
  > li:hover
  > .tab-switch-info
  > button {
  opacity: 1;
  transition: 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.self-task-switcher-wraper > .self-task-switcher > .footer-info-tab {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 3.5rem;
  padding-right: 15px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 14px;
  font-family: Samim;
}
.self-task-switcher-wraper > .recetly-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: center;
  flex-grow: 0;
  width: 100%;
  height: 8rem;
  padding: 1rem 3rem;
}
.self-task-switcher-wraper > .recetly-tab > span {
  color: rgba(0, 110, 255, 0.8);
  font-size: 16px;
  font-family: Samim;
  margin-bottom: 5px;
}
.self-task-switcher-wraper > .recetly-tab > ul {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.backdrop-login-page {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  font-size: 12px;
  background-repeat: "no-repeat";
  background-size: 120% 120%;
  transition: 2s ease-in-out;
  animation: AnimationBG 170s cubic-bezier(0.175, 0.385, 0.32, 1.275) infinite 10ms;
  overflow: hidden;
}
@media screen and (max-width: 700px) {
  .backdrop-login-page {
    font-size: 10px;
  }
}
.backdrop-login-page > .login-page-wraper {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.backdrop-login-page > .login-page-wraper::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.backdrop-login-page > .login-page-wraper::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.backdrop-login-page > .login-page-wraper > .navbar-info-login {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-between;
  align-items: flex-start;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 3rem;
  height: 2.5rem;
  backdrop-filter: blur(20px);
  background: linear-gradient(to right, rgb(0, 21, 48) 20%, transparent 50%, rgb(0, 21, 48) 80%);
  backdrop-filter: blur(5px);
  padding: 0 15px;
  z-index: 101;
}
@media screen and (max-width: 600px) {
  .backdrop-login-page > .login-page-wraper > .navbar-info-login {
    bottom: auto;
    top: 0;
  }
}
.backdrop-login-page > .login-page-wraper > .navbar-info-login > .menu-button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  flex-grow: 0;
  width: 2rem;
  height: 100%;
  font-size: 18px;
  background: transparent;
  border: 0;
  color: white;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.backdrop-login-page > .login-page-wraper > .navbar-info-login > .menu-button:focus,
.backdrop-login-page > .login-page-wraper > .navbar-info-login > .menu-button:hover {
  outline: 0;
  transform: scale(1.1);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.backdrop-login-page > .login-page-wraper > .navbar-info-login > div:not(.self-back-drop) {
  height: 100%;
}
.backdrop-login-page > .login-page-wraper > .navbar-info-login > .language-navbar-info-login {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
}
.backdrop-login-page > .login-page-wraper > .navbar-info-login > .language-navbar-info-login > button {
  background: transparent;
  border: 0;
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  height: 100%;
  color: white;
  padding: 0.5rem 0.5rem;
}
.backdrop-login-page > .login-page-wraper > .navbar-info-login > .info-navbar-info-login {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: flex-end;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.backdrop-login-page > .login-page-wraper > .navbar-info-login > .info-navbar-info-login.absolute {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  position: fixed;
  top: 0;
  left: -100%;
  height: 100vh;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.7);
  padding: 3rem 0;
  z-index: 200;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
  visibility: hidden;
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.backdrop-login-page > .login-page-wraper > .navbar-info-login > .info-navbar-info-login.absolute::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.backdrop-login-page
  > .login-page-wraper
  > .navbar-info-login
  > .info-navbar-info-login.absolute::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.backdrop-login-page > .login-page-wraper > .navbar-info-login > .info-navbar-info-login.absolute.show {
  left: 0;
  visibility: visible;
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.backdrop-login-page > .login-page-wraper > .navbar-info-login > .info-navbar-info-login.absolute > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 100%;
  height: 3rem;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.backdrop-login-page > .login-page-wraper > .navbar-info-login > .info-navbar-info-login.absolute > button::after {
  top: auto;
  bottom: 0;
}
.backdrop-login-page > .login-page-wraper > .navbar-info-login > .info-navbar-info-login > button {
  position: relative;
  background: transparent;
  border: 0;
  height: 100%;
  padding: 0 15px;
  color: white;
  cursor: pointer;
  overflow: hidden;
}
.backdrop-login-page > .login-page-wraper > .navbar-info-login > .info-navbar-info-login > button::after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 2px;
  top: 0;
  left: 0;
  background: white;
  transition: 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.backdrop-login-page > .login-page-wraper > .navbar-info-login > .info-navbar-info-login > button:hover::after {
  width: 100%;
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.backdrop-login-page > .login-page-wraper {
  font-family: Samim;
  user-select: none;
}
.backdrop-login-page > .login-page-wraper .use-have-an-account {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-around;
  flex-grow: 0;
  width: 23rem;
  margin-top: 10px;
  border-radius: 5px;
  padding: 1rem 1.7rem;
  border: 1px solid rgba(0, 0, 0, 0.7);
  background: rgba(253, 253, 253, 0.6);
  backdrop-filter: blur(3px);
  overflow: hidden;
}
@media screen and (max-width: 700px) {
  .backdrop-login-page > .login-page-wraper .use-have-an-account {
    max-width: 22rem;
    width: auto;
  }
  .backdrop-login-page > .login-page-wraper .use-have-an-account > span {
    font-size: 10px !important;
  }
  .backdrop-login-page > .login-page-wraper .use-have-an-account > button {
    font-size: 10px !important;
  }
}
.backdrop-login-page > .login-page-wraper .use-have-an-account > span {
  font-size: 16px;
}
.backdrop-login-page > .login-page-wraper .use-have-an-account > button {
  outline: 0;
  color: rgb(0, 100, 231);
  background: transparent;
  border: 0;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  margin-right: 10px;
}
.backdrop-login-page > .login-page-wraper .get-the-app {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-around;
  width: 25rem;
  flex-grow: 0;
  align-items: center;
  padding: 1rem 1rem;
  margin: 40px 0;
  padding: 15px;
}
@media screen and (max-width: 700px) {
  .backdrop-login-page > .login-page-wraper .get-the-app {
    margin-top: 20px;
  }
  .backdrop-login-page > .login-page-wraper .get-the-app > .get-the-app-link > button {
    transform: scale(0.75);
  }
}
.backdrop-login-page > .login-page-wraper .get-the-app > span {
  font-weight: bold;
  font-size: 14px;
  color: black;
}
.backdrop-login-page > .login-page-wraper .get-the-app > .get-the-app-link {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  justify-content: space-around;
  width: 100%;
  height: 5rem;
}
.backdrop-login-page > .login-page-wraper .get-the-app > .get-the-app-link > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-direction: row-reverse;
  flex-grow: 0;
  padding: 0.5rem 0.5rem;
  outline: 0;
  background: black;
  color: white;
  border-radius: 10px;
  padding: 10px;
  border: 0;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.backdrop-login-page > .login-page-wraper .get-the-app > .get-the-app-link > button:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
  transform: translate(0, -5px);
  transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.backdrop-login-page > .login-page-wraper .get-the-app > .get-the-app-link > button > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  margin-left: 7px;
  align-items: center;
  justify-content: space-between;
  letter-spacing: 0.5px;
  height: 1.7rem;
}
.backdrop-login-page > .login-page-wraper .get-the-app > .get-the-app-link > button > div > :nth-child(2) {
  font-size: 14px;
  font-weight: lighter;
}
.backdrop-login-page > .login-page-wraper .get-the-app > .get-the-app-link > button > img {
  width: 25px;
  height: 25px;
}
@keyframes AnimationBG {
  0% {
    background-position: 0% 62%;
  }
  50% {
    background-position: 100% 39%;
  }
  100% {
    background-position: 0% 62%;
  }
}
.backdrop-login-page .button-group {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-around;
  height: 80%;
  color: white;
}
.backdrop-login-page .button-group {
  font-family: Samim;
  user-select: none;
}
.backdrop-login-page .button-group > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  height: 100%;
  background: rgb(0, 24, 56);
  border: 0;
  cursor: pointer;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  margin-left: 5px;
  padding: 0 5px;
  overflow: hidden;
  z-index: 5;
}
.backdrop-login-page .button-group > button:hover {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
  outline: 4px double rgba(28, 135, 201, 0.3843137255);
}
.backdrop-login-page .button-group > button:hover::after {
  left: 105%;
  transition: 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.backdrop-login-page .button-group > button:focus {
  outline: 2px inset rgba(28, 135, 201, 0.3843137255);
}
.backdrop-login-page .button-group > button > span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-weight: bold;
  font-size: 12px;
  color: white;
}
.backdrop-login-page .button-group > .element-button-group {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-size: 10px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translate(30px, 0px);
}
.backdrop-login-page .button-group > .element-button-group::after {
  content: "";
  width: 110%;
  height: 110%;
  position: absolute;
  background: rgb(0, 24, 56);
  z-index: 2;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.backdrop-login-page .button-group > .element-button-group.show {
  opacity: 1;
  visibility: visible;
  transition: 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translate(0, 0);
}
.backdrop-login-page .button-group > .element-button-group.show::after {
  content: "";
  width: 0;
  height: 110%;
  position: absolute;
  background: rgb(0, 24, 56);
  z-index: 2;
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.backdrop-login-page .button-group > .element-button-group > button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-around;
  align-items: center;
  width: 2rem;
  color: white;
  border: 0;
  background: transparent;
  font-weight: bold;
  cursor: pointer;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.backdrop-login-page .button-group > .element-button-group > button:focus {
  outline: 0;
}
.backdrop-login-page .button-group > .element-button-group > button.active {
  background: rgba(255, 255, 255, 0.4);
}
.backdrop-login-page .button-group > .element-button-group > button > img {
  width: 15px;
  height: 15px;
  border-radius: 50px;
}

.self-element.image-piker {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: auto;
  padding: 20px;
}
.self-element.image-piker > .image {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.7);
  margin-left: 20px;
}
.self-element.image-piker > .image > img {
  width: 100%;
  height: 100%;
}
.self-element.image-piker > .choose-flie {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
}
.self-element.image-piker > .choose-flie > input {
  margin-bottom: 10px;
}
.self-element.image-piker > .choose-flie > hr {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  height: 2px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.self-element.image-piker > .choose-flie > button {
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.self-element.user-name > input {
  flex-grow: 0;
  width: 14rem;
  margin-left: 10px;
}
.self-element.password > input {
  flex-grow: 0;
  width: 14rem;
  margin-left: 10px;
}
.self-element.password.red > input {
  border: 2px solid red;
}
.self-element.password.yellow > input {
  border: 2px solid yellow;
}
.self-element.password.orange > input {
  border: 2px solid orange;
}
.self-element.password.lightgreen > input {
  border: 2px solid lightgreen;
}
.self-element.password.green > input {
  border: 2px solid green;
}
.self-element.repeat-password > input {
  flex-grow: 0;
  width: 14rem;
  margin-left: 10px;
}
.self-element.repeat-password.red > input {
  border: 2px solid red;
}

.captcha-sign-up {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  width: 100%;
  justify-content: center;
}
.captcha-sign-up > img {
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.captcha-sign-up > button {
  height: 100%;
  font-size: 18px;
  padding: 0 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.captcha-sign-up > button:hover {
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.3);
}

.app-info-in-head-usering-page {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-between;
  padding: 15px;
  width: 100%;
  max-height: 6rem;
  backdrop-filter: blur(55px);
  background: linear-gradient(to right, rgb(0, 24, 56), rgba(0, 21, 48, 0.6));
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  user-select: none;
}
@media screen and (max-width: 700px) {
  .app-info-in-head-usering-page > .logo-app > img {
    transform: scale(0.75);
  }
}
.app-info-in-head-usering-page > .logo-app {
  height: 100%;
  width: 4rem;
  cursor: pointer;
  margin-right: 10px;
}
.app-info-in-head-usering-page > .logo-app > img {
  position: relative;
  width: 100%;
  height: 100%;
  filter: contrast(0) brightness(2.4);
}
.app-info-in-head-usering-page > .info-app {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  justify-content: center;
  height: 100%;
  color: white;
  cursor: default;
}

fieldset.login {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  justify-content: center;
  align-items: center;
  min-width: 25rem;
  margin-top: 10vh;
  border-radius: 10px;
  padding: 3rem 1rem;
  width: auto;
  height: auto;
}
@media screen and (max-width: 700px) {
  fieldset.login {
    min-width: auto;
    width: 20rem;
    padding: 3rem 2rem;
  }
}
fieldset.login > .form-wait-sign-up-page > .form-recive > label {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  flex-grow: 0;
  width: 100%;
  height: 2.5rem;
  font-size: 14px;
}
fieldset.login > .form-sign-up-page > .mobile-register {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: center;
  padding: 0.5rem 1rem;
}
fieldset.login > .form-sign-up-page > .mobile-register > h3 {
  color: #1089ff;
}
fieldset.login > .form-sign-up-page > .form-recive > label {
  font-size: 14px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 0.5rem 0.5rem;
}
fieldset.login > .form-sign-up-page > .form-recive > div {
  margin: 0.3rem 0;
}
fieldset.login > .form-sign-up-page > .form-recive > div input.default-element.rtl {
  text-align: start;
}
fieldset.login > .form-sign-up-page > .form-recive > div.row {
  width: 100%;
}
fieldset.login > .form-sign-up-page > .form-recive > div.row input {
  margin: 0;
}
fieldset.login > .form-sign-up-page > .form-recive > div > div {
  margin: 0;
}
fieldset.login > .form-sign-up-page > .form-recive > div > div input::placeholder {
  text-align: start;
}

.group-main-menu-bar-workflow {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  width: 100%;
  font-size: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  flex-grow: 0;
  height: 4rem;
}
.group-main-menu-bar-workflow > fieldset {
  overflow: hidden;
}
.group-main-menu-bar-workflow > fieldset > form {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
}
.group-main-menu-bar-workflow .group-head-main-menu-bar-workflow-status-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  max-width: 100%;
  height: 2rem;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons .vr {
  position: relative;
  height: 100%;
  min-height: 28px;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  margin: 0;
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  margin: 0 0.3rem;
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div:hover .menu-bar-workflow-menu-popup {
  visibility: visible;
  opacity: 1;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div > :first-child {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: transparent;
  height: 2rem;
  border-radius: 5px;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div > :first-child:hover,
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div > :first-child:focus {
  transform: scale(1.3);
  z-index: 5;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .menu-bar-workflow-menu-popup {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  background: white;
  transform: translate(0, 100%);
  box-shadow:
    0 0 10px 0 rgba(0, 0, 0, 0.2),
    0 0 12px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 5px;
  z-index: 500;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .menu-bar-workflow-menu-popup::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  border-bottom: 5px solid white;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transform: translate(-50%, 0);
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .back-drop {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.05);
  z-index: 4;
  backdrop-filter: blur(0.5px);
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .tooltip {
  position: fixed;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: column;
  flex-wrap: nowrap;
  background: white;
  margin: 0.2rem 0;
  transform: translate(-0.7rem, 70%);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  z-index: 6;
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .tooltip::before {
  content: "";
  position: fixed;
  top: -6px;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 7px solid transparent;
  border-bottom: 7px solid white;
  border-left: 7px solid transparent;
  transform: translate(-50%, 0);
  z-index: 2;
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .tooltip > div {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  background: transparent;
  transition: 0.02s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1;
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .tooltip > div > button {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-grow: 1;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  padding: 0.3rem 0.5rem;
  color: rgba(0, 0, 0, 0.7);
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .tooltip > div > button > span {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .tooltip > div:first-child {
  border-top: 0 !important;
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .tooltip > div:hover {
  background: rgba(0, 132, 255, 0.5);
  color: white;
  transition: 0.02s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .tooltip > div:hover > .child {
  visibility: visible;
  opacity: 1;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .tooltip > div .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  width: 1rem;
  height: 100%;
  font-size: 8px;
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .tooltip > div .arrow {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  width: 1rem;
  height: 100%;
  font-size: 8px;
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .tooltip > div > .child {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: column;
  flex-wrap: nowrap;
  background: white;
  color: rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  transform: translate(-100%, 0);
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .tooltip > div > .child > button {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  background: transparent;
  color: inherit;
  padding: 0.3rem 0.5rem;
  transition: 0.02s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1;
}
.group-main-menu-bar-workflow
  .main-menu-bar-workflow-status-bar-buttons
  > div
  .tooltip
  > div
  > .child
  > button:first-child {
  border-top: 0 !important;
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .tooltip > div > .child > button:hover {
  background: rgba(0, 132, 255, 0.5);
  color: white;
  transition: 0.02s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .sub-font-print-name-tooltip {
  flex-direction: column;
  margin-top: 5px;
  padding-bottom: 5px;
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .sub-font-print-name-tooltip label {
  min-width: 3rem;
  text-align: end;
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .more {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: transparent;
  width: 15px;
  height: 2rem;
  border: none;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .more:hover,
.group-main-menu-bar-workflow .main-menu-bar-workflow-status-bar-buttons > div .more:focus {
  transform: scale(1.3);
  z-index: 5;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.group-main-menu-bar-workflow .close-button {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px;
}
.group-main-menu-bar-workflow .close-button > div {
  position: relative;
  padding: 3px;
  height: 100%;
  background: transparent;
  margin-left: 3px;
  font-size: 10px;
  cursor: pointer;
}
.group-main-menu-bar-workflow .close-button > div.disable {
  cursor: default;
}
.group-main-menu-bar-workflow .close-button > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  flex-grow: 0;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  padding: 0.2rem 0.3rem;
  border: 1px solid transparent;
  background: transparent;
  font-size: 10px;
  border-radius: 0.25rem;
  overflow: hidden;
}
.group-main-menu-bar-workflow .close-button > button.close-button {
  color: #c82333;
}
.group-main-menu-bar-workflow .close-button > button.help-button {
  color: #003ec4;
}
.group-main-menu-bar-workflow .buttons {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 5rem;
  padding: 5px;
}
.group-main-menu-bar-workflow .buttons > div {
  position: relative;
  padding: 3px;
  height: 100%;
  background: transparent;
  margin-left: 3px;
  font-size: 10px;
  cursor: pointer;
}
.group-main-menu-bar-workflow .buttons > div.disable {
  cursor: default;
}
.group-main-menu-bar-workflow .buttons > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  flex-grow: 0;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  padding: 0.2rem 0.3rem;
  border: 1px solid transparent;
  background: transparent;
  font-size: 10px;
  border-radius: 0.25rem;
  overflow: hidden;
  position: relative;
  height: 100%;
  background: transparent;
  margin-left: 3px;
}
.group-main-menu-bar-workflow .buttons > button:hover,
.group-main-menu-bar-workflow .buttons > button:focus {
  outline: 0;
  color: #1089ff;
  border-color: rgba(0, 132, 255, 0.5);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group-main-menu-bar-workflow .buttons > button:hover::after,
.group-main-menu-bar-workflow .buttons > button:focus::after {
  width: 100%;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group-main-menu-bar-workflow .buttons > button:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.group-main-menu-bar-workflow .buttons > button button:focus {
  outline: 1px dotted;
  outline: 5px auto;
}
.group-main-menu-bar-workflow .buttons > button:hover {
  color: #4c6ef5;
}
.group-main-menu-bar-workflow .buttons > button.active {
  background: rgba(118, 145, 254, 0.7490196078);
}
.group-main-menu-bar-workflow .buttons > button:disabled,
.group-main-menu-bar-workflow .buttons > button.access-denied {
  color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}
.group-main-menu-bar-workflow .buttons > button:disabled:hover,
.group-main-menu-bar-workflow .buttons > button:disabled:focus,
.group-main-menu-bar-workflow .buttons > button.access-denied:hover,
.group-main-menu-bar-workflow .buttons > button.access-denied:focus {
  color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
.group-main-menu-bar-workflow .buttons > button:disabled:hover::after,
.group-main-menu-bar-workflow .buttons > button:disabled:focus::after,
.group-main-menu-bar-workflow .buttons > button.access-denied:hover::after,
.group-main-menu-bar-workflow .buttons > button.access-denied:focus::after {
  display: none;
}
.group-main-menu-bar-workflow .menu-bar-workflows {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  height: 100%;
  padding-right: 5px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.group-main-menu-bar-workflow .menu-bar-workflows:hover {
  overflow-x: auto;
  margin: 0;
}
.group-main-menu-bar-workflow .menu-bar-workflows::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background: transparent;
}
.group-main-menu-bar-workflow .menu-bar-workflows::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #212529, rgba(33, 37, 41, 0.8980392157));
  border-radius: 5px;
}
.group-main-menu-bar-workflow .menu-bar-workflows > div {
  position: relative;
  min-width: 9.5rem;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
  background: transparent;
  border-left: 0.5px solid rgba(0, 0, 0, 0.1);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}
.group-main-menu-bar-workflow .menu-bar-workflows > div:hover {
  box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.1);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group-main-menu-bar-workflow .menu-bar-workflows > div.active {
  background: rgba(118, 145, 254, 0.7490196078);
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  flex-grow: 0;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  padding: 0.2rem 0.3rem;
  border: 1px solid transparent;
  background: transparent;
  font-size: 10px;
  border-radius: 0.25rem;
  overflow: hidden;
  position: relative;
  background: transparent;
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > button.close {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  opacity: 0.7;
  color: black;
  cursor: pointer;
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > button.close:hover {
  opacity: 1;
  color: white;
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > button:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > button button:focus {
  outline: 1px dotted;
  outline: 5px auto;
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > button:hover {
  box-shadow: none;
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > button:focus {
  outline: 0;
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > button > span.has-change {
  color: red;
  margin-right: 2px;
  margin-left: 5px;
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  padding: 2px;
  font-weight: bold;
  border-radius: 10px;
  color: rgba(0, 0, 0, 0.5);
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > span:hover {
  background: rgba(255, 0, 0, 0.7);
  color: black;
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > .menu-bar-workflow-tool-tip {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: auto;
  height: auto;
  background: white;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  padding: 0.5rem 0.7rem;
  border-radius: 5px;
  transform: translate(-50%, 2rem);
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1000;
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > .menu-bar-workflow-tool-tip > div {
  position: relative;
  display: flex;
  flex-grow: 1;
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > .menu-bar-workflow-tool-tip > div > table {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > .menu-bar-workflow-tool-tip > div > table th,
.group-main-menu-bar-workflow .menu-bar-workflows > div > .menu-bar-workflow-tool-tip > div > table td {
  padding: 5px;
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > .menu-bar-workflow-tool-tip > div > table > thead > tr {
  background: linear-gradient(to top, rgba(41, 152, 255, 0.7), rgba(41, 151, 255, 0.1));
  height: 1.8rem;
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > .menu-bar-workflow-tool-tip > div > table > thead > tr > th {
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-align: center;
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > .menu-bar-workflow-tool-tip > div > table > tbody {
  line-height: 1.5rem;
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > .menu-bar-workflow-tool-tip > div > table > tbody > tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > .menu-bar-workflow-tool-tip > div > table > tbody > tr > td {
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-align: center;
}
.group-main-menu-bar-workflow
  .menu-bar-workflows
  > div
  > .menu-bar-workflow-tool-tip
  > div
  > table
  > tbody
  > tr:nth-child(even)
  > td {
  background: rgba(41, 152, 255, 0.15);
}
.group-main-menu-bar-workflow .menu-bar-workflows > div > .menu-bar-workflow-tool-tip::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: rotate(45deg) translate(-50%, 3px);
  border-radius: 2px;
  background: white;
  z-index: -1;
}
.group-main-menu-bar-workflow .filter-tooltip-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(1px);
  cursor: default;
  z-index: 1000;
}
.group-main-menu-bar-workflow .filter {
  position: fixed;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  background: white;
  border-radius: 5px;
  padding: 1rem 0.5rem;
  color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transform: translate(10px, 10px);
  z-index: 1100;
}
.group-main-menu-bar-workflow .filter::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: white;
  z-index: -1;
}
.group-main-menu-bar-workflow .filter > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  color: black;
  margin: 5px 0;
}
.group-main-menu-bar-workflow .filter > div > div {
  justify-content: flex-start !important;
}
.group-main-menu-bar-workflow .filter > div > div > label {
  text-align: start !important;
}
.group-main-menu-bar-workflow .filter > div > div > div {
  margin: 0;
}
.group-main-menu-bar-workflow > .group-head-main-menu-bar-workflow {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  flex-grow: 0;
  width: 100%;
  padding: 2px 5px;
  background: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.group-main-menu-bar-workflow > .group-head-main-menu-bar-workflow > div {
  padding: 2px 2px;
}
.group-main-menu-bar-workflow > .group-head-main-menu-bar-workflow > h3 {
  margin: 0.6rem 0;
  color: #1089ff;
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: center;
  padding: 5px;
  overflow: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table {
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid rgba(0, 0, 0, 0.7);
  overflow: hidden;
  user-select: none;
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > thead > tr {
  height: 3rem;
  border-bottom: 4px double rgba(0, 0, 0, 0.7);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent, #eeeeee);
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > thead > tr > th {
  font-weight: bold;
  text-align: center;
  height: 3rem;
  max-height: 100%;
  cursor: pointer;
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > thead > tr > th:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.7);
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > thead > tr > th:hover {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > thead > tr > th > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden;
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > thead > tr > th > div > .filter-table {
  visibility: hidden;
  align-items: flex-start;
  position: absolute;
  bottom: -1rem;
  right: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
}
.group-main-menu-bar-workflow
  > .group-body-main-menu-bar-workflow
  > table
  > thead
  > tr
  > th
  > div
  > .filter-table:focus,
.group-main-menu-bar-workflow
  > .group-body-main-menu-bar-workflow
  > table
  > thead
  > tr
  > th
  > div
  > .filter-table:hover {
  outline: 0;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  color: #1089ff;
  transition: 0.3s cubic-bezier(1, 0, 0, 1);
}
.group-main-menu-bar-workflow
  > .group-body-main-menu-bar-workflow
  > table
  > thead
  > tr
  > th
  > div
  > .filter-table.show {
  visibility: visible;
  bottom: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
}
.group-main-menu-bar-workflow
  > .group-body-main-menu-bar-workflow
  > table
  > thead
  > tr
  > th
  > div
  > .clear-filter-table {
  visibility: hidden;
  align-items: flex-start;
  position: absolute;
  top: -1rem;
  right: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
  color: #cc0000;
}
.group-main-menu-bar-workflow
  > .group-body-main-menu-bar-workflow
  > table
  > thead
  > tr
  > th
  > div
  > .clear-filter-table:focus,
.group-main-menu-bar-workflow
  > .group-body-main-menu-bar-workflow
  > table
  > thead
  > tr
  > th
  > div
  > .clear-filter-table:hover {
  outline: 0;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  transition: 0.3s cubic-bezier(1, 0, 0, 1);
}
.group-main-menu-bar-workflow
  > .group-body-main-menu-bar-workflow
  > table
  > thead
  > tr
  > th
  > div
  > .clear-filter-table.show {
  visibility: visible;
  top: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > tbody {
  width: 100%;
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > tbody > tr {
  height: 2.2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > tbody > tr > td {
  text-align: center;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > tbody > tr > th {
  text-align: center;
  background: #eeeeee;
  cursor: cell;
  border-left: 4px double rgba(0, 0, 0, 0.7);
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > tbody > tr > th:hover {
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.2);
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > tbody > tr.selected {
  border: 1px solid #1089ff;
  box-shadow: inset 0 0 25px #1089ff;
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > tbody > tr:nth-of-type(even) {
  background: #eeeeee;
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > tbody > tr:nth-of-type(odd) {
  background: white;
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > tfoot > tr {
  position: relative;
  height: 4rem;
  border-top: 4px double rgba(0, 0, 0, 0.7);
  border-bottom: 4px double rgba(0, 0, 0, 0.7);
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > tfoot > tr > th,
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > tfoot > tr > td {
  border: 1px solid rgba(0, 0, 0, 0.7);
  text-align: center;
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > colgroup > col.filtered {
  background: rgba(0, 132, 255, 0.5) !important;
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > colgroup .col-row-manage {
  width: 1.5rem;
}
.group-main-menu-bar-workflow > .group-body-main-menu-bar-workflow > table > colgroup .col-id {
  width: 4rem;
}
.group-main-menu-bar-workflow > .group-foot-main-menu-bar-workflow {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  width: 100%;
  align-items: center;
  padding: 0.5rem 0;
}

.insert-update-grid-workflow {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.insert-update-grid-workflow > :first-child .row {
  align-items: stretch;
}
.insert-update-grid-workflow .self-grid-workflow-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  min-height: 10rem;
  min-width: 10rem;
  max-width: calc(100vw - 15rem);
  max-height: calc(100vh - 18rem);
  overflow-x: auto;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
  scroll-behavior: auto;
}
.insert-update-grid-workflow .self-grid-workflow-container::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.insert-update-grid-workflow .self-grid-workflow-container::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.insert-update-grid-workflow .self-grid-workflow-container:focus,
.insert-update-grid-workflow .self-grid-workflow-container:active {
  outline: 0;
}
@media screen and (max-width: 900px) {
  .insert-update-grid-workflow .self-grid-workflow-container {
    max-width: calc(100vw - 5rem);
    max-height: calc(100vh - 18rem);
  }
}
.insert-update-grid-workflow .self-grid-workflow-container > table {
  min-width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > thead > tr {
  position: relative;
  height: 2.7rem;
  background: #222831;
  border-bottom: 4px double rgba(0, 0, 0, 0.7);
}
.insert-update-grid-workflow .self-grid-workflow-container > table > thead > tr > th {
  min-width: fit-content;
  padding: 0 5px;
  font-weight: bold;
  text-align: center;
  color: #eeeeee;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.insert-update-grid-workflow .self-grid-workflow-container > table > thead > tr > th div {
  white-space: nowrap;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > colgroup:first-child,
.insert-update-grid-workflow .self-grid-workflow-container > table > colgroup:last-child {
  min-width: 0.5rem;
  width: 0.5rem;
  max-width: 0.5rem;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr {
  position: relative;
  height: 2.2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > th.row-header {
  min-width: 25px;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > th.row-header.has-error {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td.row-condition-row {
  background-color: rgb(0, 57, 114);
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td.row-condition-row > div {
  background-color: #f1f4ff;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td {
  min-width: fit-content;
  padding: 0 5px;
  text-align: center;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
  cursor: text;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td span {
  white-space: nowrap;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td > input {
  width: 100%;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td > div {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td > div .container-padding {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td > div .create-row {
  width: 100%;
  background-color: #1089ff;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td > div.create-row {
  width: 100%;
  background-color: #1089ff;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td > div .child-workflow-row {
  width: 100%;
  background-color: chocolate;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td > div.child-workflow-row {
  width: 100%;
  background-color: chocolate;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td > div.condition-row {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin: 3px;
}
.insert-update-grid-workflow
  .self-grid-workflow-container
  > table
  > tbody
  > tr
  > td
  > div.condition-row
  .condition-row-filter {
  display: flex;
  width: 100%;
}
.insert-update-grid-workflow
  .self-grid-workflow-container
  > table
  > tbody
  > tr
  > td
  > div.condition-row
  .condition-row-filter
  .condition-row-filter-description {
  flex-grow: 1;
}
.insert-update-grid-workflow
  .self-grid-workflow-container
  > table
  > tbody
  > tr
  > td
  > div.condition-row
  .select-full-row-add-workflow {
  width: 100%;
}
.insert-update-grid-workflow
  .self-grid-workflow-container
  > table
  > tbody
  > tr
  > td
  > div.condition-row
  .select-full-row-add-workflow.selected {
  box-shadow: inset 0 0 25px #1089ff;
}
.insert-update-grid-workflow
  .self-grid-workflow-container
  > table
  > tbody
  > tr
  > td
  > div.condition-row
  .select-full-row-add-workflow:hover:not(.selected) {
  box-shadow: inset 0 0 25px rgba(16, 136, 255, 0.4549019608);
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td > div.else-row {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin: 3px;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td > div.else-row .else-row-filter {
  display: flex;
  width: 100%;
}
.insert-update-grid-workflow
  .self-grid-workflow-container
  > table
  > tbody
  > tr
  > td
  > div.else-row
  .else-row-filter
  .else-row-filter-description {
  flex-grow: 1;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td > div.else-if-row {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin: 3px;
}
.insert-update-grid-workflow
  .self-grid-workflow-container
  > table
  > tbody
  > tr
  > td
  > div.else-if-row
  .else-if-row-filter {
  display: flex;
  width: 100%;
}
.insert-update-grid-workflow
  .self-grid-workflow-container
  > table
  > tbody
  > tr
  > td
  > div.else-if-row
  .else-if-row-filter
  .else-if-row-filter-description {
  flex-grow: 1;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td > div input {
  width: 100%;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td > div select {
  flex-grow: unset;
  width: 50px;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td > div button {
  background-color: white;
  width: 6rem;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td > div label {
  padding: 5px;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td > div label.clickable {
  color: blue;
  cursor: pointer;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td .status-bar-buttons {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td .status-bar-buttons .vr {
  position: relative;
  height: 100%;
  min-height: 28px;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  margin: 0;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td .status-bar-buttons > div {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  margin: 0 0.3rem;
}
.insert-update-grid-workflow
  .self-grid-workflow-container
  > table
  > tbody
  > tr
  > td
  .status-bar-buttons
  > div
  > button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: transparent;
  height: 2rem;
  border-radius: 5px;
  width: unset;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.insert-update-grid-workflow
  .self-grid-workflow-container
  > table
  > tbody
  > tr
  > td
  .status-bar-buttons
  > div
  > button:hover,
.insert-update-grid-workflow
  .self-grid-workflow-container
  > table
  > tbody
  > tr
  > td
  .status-bar-buttons
  > div
  > button:focus {
  transform: scale(1.3);
  z-index: 5;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td.cell-hasChange::after {
  content: "*";
  position: absolute;
  top: 5px;
  right: 5px;
  color: red;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > td.cell-error {
  border: 2px dotted #cc0000;
  box-shadow: inset 0 0 20px #cc0000;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > th {
  text-align: center;
  background: #eeeeee;
  cursor: cell;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > th:hover {
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.2);
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr > th.row-not-valid {
  color: #cc0000;
  box-shadow: inset 0 0 10px #cc0000;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr.active-row,
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr:focus {
  border: 1px solid #1089ff;
  box-shadow: inset 0 0 25px #1089ff;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr.selected-row {
  border: 1px solid #1089ff;
  box-shadow: inset 0 0 20px 20px #1089ff;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr.tr-information {
  height: 0;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > tr.tr-information > td {
  position: relative;
  width: 100%;
  height: 100%;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody > :nth-child(even) {
  background: #eeeeee;
}
.insert-update-grid-workflow .self-grid-workflow-container > table > tbody .self-element-text-box-validation-content {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  flex-grow: 0;
  position: absolute;
  right: 0;
  top: -8px;
  bottom: auto;
  font-size: 70%;
  text-align: end;
  background: #cc0000;
  color: white;
  padding: 0;
}

.form-workflow-condition {
  min-width: 90%;
  width: 80rem;
}

.group-main-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  width: 100%;
  font-size: 10px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
  overflow: hidden;
}
.group-main-stack > fieldset {
  overflow: hidden;
}
.group-main-stack > fieldset > form {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
}
.group-main-stack .group-head-main-stack-status-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  max-width: 100%;
  height: 2rem;
}
.group-main-stack .close-button {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px;
}
.group-main-stack .close-button > div {
  position: relative;
  padding: 3px;
  height: 100%;
  background: transparent;
  margin-left: 3px;
  font-size: 10px;
  cursor: pointer;
}
.group-main-stack .close-button > div.disable {
  cursor: default;
}
.group-main-stack .close-button > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  flex-grow: 0;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  padding: 0.2rem 0.3rem;
  border: 1px solid transparent;
  background: transparent;
  font-size: 10px;
  border-radius: 0.25rem;
  overflow: hidden;
}
.group-main-stack .close-button > button.close-button {
  color: #c82333;
}
.group-main-stack .close-button > button.help-button {
  color: #003ec4;
}
.group-main-stack .buttons {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 5rem;
  padding: 5px;
}
.group-main-stack .buttons > div {
  position: relative;
  padding: 3px;
  height: 100%;
  background: transparent;
  margin-left: 3px;
  font-size: 10px;
  cursor: pointer;
}
.group-main-stack .buttons > div.disable {
  cursor: default;
}
.group-main-stack .buttons > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  flex-grow: 0;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  padding: 0.2rem 0.3rem;
  border: 1px solid transparent;
  background: transparent;
  font-size: 10px;
  border-radius: 0.25rem;
  overflow: hidden;
  position: relative;
  height: 100%;
  background: transparent;
  margin-left: 3px;
}
.group-main-stack .buttons > button:hover,
.group-main-stack .buttons > button:focus {
  outline: 0;
  color: #1089ff;
  border-color: rgba(0, 132, 255, 0.5);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group-main-stack .buttons > button:hover::after,
.group-main-stack .buttons > button:focus::after {
  width: 100%;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group-main-stack .buttons > button:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.group-main-stack .buttons > button button:focus {
  outline: 1px dotted;
  outline: 5px auto;
}
.group-main-stack .buttons > button:hover {
  color: #4c6ef5;
}
.group-main-stack .buttons > button.active {
  background: rgba(118, 145, 254, 0.7490196078);
}
.group-main-stack .buttons > button:disabled,
.group-main-stack .buttons > button.access-denied {
  color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}
.group-main-stack .buttons > button:disabled:hover,
.group-main-stack .buttons > button:disabled:focus,
.group-main-stack .buttons > button.access-denied:hover,
.group-main-stack .buttons > button.access-denied:focus {
  color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
.group-main-stack .buttons > button:disabled:hover::after,
.group-main-stack .buttons > button:disabled:focus::after,
.group-main-stack .buttons > button.access-denied:hover::after,
.group-main-stack .buttons > button.access-denied:focus::after {
  display: none;
}
.group-main-stack .stacks {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  height: 100%;
  padding-right: 5px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.group-main-stack .stacks:hover {
  overflow-x: auto;
  margin: 0;
}
.group-main-stack .stacks::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background: transparent;
}
.group-main-stack .stacks::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #212529, rgba(33, 37, 41, 0.8980392157));
  border-radius: 5px;
}
.group-main-stack .stacks > div {
  position: relative;
  min-width: 9.5rem;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
  background: transparent;
  border-left: 0.5px solid rgba(0, 0, 0, 0.1);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}
.group-main-stack .stacks > div:hover {
  box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.1);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group-main-stack .stacks > div.active {
  background: rgba(118, 145, 254, 0.7490196078);
}
.group-main-stack .stacks > div > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  flex-grow: 0;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  padding: 0.2rem 0.3rem;
  border: 1px solid transparent;
  background: transparent;
  font-size: 10px;
  border-radius: 0.25rem;
  overflow: hidden;
  position: relative;
  background: transparent;
}
.group-main-stack .stacks > div > button.close {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  opacity: 0.7;
  color: black;
  cursor: pointer;
}
.group-main-stack .stacks > div > button.close:hover {
  opacity: 1;
  color: white;
}
.group-main-stack .stacks > div > button:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.group-main-stack .stacks > div > button button:focus {
  outline: 1px dotted;
  outline: 5px auto;
}
.group-main-stack .stacks > div > button:hover {
  box-shadow: none;
}
.group-main-stack .stacks > div > button:focus {
  outline: 0;
}
.group-main-stack .stacks > div > button > span.has-change {
  color: red;
  margin-right: 2px;
  margin-left: 5px;
}
.group-main-stack .stacks > div > span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  padding: 2px;
  font-weight: bold;
  border-radius: 10px;
  color: rgba(0, 0, 0, 0.5);
}
.group-main-stack .stacks > div > span:hover {
  background: rgba(255, 0, 0, 0.7);
  color: black;
}
.group-main-stack .stacks > div > .stack-tool-tip {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: auto;
  height: auto;
  background: white;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  padding: 0.5rem 0.7rem;
  border-radius: 5px;
  transform: translate(-50%, 2rem);
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1000;
}
.group-main-stack .stacks > div > .stack-tool-tip > div {
  position: relative;
  display: flex;
  flex-grow: 1;
}
.group-main-stack .stacks > div > .stack-tool-tip > div > table {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.group-main-stack .stacks > div > .stack-tool-tip > div > table th,
.group-main-stack .stacks > div > .stack-tool-tip > div > table td {
  padding: 5px;
}
.group-main-stack .stacks > div > .stack-tool-tip > div > table > thead > tr {
  background: linear-gradient(to top, rgba(41, 152, 255, 0.7), rgba(41, 151, 255, 0.1));
  height: 1.8rem;
}
.group-main-stack .stacks > div > .stack-tool-tip > div > table > thead > tr > th {
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-align: center;
}
.group-main-stack .stacks > div > .stack-tool-tip > div > table > tbody {
  line-height: 1.5rem;
}
.group-main-stack .stacks > div > .stack-tool-tip > div > table > tbody > tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.group-main-stack .stacks > div > .stack-tool-tip > div > table > tbody > tr > td {
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-align: center;
}
.group-main-stack .stacks > div > .stack-tool-tip > div > table > tbody > tr:nth-child(even) > td {
  background: rgba(41, 152, 255, 0.15);
}
.group-main-stack .stacks > div > .stack-tool-tip::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: rotate(45deg) translate(-50%, 3px);
  border-radius: 2px;
  background: white;
  z-index: -1;
}
.group-main-stack .filter-tooltip-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(1px);
  cursor: default;
  z-index: 1000;
}
.group-main-stack .filter {
  position: fixed;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  background: white;
  border-radius: 5px;
  padding: 1rem 0.5rem;
  color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transform: translate(10px, 10px);
  z-index: 1100;
}
.group-main-stack .filter::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: white;
  z-index: -1;
}
.group-main-stack .filter > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  color: black;
  margin: 5px 0;
}
.group-main-stack .filter > div > div {
  justify-content: flex-start !important;
}
.group-main-stack .filter > div > div > label {
  text-align: start !important;
}
.group-main-stack .filter > div > div > div {
  margin: 0;
}
.group-main-stack > .group-head-main-stack {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  flex-grow: 0;
  width: 100%;
  padding: 2px 5px;
  background: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.group-main-stack > .group-head-main-stack > div {
  padding: 2px 2px;
}
.group-main-stack > .group-head-main-stack > h3 {
  margin: 0.6rem 0;
  color: #1089ff;
}
.group-main-stack > .group-body-main-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: center;
  padding: 5px;
  overflow: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.group-main-stack > .group-body-main-stack::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.group-main-stack > .group-body-main-stack::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.group-main-stack > .group-body-main-stack > table {
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid rgba(0, 0, 0, 0.7);
  overflow: hidden;
  user-select: none;
}
.group-main-stack > .group-body-main-stack > table > thead > tr {
  height: 3rem;
  border-bottom: 4px double rgba(0, 0, 0, 0.7);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent, #eeeeee);
}
.group-main-stack > .group-body-main-stack > table > thead > tr > th {
  font-weight: bold;
  text-align: center;
  height: 3rem;
  max-height: 100%;
  cursor: pointer;
}
.group-main-stack > .group-body-main-stack > table > thead > tr > th:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.7);
}
.group-main-stack > .group-body-main-stack > table > thead > tr > th:hover {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
.group-main-stack > .group-body-main-stack > table > thead > tr > th > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden;
}
.group-main-stack > .group-body-main-stack > table > thead > tr > th > div > .filter-table {
  visibility: hidden;
  align-items: flex-start;
  position: absolute;
  bottom: -1rem;
  right: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
}
.group-main-stack > .group-body-main-stack > table > thead > tr > th > div > .filter-table:focus,
.group-main-stack > .group-body-main-stack > table > thead > tr > th > div > .filter-table:hover {
  outline: 0;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  color: #1089ff;
  transition: 0.3s cubic-bezier(1, 0, 0, 1);
}
.group-main-stack > .group-body-main-stack > table > thead > tr > th > div > .filter-table.show {
  visibility: visible;
  bottom: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
}
.group-main-stack > .group-body-main-stack > table > thead > tr > th > div > .clear-filter-table {
  visibility: hidden;
  align-items: flex-start;
  position: absolute;
  top: -1rem;
  right: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
  color: #cc0000;
}
.group-main-stack > .group-body-main-stack > table > thead > tr > th > div > .clear-filter-table:focus,
.group-main-stack > .group-body-main-stack > table > thead > tr > th > div > .clear-filter-table:hover {
  outline: 0;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  transition: 0.3s cubic-bezier(1, 0, 0, 1);
}
.group-main-stack > .group-body-main-stack > table > thead > tr > th > div > .clear-filter-table.show {
  visibility: visible;
  top: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
}
.group-main-stack > .group-body-main-stack > table > tbody {
  width: 100%;
}
.group-main-stack > .group-body-main-stack > table > tbody > tr {
  height: 2.2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.group-main-stack > .group-body-main-stack > table > tbody > tr > td {
  text-align: center;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.group-main-stack > .group-body-main-stack > table > tbody > tr > th {
  text-align: center;
  background: #eeeeee;
  cursor: cell;
  border-left: 4px double rgba(0, 0, 0, 0.7);
}
.group-main-stack > .group-body-main-stack > table > tbody > tr > th:hover {
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.2);
}
.group-main-stack > .group-body-main-stack > table > tbody > tr.selected {
  border: 1px solid #1089ff;
  box-shadow: inset 0 0 25px #1089ff;
}
.group-main-stack > .group-body-main-stack > table > tbody > tr:nth-of-type(even) {
  background: #eeeeee;
}
.group-main-stack > .group-body-main-stack > table > tbody > tr:nth-of-type(odd) {
  background: white;
}
.group-main-stack > .group-body-main-stack > table > tfoot > tr {
  position: relative;
  height: 4rem;
  border-top: 4px double rgba(0, 0, 0, 0.7);
  border-bottom: 4px double rgba(0, 0, 0, 0.7);
}
.group-main-stack > .group-body-main-stack > table > tfoot > tr > th,
.group-main-stack > .group-body-main-stack > table > tfoot > tr > td {
  border: 1px solid rgba(0, 0, 0, 0.7);
  text-align: center;
}
.group-main-stack > .group-body-main-stack > table > colgroup > col.filtered {
  background: rgba(0, 132, 255, 0.5) !important;
}
.group-main-stack > .group-body-main-stack > table > colgroup .col-row-manage {
  width: 1.5rem;
}
.group-main-stack > .group-body-main-stack > table > colgroup .col-id {
  width: 4rem;
}
.group-main-stack > .group-foot-main-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  width: 100%;
  align-items: center;
  padding: 0.5rem 0;
}

.self-user-roles {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  max-width: calc(100vw - 17rem);
  max-height: calc(100vh - 14rem);
  overflow: hidden;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.self-user-roles::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.self-user-roles::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.self-user-roles > .user-roles-self-tree-view-in-page {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  min-width: 23rem;
  align-items: center;
  word-wrap: break-word;
  background-color: white;
  border-radius: 5px;
  margin: 0 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.self-user-roles > .user-roles-self-tree-view-in-page > .user-roles-head-self-tree-view {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 100%;
  height: 2rem;
  background: linear-gradient(to right, #1089ff, rgba(0, 132, 255, 0.5), #1089ff);
  padding: 0.25rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 14px;
  color: white;
}
.self-user-roles > .user-roles-self-tree-view-in-page > .user-roles-head-self-tree-view > span {
  font-weight: bold;
}
.self-user-roles > .user-roles-self-tree-view-in-page > .user-roles-body-self-tree-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  padding: 0.5rem 0.5rem;
  overflow: hidden;
}
.self-user-roles > .user-roles-self-tree-view-in-page > .user-roles-body-self-tree-view > .row {
  flex-grow: 0;
  flex-wrap: nowrap;
}
.self-user-roles > .user-roles-self-tree-view-in-page > .user-roles-body-self-tree-view > .row > button {
  min-width: 4rem;
  padding: 0.3rem 0.7rem;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.self-user-roles > .user-roles-self-tree-view-in-page > .user-roles-body-self-tree-view > .row > button:hover {
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.self-user-roles > .user-roles-self-tree-view-in-page > .user-roles-body-self-tree-view > .user-roles-tree-view-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
  scroll-snap-type: mandatory;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 5px 0;
  user-select: none;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  > li {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: auto;
  min-width: auto;
  flex-grow: 0;
  min-height: 1.7rem;
  margin: 0.1rem 0.2rem;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 0 !important;
  padding-left: 0.2rem !important;
  cursor: pointer;
  overflow: hidden;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  > li.multi {
  animation: 0.17s myAnim cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes myAnim {
  100% {
    box-shadow:
      inset 0 0 20px 0 #1089ff,
      0 0 5px 0 rgba(0, 132, 255, 0.5);
  }
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  > li:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  > li:hover
  > .button-close {
  opacity: 1;
  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  > li
  > .button-close {
  opacity: 0;
  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  > li
  > .button-close:hover {
  color: #cc0000;
  transition: 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  > li
  > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  margin: 0;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  > li
  > span:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 1.5rem;
  height: 1.6rem;
  flex-grow: 0;
  padding: 0 0.2rem;
  border-left: 0.5px solid rgba(0, 0, 0, 0.2);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  > li
  > span:nth-child(2) {
  padding-right: 3px;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  align-items: center;
  width: 100%;
  overflow: visible;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul.tree-view-level-1
  > li {
  color: rgb(0, 0, 128);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul.tree-view-level-1
  > li
  > div {
  color: rgb(0, 0, 128);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul.tree-view-level-1
  > li
  > div::before {
  border: none !important;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  .tree-view-level-2 {
  padding-right: 0;
  border-right: 1px dashed rgb(0, 128, 0);
  margin-right: 0.75rem;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  .tree-view-level-2
  > li {
  color: rgb(0, 128, 0);
  border-color: rgb(0, 128, 0);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  .tree-view-level-2
  > li
  > div {
  color: rgb(0, 128, 0);
  border-color: rgb(0, 128, 0);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  .tree-view-level-3 {
  padding-right: 0;
  border-right: 1px dashed rgb(165, 42, 42);
  margin-right: 0.75rem;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  .tree-view-level-3
  > li {
  color: rgb(165, 42, 42);
  border-color: rgb(165, 42, 42);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  .tree-view-level-3
  > li
  > div {
  color: rgb(165, 42, 42);
  border-color: rgb(165, 42, 42);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  .tree-view-level-4 {
  padding-right: 0;
  border-right: 1px dashed rgb(148, 0, 211);
  margin-right: 0.75rem;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  .tree-view-level-4
  > li {
  color: rgb(148, 0, 211);
  border-color: rgb(148, 0, 211);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  .tree-view-level-4
  > li
  > div {
  color: rgb(148, 0, 211);
  border-color: rgb(148, 0, 211);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  .tree-view-level-5 {
  padding-right: 0;
  border-right: 1px dashed rgb(210, 105, 30);
  margin-right: 0.75rem;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  .tree-view-level-5
  > li {
  color: rgb(210, 105, 30);
  border-color: rgb(210, 105, 30);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  .tree-view-level-5
  > li
  > div {
  color: rgb(210, 105, 30);
  border-color: rgb(210, 105, 30);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  .tree-view-level-6 {
  padding-right: 0;
  border-right: 1px dashed rgb(128, 0, 0);
  margin-right: 0.75rem;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  .tree-view-level-6
  > li {
  color: rgb(128, 0, 0);
  border-color: rgb(128, 0, 0);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  .tree-view-level-6
  > li
  > div {
  color: rgb(128, 0, 0);
  border-color: rgb(128, 0, 0);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  > li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  min-width: 10rem;
  width: 100%;
  max-width: 95%;
  margin-top: 0.2rem;
  padding: 0 !important;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  > li
  > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  height: 1.5rem;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  > li
  > div:hover {
  background: linear-gradient(to right, rgba(0, 132, 255, 0.5), transparent);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  > li
  > div
  > i {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 1.5rem;
  max-width: 1.5rem;
  background: transparent;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  > li
  > div
  > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  word-wrap: normal;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  > li
  > div.selected {
  cursor: pointer;
  padding-right: 10px;
  background: linear-gradient(to right, transparent, rgba(0, 132, 255, 0.5));
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  > li
  > span {
  display: inline-block;
  margin: 0 0.1rem;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  > li
  > span.user-roles-tree-view-select-column {
  width: 0px;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  > li
  > span.user-roles-tree-view-name-column {
  width: auto;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  ul
  > li
  .user-roles-element.user-roles-element-chek-tree-box-container {
  max-width: 25px;
  font-size: 10px;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  .user-roles-tree-view-level-1
  > li {
  color: rgb(0, 0, 128);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  .user-roles-tree-view-level-1
  > li
  > div {
  color: rgb(0, 0, 128);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  .user-roles-tree-view-level-2 {
  padding-right: 0;
  border-right: 1px dashed rgb(0, 128, 0);
  margin-right: 2rem;
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  .user-roles-tree-view-level-2
  > li {
  color: rgb(0, 128, 0);
}
.self-user-roles
  > .user-roles-self-tree-view-in-page
  > .user-roles-body-self-tree-view
  > .user-roles-tree-view-body
  .user-roles-tree-view-level-2
  > li
  > div {
  color: rgb(0, 128, 0);
}

.attached-data-self-tree-view-in-page {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  min-width: 23rem;
  align-items: flex-start;
  word-wrap: break-word;
  background-color: white;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.attached-data-self-tree-view-in-page > .attached-data-head-self-tree-view {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 100%;
  height: 2rem;
  background: linear-gradient(to right, #222831, rgb(0, 57, 114), #222831);
  padding: 0.25rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 14px;
  color: white;
}
.attached-data-self-tree-view-in-page > .attached-data-head-self-tree-view > span {
  font-weight: bold;
}
.attached-data-self-tree-view-in-page > .attached-data-body-self-tree-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  padding: 0.5rem 0.5rem;
  overflow: hidden;
}
.attached-data-self-tree-view-in-page > .attached-data-body-self-tree-view > .row {
  flex-grow: 0;
  flex-wrap: nowrap;
}
.attached-data-self-tree-view-in-page > .attached-data-body-self-tree-view > .row > button {
  min-width: 4rem;
  padding: 0.3rem 0.7rem;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.attached-data-self-tree-view-in-page > .attached-data-body-self-tree-view > .row > button:hover {
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.attached-data-self-tree-view-in-page > .attached-data-body-self-tree-view > .attached-data-tree-view-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  max-height: calc(100vh - 17rem);
  overflow: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
  scroll-snap-type: mandatory;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 5px 0;
  user-select: none;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.attached-data-self-tree-view-in-page > .attached-data-body-self-tree-view > .attached-data-tree-view-body > li {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: auto;
  min-width: auto;
  flex-grow: 0;
  min-height: 1.7rem;
  margin: 0.1rem 0.2rem;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 0 !important;
  padding-left: 0.2rem !important;
  cursor: pointer;
  overflow: hidden;
}
.attached-data-self-tree-view-in-page > .attached-data-body-self-tree-view > .attached-data-tree-view-body > li.multi {
  animation: 0.17s myAnim cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes myAnim {
  100% {
    box-shadow:
      inset 0 0 20px 0 #1089ff,
      0 0 5px 0 rgba(0, 132, 255, 0.5);
  }
}
.attached-data-self-tree-view-in-page > .attached-data-body-self-tree-view > .attached-data-tree-view-body > li:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  > li:hover
  > .button-close {
  opacity: 1;
  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  > li
  > .button-close {
  opacity: 0;
  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  > li
  > .button-close:hover {
  color: #cc0000;
  transition: 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.attached-data-self-tree-view-in-page > .attached-data-body-self-tree-view > .attached-data-tree-view-body > li > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  margin: 0;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  > li
  > span:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 1.5rem;
  height: 1.6rem;
  flex-grow: 0;
  padding: 0 0.2rem;
  border-left: 0.5px solid rgba(0, 0, 0, 0.2);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  > li
  > span:nth-child(2) {
  padding-right: 3px;
}
.attached-data-self-tree-view-in-page > .attached-data-body-self-tree-view > .attached-data-tree-view-body ul {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  align-items: center;
  width: 100%;
  overflow: visible;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul.tree-view-level-1
  > li {
  color: rgb(0, 0, 128);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul.tree-view-level-1
  > li
  > div {
  color: rgb(0, 0, 128);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul.tree-view-level-1
  > li
  > div::before {
  border: none !important;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-2 {
  padding-right: 0;
  border-right: 1px dashed rgb(0, 128, 0);
  margin-right: 0.75rem;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-2
  > li {
  color: rgb(0, 128, 0);
  border-color: rgb(0, 128, 0);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-2
  > li
  > div {
  color: rgb(0, 128, 0);
  border-color: rgb(0, 128, 0);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-3 {
  padding-right: 0;
  border-right: 1px dashed rgb(165, 42, 42);
  margin-right: 0.75rem;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-3
  > li {
  color: rgb(165, 42, 42);
  border-color: rgb(165, 42, 42);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-3
  > li
  > div {
  color: rgb(165, 42, 42);
  border-color: rgb(165, 42, 42);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-4 {
  padding-right: 0;
  border-right: 1px dashed rgb(148, 0, 211);
  margin-right: 0.75rem;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-4
  > li {
  color: rgb(148, 0, 211);
  border-color: rgb(148, 0, 211);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-4
  > li
  > div {
  color: rgb(148, 0, 211);
  border-color: rgb(148, 0, 211);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-5 {
  padding-right: 0;
  border-right: 1px dashed rgb(210, 105, 30);
  margin-right: 0.75rem;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-5
  > li {
  color: rgb(210, 105, 30);
  border-color: rgb(210, 105, 30);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-5
  > li
  > div {
  color: rgb(210, 105, 30);
  border-color: rgb(210, 105, 30);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-6 {
  padding-right: 0;
  border-right: 1px dashed rgb(128, 0, 0);
  margin-right: 0.75rem;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-6
  > li {
  color: rgb(128, 0, 0);
  border-color: rgb(128, 0, 0);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-6
  > li
  > div {
  color: rgb(128, 0, 0);
  border-color: rgb(128, 0, 0);
}
.attached-data-self-tree-view-in-page > .attached-data-body-self-tree-view > .attached-data-tree-view-body ul > li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  min-width: 10rem;
  width: 100%;
  max-width: 95%;
  margin-top: 0.2rem;
  padding: 0 !important;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  height: 1.5rem;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > div:hover {
  background: linear-gradient(to right, rgba(0, 132, 255, 0.5), transparent);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > div
  > i {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 1.5rem;
  max-width: 1.5rem;
  background: transparent;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > div
  > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  word-wrap: normal;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > div.selected {
  cursor: pointer;
  padding-right: 10px;
  background: linear-gradient(to right, transparent, rgba(0, 132, 255, 0.5));
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > span {
  display: inline-block;
  margin: 0 0.1rem;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > span.attached-data-tree-view-select-column {
  width: 0px;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > span.attached-data-tree-view-name-column {
  width: auto;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  .attached-data-element.attached-data-element-chek-tree-box-container {
  max-width: 25px;
  font-size: 10px;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  .attached-data-tree-view-level-1
  > li {
  color: rgb(0, 0, 128);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  .attached-data-tree-view-level-1
  > li
  > div {
  color: rgb(0, 0, 128);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  .attached-data-tree-view-level-2 {
  padding-right: 0;
  border-right: 1px dashed rgb(210, 105, 30);
  margin-right: 2rem;
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  .attached-data-tree-view-level-2
  > li {
  color: rgb(210, 105, 30);
}
.attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  .attached-data-tree-view-level-2
  > li
  > div {
  color: rgb(210, 105, 30);
}

.self-attached-data {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  width: calc(100vw - 17rem);
  overflow: hidden;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.self-attached-data::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.self-attached-data::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.self-attached-data > .attached-data-self-tree-view-in-page {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  min-width: 23rem;
  align-items: center;
  word-wrap: break-word;
  background-color: white;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.self-attached-data > .attached-data-self-tree-view-in-page > .attached-data-head-self-tree-view {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 100%;
  height: 2rem;
  background: linear-gradient(to right, #1089ff, rgba(0, 132, 255, 0.5), #1089ff);
  padding: 0.25rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: white;
}
.self-attached-data > .attached-data-self-tree-view-in-page > .attached-data-head-self-tree-view > span {
  font-weight: bold;
}
.self-attached-data > .attached-data-self-tree-view-in-page > .attached-data-body-self-tree-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  padding: 0.5rem 0.5rem;
  overflow: hidden;
}
.self-attached-data > .attached-data-self-tree-view-in-page > .attached-data-body-self-tree-view > .row {
  flex-grow: 0;
  flex-wrap: nowrap;
}
.self-attached-data > .attached-data-self-tree-view-in-page > .attached-data-body-self-tree-view > .row > button {
  min-width: 4rem;
  padding: 0.3rem 0.7rem;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.self-attached-data > .attached-data-self-tree-view-in-page > .attached-data-body-self-tree-view > .row > button:hover {
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  max-height: calc(100vh - 17rem);
  overflow: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
  scroll-snap-type: mandatory;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 5px 0;
  user-select: none;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  > li {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: auto;
  min-width: auto;
  flex-grow: 0;
  min-height: 1.7rem;
  margin: 0.1rem 0.2rem;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 0 !important;
  padding-left: 0.2rem !important;
  cursor: pointer;
  overflow: hidden;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  > li.multi {
  animation: 0.17s myAnim cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes myAnim {
  100% {
    box-shadow:
      inset 0 0 20px 0 #1089ff,
      0 0 5px 0 rgba(0, 132, 255, 0.5);
  }
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  > li:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  > li:hover
  > .button-close {
  opacity: 1;
  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  > li
  > .button-close {
  opacity: 0;
  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  > li
  > .button-close:hover {
  color: #cc0000;
  transition: 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  > li
  > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  margin: 0;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  > li
  > span:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 1.5rem;
  height: 1.6rem;
  flex-grow: 0;
  padding: 0 0.2rem;
  border-left: 0.5px solid rgba(0, 0, 0, 0.2);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  > li
  > span:nth-child(2) {
  padding-right: 3px;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  align-items: center;
  width: 100%;
  overflow: visible;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul.tree-view-level-1
  > li {
  color: rgb(0, 0, 128);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul.tree-view-level-1
  > li
  > div {
  color: rgb(0, 0, 128);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul.tree-view-level-1
  > li
  > div::before {
  border: none !important;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-2 {
  padding-right: 0;
  border-right: 1px dashed rgb(0, 128, 0);
  margin-right: 0.75rem;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-2
  > li {
  color: rgb(0, 128, 0);
  border-color: rgb(0, 128, 0);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-2
  > li
  > div {
  color: rgb(0, 128, 0);
  border-color: rgb(0, 128, 0);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-3 {
  padding-right: 0;
  border-right: 1px dashed rgb(165, 42, 42);
  margin-right: 0.75rem;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-3
  > li {
  color: rgb(165, 42, 42);
  border-color: rgb(165, 42, 42);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-3
  > li
  > div {
  color: rgb(165, 42, 42);
  border-color: rgb(165, 42, 42);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-4 {
  padding-right: 0;
  border-right: 1px dashed rgb(148, 0, 211);
  margin-right: 0.75rem;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-4
  > li {
  color: rgb(148, 0, 211);
  border-color: rgb(148, 0, 211);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-4
  > li
  > div {
  color: rgb(148, 0, 211);
  border-color: rgb(148, 0, 211);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-5 {
  padding-right: 0;
  border-right: 1px dashed rgb(210, 105, 30);
  margin-right: 0.75rem;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-5
  > li {
  color: rgb(210, 105, 30);
  border-color: rgb(210, 105, 30);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-5
  > li
  > div {
  color: rgb(210, 105, 30);
  border-color: rgb(210, 105, 30);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-6 {
  padding-right: 0;
  border-right: 1px dashed rgb(128, 0, 0);
  margin-right: 0.75rem;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-6
  > li {
  color: rgb(128, 0, 0);
  border-color: rgb(128, 0, 0);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  .tree-view-level-6
  > li
  > div {
  color: rgb(128, 0, 0);
  border-color: rgb(128, 0, 0);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  min-width: 10rem;
  width: 100%;
  max-width: 95%;
  margin-top: 0.2rem;
  padding: 0 !important;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  height: 1.5rem;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > div:hover {
  background: linear-gradient(to right, rgba(0, 132, 255, 0.5), transparent);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > div
  > i {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 1.5rem;
  max-width: 1.5rem;
  background: transparent;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > div.selected {
  cursor: pointer;
  padding-right: 10px;
  background: linear-gradient(to right, transparent, rgba(0, 132, 255, 0.5));
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > div
  > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  word-wrap: normal;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > div
  > span.attached-data-tree-view-select-column {
  width: 0px;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > div
  > span.name-column-label {
  width: auto;
  margin: 0 3px;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > div
  > span.name-column {
  width: 100px;
  margin: 0 3px;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > div
  > span.date-start-column-label {
  width: auto;
  margin-right: 10px;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > div
  > span.date-start-column {
  width: 10rem;
  margin-right: 10px;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > div
  > span.date-end-column-label {
  width: auto;
  margin-right: 10px;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  > div
  > span.date-end-column {
  width: 10rem;
  margin-right: 10px;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  ul
  > li
  .attached-data-element.attached-data-element-chek-tree-box-container {
  max-width: 25px;
  font-size: 10px;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  .attached-data-tree-view-level-1
  > li {
  color: rgb(0, 0, 128);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  .attached-data-tree-view-level-1
  > li
  > div {
  color: rgb(0, 0, 128);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  .attached-data-tree-view-level-2 {
  padding-right: 0;
  border-right: 1px dashed rgb(0, 128, 0);
  margin-right: 2rem;
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  .attached-data-tree-view-level-2
  > li {
  color: rgb(0, 128, 0);
}
.self-attached-data
  > .attached-data-self-tree-view-in-page
  > .attached-data-body-self-tree-view
  > .attached-data-tree-view-body
  .attached-data-tree-view-level-2
  > li
  > div {
  color: rgb(0, 128, 0);
}

.group-self-simple-stack-form {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  font-size: 10px;
  overflow: hidden;
}
.group-self-simple-stack-form > .group-head-self-simple-stack-form {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: center;
  justify-content: center;
  flex-grow: 0;
  width: 100%;
}
.group-self-simple-stack-form > .group-head-self-simple-stack-form > div {
  padding: 2px 2px;
}
.group-self-simple-stack-form > .group-head-self-simple-stack-form > h3 {
  margin: 0.6rem 0;
  color: #1089ff;
}
.group-self-simple-stack-form > .group-body-self-simple-stack-form {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: stretch;
  padding: 0.5rem 1rem;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.group-self-simple-stack-form > .group-body-self-simple-stack-form::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.group-self-simple-stack-form > .group-body-self-simple-stack-form::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.group-self-simple-stack-form > .group-pagination-self-simple-stack-form {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  width: 100%;
  align-items: center;
  padding: 0 0;
}
.group-self-simple-stack-form > .group-foot-self-simple-stack-form {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  width: 100%;
  align-items: center;
  padding: 0 0;
}

nav.pagination {
  display: flex;
  align-items: center;
}
nav.pagination > ul {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  padding-left: 0;
  list-style: none;
  border-radius: 0.25rem;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
nav.pagination > ul > li:first-child > button {
  margin-right: 0;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
nav.pagination > ul > li:last-child > button {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
nav.pagination > ul > li > button.separator {
  display: block;
  padding: 0.4rem 0.6rem;
  margin-left: -1px;
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: white;
  border: 1px solid #dee2e6;
  border-radius: 0;
}
nav.pagination > ul > li > button {
  display: block;
  padding: 0.4rem 0.6rem;
  margin-left: -1px;
  color: rgba(0, 0, 0, 0.7);
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
}
nav.pagination > ul > li > button:disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: white;
  border-color: rgba(0, 0, 0, 0.2);
}
nav.pagination > ul > li > button.active {
  z-index: 1;
  color: #eeeeee;
  background-color: rgba(0, 0, 0, 0.7);
  border-color: rgba(0, 0, 0, 0.2);
}
nav.pagination > ul > li > button:hover:not(.active) {
  color: #0056b3;
  text-decoration: none;
  background-color: #e9ecef;
  border-color: rgba(0, 0, 0, 0.2);
}
nav.pagination > ul > li > button:focus {
  z-index: 2;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
nav.pagination > ul > li > button:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.small-pagination {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.4rem;
  font-weight: bold;
  background: #fff;
  border: 1px solid #dee2e6;
}

div.self-message-box-backdrop {
  position: fixed;
  display: flex;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.02);
}

div.self-wait-for-server-backdrop {
  display: flex;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1090;
  background-color: #000;
  transition: all 1s ease-out;
}
div.self-wait-for-server-backdrop.opacity-zero {
  opacity: 0;
}
div.self-wait-for-server-backdrop.opacity-full {
  opacity: 0.5;
}
div.self-wait-for-server-backdrop > span {
  margin: auto;
  font-size: 300%;
  color: rgba(255, 255, 255, 0.6862745098);
}

div.self-message-box {
  position: relative;
  display: block;
  position: absolute;
  padding: 0.75rem 1.25rem;
  border: 0.5px solid black;
  border-radius: 0.25rem;
  width: 20rem;
  min-height: 6rem;
  height: auto;
  box-shadow:
    2px 2px 2px 1px rgba(0, 0, 0, 0.3),
    2px 2px 2px 2px rgba(0, 0, 0, 0.2),
    2px 2px 2px 3px rgba(0, 0, 0, 0.1);
  -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.137));
}
div.self-message-box:focus {
  outline: 0;
}
div.self-message-box > div.self-message-box-buttons-container {
  position: relative;
  display: flex;
  justify-content: space-around;
}
div.self-message-box > div.self-message-box-buttons-container > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  flex-basis: 6rem;
  min-height: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  background: transparent;
  font-size: 12px;
  font-family: Samim;
  margin: 10px;
  cursor: pointer;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.7);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.self-message-box > div.self-message-box-buttons-container > button:hover,
div.self-message-box > div.self-message-box-buttons-container > button:focus {
  outline: 0;
  color: #1089ff;
  border-color: rgba(0, 132, 255, 0.5);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.self-message-box > div.self-message-box-buttons-container > button:hover::after,
div.self-message-box > div.self-message-box-buttons-container > button:focus::after {
  width: 100%;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.self-message-box > div.self-message-box-buttons-container > button:disabled,
div.self-message-box > div.self-message-box-buttons-container > button.access-denied {
  color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}
div.self-message-box > div.self-message-box-buttons-container > button:disabled:hover,
div.self-message-box > div.self-message-box-buttons-container > button:disabled:focus,
div.self-message-box > div.self-message-box-buttons-container > button.access-denied:hover,
div.self-message-box > div.self-message-box-buttons-container > button.access-denied:focus {
  color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
div.self-message-box > div.self-message-box-buttons-container > button:disabled:hover::after,
div.self-message-box > div.self-message-box-buttons-container > button:disabled:focus::after,
div.self-message-box > div.self-message-box-buttons-container > button.access-denied:hover::after,
div.self-message-box > div.self-message-box-buttons-container > button.access-denied:focus::after {
  display: none;
}
div.self-message-box > div.self-message-box-buttons-container > button::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 3px;
  background: rgba(0, 132, 255, 0.5);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.self-message-box.self-message-box-delete-question {
  position: relative;
  color: rgba(0, 0, 0, 0.7);
  background: white;
  border-color: white;
}
div.self-message-box.self-message-box-delete-question > p {
  line-height: 1rem;
}
div.self-message-box.self-message-box-delete-question > div {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
div.self-message-box.self-message-box-delete-question > div > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  flex-basis: 6rem;
  min-height: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  background: transparent;
  font-size: 12px;
  font-family: Samim;
  margin: 10px;
  cursor: pointer;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.7);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.self-message-box.self-message-box-delete-question > div > button:hover,
div.self-message-box.self-message-box-delete-question > div > button:focus {
  outline: 0;
  color: #1089ff;
  border-color: rgba(0, 132, 255, 0.5);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.self-message-box.self-message-box-delete-question > div > button:hover::after,
div.self-message-box.self-message-box-delete-question > div > button:focus::after {
  width: 100%;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.self-message-box.self-message-box-delete-question > div > button:disabled,
div.self-message-box.self-message-box-delete-question > div > button.access-denied {
  color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}
div.self-message-box.self-message-box-delete-question > div > button:disabled:hover,
div.self-message-box.self-message-box-delete-question > div > button:disabled:focus,
div.self-message-box.self-message-box-delete-question > div > button.access-denied:hover,
div.self-message-box.self-message-box-delete-question > div > button.access-denied:focus {
  color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
div.self-message-box.self-message-box-delete-question > div > button:disabled:hover::after,
div.self-message-box.self-message-box-delete-question > div > button:disabled:focus::after,
div.self-message-box.self-message-box-delete-question > div > button.access-denied:hover::after,
div.self-message-box.self-message-box-delete-question > div > button.access-denied:focus::after {
  display: none;
}
div.self-message-box.self-message-box-delete-question > div > button::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 3px;
  background: rgba(0, 132, 255, 0.5);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.self-message-box.self-message-box-success {
  position: relative;
  color: #155724;
  background-color: white;
  border-color: #c3e6cb;
}
div.self-message-box.self-message-box-success > .waiting-show-messagebox {
  position: absolute;
  left: 5.5px;
  bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  background: rgba(0, 110, 255, 0.6);
  transition: 1s ease-in-out;
  animation: 3s Waiting ease-in-out;
}
@keyframes Waiting {
  0% {
    width: 0.4rem;
  }
  100% {
    width: 95%;
  }
}
div.self-message-box.self-message-box-fail {
  position: relative;
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
div.self-message-box.self-message-box-question-confirm {
  position: relative;
  background: white;
}
div.self-message-box.self-message-box-question-confirm.success {
  background: rgba(95, 196, 0, 0.7);
  color: white;
}
div.self-message-box.self-message-box-question-confirm.faild {
  background: #cc0000;
  color: white;
}
div.self-message-box > hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
div.self-message-box > button.self-message-box-close {
  position: relative;
  cursor: pointer;
  float: left;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
  outline: #000;
}
div.self-message-box > p {
  padding: 0.5rem;
}
div.self-message-box > h4 {
  padding: 0.2rem;
}
div.self-message-box > h5 {
  padding: 0.2rem;
  direction: ltr;
  text-align: left;
}

div.self-element-text-box-validation-container {
  position: relative;
}
div.self-element-text-box-validation-container:hover > input {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
div.self-element-text-box-validation-container > select {
  flex-grow: 1;
  min-width: 2rem;
  max-width: 97%;
}
div.self-element-text-box-validation-container span.self-element-text-box-validation-content {
  position: absolute;
  top: calc(100% - 5px);
  height: fit-content;
  font-size: 90%;
  background-color: #cc0000;
  border-radius: 3px;
  color: white;
  padding: 3px;
  margin-right: 0.2rem;
  letter-spacing: -0.5px;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0.7;
  z-index: 5;
}
div.self-element-text-box-validation-container span.self-element-text-box-validation-content::after {
  position: absolute;
  right: 8px;
  width: 7px;
  height: 7px;
  top: -3px;
  background: #cc0000;
  transform: rotate(45deg);
  box-shadow:
    0 0 3px 0 #cc0000,
    0 0 5px 0 #cc0000;
  z-index: -1;
}
div.self-element-text-box-validation-container:focus-within span.self-element-text-box-validation-content {
  top: calc(100% + 7px);
  border-radius: 5px;
  box-shadow:
    0 0 3px 0 #cc0000,
    0 0 5px 0 #cc0000;
  opacity: 1;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.self-element-text-box-validation-container:focus-within span.self-element-text-box-validation-content::after {
  content: "";
}

div.self-fieldset-box {
  position: relative;
  text-align: start;
  min-width: 10.5rem;
  display: flex;
  flex-grow: 1;
  margin: 0.5rem;
}
div.self-fieldset-box > div {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-start;
  align-items: center;
  float: right;
  padding: 10px;
  border: 4px double rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
div.self-fieldset-box > div:hover {
  border-color: rgba(0, 66, 153, 0.6);
}
div.self-fieldset-box > div > legend {
  margin: 0;
  padding-left: 10px;
  padding-right: 10px;
  /* font-family: Samim; */
  font-size: inherit;
  /* font-weight: bold; */
  color: rgba(0, 0, 0, 0.7);
  cursor: default;
}
div.self-fieldset-box > div > legend:hover {
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
div.self-fieldset-box > div > .row {
  justify-content: flex-start;
  cursor: pointer;
}
div.self-fieldset-box > div > .row:hover {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
}
div.self-fieldset-box > div > .row > .self-element {
  cursor: pointer;
}
div.self-fieldset-box > div > .row > .self-element > label {
  text-align: start;
}

div.self-element-number-box-validation-container {
  position: relative;
  margin-inline: 0.3rem;
  width: min-content;
}
div.self-element-number-box-validation-container > input {
  max-width: 4rem !important;
}
div.self-element-amount-box-validation-container > input {
  max-width: 10rem !important;
}
div.self-element-number-box-validation-container > input:hover,
div.self-element-qty-box-validation-container > input:hover,
div.self-element-amount-box-validation-container > input:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
div.self-element-qty-box-validation-container > input {
  max-width: 4rem !important;
}
div.self-element-number-box-validation-container span.self-element-text-box-validation-content {
  position: absolute;
  top: calc(100% - 5px);
  height: fit-content;
  font-size: 90%;
  background-color: #cc0000;
  border-radius: 3px;
  color: white;
  padding: 3px;
  margin-right: 0.2rem;
  letter-spacing: -0.5px;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0.7;
  z-index: 5;
}
div.self-element-number-box-validation-container span.self-element-text-box-validation-content::after {
  position: absolute;
  right: 8px;
  width: 7px;
  height: 7px;
  top: -3px;
  background: #cc0000;
  transform: rotate(45deg);
  box-shadow:
    0 0 3px 0 #cc0000,
    0 0 5px 0 #cc0000;
  z-index: -1;
}
div.self-element-number-box-validation-container:focus-within span.self-element-text-box-validation-content {
  top: calc(100% + 7px);
  border-radius: 5px;
  box-shadow:
    0 0 3px 0 #cc0000,
    0 0 5px 0 #cc0000;
  opacity: 1;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.self-element-number-box-validation-container:focus-within span.self-element-text-box-validation-content::after {
  content: "";
}

div.self-element-time-box-validation-container {
  position: relative;
}
div.self-element-time-box-validation-container span.self-element-text-box-validation-content {
  position: absolute;
  top: calc(100% - 5px);
  height: fit-content;
  font-size: 90%;
  background-color: #cc0000;
  border-radius: 3px;
  color: white;
  padding: 3px;
  margin-right: 0.2rem;
  letter-spacing: -0.5px;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0.7;
  z-index: 5;
}
div.self-element-time-box-validation-container span.self-element-text-box-validation-content::after {
  position: absolute;
  right: 8px;
  width: 7px;
  height: 7px;
  top: -3px;
  background: #cc0000;
  transform: rotate(45deg);
  box-shadow:
    0 0 3px 0 #cc0000,
    0 0 5px 0 #cc0000;
  z-index: -1;
}
div.self-element-time-box-validation-container:focus-within span.self-element-text-box-validation-content {
  top: calc(100% + 7px);
  border-radius: 5px;
  box-shadow:
    0 0 3px 0 #cc0000,
    0 0 5px 0 #cc0000;
  opacity: 1;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.self-element-time-box-validation-container:focus-within span.self-element-text-box-validation-content::after {
  content: "";
}

div.self-element-select-validation-container {
  position: relative;
}
div.self-element-select-validation-container span.self-element-select-validation-content {
  position: absolute;
  display: block;
  font-size: 40%;
  background-color: #cc0000;
  color: #ffffff;
  padding: 3px;
  margin-right: 0.2rem;
}

.list-of-users-group-view > div > div > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  flex-basis: 6rem;
  min-height: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  background: transparent;
  font-size: 12px;
  font-family: Samim;
  margin: 10px;
  cursor: pointer;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.7);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  flex-basis: auto;
}
.list-of-users-group-view > div > div > button:hover,
.list-of-users-group-view > div > div > button:focus {
  outline: 0;
  color: #1089ff;
  border-color: rgba(0, 132, 255, 0.5);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.list-of-users-group-view > div > div > button:hover::after,
.list-of-users-group-view > div > div > button:focus::after {
  width: 100%;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.list-of-users-group-view > div > div > button:disabled,
.list-of-users-group-view > div > div > button.access-denied {
  color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}
.list-of-users-group-view > div > div > button:disabled:hover,
.list-of-users-group-view > div > div > button:disabled:focus,
.list-of-users-group-view > div > div > button.access-denied:hover,
.list-of-users-group-view > div > div > button.access-denied:focus {
  color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
.list-of-users-group-view > div > div > button:disabled:hover::after,
.list-of-users-group-view > div > div > button:disabled:focus::after,
.list-of-users-group-view > div > div > button.access-denied:hover::after,
.list-of-users-group-view > div > div > button.access-denied:focus::after {
  display: none;
}
.list-of-users-group-view > div > div > button::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 3px;
  background: rgba(0, 132, 255, 0.5);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.list-of-users-group-view > div > div > button > span {
  margin-left: 0.5rem;
}

.group-self-tree-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: center;
  /* width: calc(100vw - 10rem);
  height: calc(100vh - 8rem);
  max-width: 25rem;
  max-height: 30rem; */
  word-wrap: break-word;
  background-color: white;
  border-radius: 5px;
  overflow: hidden;
}
.group-self-tree-view.chart-read-only {
  max-width: none !important;
  max-height: none !important;
  width: calc(100vw - 18.2rem) !important;
  height: calc(100vh - 9rem) !important;
}
.group-self-tree-view > .group-head-self-tree-view {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 100%;
  height: 2rem;
  background: linear-gradient(to right, #1089ff, rgba(0, 132, 255, 0.5), #1089ff);
  padding: 0.25rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
}
.group-self-tree-view > .group-head-self-tree-view > span {
  font-weight: bold;
}
.group-self-tree-view > .group-body-self-tree-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  padding: 0.5rem 0.5rem;
  overflow: hidden;
}
.group-self-tree-view > .group-body-self-tree-view > .row {
  flex-grow: 0;
  flex-wrap: nowrap;
}
.group-self-tree-view > .group-body-self-tree-view > .row > button {
  min-width: 4rem;
  padding: 0.3rem 0.7rem;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.group-self-tree-view > .group-body-self-tree-view > .row > button:hover {
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
  scroll-snap-type: mandatory;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 5px 0;
  user-select: none;
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body > .self-tree-view-body-list {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 100%;
  overflow: visible;
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list.tree-view-level-1
  > li {
  color: rgb(0, 0, 128);
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list.tree-view-level-1
  > li
  > div {
  color: rgb(0, 0, 128);
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list.tree-view-level-1
  > li
  > div::before {
  border: none !important;
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-2 {
  padding-right: 0;
  border-right: 1px dashed rgb(0, 128, 0);
  margin-right: 0.75rem;
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-2
  > li {
  color: rgb(0, 128, 0);
  border-color: rgb(0, 128, 0);
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-2
  > li
  > div {
  color: rgb(0, 128, 0);
  border-color: rgb(0, 128, 0);
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-3 {
  padding-right: 0;
  border-right: 1px dashed rgb(165, 42, 42);
  margin-right: 0.75rem;
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-3
  > li {
  color: rgb(165, 42, 42);
  border-color: rgb(165, 42, 42);
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-3
  > li
  > div {
  color: rgb(165, 42, 42);
  border-color: rgb(165, 42, 42);
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-4 {
  padding-right: 0;
  border-right: 1px dashed rgb(148, 0, 211);
  margin-right: 0.75rem;
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-4
  > li {
  color: rgb(148, 0, 211);
  border-color: rgb(148, 0, 211);
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-4
  > li
  > div {
  color: rgb(148, 0, 211);
  border-color: rgb(148, 0, 211);
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-5 {
  padding-right: 0;
  border-right: 1px dashed rgb(210, 105, 30);
  margin-right: 0.75rem;
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-5
  > li {
  color: rgb(210, 105, 30);
  border-color: rgb(210, 105, 30);
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-5
  > li
  > div {
  color: rgb(210, 105, 30);
  border-color: rgb(210, 105, 30);
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-6 {
  padding-right: 0;
  border-right: 1px dashed rgb(128, 0, 0);
  margin-right: 0.75rem;
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-6
  > li {
  color: rgb(128, 0, 0);
  border-color: rgb(128, 0, 0);
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-6
  > li
  > div {
  color: rgb(128, 0, 0);
  border-color: rgb(128, 0, 0);
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body > .self-tree-view-body-list > li {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: auto;
  min-width: auto;
  flex-grow: 0;
  min-height: 1.7rem;
  margin: 0.1rem 0.2rem;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 0 !important;
  padding-left: 0.2rem !important;
  cursor: pointer;
  overflow: hidden;
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body > .self-tree-view-body-list > li.multi {
  animation: 0.17s myAnim cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes myAnim {
  100% {
    box-shadow:
      inset 0 0 20px 0 #1089ff,
      0 0 5px 0 rgba(0, 132, 255, 0.5);
  }
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body > .self-tree-view-body-list > li:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  > li:hover
  > .button-close {
  opacity: 1;
  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  > li
  > .button-close {
  opacity: 0;
  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  > li
  > .button-close:hover {
  color: #cc0000;
  transition: 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body > .self-tree-view-body-list > li > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  margin: 0;
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  > li
  > span:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 1.5rem;
  height: 1.6rem;
  flex-grow: 0;
  padding: 0 0.2rem;
  border-left: 0.5px solid rgba(0, 0, 0, 0.2);
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  > .self-tree-view-body-list
  > li
  > span:nth-child(2) {
  padding-right: 3px;
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  align-items: center;
  width: 100%;
  overflow: visible;
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul.tree-view-level-1 > li {
  color: rgb(0, 0, 128);
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul.tree-view-level-1 > li > div {
  color: rgb(0, 0, 128);
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul.tree-view-level-1 > li > div::before {
  border: none !important;
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul .tree-view-level-2 {
  padding-right: 0;
  border-right: 1px dashed rgb(0, 128, 0);
  margin-right: 0.75rem;
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul .tree-view-level-2 > li {
  color: rgb(0, 128, 0);
  border-color: rgb(0, 128, 0);
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul .tree-view-level-2 > li > div {
  color: rgb(0, 128, 0);
  border-color: rgb(0, 128, 0);
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul .tree-view-level-3 {
  padding-right: 0;
  border-right: 1px dashed rgb(165, 42, 42);
  margin-right: 0.75rem;
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul .tree-view-level-3 > li {
  color: rgb(165, 42, 42);
  border-color: rgb(165, 42, 42);
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul .tree-view-level-3 > li > div {
  color: rgb(165, 42, 42);
  border-color: rgb(165, 42, 42);
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul .tree-view-level-4 {
  padding-right: 0;
  border-right: 1px dashed rgb(148, 0, 211);
  margin-right: 0.75rem;
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul .tree-view-level-4 > li {
  color: rgb(148, 0, 211);
  border-color: rgb(148, 0, 211);
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul .tree-view-level-4 > li > div {
  color: rgb(148, 0, 211);
  border-color: rgb(148, 0, 211);
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul .tree-view-level-5 {
  padding-right: 0;
  border-right: 1px dashed rgb(210, 105, 30);
  margin-right: 0.75rem;
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul .tree-view-level-5 > li {
  color: rgb(210, 105, 30);
  border-color: rgb(210, 105, 30);
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul .tree-view-level-5 > li > div {
  color: rgb(210, 105, 30);
  border-color: rgb(210, 105, 30);
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul .tree-view-level-6 {
  padding-right: 0;
  border-right: 1px dashed rgb(128, 0, 0);
  margin-right: 0.75rem;
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul .tree-view-level-6 > li {
  color: rgb(128, 0, 0);
  border-color: rgb(128, 0, 0);
}
.group-self-tree-view > .group-body-self-tree-view > .self-tree-view-body ul .tree-view-level-6 > li > div {
  color: rgb(128, 0, 0);
  border-color: rgb(128, 0, 0);
}
li.self-tree-view-node-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 0;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  min-width: 10rem;
  width: 100%;
  max-width: 95%;
  padding: 0 !important;
}
.self-tree-view-node-item-container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  min-width: 10rem;
  width: 100%;
  max-width: 95%;
  padding: 0 !important;
}
.self-tree-view-node-item-container > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  height: 1.5rem;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-inline-start: 0.5rem;
}
.self-tree-view-node-item-container > div::before {
  content: "";
  position: absolute;
  right: -0.5rem;
  width: 1rem;
  height: 1px;
  border-top: 1px dashed;
}
.self-tree-view-node-item-container:hover {
  padding-right: 10px;
  background: linear-gradient(to right, rgba(0, 132, 255, 0.5), transparent);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-tree-view-node-item-container > div > i {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  max-width: 1rem;
  background: transparent;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-tree-view-node-item-container > div > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  word-wrap: normal;
}
.self-tree-view-node-item-container.selected {
  cursor: pointer;
  padding-right: 10px;
  background: linear-gradient(to right, transparent, rgba(0, 132, 255, 0.5));
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-tree-view-node-item-container > span {
  display: inline-block;
  margin: 0 0.1rem;
}
.self-tree-view-node-item-container > span.tree-view-select-column {
  width: 0px;
}
.self-tree-view-node-item-container > span.tree-view-code-column {
  width: auto;
  text-align: center;
}
.self-tree-view-node-item-container > span.tree-view-name-column {
  width: auto;
}
.self-tree-view-node-item-container > span.tree-view-first-name-column {
  width: auto;
  margin-inline-end: 4px;
}
.group-self-tree-view
  > .group-body-self-tree-view
  > .self-tree-view-body
  ul
  > li
  .self-element.self-element-chek-tree-box-container {
  max-width: 25px;
  font-size: 10px;
}
.group-self-tree-view > .group-body-self-tree-view div.self-tree-view-footer {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  position: sticky;
  left: 0;
  bottom: 0;
  height: 4rem;
  width: 100%;
  flex-grow: 0;
  justify-content: space-around;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.group-self-tree-view > .group-body-self-tree-view div.self-tree-view-footer > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  flex-basis: 6rem;
  min-height: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  background: transparent;
  font-size: 12px;
  font-family: Samim;
  margin: 10px;
  cursor: pointer;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.7);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group-self-tree-view > .group-body-self-tree-view div.self-tree-view-footer > button:hover,
.group-self-tree-view > .group-body-self-tree-view div.self-tree-view-footer > button:focus {
  outline: 0;
  color: #1089ff;
  border-color: rgba(0, 132, 255, 0.5);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group-self-tree-view > .group-body-self-tree-view div.self-tree-view-footer > button:hover::after,
.group-self-tree-view > .group-body-self-tree-view div.self-tree-view-footer > button:focus::after {
  width: 100%;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group-self-tree-view > .group-body-self-tree-view div.self-tree-view-footer > button:disabled,
.group-self-tree-view > .group-body-self-tree-view div.self-tree-view-footer > button.access-denied {
  color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}
.group-self-tree-view > .group-body-self-tree-view div.self-tree-view-footer > button:disabled:hover,
.group-self-tree-view > .group-body-self-tree-view div.self-tree-view-footer > button:disabled:focus,
.group-self-tree-view > .group-body-self-tree-view div.self-tree-view-footer > button.access-denied:hover,
.group-self-tree-view > .group-body-self-tree-view div.self-tree-view-footer > button.access-denied:focus {
  color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
.group-self-tree-view > .group-body-self-tree-view div.self-tree-view-footer > button:disabled:hover::after,
.group-self-tree-view > .group-body-self-tree-view div.self-tree-view-footer > button:disabled:focus::after,
.group-self-tree-view > .group-body-self-tree-view div.self-tree-view-footer > button.access-denied:hover::after,
.group-self-tree-view > .group-body-self-tree-view div.self-tree-view-footer > button.access-denied:focus::after {
  display: none;
}
.group-self-tree-view > .group-body-self-tree-view div.self-tree-view-footer > button::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 3px;
  background: rgba(0, 132, 255, 0.5);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

div.group-self-list-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: center;
  width: calc(100vw - 10rem);
  height: calc(100vh - 8rem);
  max-width: 25rem;
  max-height: 30rem;
  word-wrap: break-word;
  background-color: white;
  border-radius: 5px;
  overflow: hidden;
}
div.group-self-list-view > div.group-head-self-list-view {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 100%;
  height: 2rem;
  background: linear-gradient(to right, #1089ff, rgba(0, 132, 255, 0.5), #1089ff);
  padding: 0.25rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: white;
}
div.group-self-list-view > div.group-head-self-list-view > span {
  font-weight: bold;
}
div.group-self-list-view > div.group-body-self-list-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.5rem;
  overflow: hidden;
}
div.group-self-list-view > div.group-body-self-list-view > .self-list-view-header {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  width: 100%;
  padding-bottom: 0.5rem;
}
div.group-self-list-view > div.group-body-self-list-view > .self-list-view-header input {
  width: 100%;
}
div.group-self-list-view > div.group-body-self-list-view > .self-list-view-header > button {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(95, 196, 0, 0.7);
  font-size: 14px;
}
div.group-self-list-view > div.group-body-self-list-view > .self-list-view-header > button:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: center;
  width: 100%;
  overflow: hidden;
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-body > table {
  display: block;
  height: 100%;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  padding: 0;
  padding-bottom: 0.2rem;
  overflow: hidden;
  overflow-y: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
  user-select: none;
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-body > table::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-body > table::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-body > table > thead > tr {
  height: 1.7rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-body > table > thead > tr > th {
  min-width: 5rem;
  padding: 0 1.5rem;
  color: rgba(0, 0, 0, 0.7);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-body > table > tbody > tr {
  min-height: 1.5rem;
  height: 1.5rem;
  min-width: 10rem;
  width: 100%;
  cursor: pointer;
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-body > table > tbody > tr > :nth-child(1) {
  min-width: 5;
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-body > table > tbody > tr:nth-child(even) {
  background: #eeeeee;
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-body > table > tbody > tr:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-body > table > tbody > tr:hover {
  background: rgba(0, 132, 255, 0.5);
  color: white;
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-body > table > tbody > tr.selected {
  border: 1px solid #1089ff;
  box-shadow: inset 0 0 15px #1089ff;
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-body > table > tbody > tr > td {
  color: rgba(0, 0, 0, 0.7);
}
div.group-self-list-view
  > div.group-body-self-list-view
  div.self-list-view-body
  > table
  > tbody
  > tr
  > td:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-body > table > tbody > tr > td.code {
  text-align: end;
  padding-left: 0.3rem;
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-body > table > tbody > tr > td.name {
  width: 100%;
  text-align: start;
  padding-right: 0.3rem;
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-footer {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  position: sticky;
  left: 0;
  bottom: 0;
  height: 4rem;
  width: 100%;
  flex-grow: 0;
  justify-content: space-around;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-footer > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  flex-basis: 6rem;
  min-height: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  background: transparent;
  font-size: 12px;
  font-family: Samim;
  margin: 10px;
  cursor: pointer;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.7);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-footer > button:hover,
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-footer > button:focus {
  outline: 0;
  color: #1089ff;
  border-color: rgba(0, 132, 255, 0.5);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-footer > button:hover::after,
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-footer > button:focus::after {
  width: 100%;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-footer > button:disabled,
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-footer > button.access-denied {
  color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-footer > button:disabled:hover,
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-footer > button:disabled:focus,
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-footer > button.access-denied:hover,
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-footer > button.access-denied:focus {
  color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-footer > button:disabled:hover::after,
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-footer > button:disabled:focus::after,
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-footer > button.access-denied:hover::after,
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-footer > button.access-denied:focus::after {
  display: none;
}
div.group-self-list-view > div.group-body-self-list-view div.self-list-view-footer > button::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 3px;
  background: rgba(0, 132, 255, 0.5);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

span.self-element-content {
  position: relative;
  background-color: #007bff;
  font-size: 90%;
  color: #ffffff;
  padding: 0.3rem 1rem;
  margin: 0.2rem;
  border-radius: 0.25rem;
}

span.self-element-alarm {
  position: absolute;
  top: calc(100% + 3px);
  height: fit-content;
  font-size: 90%;
  background-color: #cc0000;
  border-radius: 5px;
  color: white;
  padding: 3px;
  margin-right: 0.2rem;
  letter-spacing: -0.5px;
  box-shadow:
    0 0 3px 0 #cc0000,
    0 0 5px 0 #cc0000;
  z-index: 5;
}
span.self-element-alarm::after {
  content: "";
  position: absolute;
  right: 8px;
  width: 7px;
  height: 7px;
  top: -3px;
  background: #cc0000;
  transform: rotate(45deg);
  box-shadow:
    0 0 3px 0 #cc0000,
    0 0 5px 0 #cc0000;
  z-index: -1;
}

span.self-element-messages {
  position: relative;
  background-color: #cc0000;
  font-size: 90%;
  color: #ffffff;
  padding: 0.3rem 1rem;
  margin: 0.2rem;
  border-radius: 0.25rem;
}
div.self-element-codes-container {
  display: flex;
  position: relative;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  /* margin-inline: 7px; */
  margin-inline-end: 10px;
  font-weight: bold;
}
div.self-element-codes-container > div.highlight-menu-inner {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  position: absolute;
  background-image: linear-gradient(to bottom, rgba(49, 49, 47, 0.8), #262625);
  background-repeat: repeat-x;
  border-radius: 5px;
  padding: 2px 5px;
  bottom: 1.5rem;
  left: 50%;
  transform: translate(-50%, -4px);
  will-change: auto;
  z-index: 1080;
}
div.self-element-codes-container > div.highlight-menu-inner > button {
  width: 25px;
  color: white;
  background: transparent;
}
div.self-element-codes-container > div.highlight-menu-inner > button#copy {
  cursor: copy;
}
div.self-element-codes-container > div.highlight-menu-inner > button#edit {
  cursor: initial;
}
div.self-element-codes-container > .highlightMenu-arrowClip {
  position: absolute;
  bottom: 20px;
  left: 50%;
  clip: rect(8px 16px 16px 0);
  margin-left: -8px;
}
div.self-element-codes-container > .highlightMenu-arrowClip > .highlightMenu-arrow {
  display: block;
  width: 16px;
  height: 16px;
  background-color: #262625;
  transform: rotate(45deg) scale(0.4);
}

div.self-Piece-tree-view-select-container {
  position: relative;
}
div.self-Piece-tree-view-select-container span.self-element-messages {
  background-color: #cc0000;
  font-size: 90%;
  color: #ffffff;
  padding: 0.3rem 1rem;
  margin-right: 0.2rem;
  border-radius: 0.25rem;
}

div.self-element-date-container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  width: auto;
}
div.self-element-date-container > div.highlight-menu-inner {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  position: absolute;
  background-image: linear-gradient(to bottom, rgba(49, 49, 47, 0.8), #262625);
  background-repeat: repeat-x;
  border-radius: 5px;
  padding: 2px 5px;
  bottom: 1.5rem;
  left: 50%;
  transform: translate(-50%);
  will-change: auto;
  z-index: 1080;
}
div.self-element-date-container > div.highlight-menu-inner > button {
  color: white;
  background: transparent;
}
div.self-element-date-container > div.highlight-menu-inner > button#copy {
  cursor: copy;
  background: transparent;
}
div.self-element-date-container > div.highlight-menu-inner > button#edit {
  cursor: initial;
  background: transparent;
}
div.self-element-date-container > .highlightMenu-arrowClip {
  position: absolute;
  bottom: 20px;
  left: 50%;
  clip: rect(8px 16px 16px 0);
  margin-left: -8px;
}
div.self-element-date-container > .highlightMenu-arrowClip > .highlightMenu-arrow {
  display: block;
  width: 16px;
  height: 16px;
  background-color: #262625;
  transform: rotate(45deg) scale(0.4);
}

div.self-date:not(.self-date-read-only) {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  background: white;
}
div.self-date:not(.self-date-read-only):hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
div.self-date:not(.self-date-read-only):focus-within {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
div.self-date:not(.self-date-read-only) > input.self-sub-date {
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
  border: none;
  border-radius: 0;
  text-align: center;
  direction: ltr;
  padding-left: 0;
  padding-right: 0;
  letter-spacing: 0.05rem;
}
div.self-date:not(.self-date-read-only) > input.self-sub-date::placeholder {
  color: red;
  opacity: 0.6;
}
div.self-date:not(.self-date-read-only) > input.self-sub-date:first-child {
  padding-left: 0.1rem;
}
div.self-date:not(.self-date-read-only) > input.self-sub-date:last-child {
  padding-right: 0.1rem;
}
div.self-date:not(.self-date-read-only) > input.self-sub-date.length-1:not([size="1"]) {
  color: red;
}
div.self-date:not(.self-date-read-only) > input.self-sub-date.length-2:not([size="2"]) {
  color: red;
}
div.self-date:not(.self-date-read-only) > input.self-sub-date.length-3:not([size="3"]) {
  color: red;
}
div.self-date:not(.self-date-read-only) > input.self-sub-date.length-4:not([size="4"]) {
  color: red;
}
div.self-date:not(.self-date-read-only) > input.self-sub-date.length-5:not([size="4"]) {
  color: red;
}
div.self-date:not(.self-date-read-only) > input.self-sub-date.length-6:not([size="4"]) {
  color: red;
}
div.self-date:not(.self-date-read-only) > input.self-sub-date.length-7:not([size="4"]) {
  color: red;
}
div.self-date:not(.self-date-read-only) > input.self-sub-date.length-8:not([size="4"]) {
  color: red;
}
div.self-date:not(.self-date-read-only) > input.self-sub-date.length-9:not([size="4"]) {
  color: red;
}

span.self-date-label-level-1 {
  padding-right: 0.3rem;
}
span.self-date-label-level-2 {
  padding-right: 0.3rem;
}
span.self-date-label-level-3 {
  padding-right: 0.3rem;
}
span.self-date-label-level-4 {
  padding-right: 0.3rem;
}
span.self-date-label-level-5 {
  padding-right: 0.3rem;
}
span.self-date-label-level-6 {
  padding-right: 0.3rem;
}
span.self-date-label-level-7 {
  padding-right: 0.3rem;
}
span.self-date-label-level-8 {
  padding-right: 0.3rem;
}
span.self-date-label-level-9 {
  padding-right: 0.3rem;
}

.self-element.self-date-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  padding: 0.5rem;
  border-radius: 5px;
  -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.137));
  user-select: none;
}
.self-element.self-date-picker > div.self-date-picker-selector {
  padding: 5px;
}
.self-element.self-date-picker > div.self-date-picker-selector.selected {
  box-shadow: inset 0 0 2px blue;
}
.self-element.self-date-picker div.self-date-picker-head {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  height: 1.7rem;
}
.self-element.self-date-picker div.self-date-picker-head > button {
  position: relative;
  height: 100%;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
}
.self-element.self-date-picker div.self-date-picker-head > button:hover,
.self-element.self-date-picker div.self-date-picker-head > button:focus {
  outline: 0;
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.2);
}
.self-element.self-date-picker div.self-date-picker-head > .next {
  width: 3rem;
}
.self-element.self-date-picker div.self-date-picker-head > .current {
  width: 100%;
}
.self-element.self-date-picker div.self-date-picker-head > .previous {
  width: 3rem;
}
.self-element.self-date-picker .self-date-picker-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  max-width: 14.2rem;
  width: 14.2rem;
  max-height: 13rem;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.self-element.self-date-picker .self-date-picker-body::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.self-element.self-date-picker .self-date-picker-body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.self-element.self-date-picker .self-date-picker-body > table {
  position: relative;
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  overflow: hidden;
}
.self-element.self-date-picker .self-date-picker-body > table > thead > tr {
  height: 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.self-element.self-date-picker .self-date-picker-body > table > thead > tr > th {
  font-weight: bold;
  color: #1089ff;
  text-align: center;
  cursor: default;
}
.self-element.self-date-picker .self-date-picker-body > table > tbody > tr {
  height: 1.7rem;
}
.self-element.self-date-picker .self-date-picker-body > table > tbody > tr > td {
  position: relative;
  width: 2rem;
  text-align: center;
  padding: 1px 0;
}
.self-element.self-date-picker .self-date-picker-body > table > tbody > tr > td:hover {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
.self-element.self-date-picker .self-date-picker-body > table > tbody > tr > td > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-element.self-date-picker .self-date-picker-body > table > tbody > tr > td > button:focus {
  outline: 0;
}
.self-element.self-date-picker .self-date-picker-body > table > tbody > tr > td > button.friday {
  color: #cc0000;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-element.self-date-picker .self-date-picker-body > table > tbody > tr > td > button.selected {
  background: rgba(0, 132, 255, 0.5);
  color: white;
  font-weight: bold;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-element.self-date-picker .self-date-picker-body > table > tbody > tr:nth-child(1) {
  display: none;
}
.self-element.self-date-picker .self-date-picker-body > table > tbody > tr:nth-child(odd) {
  background: #eeeeee;
}
.self-element.self-date-picker .self-date-picker-body > div.self-date-picker-body-year {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
}
.self-element.self-date-picker .self-date-picker-body > div.self-date-picker-body-year > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 3.5rem;
  height: 2.5rem;
}
.self-element.self-date-picker .self-date-picker-body > div.self-date-picker-body-year > button.active {
  background: rgba(0, 132, 255, 0.5);
  color: white;
  font-weight: bold;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-element.self-date-picker .self-date-picker-body > div.self-date-picker-body-month {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
}
.self-element.self-date-picker .self-date-picker-body > div.self-date-picker-body-month > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 4rem;
  height: 3rem;
}
.self-element.self-date-picker .self-date-picker-body > div.self-date-picker-body-month > button.active {
  background: rgba(0, 132, 255, 0.5);
  color: white;
  font-weight: bold;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-element.self-date-picker div.self-date-picker-footer {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  position: sticky;
  left: 0;
  bottom: 0;
  height: 3rem;
  width: 100%;
  flex-grow: 0;
  justify-content: space-around;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.self-element.self-date-picker div.self-date-picker-footer > label {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  width: 5rem;
  height: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.self-element.self-date-picker div.self-date-picker-footer > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  flex-basis: 6rem;
  min-height: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  background: transparent;
  font-size: 12px;
  font-family: Samim;
  margin: 10px;
  cursor: pointer;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.7);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  flex-basis: 5rem;
}
.self-element.self-date-picker div.self-date-picker-footer > button:hover,
.self-element.self-date-picker div.self-date-picker-footer > button:focus {
  outline: 0;
  color: #1089ff;
  border-color: rgba(0, 132, 255, 0.5);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-element.self-date-picker div.self-date-picker-footer > button:hover::after,
.self-element.self-date-picker div.self-date-picker-footer > button:focus::after {
  width: 100%;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-element.self-date-picker div.self-date-picker-footer > button:disabled,
.self-element.self-date-picker div.self-date-picker-footer > button.access-denied {
  color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}
.self-element.self-date-picker div.self-date-picker-footer > button:disabled:hover,
.self-element.self-date-picker div.self-date-picker-footer > button:disabled:focus,
.self-element.self-date-picker div.self-date-picker-footer > button.access-denied:hover,
.self-element.self-date-picker div.self-date-picker-footer > button.access-denied:focus {
  color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
.self-element.self-date-picker div.self-date-picker-footer > button:disabled:hover::after,
.self-element.self-date-picker div.self-date-picker-footer > button:disabled:focus::after,
.self-element.self-date-picker div.self-date-picker-footer > button.access-denied:hover::after,
.self-element.self-date-picker div.self-date-picker-footer > button.access-denied:focus::after {
  display: none;
}
.self-element.self-date-picker div.self-date-picker-footer > button::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 3px;
  background: rgba(0, 132, 255, 0.5);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.self-element-time-container .self-time {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 5px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  background: white;
}
.self-element-time-container .self-time:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
.self-element-time-container .self-time:focus-within {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.self-element-time-container .self-time > span {
  font-size: 14px;
  font-weight: bold;
}
.self-element-time-container .self-time > input.self-sub-time {
  min-width: 1.5rem !important;
  width: auto;
  max-width: auto;
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
  border: none;
  border-radius: 0;
  text-align: center;
  direction: ltr;
  padding-left: 0;
  padding-right: 0;
  letter-spacing: 0.05rem;
  border-radius: 3px;
}
.self-element-time-container .self-time > input.self-sub-time:focus {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.self-element-time-container .self-time > input.self-sub-time::placeholder {
  color: red;
  opacity: 0.6;
}
.self-element-time-container .self-time > input.self-sub-time:first-child {
  padding-left: 0.1rem;
}
.self-element-time-container .self-time > input.self-sub-time:last-child {
  padding-right: 0.1rem;
}

div.group-self-child-parent-tree-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: center;
  width: calc(100vw - 10rem);
  height: calc(100vh - 8rem);
  max-width: 25rem;
  max-height: 30rem;
  word-wrap: break-word;
  background-color: white;
  border-radius: 5px;
  overflow: hidden;
}
div.group-self-child-parent-tree-view > div.group-head-self-child-parent-tree-view {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 100%;
  height: 2rem;
  background: linear-gradient(to right, #1089ff, rgba(0, 132, 255, 0.5), #1089ff);
  padding: 0.25rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: white;
}
div.group-self-child-parent-tree-view > div.group-head-self-child-parent-tree-view > span {
  font-weight: bold;
}
div.group-self-child-parent-tree-view > div.group-body-self-child-parent-tree-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  padding: 0.5rem 0.5rem;
  overflow: hidden;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
  border: 1px solid rgba(0, 0, 0, 0.2);
  user-select: none;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  align-items: center;
  width: 100%;
  overflow: visible;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul.child-parent-tree-view-level-1
  > li {
  color: rgb(0, 0, 128);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul.child-parent-tree-view-level-1
  > li
  > div {
  color: rgb(0, 0, 128);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  .child-parent-tree-view-level-2 {
  padding-right: 0;
  border-right: 1px dashed rgb(0, 128, 0);
  margin-right: 0.75rem;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  .child-parent-tree-view-level-2
  > li {
  color: rgb(0, 128, 0);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  .child-parent-tree-view-level-2
  > li
  > div {
  color: rgb(0, 128, 0);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  .child-parent-tree-view-level-3 {
  padding-right: 0;
  border-right: 1px dashed rgb(165, 42, 42);
  margin-right: 0.75rem;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  .child-parent-tree-view-level-3
  > li {
  color: rgb(165, 42, 42);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  .child-parent-tree-view-level-3
  > li
  > div {
  color: rgb(165, 42, 42);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  .child-parent-tree-view-level-4 {
  padding-right: 0;
  border-right: 1px dashed rgb(148, 0, 211);
  margin-right: 0.75rem;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  .child-parent-tree-view-level-4
  > li {
  color: rgb(148, 0, 211);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  .child-parent-tree-view-level-4
  > li
  > div {
  color: rgb(148, 0, 211);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  .child-parent-tree-view-level-5 {
  padding-right: 0;
  border-right: 1px dashed rgb(210, 105, 30);
  margin-right: 0.75rem;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  .child-parent-tree-view-level-5
  > li {
  color: rgb(210, 105, 30);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  .child-parent-tree-view-level-5
  > li
  > div {
  color: rgb(210, 105, 30);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  .child-parent-tree-view-level-6 {
  padding-right: 0;
  border-right: 1px dashed rgb(128, 0, 0);
  margin-right: 0.75rem;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  .child-parent-tree-view-level-6
  > li {
  color: rgb(128, 0, 0);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  .child-parent-tree-view-level-6
  > li
  > div {
  color: rgb(128, 0, 0);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  min-width: 10rem;
  padding: 0 !important;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li
  > div:not(.child-parent-tree-view-row-new-node) {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  height: 1.5rem;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li
  > div:not(.child-parent-tree-view-row-new-node):hover {
  padding-right: 10px;
  background: linear-gradient(to right, rgba(0, 132, 255, 0.5), transparent);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li
  > div:not(.child-parent-tree-view-row-new-node)
  > i {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 1.5rem;
  max-width: 1.5rem;
  background: transparent;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li
  > div:not(.child-parent-tree-view-row-new-node)
  > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  word-wrap: normal;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li
  > div:not(.child-parent-tree-view-row-new-node)
  > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: flex-end;
  height: 100%;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li
  > div:not(.child-parent-tree-view-row-new-node)
  > div
  > button {
  width: 1.5rem;
  height: 100%;
  color: rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li
  > div:not(.child-parent-tree-view-row-new-node)
  > div
  > button:hover {
  color: white;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li
  > div:not(.child-parent-tree-view-row-new-node).selected {
  cursor: pointer;
  padding-right: 10px;
  background: linear-gradient(to right, transparent, rgba(0, 132, 255, 0.5));
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li
  .child-parent-tree-view-row-new-node {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  width: 100%;
  height: 1.7rem;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li
  .child-parent-tree-view-row-new-node:hover,
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li
  .child-parent-tree-view-row-new-node.selected {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li
  > span {
  display: inline-block;
  margin: 0 0.1rem;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li
  > span.child-parent-tree-view-select-column {
  width: 0px;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li
  > span.child-parent-tree-view-code-column {
  width: auto;
  text-align: center;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li
  > span.child-parent-tree-view-name-column {
  width: auto;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li
  > span.child-parent-tree-view-first-name-column {
  width: auto;
  margin-inline-end: 4px;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-body
  ul
  > li
  .self-element.self-element-chek-tree-box-container {
  max-width: 25px;
  font-size: 10px;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-footer {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  position: sticky;
  left: 0;
  bottom: 0;
  height: 4rem;
  width: 100%;
  flex-grow: 0;
  justify-content: space-around;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-footer
  > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  flex-basis: 6rem;
  min-height: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  background: transparent;
  font-size: 12px;
  font-family: Samim;
  margin: 10px;
  cursor: pointer;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.7);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-footer
  > button:hover,
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-footer
  > button:focus {
  outline: 0;
  color: #1089ff;
  border-color: rgba(0, 132, 255, 0.5);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-footer
  > button:hover::after,
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-footer
  > button:focus::after {
  width: 100%;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-footer
  > button:disabled,
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-footer
  > button.access-denied {
  color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-footer
  > button:disabled:hover,
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-footer
  > button:disabled:focus,
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-footer
  > button.access-denied:hover,
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-footer
  > button.access-denied:focus {
  color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-footer
  > button:disabled:hover::after,
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-footer
  > button:disabled:focus::after,
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-footer
  > button.access-denied:hover::after,
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-footer
  > button.access-denied:focus::after {
  display: none;
}
div.group-self-child-parent-tree-view
  > div.group-body-self-child-parent-tree-view
  div.self-child-parent-tree-view-footer
  > button::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 3px;
  background: rgba(0, 132, 255, 0.5);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

div.group-self-child-parent-list-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: center;
  width: calc(100vw - 10rem);
  height: calc(100vh - 8rem);
  max-width: 25rem;
  max-height: 30rem;
  word-wrap: break-word;
  background-color: white;
  border-radius: 5px;
  overflow: hidden;
}
div.group-self-child-parent-list-view > div.group-head-self-child-parent-list-view {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 100%;
  height: 2rem;
  background: linear-gradient(to right, #1089ff, rgba(0, 132, 255, 0.5), #1089ff);
  padding: 0.25rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: white;
}
div.group-self-child-parent-list-view > div.group-head-self-child-parent-list-view > span {
  font-weight: bold;
}
div.group-self-child-parent-list-view > div.group-body-self-child-parent-list-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.5rem;
  overflow: hidden;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  > .self-child-parent-list-view-header {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  width: 100%;
  padding-bottom: 0.5rem;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  > .self-child-parent-list-view-header
  input {
  width: 100%;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: center;
  width: 100%;
  overflow: hidden;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table {
  display: block;
  height: 100%;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  padding: 0;
  padding-bottom: 0.2rem;
  overflow: hidden;
  overflow-y: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
  user-select: none;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > thead {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > thead
  > tr {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  height: 1.7rem;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), white, #eeeeee);
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > thead
  > tr
  > th {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  min-width: 5rem;
  padding: 0 1.5rem;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  min-height: 1.5rem;
  height: 1.5rem;
  min-width: 10rem;
  width: 100%;
  cursor: pointer;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr
  > :nth-child(2),
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr
  > :nth-child(3),
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr
  > :nth-child(4) {
  border: none !important;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr
  > :nth-child(2)
  > button,
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr
  > :nth-child(3)
  > button,
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr
  > :nth-child(4)
  > button {
  width: 1.5rem;
  height: 100%;
  color: rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr
  > :nth-child(2)
  > button:hover,
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr
  > :nth-child(3)
  > button:hover,
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr
  > :nth-child(4)
  > button:hover {
  color: white;
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.2);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr
  > :nth-child(1) {
  min-width: 5;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr:nth-child(even) {
  background: #eeeeee;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr:hover {
  background: rgba(0, 132, 255, 0.5);
  color: white;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr.selected {
  border: 1px solid #1089ff;
  box-shadow: inset 0 0 15px #1089ff;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr
  > td {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  height: 100%;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr
  > td:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr
  > td.code {
  text-align: end;
  padding-left: 0.3rem;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-body
  > table
  > tbody
  > tr
  > td.name {
  width: 100%;
  text-align: start;
  padding-right: 0.3rem;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-footer {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  position: sticky;
  left: 0;
  bottom: 0;
  height: 4rem;
  width: 100%;
  flex-grow: 0;
  justify-content: space-around;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-footer
  > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  flex-basis: 6rem;
  min-height: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  background: transparent;
  font-size: 12px;
  font-family: Samim;
  margin: 10px;
  cursor: pointer;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.7);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-footer
  > button:hover,
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-footer
  > button:focus {
  outline: 0;
  color: #1089ff;
  border-color: rgba(0, 132, 255, 0.5);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-footer
  > button:hover::after,
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-footer
  > button:focus::after {
  width: 100%;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-footer
  > button:disabled,
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-footer
  > button.access-denied {
  color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-footer
  > button:disabled:hover,
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-footer
  > button:disabled:focus,
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-footer
  > button.access-denied:hover,
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-footer
  > button.access-denied:focus {
  color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-footer
  > button:disabled:hover::after,
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-footer
  > button:disabled:focus::after,
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-footer
  > button.access-denied:hover::after,
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-footer
  > button.access-denied:focus::after {
  display: none;
}
div.group-self-child-parent-list-view
  > div.group-body-self-child-parent-list-view
  div.self-child-parent-list-view-footer
  > button::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 3px;
  background: rgba(0, 132, 255, 0.5);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

div.group-self-simple-list-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: center;
  width: calc(100vw - 10rem);
  height: calc(100vh - 8rem);
  max-width: 25rem;
  max-height: 30rem;
  word-wrap: break-word;
  background-color: white;
  border-radius: 5px;
  overflow: hidden;
}
div.group-self-simple-list-view > div.group-head-self-simple-list-view {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 100%;
  height: 2rem;
  background: linear-gradient(to right, #1089ff, rgba(0, 132, 255, 0.5), #1089ff);
  padding: 0.25rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: white;
}
div.group-self-simple-list-view > div.group-head-self-simple-list-view > span {
  font-weight: bold;
}
div.group-self-simple-list-view > div.group-body-self-simple-list-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.5rem;
  overflow: hidden;
}
div.group-self-simple-list-view > div.group-body-self-simple-list-view > .self-simple-list-view-header {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  width: 100%;
  padding-bottom: 0.5rem;
}
div.group-self-simple-list-view > div.group-body-self-simple-list-view > .self-simple-list-view-header input {
  width: 100%;
}
div.group-self-simple-list-view > div.group-body-self-simple-list-view div.self-simple-list-view-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: center;
  width: 100%;
  overflow: hidden;
}
div.group-self-simple-list-view > div.group-body-self-simple-list-view div.self-simple-list-view-body > table {
  display: block;
  height: 100%;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  padding: 0;
  padding-bottom: 0.2rem;
  overflow: hidden;
  overflow-y: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
  user-select: none;
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-body
  > table::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-body
  > table::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-body
  > table
  > thead
  > tr {
  height: 1.7rem;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), white, #eeeeee);
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-body
  > table
  > thead
  > tr
  > th {
  min-width: 5rem;
  padding: 0 1.5rem;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-body
  > table
  > tbody
  > tr {
  min-height: 1.5rem;
  height: 1.5rem;
  min-width: 10rem;
  width: 100%;
  cursor: pointer;
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-body
  > table
  > tbody
  > tr
  > :nth-child(1) {
  min-width: 5;
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-body
  > table
  > tbody
  > tr:nth-child(even) {
  background: #eeeeee;
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-body
  > table
  > tbody
  > tr:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-body
  > table
  > tbody
  > tr:hover {
  background: rgba(0, 132, 255, 0.5);
  color: white;
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-body
  > table
  > tbody
  > tr.selected {
  border: 1px solid #1089ff;
  box-shadow: inset 0 0 15px #1089ff;
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-body
  > table
  > tbody
  > tr
  > td:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-body
  > table
  > tbody
  > tr
  > td.code {
  text-align: end;
  padding-left: 0.3rem;
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-body
  > table
  > tbody
  > tr
  > td.name {
  width: 100%;
  text-align: start;
  padding-right: 0.3rem;
}
div.group-self-simple-list-view > div.group-body-self-simple-list-view div.self-simple-list-view-footer {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  position: sticky;
  left: 0;
  bottom: 0;
  height: 4rem;
  width: 100%;
  flex-grow: 0;
  justify-content: space-around;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
div.group-self-simple-list-view > div.group-body-self-simple-list-view div.self-simple-list-view-footer > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  flex-basis: 6rem;
  min-height: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  background: transparent;
  font-size: 12px;
  font-family: Samim;
  margin: 10px;
  cursor: pointer;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.7);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.group-self-simple-list-view > div.group-body-self-simple-list-view div.self-simple-list-view-footer > button:hover,
div.group-self-simple-list-view > div.group-body-self-simple-list-view div.self-simple-list-view-footer > button:focus {
  outline: 0;
  color: #1089ff;
  border-color: rgba(0, 132, 255, 0.5);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-footer
  > button:hover::after,
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-footer
  > button:focus::after {
  width: 100%;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-footer
  > button:disabled,
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-footer
  > button.access-denied {
  color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-footer
  > button:disabled:hover,
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-footer
  > button:disabled:focus,
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-footer
  > button.access-denied:hover,
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-footer
  > button.access-denied:focus {
  color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-footer
  > button:disabled:hover::after,
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-footer
  > button:disabled:focus::after,
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-footer
  > button.access-denied:hover::after,
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-footer
  > button.access-denied:focus::after {
  display: none;
}
div.group-self-simple-list-view
  > div.group-body-self-simple-list-view
  div.self-simple-list-view-footer
  > button::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 3px;
  background: rgba(0, 132, 255, 0.5);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.voucher-insert-update-grid-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.voucher-insert-update-grid-view > :first-child .row {
  align-items: stretch;
}
.voucher-insert-update-grid-view .self-grid-view-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  min-height: 10rem;
  min-width: 10rem;
  max-width: calc(100vw - 15rem);
  max-height: calc(100vh - 18rem);
  overflow-x: auto;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
  scroll-behavior: auto;
}
.voucher-insert-update-grid-view .self-grid-view-container::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.voucher-insert-update-grid-view .self-grid-view-container::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.voucher-insert-update-grid-view .self-grid-view-container:focus,
.voucher-insert-update-grid-view .self-grid-view-container:active {
  outline: 0;
}
@media screen and (max-width: 900px) {
  .voucher-insert-update-grid-view .self-grid-view-container {
    max-width: calc(100vw - 5rem);
    max-height: calc(100vh - 18rem);
  }
}
.voucher-insert-update-grid-view .self-grid-view-container > table {
  min-width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}
.voucher-insert-update-grid-view .self-grid-view-container > table > thead > tr {
  position: relative;
  height: 2.7rem;
  background: #222831;
  border-bottom: 4px double rgba(0, 0, 0, 0.7);
}
.voucher-insert-update-grid-view .self-grid-view-container > table > thead > tr > th {
  min-width: fit-content;
  padding: 0 5px;
  font-weight: bold;
  text-align: center;
  color: #eeeeee;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.voucher-insert-update-grid-view .self-grid-view-container > table > thead > tr > th div {
  white-space: nowrap;
}
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody > tr {
  position: relative;
  height: 2.2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody > tr > td {
  min-width: fit-content;
  padding: 0 5px;
  text-align: center;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
  cursor: text;
}
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody > tr > td span {
  white-space: nowrap;
}
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody > tr > td > div {
  justify-content: center;
  flex-wrap: nowrap;
}
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody > tr > td > input {
  width: 100%;
}
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody > tr > td.cell-hasChange::after {
  content: "*";
  position: absolute;
  top: 5px;
  right: 5px;
  color: red;
}
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody > tr > td.cell-error {
  border: 2px dotted #cc0000;
  box-shadow: inset 0 0 20px #cc0000;
}
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody > tr > th {
  text-align: center;
  background: #eeeeee;
  cursor: cell;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody > tr > th:hover {
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.2);
}
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody > tr > th.row-not-valid {
  color: #cc0000;
  box-shadow: inset 0 0 10px #cc0000;
}
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody > tr.active-row,
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody > tr:focus {
  border: 1px solid #1089ff;
  box-shadow: inset 0 0 25px #1089ff;
}
.voucher-insert-update-grid-view .self-grid-view-container > table > thead > tr > th.active,
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody > tr > th.active {
  border: 2px solid #1089ff;
  box-shadow: inset 0 0 35px #1089ff;
}
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody > tr.selected-row {
  background: rgba(113, 62, 255, 0.3);
}
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody > tr.tr-information {
  height: 0;
}
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody > tr.tr-information > td {
  position: relative;
  width: 100%;
  height: 100%;
}
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody > :nth-child(even) {
  background: #eeeeee;
}
.voucher-insert-update-grid-view .self-grid-view-container > table > tbody .self-element-text-box-validation-content {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  flex-grow: 0;
  position: absolute;
  right: 0;
  top: -8px;
  bottom: auto;
  font-size: 70%;
  text-align: end;
  background: #cc0000;
  color: white;
  padding: 0;
}

.self-main-grid-view-read-only {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.self-main-grid-view-read-only > :first-child .row {
  align-items: stretch;
}
.self-main-grid-view-read-only .self-header-of-report-grid-view-report {
  width: 100%;
  height: 100%;
}
.self-main-grid-view-read-only .self-header-of-report-grid-view-report .filter-details-parameter-report {
  display: block;
}
.self-main-grid-view-read-only .self-header-of-report-grid-view-report .filter-details-parameter-report div.line {
  display: flex;
  margin: 5px;
  align-items: flex-start;
}
.self-main-grid-view-read-only .self-header-of-report-grid-view-report .filter-details-parameter-report div.line h1,
.self-main-grid-view-read-only .self-header-of-report-grid-view-report .filter-details-parameter-report div.line h2,
.self-main-grid-view-read-only .self-header-of-report-grid-view-report .filter-details-parameter-report div.line h3,
.self-main-grid-view-read-only .self-header-of-report-grid-view-report .filter-details-parameter-report div.line h4,
.self-main-grid-view-read-only .self-header-of-report-grid-view-report .filter-details-parameter-report div.line h5 {
  display: inline;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  min-height: 10rem;
  min-width: 10rem;
  max-width: calc(100vw - 15rem);
  max-height: calc(100vh - 18rem);
  overflow-x: auto;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
  scroll-behavior: auto;
  border: solid black 1px;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container:focus,
.self-main-grid-view-read-only .self-grid-view-read-only-container:active {
  outline: 0;
}
@media screen and (max-width: 900px) {
  .self-main-grid-view-read-only .self-grid-view-read-only-container {
    max-width: calc(100vw - 5rem);
    max-height: calc(100vh - 18rem);
  }
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table {
  min-width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 3px;
  table-layout: fixed;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table tr th.active {
  border: 2px solid #1089ff;
  box-shadow: inset 0 0 35px #1089ff;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > colgroup:first-child,
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > colgroup:last-child {
  min-width: 1rem;
  width: 1rem;
  max-width: 1rem;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tfoot > tr {
  height: 3rem;
  background: white;
  color: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.7);
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tfoot > tr td {
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.7);
  font-weight: bold;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tfoot > tr td:first-child {
  text-align: end;
  padding: 0 1rem;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tfoot > tr td > div {
  justify-content: center;
  align-content: center;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tfoot > tr td:not(:last-child) {
  border-inline-end: 1px solid rgba(0, 0, 0, 0.7);
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > thead > tr {
  position: sticky;
  top: 0;
  height: 2.7rem;
  background-color: rgba(0, 0, 0, 0.07);
  color: #111827;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  z-index: 5;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > thead > tr > th {
  min-width: fit-content;
  padding: 0 5px;
  font-weight: bold;
  text-align: center;
  /* color: #eeeeee; */
  /* border-left: 1px solid rgba(0, 0, 0, 0.2); */
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > thead > tr > th > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  white-space: nowrap;
  align-items: center;
  height: 100%;
  min-height: 2.7rem;
  overflow: hidden;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > thead > tr > th > div > .filter-table {
  visibility: hidden;
  align-items: flex-start;
  position: absolute;
  bottom: -1rem;
  color: #eeeeee;
  right: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
}
.self-main-grid-view-read-only
  .self-grid-view-read-only-container
  > table
  > thead
  > tr
  > th
  > div
  > .filter-table:focus,
.self-main-grid-view-read-only
  .self-grid-view-read-only-container
  > table
  > thead
  > tr
  > th
  > div
  > .filter-table:hover {
  outline: 0;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  color: #1089ff;
  transition: 0.3s cubic-bezier(1, 0, 0, 1);
}
.self-main-grid-view-read-only
  .self-grid-view-read-only-container
  > table
  > thead
  > tr
  > th
  > div
  > .filter-table.show {
  visibility: visible;
  bottom: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > thead > tr > th > div > .sort-flow-icon {
  visibility: hidden;
  align-items: flex-start;
  position: absolute;
  bottom: -1rem;
  color: #eeeeee;
  left: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
}
.self-main-grid-view-read-only
  .self-grid-view-read-only-container
  > table
  > thead
  > tr
  > th
  > div
  > .sort-flow-icon:focus,
.self-main-grid-view-read-only
  .self-grid-view-read-only-container
  > table
  > thead
  > tr
  > th
  > div
  > .sort-flow-icon:hover {
  outline: 0;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  color: #1089ff;
  transition: 0.3s cubic-bezier(1, 0, 0, 1);
}
.self-main-grid-view-read-only
  .self-grid-view-read-only-container
  > table
  > thead
  > tr
  > th
  > div
  > .sort-flow-icon.show {
  visibility: visible;
  bottom: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
}
.self-main-grid-view-read-only
  .self-grid-view-read-only-container
  > table
  > thead
  > tr
  > th
  > div
  > .clear-filter-table {
  visibility: hidden;
  align-items: flex-start;
  position: absolute;
  top: -1rem;
  right: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
  color: #cc0000;
}
.self-main-grid-view-read-only
  .self-grid-view-read-only-container
  > table
  > thead
  > tr
  > th
  > div
  > .clear-filter-table:focus,
.self-main-grid-view-read-only
  .self-grid-view-read-only-container
  > table
  > thead
  > tr
  > th
  > div
  > .clear-filter-table:hover {
  outline: 0;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  transition: 0.3s cubic-bezier(1, 0, 0, 1);
}
.self-main-grid-view-read-only
  .self-grid-view-read-only-container
  > table
  > thead
  > tr
  > th
  > div
  > .clear-filter-table.show {
  visibility: visible;
  top: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > thead > tr > th > div > .clear-sort-table {
  visibility: hidden;
  align-items: flex-start;
  position: absolute;
  top: -1rem;
  left: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
  color: #cc0000;
}
.self-main-grid-view-read-only
  .self-grid-view-read-only-container
  > table
  > thead
  > tr
  > th
  > div
  > .clear-sort-table:focus,
.self-main-grid-view-read-only
  .self-grid-view-read-only-container
  > table
  > thead
  > tr
  > th
  > div
  > .clear-sort-table:hover {
  outline: 0;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  transition: 0.3s cubic-bezier(1, 0, 0, 1);
}
.self-main-grid-view-read-only
  .self-grid-view-read-only-container
  > table
  > thead
  > tr
  > th
  > div
  > .clear-sort-table
  span {
  position: relative;
  width: 10px;
  height: 10px;
  color: #cc0000;
  border: 1px solid #cc0000;
  border-radius: 2px;
  font-size: 8px;
  padding: 1.5px auto;
}
.self-main-grid-view-read-only
  .self-grid-view-read-only-container
  > table
  > thead
  > tr
  > th
  > div
  > .clear-sort-table.show {
  visibility: visible;
  top: 0;
  transition: 0.5s cubic-bezier(1, 0, 0, 1);
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tbody > tr {
  position: relative;
  height: 2.2rem;
  /* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tbody > tr .selected-row:not(.active) {
  opacity: 0;
  transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tbody > tr:hover {
  background-color: #dcdddd;
  cursor: pointer;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tbody > tr > td {
  min-width: fit-content;
  padding: 0 5px;
  text-align: center;
  /* border-left: 1px solid rgba(0, 0, 0, 0.2); */
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tbody > tr > td span {
  white-space: nowrap;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tbody > tr > td > div {
  justify-content: center;
  flex-wrap: nowrap;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tbody > tr > td > input {
  width: 100%;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tbody > tr > td.cell-hasChange::after {
  content: "*";
  position: absolute;
  top: 5px;
  right: 5px;
  color: red;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tbody > tr > td.cell-error {
  border: 2px dotted #cc0000;
  box-shadow: inset 0 0 20px #cc0000;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table tr > th.row-header {
  text-align: center;
  background: #eeeeee;
  cursor: cell;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tbody > tr > th:hover {
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.2);
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tbody > tr > th.row-not-valid {
  color: #cc0000;
  box-shadow: inset 0 0 10px #cc0000;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tbody > tr.active-row,
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tbody > tr:focus {
  border: 1px solid #1089ff;
  box-shadow: inset 0 0 25px #1089ff;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tbody > tr.selected-row {
  border: 1px solid #1089ff;
  box-shadow: inset 0 0 20px 20px #1089ff52;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tbody > tr.tr-information {
  height: 0;
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tbody > tr.tr-information > td {
  position: relative;
  width: 100%;
  height: 100%;
}
.self-main-grid-view-read-only
  .self-grid-view-read-only-container
  > table
  > tbody
  > :nth-child(even):not(.ignore-even-odd):not(:hover) {
  background-color: rgba(0, 0, 0, 0.03);
}
.self-main-grid-view-read-only .self-grid-view-read-only-container > table > tbody tr.ignore-even-odd {
  background-color: rgba(95, 196, 0, 0.1);
}
.self-main-grid-view-read-only
  .self-grid-view-read-only-container
  > table
  > tbody
  .self-element-text-box-validation-content {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  flex-grow: 0;
  position: absolute;
  right: 0;
  top: -8px;
  bottom: auto;
  font-size: 70%;
  text-align: end;
  background: #cc0000;
  color: white;
  padding: 0;
}
.self-main-grid-view-read-only .self-grid-view-table-information-of-pages {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.self-main-grid-view-read-only .self-grid-view-table-information-of-pages > h4 {
  margin-bottom: 0;
  font-size: 10px;
  font-weight: 800;
}
.self-main-grid-view-read-only .self-grid-view-table-information-of-pages > span {
  color: #1089ff;
}

.grid-view-formulas {
  position: relative;
}
.grid-view-formulas:first-child li,
.grid-view-formulas:last-child li {
  border: none;
  border-radius: 0;
  margin: 0.2rem 0.2rem;
  cursor: default;
}
.grid-view-formulas:first-child li:not(:first-child),
.grid-view-formulas:last-child li:not(:first-child) {
  margin: calc(0.2rem + 2px) 0.2rem;
}
.grid-view-formulas > ul {
  list-style-type: none;
  line-height: 1.5rem;
  min-width: 7rem;
}
.grid-view-formulas > ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  text-align: start;
  padding: 0 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 12px;
  border-radius: 2px;
  margin: 0.2rem 0.2rem;
  cursor: pointer;
}
.grid-view-formulas > ul li:first-child {
  text-align: center;
  border: none;
  border-radius: 0;
  border-bottom: 4px double rgba(0, 0, 0, 0.7);
  font-weight: bold;
  cursor: default;
}

.tooltip-next-level {
  position: fixed;
  padding: 15px;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  transform: translate(-1.5rem, -0.5rem);
  z-index: 5000;
}

.context-menu-container {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  background: white;
  border-radius: 5px;
  min-width: 21rem;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  padding: 10px;
  height: auto;
}
.context-menu-container > .context-menu-item {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  margin: 5px 0;
  width: 100%;
  height: 100%;
}
.context-menu-container > .context-menu-item > label {
  min-width: 3.2rem;
  margin-bottom: 0;
  margin-left: 5px;
}
.context-menu-container > .context-menu-item > div {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
}
.context-menu-container > .context-menu-item > div > button {
  position: relative;
  width: auto;
  flex-grow: 1;
  min-height: 2rem;
  height: 100%;
  margin-left: 2px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
}
.context-menu-container > .context-menu-item > div > button::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 2px;
  width: 0;
  background: rgba(35, 105, 255, 0.6);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.context-menu-container > .context-menu-item > div > button:hover,
.context-menu-container > .context-menu-item > div > button:focus {
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.2);
}
.context-menu-container > .context-menu-item > div > button:hover::after,
.context-menu-container > .context-menu-item > div > button:focus::after {
  width: 100%;
  transition: 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.context-menu-container > .felesh-next-level-tooltip {
  position: absolute;
  top: -5px;
  left: 10px;
  width: 10px;
  height: 10px;
  background: white;
  opacity: 0.9;
  margin: 0 auto;
  transform: rotate(45deg);
  z-index: 1;
}

.information-tooltip-by-keyboard {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  padding: 15px;
  background: white;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.information-tooltip-by-keyboard > div {
  box-shadow: none;
}
.information-tooltip-by-keyboard > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  flex-grow: 0;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: white;
  font-size: 10px;
  border-radius: 0.25rem;
  margin: 0.5rem;
  overflow: hidden;
}
.information-tooltip-by-keyboard > button:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.information-tooltip-by-keyboard > button button:focus {
  outline: 1px dotted;
  outline: 5px auto;
}

div.self-ammount:not(.self-ammount-read-only) {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: row-reverse;
  background: white;
}
div.self-ammount:not(.self-ammount-read-only):hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
div.self-ammount:not(.self-ammount-read-only):focus-within {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
div.self-ammount:not(.self-ammount-read-only) > input.self-sub-ammount {
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
  border: none;
  text-align: center;
  direction: ltr;
  padding-left: 0;
  padding-right: 0;
  letter-spacing: 0.05rem;
}
div.self-ammount:not(.self-ammount-read-only) > input.self-sub-ammount::placeholder {
  color: blue;
  opacity: 0.6;
}
div.self-ammount:not(.self-ammount-read-only) > input.self-sub-ammount:first-child {
  padding-left: 0.1rem;
}
div.self-ammount:not(.self-ammount-read-only) > input.self-sub-ammount:last-child {
  padding-right: 0.1rem;
}
div.self-ammount:not(.self-ammount-read-only) > span.self-ammount-separator {
  text-align: center;
  margin: auto 0;
  font-size: 0.8rem;
}

div.self-code:not(.self-code-read-only) {
  /* border: 1px solid rgba(0, 0, 0, 0.125); */
  border-radius: 0.25rem;
  display: flex;
  flex-direction: row-reverse;
}
div.self-code:not(.self-code-read-only):hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
div.self-code:not(.self-code-read-only):focus-within {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
div.self-code:not(.self-code-read-only) > input.self-sub-code {
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
  border: none;
  border-radius: 0;
  text-align: center;
  direction: ltr;
  padding-left: 0;
  padding-right: 0;
  letter-spacing: 0.05rem;
}
div.self-code:not(.self-code-read-only) > input.self-sub-code::placeholder {
  color: red;
  opacity: 0.6;
}
div.self-code:not(.self-code-read-only) > input.self-sub-code:first-child {
  padding-left: 0.1rem;
}
div.self-code:not(.self-code-read-only) > input.self-sub-code:last-child {
  padding-right: 0.1rem;
}
div.self-code:not(.self-code-read-only) > input.self-sub-code.length-1:not([size="1"]) {
  color: red;
}
div.self-code:not(.self-code-read-only) > input.self-sub-code.length-2:not([size="2"]) {
  color: red;
}
div.self-code:not(.self-code-read-only) > input.self-sub-code.length-3:not([size="3"]) {
  color: red;
}
div.self-code:not(.self-code-read-only) > input.self-sub-code.length-4:not([size="4"]) {
  color: red;
}
div.self-code:not(.self-code-read-only) > input.self-sub-code.length-5:not([size="4"]) {
  color: red;
}
div.self-code:not(.self-code-read-only) > input.self-sub-code.length-6:not([size="4"]) {
  color: red;
}
div.self-code:not(.self-code-read-only) > input.self-sub-code.length-7:not([size="4"]) {
  color: red;
}
div.self-code:not(.self-code-read-only) > input.self-sub-code.length-8:not([size="4"]) {
  color: red;
}
div.self-code:not(.self-code-read-only) > input.self-sub-code.length-9:not([size="4"]) {
  color: red;
}

span.self-code-label-level-1 {
  padding-right: 0.3rem;
}
span.self-code-label-level-2 {
  padding-right: 0.3rem;
}
span.self-code-label-level-3 {
  padding-right: 0.3rem;
}
span.self-code-label-level-4 {
  padding-right: 0.3rem;
}
span.self-code-label-level-5 {
  padding-right: 0.3rem;
}
span.self-code-label-level-6 {
  padding-right: 0.3rem;
}
span.self-code-label-level-7 {
  padding-right: 0.3rem;
}
span.self-code-label-level-8 {
  padding-right: 0.3rem;
}
span.self-code-label-level-9 {
  padding-right: 0.3rem;
}

.show-information-tooltip-voucher {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: stretch;
  position: absolute;
  top: 0;
  left: 50%;
  background: white;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  z-index: 150;
  transform: translate(-50%, 0);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.show-information-tooltip-voucher::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid white;
}
.show-information-tooltip-voucher:hover > button {
  opacity: 1;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.show-information-tooltip-voucher:hover > div.table-container > .show-full-code-navbar {
  opacity: 0.4;
  visibility: visible;
  z-index: 5;
  transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.show-information-tooltip-voucher > .navbar {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 1;
}
.show-information-tooltip-voucher > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  position: absolute;
  top: 0;
  right: 0;
  flex-grow: 0;
  width: 15px;
  height: 15px;
  background: transparent;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 7;
}
.show-information-tooltip-voucher > button > .show-tooltip-buttons-refresh-row-information {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  position: fixed;
  align-items: center;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  background: white;
  z-index: 5;
  transform: translate(0, -75%);
}
.show-information-tooltip-voucher > div.table-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  padding: 5px;
  padding-inline-start: 15px;
  min-width: 24rem;
  width: max-content;
}
.show-information-tooltip-voucher > div.table-container > .show-full-code-navbar {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  position: absolute;
  top: 0;
  left: 50%;
  padding: 5px;
  background: white;
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0);
  transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.show-information-tooltip-voucher > div.table-container > .show-full-code-navbar:hover {
  opacity: 1;
  background: #eeeeee;
  backdrop-filter: blur(20px);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.show-information-tooltip-voucher > div.table-container > .show-full-code-navbar > button {
  transform: none;
  font-size: 9px;
  transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.show-information-tooltip-voucher > div.table-container > .show-full-code-navbar > button:hover {
  transform: scale(1.2);
  transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.show-information-tooltip-voucher > div.table-container > .table-container-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: flex-start;
  padding: 5px;
}
.show-information-tooltip-voucher > div.table-container > .table-container-wrapper > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: flex-start;
  flex-grow: 0;
  padding: 5px;
}
.show-information-tooltip-voucher > div.table-container > .table-container-wrapper > div > table {
  position: relative;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.show-information-tooltip-voucher > div.table-container > .table-container-wrapper > div > table > thead {
  position: relative;
  background: rgba(0, 132, 255, 0.5);
}
.show-information-tooltip-voucher > div.table-container > .table-container-wrapper > div > table > thead > tr > th {
  padding: 5px;
  text-align: center;
  color: rgba(0, 0, 0, 0.7);
}
.show-information-tooltip-voucher
  > div.table-container
  > .table-container-wrapper
  > div
  > table
  > thead
  > tr
  > th:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.show-information-tooltip-voucher > div.table-container > .table-container-wrapper > div > table > tbody {
  position: relative;
}
.show-information-tooltip-voucher > div.table-container > .table-container-wrapper > div > table > tbody > tr > td {
  padding: 5px;
  text-align: center;
}
.show-information-tooltip-voucher
  > div.table-container
  > .table-container-wrapper
  > div
  > table
  > tbody
  > tr
  > td:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.show-information-tooltip-voucher
  > div.table-container
  > .table-container-wrapper
  > div
  > table
  > tbody
  > tr:nth-child(even) {
  background: rgba(0, 132, 255, 0.1);
}
.show-information-tooltip-voucher > div.table-container > .table-container-wrapper > div > table .cell-error {
  background: #cc0000;
  color: white;
}
.show-information-tooltip-voucher
  > div.table-container
  > .table-container-wrapper
  > div
  > table
  > thead
  > :first-child {
  background: rgba(0, 0, 0, 0.2);
  color: white;
  border-bottom: 4px double rgba(0, 0, 0, 0.7);
}

.show-full-code-account-by-assets th,
.show-full-code-account-by-assets td {
  color: rgba(0, 0, 0, 0.7);
}
.show-full-code-account-by-assets > .table-child-row {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.2), #eeeeee);
  margin: 0 0.5rem;
}
.show-full-code-account-by-assets > .table-child-row > ul {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.show-full-code-account-by-assets > .table-child-row > ul > li {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-between;
  line-height: 1rem;
  padding: 0 0.5rem;
  transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.show-full-code-account-by-assets > .table-child-row > ul > li:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.show-full-code-account-by-assets > .table-child-row > ul > li:hover {
  box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.show-full-code-account-by-assets > .table-child-row > ul > li > button {
  width: max-content;
  color: rgba(0, 0, 0, 0.7);
  margin-left: 5px;
}

.tooltip-row-toolbar {
  position: fixed;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  padding: 5px 5px;
  background: linear-gradient(to right, rgb(0, 0, 0), rgba(0, 0, 0, 0.8));
  border-radius: 5px;
  transform: translate(calc(100% + 5px), -50%);
  z-index: 4000;
}
.tooltip-row-toolbar::after {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  background: linear-gradient(to right, rgb(0, 0, 0), rgba(0, 0, 0, 0.8));
  top: 50%;
  left: -2px;
  transform: translate(0, -50%) rotate(45deg);
  z-index: -1;
}
.tooltip-row-toolbar > button {
  position: relative;
  width: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  color: white;
  border: 0;
  margin: 5px 0;
  font-size: 10px;
}

.help-waraper {
  position: relative;
  width: auto;
  min-width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  width: auto;
  height: auto;
  z-index: 5000;
}
.help-waraper .help-section-brightness {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 100%;
  width: 99.8%;
  height: 98%;
  border-radius: 5px;
  backdrop-filter: brightness(1.4);
  animation: MyAnimWhite 3s infinite;
  z-index: 2000;
  overflow: hidden;
}

.help-section-selecting {
  position: relative;
  width: 100%;
  display: flex;
  flex-grow: 1;
  justify-content: flex-start;
  align-items: flex-start;
  animation: MyAnimRgb 2.5s infinite;
  border-radius: 8px;
  cursor: help;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.help-section-selecting::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.help-section-helper {
  position: absolute;
}

.help-section-data-picker {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: 1.8rem;
  width: 20rem;
  min-height: 5rem;
  background: white;
  border-radius: 8px;
  animation: MyAnimBlack 3s infinite;
  border: 2px solid rgba(0, 0, 0, 0.2);
  padding: 20px;
  z-index: 5000;
}
@media screen and (max-width: 500px) {
  .help-section-data-picker {
    position: fixed;
    height: fit-content !important;
    top: 50% !important;
    right: 50% !important;
    left: 50% !important;
    bottom: 50% !important;
    transform: translate(50%, -5rem);
  }
  .help-section-data-picker > .help-section-arrow {
    display: none !important;
  }
}
.help-section-data-picker.right {
  left: 4%;
  right: auto;
}
.help-section-data-picker.right > .help-section-arrow {
  left: 1rem;
  right: auto;
}
.help-section-data-picker.top {
  bottom: 120%;
  top: auto;
}
.help-section-data-picker.top > .help-section-arrow {
  top: auto;
  bottom: -0.5rem;
}
.help-section-data-picker.bottom {
  top: 120%;
  bottom: auto;
}
.help-section-data-picker.bottom > .help-section-arrow {
  top: -0.5rem;
  bottom: auto;
}
.help-section-data-picker.left {
  left: auto;
  right: 4%;
}
.help-section-data-picker.left > .help-section-arrow {
  left: auto;
  right: 1rem;
}
.help-section-data-picker > .help-section-message {
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
.help-section-data-picker > .help-section-arrow {
  position: absolute;
  top: -0.5rem;
  right: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  transform: rotate(45deg);
  background: white;
  z-index: 5;
}
@keyframes MyAnimBlack {
  0% {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9);
  }
  50% {
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.001);
  }
}
@keyframes MyAnimRgb {
  0% {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.001);
  }
}
@keyframes MyAnimWhite {
  0% {
    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.9);
  }
  50% {
    box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.1);
  }
  100% {
    box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.001);
  }
}

.sum_view_sum_ammount_voucher {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  min-width: 14.5rem;
  width: auto;
  line-height: 0.9rem;
}
.sum_view_sum_ammount_voucher > table {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
}
.sum_view_sum_ammount_voucher > table > tbody {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: flex-end;
}
.sum_view_sum_ammount_voucher > table > tbody > tr {
  margin: 0 5px;
}
.sum_view_sum_ammount_voucher > table tr > :nth-child(1) {
  text-align: end;
}
.sum_view_sum_ammount_voucher > table tr > :nth-child(2) {
  text-align: start;
}
.sum_view_sum_ammount_voucher > table tr.has-error {
  border: 1px solid #cc0000;
  border-radius: 3px;
  color: #cc0000;
}
.sum_view_sum_ammount_voucher > table tr > td {
  min-width: 2rem;
  padding: 1px 10px;
}

.level-of-code-stack-voucher-report {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.level-of-code-stack-voucher-report > button {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-grow: 1;
  height: 100%;
  margin: 0;
  padding: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  background: transparent;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.level-of-code-stack-voucher-report > button:hover,
.level-of-code-stack-voucher-report > button:focus {
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

.type-of-code-stack-voucher-report {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.type-of-code-stack-voucher-report > li {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  height: 2rem;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.02);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.type-of-code-stack-voucher-report > li.active {
  background: rgba(35, 105, 255, 0.3);
  color: rgba(0, 0, 0, 0.7);
}
.type-of-code-stack-voucher-report > li:hover,
.type-of-code-stack-voucher-report > li:focus {
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

.self-progress-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: flex-start;
  min-height: 2rem;
  height: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  padding: 3px;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  overflow: hidden;
}
.self-progress-bar > :nth-child(1) {
  position: absolute;
  left: 50%;
  font-size: 10px;
  font-weight: bold;
  font-family: cursive;
  color: rgba(0, 0, 0, 0.8);
  transform: translate(-50%, 0);
  z-index: 20;
}
.self-progress-bar > :nth-child(2) {
  height: 100%;
  background: #1089ff;
  border-radius: 5px;
  box-shadow:
    inset 0 2px 9px rgba(255, 255, 255, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4);
}

.self-mobile-box-array-item {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  flex-flow: attr(key);
  margin: 0 0.2rem;
  background: #1089ff;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-mobile-box-array-item:hover > button {
  transform: translateX(0);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-mobile-box-array-item > span {
  padding-right: 7px;
  color: white;
}
.self-mobile-box-array-item > button {
  color: white;
  transform: translateX(-1rem);
}

.self-phone-box-array-item {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  flex-flow: attr(key);
  margin: 0 0.2rem;
  background: #1089ff;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-phone-box-array-item:hover > button {
  transform: translateX(0);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-phone-box-array-item > span {
  padding-right: 7px;
  color: white;
}
.self-phone-box-array-item > button {
  color: white;
  transform: translateX(-1rem);
}

.self-website-box-array-item {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  flex-flow: attr(key);
  margin: 0 0.2rem;
  background: #1089ff;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-website-box-array-item:hover > button {
  transform: translateX(0);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-website-box-array-item > span {
  padding-right: 7px;
  color: white;
}
.self-website-box-array-item > button {
  color: white;
  transform: translateX(-1rem);
}

.self-email-box-array-item {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  flex-flow: attr(key);
  margin: 0 0.2rem;
  background: #1089ff;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-email-box-array-item:hover > button {
  transform: translateX(0);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-email-box-array-item > span {
  padding-right: 7px;
  color: white;
}
.self-email-box-array-item > button {
  color: white;
  transform: translateX(-1rem);
}

.self-element.self-element-items-by-name-add-list-items {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  margin: 0.5rem 0.5rem;
}
.self-element.self-element-items-by-name-add-list-items > .items {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.self-element.self-element-items-by-name-add-list-items > .items > .self-items-by-add-name-box-array-item {
  margin: 0.1rem;
  font-size: 10px;
}
.self-element.self-element-items-by-name-add-list-items > .items > .self-items-by-add-name-box-array-item.multi {
  animation: 0.2s myAnim cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes myAnim {
  100% {
    box-shadow:
      inset 0 0 20px 0 #1089ff,
      0 0 5px 0 rgba(0, 132, 255, 0.5);
    background: rgba(0, 132, 255, 0.5);
  }
}

.self-element-items-by-name-add-container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
}
.self-element-items-by-name-add-container > .self-element-items-by-name-add-text-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
}
.self-element-items-by-name-add-container > .self-element-items-by-name-add-text-box input {
  border: 1px solid transparent;
}
.self-element-items-by-name-add-container > .self-element-items-by-name-add-text-box input:hover {
  box-shadow: none;
}
.self-element-items-by-name-add-container > .self-element-items-by-name-add-text-box input::placeholder {
  color: transparent;
}
.self-element-items-by-name-add-container > .self-element-items-by-name-add-text-box:focus-within input {
  border: 1px solid rgba(0, 0, 0, 0.2);
  z-index: 6;
}
.self-element-items-by-name-add-container > .self-element-items-by-name-add-text-box:focus-within input::placeholder {
  color: rgba(0, 0, 0, 0.7);
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-backdrop {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 5;
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: center;
  width: 10rem;
  position: absolute;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  overflow: hidden;
  padding: 0.5rem;
  z-index: 7;
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > span {
  font-size: 12px;
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > ul {
  position: relative;
  max-height: 10rem;
  width: 100%;
  list-style-type: none;
  line-height: 1.5rem;
  font-size: 14px;
  overflow: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
  scroll-snap-type: y mandatory;
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > ul::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > ul::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > ul:hover
  > .selected {
  color: inherit;
  background: inherit;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > ul:hover
  > .selected:hover {
  color: white;
  background: #1089ff;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > ul
  > li {
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > ul
  > li:hover {
  color: white;
  background: #1089ff;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > ul
  > li.selected {
  color: white;
  background: #1089ff;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > ul
  > li.selected:not(:hover) {
  scroll-snap-align: center;
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > ul
  > li
  > span {
  word-wrap: none;
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > ul
  > li
  > span:first-child {
  margin-left: 5px;
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > ul
  > li:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > ul
  > li:last-child {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-between;
  position: sticky;
  bottom: 0;
  left: 0;
  background: white;
  z-index: 2;
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > ul
  > li:last-child
  > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-evenly;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > ul
  > li:last-child
  > button
  svg {
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > ul
  > li:last-child
  > button:hover {
  color: #1089ff;
}
.self-element-items-by-name-add-container
  > .self-element-items-by-name-add-text-box
  > .self-element-items-by-name-add-list-search
  > .self-element-items-by-name-add-list
  > ul
  > li:last-child
  > button:hover
  svg {
  transform: rotate(-180deg);
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.self-items-by-add-name-box-array-item {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  flex-flow: attr(key);
  margin: 0 0.2rem;
  background: #1089ff;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-items-by-add-name-box-array-item:hover > button {
  transform: translateX(0);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-items-by-add-name-box-array-item > span {
  padding-right: 7px;
  color: white;
}
.self-items-by-add-name-box-array-item > button {
  color: white;
  transform: translateX(-1rem);
}

.arrow-toggle-element-show-container {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.arrow-toggle-element-show-container .arrow-toggle-element-show {
  position: fixed;
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  border-radius: 50%;
  box-shadow:
    0 0 10px 0 rgba(0, 0, 0, 0.2),
    0 0 15px 0 rgba(0, 0, 0, 0.2);
  font-size: 18px;
  z-index: 5;
}

.group-self-tree-view.account {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: center;
  width: calc(100vw - 10rem);
  height: calc(100vh - 8rem);
  max-width: 40rem;
  max-height: 30rem;
  word-wrap: break-word;
  background-color: white;
  border-radius: 5px;
  overflow: hidden;
}
.group-self-tree-view.account > .group-head-self-tree-view {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 100%;
  height: 2rem;
  background: linear-gradient(to right, #1089ff, rgba(0, 132, 255, 0.5), #1089ff);
  padding: 0.25rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
}
.group-self-tree-view.account > .group-head-self-tree-view > span {
  font-weight: bold;
}
.group-self-tree-view.account > .group-body-self-tree-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  padding: 0.5rem 0.5rem;
}
.group-self-tree-view.account > .group-body-self-tree-view > .group-body-self-tree-view-container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  overflow: hidden;
}
.group-self-tree-view.account > .group-body-self-tree-view > .group-body-self-tree-view-container > div {
  margin: 5px;
}
.group-self-tree-view.account > .group-body-self-tree-view > .group-body-self-tree-view-container > .row {
  flex-grow: 0;
  flex-wrap: nowrap;
}
.group-self-tree-view.account > .group-body-self-tree-view > .group-body-self-tree-view-container > .row > button {
  min-width: 4rem;
  padding: 0.3rem 0.7rem;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .row
  > button:hover {
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.group-self-tree-view.account > .group-body-self-tree-view > .group-body-self-tree-view-container > .show-full-code {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  width: 6rem;
  user-select: none;
  justify-content: space-between;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .show-full-code
  > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: center;
  flex-grow: 0;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  max-height: 50%;
  overflow: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .show-full-code
  > div::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .show-full-code
  > div::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .show-full-code
  > div
  > table {
  position: relative;
  width: 100%;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .show-full-code
  > div
  > table
  > thead {
  position: relative;
  background: rgba(0, 132, 255, 0.5);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .show-full-code
  > div
  > table
  > thead
  > tr
  > th {
  padding: 5px;
  text-align: center;
  color: rgba(0, 0, 0, 0.7);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .show-full-code
  > div
  > table
  > thead
  > tr
  > th:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .show-full-code
  > div
  > table
  > tbody {
  position: relative;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .show-full-code
  > div
  > table
  > tbody
  > tr
  > td {
  padding: 5px;
  text-align: center;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .show-full-code
  > div
  > table
  > tbody
  > tr
  > td:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .show-full-code
  > div
  > table
  > tbody
  > tr:nth-child(even) {
  background: rgba(0, 132, 255, 0.1);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 14rem;
  align-self: stretch;
  overflow: hidden;
  overflow-y: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
  scroll-snap-type: mandatory;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 5px 0;
  user-select: none;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 100%;
  overflow: visible;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list.tree-view-level-1
  > li {
  color: rgb(0, 0, 128);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list.tree-view-level-1
  > li
  > div {
  color: rgb(0, 0, 128);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list.tree-view-level-1
  > li
  > div::before {
  border: none !important;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-2 {
  padding-right: 0;
  border-right: 1px dashed rgb(0, 128, 0);
  margin-right: 0.75rem;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-2
  > li {
  color: rgb(0, 128, 0);
  border-color: rgb(0, 128, 0);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-2
  > li
  > div {
  color: rgb(0, 128, 0);
  border-color: rgb(0, 128, 0);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-3 {
  padding-right: 0;
  border-right: 1px dashed rgb(165, 42, 42);
  margin-right: 0.75rem;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-3
  > li {
  color: rgb(165, 42, 42);
  border-color: rgb(165, 42, 42);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-3
  > li
  > div {
  color: rgb(165, 42, 42);
  border-color: rgb(165, 42, 42);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-4 {
  padding-right: 0;
  border-right: 1px dashed rgb(148, 0, 211);
  margin-right: 0.75rem;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-4
  > li {
  color: rgb(148, 0, 211);
  border-color: rgb(148, 0, 211);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-4
  > li
  > div {
  color: rgb(148, 0, 211);
  border-color: rgb(148, 0, 211);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-5 {
  padding-right: 0;
  border-right: 1px dashed rgb(210, 105, 30);
  margin-right: 0.75rem;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-5
  > li {
  color: rgb(210, 105, 30);
  border-color: rgb(210, 105, 30);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-5
  > li
  > div {
  color: rgb(210, 105, 30);
  border-color: rgb(210, 105, 30);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-6 {
  padding-right: 0;
  border-right: 1px dashed rgb(128, 0, 0);
  margin-right: 0.75rem;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-6
  > li {
  color: rgb(128, 0, 0);
  border-color: rgb(128, 0, 0);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  .tree-view-level-6
  > li
  > div {
  color: rgb(128, 0, 0);
  border-color: rgb(128, 0, 0);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  > li {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: auto;
  min-width: auto;
  flex-grow: 0;
  min-height: 1.7rem;
  margin: 0.1rem 0.2rem;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 0 !important;
  padding-left: 0.2rem !important;
  cursor: pointer;
  overflow: hidden;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  > li.multi {
  animation: 0.17s myAnim cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes myAnim {
  100% {
    box-shadow:
      inset 0 0 20px 0 #1089ff,
      0 0 5px 0 rgba(0, 132, 255, 0.5);
  }
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  > li:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  > li:hover
  > .button-close {
  opacity: 1;
  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  > li
  > .button-close {
  opacity: 0;
  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  > li
  > .button-close:hover {
  color: #cc0000;
  transition: 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  > li
  > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  margin: 0;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  > li
  > span:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 1.5rem;
  height: 1.6rem;
  flex-grow: 0;
  padding: 0 0.2rem;
  border-left: 0.5px solid rgba(0, 0, 0, 0.2);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  > .self-tree-view-body-list
  > li
  > span:nth-child(2) {
  padding-right: 3px;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  align-items: center;
  width: 100%;
  overflow: visible;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul.tree-view-level-1
  > li {
  color: rgb(0, 0, 128);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul.tree-view-level-1
  > li
  > div {
  color: rgb(0, 0, 128);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul.tree-view-level-1
  > li
  > div::before {
  border: none !important;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  .tree-view-level-2 {
  padding-right: 0;
  border-right: 1px dashed rgb(0, 128, 0);
  margin-right: 0.75rem;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  .tree-view-level-2
  > li {
  color: rgb(0, 128, 0);
  border-color: rgb(0, 128, 0);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  .tree-view-level-2
  > li
  > div {
  color: rgb(0, 128, 0);
  border-color: rgb(0, 128, 0);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  .tree-view-level-3 {
  padding-right: 0;
  border-right: 1px dashed rgb(165, 42, 42);
  margin-right: 0.75rem;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  .tree-view-level-3
  > li {
  color: rgb(165, 42, 42);
  border-color: rgb(165, 42, 42);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  .tree-view-level-3
  > li
  > div {
  color: rgb(165, 42, 42);
  border-color: rgb(165, 42, 42);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  .tree-view-level-4 {
  padding-right: 0;
  border-right: 1px dashed rgb(148, 0, 211);
  margin-right: 0.75rem;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  .tree-view-level-4
  > li {
  color: rgb(148, 0, 211);
  border-color: rgb(148, 0, 211);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  .tree-view-level-4
  > li
  > div {
  color: rgb(148, 0, 211);
  border-color: rgb(148, 0, 211);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  .tree-view-level-5 {
  padding-right: 0;
  border-right: 1px dashed rgb(210, 105, 30);
  margin-right: 0.75rem;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  .tree-view-level-5
  > li {
  color: rgb(210, 105, 30);
  border-color: rgb(210, 105, 30);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  .tree-view-level-5
  > li
  > div {
  color: rgb(210, 105, 30);
  border-color: rgb(210, 105, 30);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  .tree-view-level-6 {
  padding-right: 0;
  border-right: 1px dashed rgb(128, 0, 0);
  margin-right: 0.75rem;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  .tree-view-level-6
  > li {
  color: rgb(128, 0, 0);
  border-color: rgb(128, 0, 0);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  .tree-view-level-6
  > li
  > div {
  color: rgb(128, 0, 0);
  border-color: rgb(128, 0, 0);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  > li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  min-width: 10rem;
  width: 100%;
  max-width: 95%;
  padding: 0 !important;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  > li
  > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  width: 100%;
  height: 1.5rem;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-inline-start: 0.5rem;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  > li
  > div::before {
  content: "";
  position: absolute;
  right: -1rem;
  width: 0.8rem;
  height: 1px;
  border-top: 1px dashed;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  > li
  > div:hover {
  padding-right: 10px;
  background: linear-gradient(to right, rgba(0, 132, 255, 0.5), transparent);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  > li
  > div
  > i {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  max-width: 1rem;
  background: transparent;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  > li
  > div
  > span {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  word-wrap: normal;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  > li
  > div.selected {
  cursor: pointer;
  padding-right: 10px;
  background: linear-gradient(to right, transparent, rgba(0, 132, 255, 0.5));
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  > li
  > div
  > span {
  display: inline-block;
  margin: 0 0.1rem;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  > li
  > div
  > span.tree-view-select-column {
  width: 0px;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  > li
  > div
  > span.tree-view-code-column {
  width: auto;
  text-align: center;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  > li
  > div
  > span.tree-view-name-column {
  width: auto;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  > li
  > div
  > span.tree-view-first-name-column {
  width: auto;
  margin-inline-end: 4px;
}
.group-self-tree-view.account
  > .group-body-self-tree-view
  > .group-body-self-tree-view-container
  > .self-tree-view-body
  ul
  > li
  .self-element.self-element-chek-tree-box-container {
  max-width: 25px;
  font-size: 10px;
}

.self-tree-view-footer {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  position: sticky;
  left: 0;
  bottom: 0;
  height: 4rem;
  width: 100%;
  flex-grow: 0;
  justify-content: space-around;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.self-tree-view-footer > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  flex-basis: 6rem;
  min-height: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  background: transparent;
  font-size: 12px;
  font-family: Samim;
  margin: 10px;
  cursor: pointer;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.7);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-tree-view-footer > button:hover,
.self-tree-view-footer > button:focus {
  outline: 0;
  color: #1089ff;
  border-color: rgba(0, 132, 255, 0.5);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-tree-view-footer > button:hover::after,
.self-tree-view-footer > button:focus::after {
  width: 100%;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.self-tree-view-footer > button:disabled,
.self-tree-view-footer > button.access-denied {
  color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}
.self-tree-view-footer > button:disabled:hover,
.self-tree-view-footer > button:disabled:focus,
.self-tree-view-footer > button.access-denied:hover,
.self-tree-view-footer > button.access-denied:focus {
  color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
.self-tree-view-footer > button:disabled:hover::after,
.self-tree-view-footer > button:disabled:focus::after,
.self-tree-view-footer > button.access-denied:hover::after,
.self-tree-view-footer > button.access-denied:focus::after {
  display: none;
}
.self-tree-view-footer > button::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 3px;
  background: rgba(0, 132, 255, 0.5);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.voucher-turnover-container {
  min-width: 9rem;
  min-height: 4.5rem;
  align-items: center !important;
  justify-content: center !important;
}
.voucher-turnover-container th,
.voucher-turnover-container td {
  color: rgba(0, 0, 0, 0.7);
}
.voucher-turnover-container:hover > .voucher-turnover-container-tooltip {
  visibility: visible;
  opacity: 1;
  z-index: 2;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.voucher-turnover-container > .voucher-turnover-container-tooltip {
  visibility: hidden;
  opacity: 0;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: flex-end;
  flex-direction: column-reverse;
  position: absolute;
  bottom: calc(100% - 1.2rem);
  left: 1px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  z-index: -1;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.voucher-turnover-container > .voucher-turnover-container-tooltip:hover > .voucher-turnover-tooltip-assets {
  max-height: max-content;
  max-width: max-content;
  transition: 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.voucher-turnover-container > .voucher-turnover-container-tooltip > .voucher-turnover-tooltip-assets {
  max-height: 1.2rem;
  max-width: 1.2rem;
  position: fixed;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: white;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  transform: translate(5px, 7px);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 5;
  overflow: hidden;
}
.voucher-turnover-container > .voucher-turnover-container-tooltip > .voucher-turnover-tooltip-assets > li {
  min-height: 1.2rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 2px 5px;
}
.voucher-turnover-container > .voucher-turnover-container-tooltip > .voucher-turnover-tooltip-assets > li:hover {
  background: #eeeeee;
  z-index: 5;
}
.voucher-turnover-container > .voucher-turnover-container-tooltip > .voucher-turnover-tooltip-assets > li span {
  width: max-content;
}
.voucher-turnover-container
  > .voucher-turnover-container-tooltip
  > .voucher-turnover-tooltip-assets
  > li
  span:nth-child(2) {
  margin-right: 10px;
}
.voucher-turnover-container abbr {
  margin: 0 5px;
  color: #cc0000;
}

.slect-level-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  width: 100%;
}
.slect-level-stack > div {
  flex-grow: 0;
}

.tool-tip-parent-report-moror {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 25px;
  z-index: 3000;
}

.tool-tip-parent-report-moror-toolbar {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  width: 80px;
  padding: 5px;
  background: linear-gradient(to right, rgb(0, 0, 0), rgba(0, 0, 0, 0.8));
  border-radius: 5px;
  transform: translate(0, 5.4rem);
  z-index: 5000;
}
.tool-tip-parent-report-moror-toolbar > button {
  position: relative;
  width: 100%;
  background: transparent;
  color: white;
  font-size: 10px;
  margin-bottom: 2px;
  transition: 0.5s ease-in-out;
}
.tool-tip-parent-report-moror-toolbar > button:hover,
.tool-tip-parent-report-moror-toolbar > button:focus {
  border-bottom: 1px solid white;
  outline: 0;
  box-shadow: none;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.table-users-info {
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 4px double rgba(0, 0, 0, 0.2);
  overflow: hidden;
  user-select: none;
}
.table-users-info > thead > tr {
  height: 2.5rem;
  border-bottom: 4px double rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2) !important;
  background: #eeeeee;
}
.table-users-info > thead > tr > th {
  font-weight: bold;
  text-align: center;
  height: 2.5rem;
  font-size: 14px;
  max-height: 100%;
}
.table-users-info > thead > tr > th:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.table-users-info > tbody {
  width: 100%;
}
.table-users-info > tbody > tr {
  height: 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.table-users-info > tbody > tr:hover > :last-child > div > button {
  visibility: visible;
  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.table-users-info > tbody > tr > td {
  text-align: center;
}
.table-users-info > tbody > tr > td:not(:nth-child(4)) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.table-users-info > tbody > tr > td:last-child > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  padding: 0 0.2rem;
}
.table-users-info > tbody > tr > td:last-child > div > button {
  font-size: 16px;
  border-radius: 0;
  visibility: hidden;
  transition: 0.02s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.table-users-info > tbody > tr > td:last-child > div > button:hover {
  transform: scale(1.2);
  color: #1089ff;
  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.table-users-info > tbody > tr > td:last-child > div > button:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.table-users-info > tbody > tr:nth-of-type(even) {
  background: #eeeeee;
}
.table-users-info > colgroup .tools {
  width: 4rem;
  max-width: 4rem;
}

.select-import-type {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background: #eeeeee;
  border-radius: 5px;
}
.select-import-type > ul {
  position: relative;
  list-style-type: none;
}
.select-import-type > ul > li {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  min-width: 17rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}
.select-import-type > ul > li.cancel {
  background: #cc0000;
  color: white;
}
.select-import-type > ul > li.cancel:hover {
  transform: translate(0, -1px);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.select-import-type > ul > li.active {
  background: rgba(0, 132, 255, 0.5);
  color: white;
}
.select-import-type > ul > li:not(.cancel):hover {
  transform: translate(0, -1px);
  box-shadow: 0 0 10px 0 rgba(0, 132, 255, 0.5);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.form-insert-financial-period,
.form-insert-attached-data {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  border: 2px thick rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  -webkit-box-reflect: below 5px linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.2666666667));
  overflow: hidden;
}
.form-insert-financial-period > :last-child,
.form-insert-attached-data > :last-child {
  border-top: 4px double #222831;
}
.form-insert-financial-period > .group,
.form-insert-attached-data > .group {
  justify-content: flex-start;
  margin: 0;
}
.form-insert-financial-period > .group > .group-head,
.form-insert-attached-data > .group > .group-head {
  justify-content: center;
  background: #222831;
  color: white;
  padding: 1rem 0;
  padding-bottom: 2rem;
  border-bottom: 4px double white;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.form-insert-financial-period > .group > .group-body,
.form-insert-attached-data > .group > .group-body {
  position: absolute;
  top: 2.5rem;
  left: 10%;
  width: 80%;
  align-items: center;
  background: white;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.form-insert-financial-period > .group > .group-body > div,
.form-insert-attached-data > .group > .group-body > div {
  flex-direction: column;
}
.form-insert-financial-period > .group > .group-body > div > :first-child,
.form-insert-attached-data > .group > .group-body > div > :first-child {
  flex-wrap: nowrap;
}
.form-insert-financial-period > .group > .group-body > div > div,
.form-insert-attached-data > .group > .group-body > div > div {
  margin: 0.5rem 0;
  flex-grow: 0;
  flex-wrap: nowrap;
}
.form-insert-financial-period > .group > .group-body > div > div > input,
.form-insert-attached-data > .group > .group-body > div > div > input {
  width: auto;
}

.slect-level-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  width: 100%;
}
.slect-level-stack > div {
  flex-grow: 0;
}

.tool-tip-parent-report-moror {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 25px;
  z-index: 3000;
}

.tool-tip-parent-report-moror-toolbar {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  width: 80px;
  padding: 5px;
  background: linear-gradient(to right, rgb(0, 0, 0), rgba(0, 0, 0, 0.8));
  border-radius: 5px;
  transform: translate(0, 5.4rem);
  z-index: 5000;
}
.tool-tip-parent-report-moror-toolbar > button {
  position: relative;
  width: 100%;
  background: transparent;
  color: white;
  font-size: 10px;
  margin-bottom: 2px;
  transition: 0.5s ease-in-out;
}
.tool-tip-parent-report-moror-toolbar > button:hover,
.tool-tip-parent-report-moror-toolbar > button:focus {
  border-bottom: 1px solid white;
  outline: 0;
  box-shadow: none;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dashbord-select-active-financial-periods {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: flex-start;
  align-items: stretch;
  background: #e5e5e5;
  padding: 0 10rem;
  user-select: none;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
}
.dashbord-select-active-financial-periods::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.dashbord-select-active-financial-periods::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.dashbord-select-active-financial-periods.show {
  opacity: 1;
  transition: 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.335);
}
.dashbord-select-active-financial-periods > .dashboard-select-data {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  justify-content: flex-start;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7);
  background: white;
}
.dashbord-select-active-financial-periods > .dashboard-select-data > .dashboard-header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  align-items: stretch;
  flex-grow: 0;
  padding: 1rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.dashbord-select-active-financial-periods > .dashboard-select-data > .dashboard-header > div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-between;
  align-items: stretch;
  padding: 0.2rem 0;
}
.dashbord-select-active-financial-periods > .dashboard-select-data > .dashboard-header > div > button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  padding: 0 0.5rem;
  border: 1px solid #1089ff;
  color: #1089ff;
  transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.dashbord-select-active-financial-periods > .dashboard-select-data > .dashboard-header > div > button:hover {
  color: white;
  background: #1089ff;
  box-shadow: 0 0 10px 0 #1089ff;
  transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.dashbord-select-active-financial-periods > .dashboard-select-data > .dashboard-header > div > button > span {
  margin-left: 10px;
}
.dashbord-select-active-financial-periods > .dashboard-select-data > .user-data-list {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  padding: 1rem 1rem;
}
.dashbord-select-active-financial-periods > .dashboard-select-data > .user-data-list .new-data-info {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  flex-grow: 0;
  width: 100%;
  margin: 5px 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  padding: 0.3rem 0;
  font-size: 14px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background: #cc0000;
  color: white;
  cursor: pointer;
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.dashbord-select-active-financial-periods > .dashboard-select-data > .user-data-list .new-data-info > label {
  margin-left: 10px;
}
.dashbord-select-active-financial-periods > .dashboard-select-data > .user-data-list .li-user-data-list {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  flex-grow: 0;
  width: 100%;
  margin: 5px 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  overflow: visible;
}
.dashbord-select-active-financial-periods > .dashboard-select-data > .user-data-list .li-user-data-list:nth-child(odd) {
  background: rgba(0, 132, 255, 0.1);
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list:nth-child(odd)
  > :first-child {
  border-color: #1089ff;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list:nth-child(even) {
  background: rgba(95, 196, 0, 0.1);
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list:nth-child(even)
  > :first-child {
  border-color: rgba(95, 196, 0, 0.7);
}
.dashbord-select-active-financial-periods > .dashboard-select-data > .user-data-list .li-user-data-list:hover {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list:hover
  > .data
  > .swip
  > span {
  color: rgba(95, 196, 0, 0.7);
  border: 1px solid rgba(95, 196, 0, 0.7);
  border-radius: 2px;
}
.dashbord-select-active-financial-periods > .dashboard-select-data > .user-data-list .li-user-data-list.active {
  border-bottom: 4px solid rgba(0, 132, 255, 0.5);
  box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.3);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list.wait-for-being-active {
  border: 1px solid #1089ff;
  box-shadow:
    0 0 10px 0 rgba(0, 132, 255, 0.5),
    inset 0 0 5px 0 rgba(0, 132, 255, 0.5);
  transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.dashbord-select-active-financial-periods > .dashboard-select-data > .user-data-list .li-user-data-list .data {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  justify-content: space-around;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .data
  > .data-info {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  padding: 1.5rem 5px;
  height: 100%;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .data
  > .data-info
  > svg {
  font-size: 16px;
  margin-left: 10px;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .data
  > .data-info
  > h5,
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .data
  > .data-info
  h6 {
  font-family: Samim-Bold;
  margin-bottom: 0;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .data
  > .data-info
  > h6:last-child {
  color: rgba(0, 0, 0, 0.7);
}
.dashbord-select-active-financial-periods > .dashboard-select-data > .user-data-list .li-user-data-list .data .swip {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-around;
  flex-grow: 0;
  width: 6rem;
  height: 4rem;
  padding-right: 15px;
  cursor: pointer;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .data
  .swip:hover,
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .data
  .swip:focus {
  outline: 0;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .data
  .swip:hover
  > button,
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .data
  .swip:focus
  > button {
  color: rgba(0, 0, 0, 0.7);
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .data
  .swip:hover
  > span,
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .data
  .swip:focus
  > span {
  color: rgba(95, 196, 0, 0.7);
  border: 1px solid rgba(95, 196, 0, 0.7);
  border-radius: 2px;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .data
  .swip
  > span {
  color: rgba(0, 0, 0, 0.2);
  padding: 1px 3px;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .data
  .swip
  > button {
  border: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.2);
  font-size: 14px;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  flex-grow: 0;
  width: 100%;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  height: 1.8rem;
  overflow: hidden;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #222831 #e5e5e5;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #e5e5e5;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #222831;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul
  li {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  min-width: 4rem;
  height: 100%;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul
  li:hover {
  color: inherit;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul
  li:first-child {
  border-left: 1px dotted rgba(0, 0, 0, 0.2);
  color: inherit;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul
  li:first-child
  > span {
  margin-left: 7px;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul
  li:not(:last-child):not(:first-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul
  li
  > h4 {
  color: red;
  margin-bottom: 0;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul
  li.insert-new-financial-period {
  min-width: 1.5rem;
  flex-grow: 0;
  color: #cc0000;
  padding: 0 0.3rem;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul
  li.insert-new-financial-period
  > h5 {
  margin-bottom: 0;
  font-size: 10px;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul
  li:nth-child(1) {
  flex-grow: 0;
  padding: 0 5px;
  font-size: 12px;
  font-weight: bold;
  cursor: default;
  overflow: visible;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul
  li:nth-child(1):hover {
  box-shadow: none;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul
  li.active {
  border-bottom: 2px solid rgba(0, 132, 255, 0.5);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul
  li.wait-for-being-active {
  border-bottom: 1px solid #1089ff;
  box-shadow: inset 0 0 7px 0 #1089ff;
  color: #1089ff;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul
  > .insert-new {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: nowrap;
  flex-shrink: inherit;
  flex-basis: inherit;
  justify-content: center;
  height: 100%;
  color: rgba(95, 196, 0, 0.7);
  font-size: 14px;
  border: 0;
  background: transparent;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .financial-periods
  ul
  > .insert-new:hover {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  filter: brightness(1.2);
}
.dashbord-select-active-financial-periods > .dashboard-select-data > .user-data-list .li-user-data-list .info {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  padding: 0 5px;
}
.dashbord-select-active-financial-periods > .dashboard-select-data > .user-data-list .li-user-data-list .info > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: center;
  height: 100%;
  padding: 0.5rem 0;
  cursor: default;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .info
  > div:not(:last-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .info
  > div:first-child
  > span {
  color: #cc0000;
  border: 1px solid #cc0000;
  border-radius: 2px;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .info
  > div
  > h5 {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  margin: 0;
  padding: 0 5px;
  font-size: 10px;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .info
  > div
  > h5
  > :nth-child(1) {
  margin-left: 5px;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .info
  > div
  > span {
  font-size: 12px;
  font-weight: normal;
  padding: 1px 3px;
}
.dashbord-select-active-financial-periods
  > .dashboard-select-data
  > .user-data-list
  .li-user-data-list
  .info
  > div.infinite
  > span {
  color: #cc0000;
  border: 1px solid #cc0000;
  border-radius: 2px;
}

@media screen and (max-width: 850px) {
  .main-task-switcher-tabs > ul > li {
    flex-basis: 48% !important;
  }
}
@media screen and (max-width: 600px) {
  .main-task-switcher-tabs > ul > li {
    flex-basis: 100% !important;
  }
}

@media screen and (max-width: 750px) {
  .dashbord-select-active-financial-periods {
    padding: 0 !important;
  }
}

@media screen and (max-width: 680px) {
  .group-body-self-tree-view-container {
    flex-direction: column !important;
  }
  .group-body-self-tree-view-container > div {
    width: auto !important;
  }
}

/*# sourceMappingURL=style-light-rtl.css.map */