:root {
  /* colors */
  --c-primary: 35, 101, 175;
  --c-page-back: 247, 247, 247;
  --c-text-primary: 50, 50, 50;
  --c-title-primary: 50, 50, 50;
  --c-border-primary: 231, 231, 231;
  --c-success: 4, 184, 0;
  --c-alert: 163, 25, 20;
  --c-new: 119, 0, 147;
  --c-ready: 255, 127, 55;
  --c-disabled: 175, 175, 175;
  --c-header-back: 255, 255, 255;
  --c-default-grey-back: 240, 240, 240;
  --c-header-sticky-back: 255, 255, 255;
  --c-badge-notidication-back: rgb(var(--c-primary));
  --c-menu-side-back: 255, 255, 255;
  --c-menu-top-sub-back: 255, 255, 255;
  --c-menu-top-sub-border: 35, 101, 175;
  --c-menu-side-back: 255, 255, 255;
  --c-menu-side-sub-back: 243, 248, 249;
  --c-menu-side-sub-border: 35, 101, 175;
  --c-menu-sub-border: 19, 191, 214;
  --c-section-back: 255, 255, 255;
  --c-section-header-border: var(--c-border-primary);
  --c-section-header-button-back: 240, 240, 240;
  --c-section-header-button-ico: 55, 55, 55;
  --c-table-border: 220, 220, 220;
  --c-table-seperator: 238, 238, 238;
  --c-table-head-back: 240, 240, 240;
  --c-table-odd-back: 247, 247, 247;
  --c-list-second-line: 35, 101, 175;
  --c-list-col-date: 170, 113, 219;
  --c-panel-back: 255, 255, 255;
  --c-panel-border: 35, 101, 175;
  --c-panel-header-border: var(--c-border-primary);
  --c-breadcrumb-button-back: 255, 255, 255;
  /* grad */
  --g-ok: linear-gradient(-24deg, rgb(102, 251, 123), rgb(134, 253, 75));
  --g-next: linear-gradient(-24deg, rgb(102, 239, 251), rgb(75, 222, 253));
  --g-waiting: linear-gradient(-24deg, rgb(102, 251, 123), rgb(134, 253, 75));
  --g-alert: linear-gradient(-24deg, rgb(102, 251, 123), rgb(134, 253, 75));
  /* dimansions */
  --sz-header: 64px;
  --sz-side-menu: 200px;
  /* shadows*/
  --sh-bottom: 0px 2px 16px 0px rgba(0, 0, 0, 0.1);
  --sh-section: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
  --sh-form: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  /* fonts */
  --f-main: 'Roboto', 'sans-serif';
  --f-size: 1em;
  --f-list-second-line: 0.875em;
  /* forms */
  --form-input-font-size: 1em;
  --form-input-padding: 8px 12px;
  --form-input-border-radius: 8px;
  --form-input-back: 255, 255, 255;
  --form-input-border-color: var(--c-border-primary);
  --form-input-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
  --form-description-color: 150, 150, 150;
  --form-alert-color: 225, 10, 10;
  --form-alert-shadow: 0px 1px 8px 0px rgba(var(--form-alert-color), 0.2),
    inset 0px 1px 8px 0px rgba(var(--form-alert-color), 0.2);
  --form-disabled-color: var(--c-disabled);
  --button-font-size: 1em;
  --button-color: 255, 255, 255;
  --button-iconic-color: 0, 0, 0;
  --button-padding: 8px 16px;
  --button-border-radius: 8px;
  --button-back-default: 15, 41, 72;
  --button-back-hover-default: var(--c-primary);
  --button-back-secondary: 35, 101, 175;
  --button-back-iconic: 226, 226, 226;
  --button-back-save: 0, 181, 107;
  --button-back-cancel: 140, 140, 140;
  --button-back-disabled: var(--c-disabled);
  --button-back-ready: var(--c-ready);
  --button-back-success: var(--c-success);
  --button-back-alert: var(--c-alert);
  /* layout */
  --pd-main: 24px;
  --section-border-radius: 12px;
  --section-padding: 20px;
  --section-m-padding: 12px;
  --table-padding: 16px;
  --panel-padding: 16px;
  /* anim */
  --trn-std: all 0.3s ease-in-out;
  /* tabs */
  --c-tab-back: 217, 217, 217;
  --c-tab-text: 0, 0, 0;
  --c-tab-selected-back: 2, 70, 146;
  --c-tab-selected-text: 255, 255, 255;
  --tab-border-radius: 8px 8px 0 0;
  /* toast */
  --toast-back: 230, 230, 230;
  --toast-back-success: var(--c-success);
  --toast-back-ready: var(--c-ready);
  --toast-back-alert: var(--c-alert);
  --toast-back-new: var(--c-new);
  --toast-color: 0, 0, 0;
  --toast-color-invert: 255, 255, 255;
  --toast-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.2);
}

/* standard */
body {
  margin: 0;
  padding: 0;
  min-width: 100%;
  min-height: 100vh;
  background-color: rgb(var(--c-page-back));
  font-size: var(--f-size);
  color: rgb(var(--c-text-primary));
}

*,
::after,
::before {
  box-sizing: border-box;
  font-family: var(--f-main);  
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: rgb(var(--c-title-primary));
  margin: 0;
}

img,
svg {
  vertical-align: middle;
  pointer-events: none;
}

a {
  text-decoration: none;
  color: rgb(var(--c-title-primary));
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.animate {
  transition: var(--trn-std);
}

.clickable {
  cursor: pointer;
}

.clickable:hover {
  background-color: rgb(226, 240, 255);
}

/* general */
main {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: calc(var(--sz-header) + var(--pd-main)) var(--pd-main) var(--pd-main) var(--pd-main);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#main-content-w {
  width: 100%;
}

.logo-header {
  display: flex;
  align-items: center;
  width: 166px;
  margin-left: 16px;
}

.logo-header svg {
  height: 44px;
}
.logo-header img {
  max-height: 54px;
}

.flx {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
}

.flx-nwrap {
  flex-wrap: nowrap;
}

.flx-jc-sb {
  justify-content: space-between;
}

.flx-ai-c {
  align-items: center;
}

.m-col {
  width: 100%;
}

.m-col-10 {
  width: 10%;
}

table {
  border: none;
  min-width: 100%;
  position: relative;
}

table.table-border {
  border-radius: 4px;
  border: 1px solid rgb(var(--c-table-border));
  border-spacing: 0;
}

table tr td,
table tr th .table-head-content {
  padding: var(--table-padding);
  border-bottom: 1px solid rgb(var(--c-table-seperator));
}

table tbody tr:last-child td {
  border-bottom: none;
}

table.table-border thead th {
  border-radius: 4px 4px 0 0;
  background-color: rgb(var(--c-table-head-back));
}

table.table-border thead th:nth-child(1) {
  border-radius: 4px 0 0 0;
}

table.table-border thead th:last-child {
  border-radius: 0 4px 0 0;
}

.table-head-content {
  display: flex;
  align-items: center;
}

.table-head-row-number {
  max-width: 44px;
}

.table-head-content .ico-sort {
  max-width: 12px;
  margin-left: 8px;
}

.ico-sort.order-asc {
  transform: rotate(180deg);
}

table.table-border th,
table.table-border td {
  text-align: left;
  border-bottom: 1px solid rgb(var(--c-table-border));
  border-right: 1px solid rgb(var(--c-table-border));
  min-width: 160px;
}

table.table-border th {
  vertical-align: bottom;
}

table.table-border td {
  vertical-align: top;
}

table.table-border thead th:last-child,
table.table-border tbody tr td:last-child {
  border-right: none;
}

table.table-border tbody tr:last-child td {
  border-bottom: none;
}

table.table-colored tbody tr:nth-child(odd) {
  background-color: rgb(var(--c-table-odd-back));
}

table.table-colored tbody tr:hover {
  background-color: rgb(226, 240, 255);
}

.table-list td a {
  display: inline-block;
}

.table-list td.cell-belge {
  display: flex;
  flex-wrap: wrap;
}

.table-cell-image {
  max-height: 100px;
  border: 1px solid #ececec;
}

.table-cell-flx-row {
  display: flex;
  flex-wrap: wrap;
}

.table-cell-align-right {
  text-align: right !important;
}

.image-c {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* forms */
form {
  width: 100%;
}

input,
select,
textarea,
.input-a,
.form-select-activator {
  background-color: rgb(var(--form-input-back));
  border-radius: var(--form-input-border-radius);
  border: 1px solid rgb(var(--form-input-border-color));
  box-shadow: var(--form-input-shadow);
}

.form-select-activator {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 32px;
}

.form-select-activator .ico-c {
  position: absolute;
  right: 8px;
}

.form-select-activator .ico-close {
  right: 36px;
}

.form-select-activator .ico-c svg {
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
}

.form-select-activator.disabled {
  cursor: auto;
}

.form-select-activator.disabled.disabled-show-name {
  border: none;
  opacity: 1;
  box-shadow: none;
  font-size: 1.1em;
  font-weight: 600;
}

.form-select-activator.disabled.disabled-show-name>.ico-c {
  display: none;
}

.ico-c.select-close-selection {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

input[type='text'],
input[type='password'],
input[type='date'],
input[type='datetime-local'],
input[type='tel'],
input[type='number'],
input[type='email'],
input[type='file'],
select,
textarea,
.input-a,
.form-select-activator {
  padding: var(--form-input-padding);
  height: 44px;
  font-size: var(--form-input-font-size);
}

.form-select-activator {
  min-height: 44px;
  height: auto;
}

input[type='file'] {
  cursor: pointer;
}

textarea {
  height: initial;
}

input::placeholder {
  opacity: 0.5;
  font-style: italic;
}

.invalid {
  border: 2px solid rgb(var(--form-alert-color)) !important;
  box-shadow: var(--form-alert-shadow);
}

.disabled,
input:disabled,
textarea:disabled {
  border: 2px solid rgb(var(--form-disabled-color));
  opacity: 0.4;
  cursor: auto;
}

.changed {
  border: 1px solid #efa471;
}

label {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 2px;
}

label>span {
  padding-bottom: 4px;
  padding-left: 8px;
  width: 100%;
  word-break: break-word;
}

label>input:not([type='radio']):not([type='checkbox']),
label>textarea,
label>select,
.form-select-activator {
  width: 100%;
}

label.label-row {
  flex-direction: row;
}

label.label-row>span {
  padding-right: 8px;
  padding-bottom: 0;
  padding-left: 0;
}

.label-radio {
  align-items: center;
  width: initial;
  margin-right: 16px;
  margin-bottom: 16px;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.label-radio.disabled {
  border: none;
}

.label-radio>span {
  width: initial;
  padding-bottom: 0;
}

.label-radio.disabled>span {
  color: rgb(var(--c-disabled));
}

.label-radio>span a {
  text-decoration: underline;
}

.labe-content {
  display: flex;
  width: 100%;
}

.form-accept-content .label-radio {
  margin-bottom: 0;
}

.form-select-list-c {
  width: 100%;
  display: flex;
  position: relative;
}

.form-select-input {
  width: 100%;
}

.form-select-list {
  box-shadow: var(--sh-bottom);
  position: fixed;
  z-index: 999;
  background-color: rgb(255, 255, 255);
  border: 2px solid rgb(150, 150, 150);
  overflow: hidden;
  overflow-y: auto;
  border-radius: 8px;
}

.form-select-list-item {
  padding: 12px 8px;
  cursor: pointer;
}

.form-select-list-item:hover {
  background-color: rgba(var(--c-primary), 0.2);
}

.form-select-list-item.selected {
  background-color: rgba(var(--c-primary), 0.1);
}

.select-box-check {
  width: 14px;
  height: 14px;
  margin-right: 8px;
}

/* buttons */
button,
.button-c {
  padding: var(--button-padding);
  background-color: rgb(var(--button-back-default));
  color: rgb(var(--button-color));
  border-radius: var(--button-border-radius);
  font-size: var(--button-font-size);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  border: none;
  transition: var(--trn-std);
}

.button-c:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(var(--button-back-hover-default));
}

.button-c:hover span {
  color: rgb(255, 255, 255);
}

button svg,
.button-c svg {
  fill: rgb(var(--button-color));
  max-width: 24px;
  max-height: 24px;
}

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

.button-icon i {
  margin-right: 16px;
}

.button-second {
  background-color: rgb(var(--button-back-secondary));
}

.button-export,
.button-documents {
  background-color: rgb(235, 235, 235);
  width: 100%;
}

.button-export:hover svg {
  fill: #fff;
}

.button-save {
  background-color: rgb(var(--button-back-save));
}

.button-cancel {
  background-color: rgb(var(--button-back-cancel));
}

.button-alert {
  background-color: rgb(var(--button-back-alert));
}

.button-cancel:hover {
  background-color: rgb(100, 100, 100);
}

.button-belge {
  background-color: rgb(235, 235, 235);
}

.button-c:disabled {
  background-color: rgb(var(--c-disabled));
}

/* icons */
svg {
  max-width: 100%;
  max-height: 100%;
}

.ico-c {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  transition: var(--trn-std);
}

.ico-btn {
  cursor: pointer;
}

.ico-c svg {
  fill: rgb(var(--c-primary));
  max-width: 24px;
  max-height: 24px;
}
.ico-c.ico-btn:hover{
  background-color: navy;
}
/* colors */
.back-grad {
  padding: 6px 8px;
  color: #fff;
  border-radius: 4px;
  display: inline-block;
}

.back-grad-title {
  background-image: linear-gradient(24deg, #73a4dc, #2365af);
}

.back-grad-new {
  background-image: linear-gradient(24deg, #b212ed, #770093);
}

.back-grad-waiting {
  background-image: linear-gradient(24deg, #eda512, #cb7c02);
}

.back-grad-alert {
  background-image: linear-gradient(24deg, #f57c7c, #9a0000);
}

.back-grad-next {
  background-image: linear-gradient(24deg, #73a4dc, #2365af);
}

.back-grad-ok {
  background-image: linear-gradient(24deg, #2fc939, #097401);
}

.back-grad-beforeok {
  background-image: linear-gradient(24deg, #ff6400, #00604b);
}

.back-grad-change {
  background-image: linear-gradient(24deg, #008a17, #770093);
}

.back-grad-finish {
  background-image: linear-gradient(24deg, #008a17, #770093);
}
.back-grad-sevk {
  color: #777777;
  background-image: linear-gradient(24deg, #bfcbd8, #e1dcdc);
}
.back-grad-sevk-ok {
  color: #242424;
}
.back-grad-grey {
  background-image: linear-gradient(24deg, #e6e6e6, #e1dcdc);
  color: #000;
  padding: 12px;
}
.back-grad-dgrey {
  background-image: linear-gradient(24deg, #797979, #a1a1a1);
  color: #000;
  padding: 12px;
}
.back-grey {
  background-color: #f1f1f1;
}

/* login */
.login-w {
  min-width: 100%;
  min-height: 100vh;
  justify-content: center;
  display: flex;
  align-items: center;
}

.login-page main {
  padding: 32px;
  max-width: 480px;
  justify-content: center;
  flex-direction: row;
  align-items: center;
}

.section-login {
  padding: 16px;
  transition: var(--trn-std);
}

.section-login .section-content {
  flex-direction: column;
}

.login-header {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgb(var(--c-border-primary));
  padding-bottom: 16px;
  margin-bottom: 32px;
}

.login-header h1 {
  font-size: 1em;
}

.login-header .logo-header {
  margin-left: 0;
  max-width: 144px;
}

.button-login {
  width: 100%;
}

.section-login form {
  margin-bottom: 32px;
}

.login-nav {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.login-nav-back {
  text-align: left;
}

.login-nav a {
  padding: 8px 0;
  font-weight: 500;
}

/* header */
header {
  background-color: rgb(var(--c-header-back));
  box-shadow: var(--sh-bottom);
  max-height: var(--sz-header);
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 30;
}

.header-c {
  display: flex;
  height: 64px;
  align-items: center;
}

.header-c>.ico-c {
  width: 32px;
  height: 64px;
}

.ico-notification svg {
  width: 18px;
}

.header-profile {
  position: relative;
}

.b-menu-profile {
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-left: 16px;
}

.profile-photo-c {
  width: 56px;
  height: 56px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 100%;
}

.profile-photo-c img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
}

/* badge */
.badge-have {
  position: relative;
}

.badge-have>.badge-c {
  display: flex;
}

.badge-notification {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: var(--c-badge-notidication-back);
  margin-bottom: 16px;
  right: 0;
  position: absolute;
}

/* menu */
.menu-side-w {
  position: fixed;
  z-index: 8;
  top: var(--sz-header);
  height: calc(100% - var(--sz-header));
  left: -200px;
  width: 200px;
  box-shadow: var(--sh-bottom);
  background-color: rgb(var(--c-menu-side-back));
}

.menu-side-shadow {
  z-index: 10;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0;
  transition: var(--trn-std);
  visibility: hidden;
  pointer-events: none;
  z-index: 7;
}

.menu-side-shadow.showme {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
  display: flex;
}

.ico-mobile-menu {
  cursor: pointer;
}

.ico-mobile-menu svg {
  width: 24px;
  height: 24px;
}

nav>ul {
  display: flex;
  flex-direction: column;
  width: 100%;
}

nav>ul>li {
  display: flex;
  width: 100%;
  position: relative;
  flex-direction: column;
}

nav>ul li .ico-c {
  margin-right: 4px;
}

nav ul li>a,
nav ul li>div {
  display: flex;
  width: 100%;
  padding: 12px 16px;
  align-items: center;
}

.menu-have-sub {
  cursor: pointer;
}

.menu-sub {
  position: absolute;
  height: auto;
  background-color: rgb(var(--c-menu-top-sub-back));
  z-index: 1;
  min-width: 200px;
  box-shadow: var(--sh-bottom);
}

header .menu-sub {
  border-top: 3px solid rgb(var(--c-menu-side-sub-border));
}

.menu-sub>ul>li,
.menu-side-w nav>ul>li {
  border-bottom: 1px solid rgba(var(--c-menu-sub-border), 0.15);
}

.menu-sub>ul>li:last-child {
  border-bottom: none;
}

.menu-open {
  position: relative;
}

.menu-open>.menu-sub {
  display: flex;
}

.menu-sub.menu-sub-left {
  left: 100%;
}

.menu-sub.menu-sub-right {
  right: 0;
}

.menu-sub-open>.menu-sub {
  display: flex;
}

.menu-side-w .menu-sub {
  background-color: rgb(var(--c-menu-side-sub-back));
  border-left: 3px solid rgb(var(--c-menu-side-sub-border));
  position: relative;
  left: 0;
}

.menu-side-w .menu-open {
  flex-direction: column;
}

.menu-side-w>nav>ul>li .menu-have-sub:after {
  content: '';
  width: 8px;
  height: 12px;
  background-color: rgb(var(--c-primary));
  -webkit-mask-image: url(../images/arrow.svg);
  mask-image: url(../images/arrow.svg);
  position: absolute;
  right: 8px;
}

.menu-profile {
  right: 0;
  width: 360px;
}

/* layout */

.main-page main {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

section {
  background-color: rgb(var(--c-section-back));
  border-radius: var(--section-border-radius);
  box-shadow: var(--sh-section);
  position: relative;
  width: 100%;
  display: flex;
  transition: var(--trn-std);
  flex-wrap: wrap;
  align-items: flex-start;
}

.main-page main section {
  width: 100%;
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: var(--section-m-padding);
  border-bottom: 1px solid rgb(var(--c-section-header-border));
  width: 100%;
  flex-wrap: wrap;
}

.section-header h1 {
  font-size: 1.1em;
  font-weight: 500;
  margin: 0;
  display: flex;
  flex-direction: column;
  padding-right: 8px;
}

.section-header-count {
  color: rgb(var(--c-primary));
  font-size: 0.875em;
  font-weight: 400;
}

.ico-section {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  margin-right: 8px;
  flex-shrink: 0;
}

.ico-section svg {
  width: 24px;
  max-height: 24px;
}

.ico-section svg {
  fill: rgb(255, 255, 255);
}

.section-header-buttons-c {
  margin-left: auto;
  position: relative;
  display: flex;  
  flex-wrap: wrap;
}
.header-extra-buttons-C{
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  margin-top: 16px;
}
.section-header-buttons {
  padding: 8px;
  border-radius: 8px;
  border-top: 3px solid rgb(var(--c-border-primary));
  min-width: inherit;
  top: 100%;
}

.list-search-c {
  position: relative;
  display: flex;
  align-items: center;
}
.header-buttons-C{
  display: flex;
  align-items: center;
  position: relative;
}

.ico-section-header-btn {
  background-color: rgb(var(--c-section-header-button-back));
  cursor: pointer;
}

.ico-section-header-btn svg {
  fill: rgb(var(--c-section-header-button-ico));
  transition: var(--trn-std);
}

.ico-section-header-btn:hover {
  background-color: rgb(var(--button-back-hover-default));
}

.ico-section-header-btn:hover svg {
  fill: rgb(255, 255, 255);
}

.section-content {
  display: flex;
  width: 100%;
}

.section-list {
  flex-direction: column;
}

.section-list .section-content {
  width: 100%;
  flex-direction: column;
}

.section-content.section-inner {
  padding: 10px;
}

.list-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  overflow-x: auto;
}

.list-content {
  display: flex;
  flex-direction: column;
}

.list-content-item {
  display: flex;
}

.list-second-line {
  font-size: var(--f-list-second-line);
  color: rgb(var(--c-list-second-line));
}

.list-col-day {
  color: rgb(var(--c-list-col-date));
}

.list-filter-wrapper {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  background-color: rgb(var(--c-default-grey-back));
  width: 100%;
}

.list-filter-content {
  padding: 8px 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.list-filter-item {
  font-size: 0.875em;
  flex-shrink: 0;
  padding: 4px 32px 4px 6px;
  margin-right: 8px;
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
  position: relative;
  display: flex;
  height: 26px;
}

.list-filter-close {
  position: absolute;
  width: 26px;
  height: 26px;
  background-color: rgb(163, 25, 20);
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  top: 0;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.list-filter-close:before,
.list-filter-close:after {
  content: '';
  width: 16px;
  height: 2px;
  background-color: rgb(255, 255, 255);
  transform: rotate(45deg);
  display: inline-block;
  position: absolute;
}

.list-filter-close:after {
  transform: rotate(-45deg);
}

/* panel */
.panel-wrapper {
  width: 100%;
  position: fixed;
  z-index: 10;
  box-shadow: var(--sh-bottom);
  top: var(--sz-header);
  background-color: rgb(var(--c-panel-back));
  border-top: 3px solid rgb(var(--c-panel-border));
  height: calc(100% - var(--sz-header));
  transition: var(--trn-std);
}

.panel-open,
.panel-close {
  cursor: pointer;
}

.panel-wrapper.panel-right {
  left: 100%;
}

.panel-wrapper.panel-right.showme {
  left: 0;
}

.panel-header,
.panel-footer {
  padding: var(--panel-padding);
  border-bottom: 1px solid rgb(var(--c-panel-header-border));
  height: 64px;
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.panel-header {
  justify-content: space-between;
}

.panel-footer .button-c {
  flex: 1;
}

.panel-close-btn,
.toast-close-btn {
  width: 44px;
  height: 44px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  cursor: pointer;
}

.toast-close-btn {
  top: 0;
}

.panel-close-btn:before,
.panel-close-btn:after,
.toast-close-btn:before,
.toast-close-btn:after {
  content: '';
  position: absolute;
  width: 60%;
  height: 2px;
  background-color: rgb(var(--c-text-primary));
  transform: rotate(45deg);
}

.panel-close-btn:after,
.toast-close-btn:after {
  transform: rotate(-45deg);
}

.panel-content {
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  width: 100%;
  height: calc(100vh - 64px - var(--sz-header));
  padding-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.panel-have-footer .panel-content {
  height: calc(100vh - 128px - var(--sz-header));
}

.panel-content-item {
  display: flex;
  width: 100%;
}

.panel-content-item.back-grey {
  background-color: rgb(245, 245, 245);
  border-radius: 10px;
}

.panel-notification-content {
  padding: var(--panel-padding);
}

.panel-notification-content .panel-content-item {
  background-color: rgb(245, 245, 245);
  border-radius: 10px;
  margin-bottom: 8px;
}

.panel-notification-content .panel-content-item p {
  margin-top: 0;
}

.panel-notification-content .panel-content-item .panel-date {
  color: rgb(120, 120, 120);
  font-size: 0.75em;
}

.panel-export-content .panel-content-item {
  padding: var(--panel-padding) var(--panel-padding) 0 var(--panel-padding);
}

.panel-filter-content .panel-content-item {
  border-bottom: 1px solid rgb(var(--c-border-primary));
}

.panel-filter-content .panel-content-item {
  display: flex;
  align-items: flex-end;
}

.panel-filter-content .panel-content-item label {
  margin-right: 8px;
}

.panel-documents-item .input-a {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-documents-item .input-a i {
  margin: 0;
  width: 36px;
  height: 36px;
}

.panel-documents-item input[type='file'] {
  display: none;
}

.panel-page-menu-item {
  width: 100%;
  margin-bottom: 16px;
}

.preview-content {
  padding: 16px;
  width: 100%;
}

.preview-content .form-part-title-buttons,
.preview-content .form-inner-comment {
  display: none !important;
}

.preview-content .form-part-title {
  margin: 0;
  padding: 8px;
  background-color: #f1f1f1;
}

.preview-shadow {
  width: 800px;
  position: fixed;
  left: 110%;
  top: 110%;
}

.preview-page-part {
  width: 100%;
}

.preview-page-part .form-part {
  border: none;
  box-shadow: none;
}

.preview-part-title {
  font-weight: 800;
  padding: 16px;
}

.preview-part {
  margin-bottom: 24px
}

.preview-content table,
.print-c table {
  border: 1px solid #e7e7e7;
}

.preview-content table tr td,
.print-c table tr td {
  padding: 6px;
}

.preview-content table tr td,
.print-c table tr td {
  border-bottom: 1px solid #e7e7e7;
}

.preview-content table tr td:not(:last-child),
.print-c table tr td:not(:last-child) {
  border-right: 1px solid #e7e7e7;
}

.table-no-line,
.table-no-line tr td {
  border: none !important;
}

/* page toast */
.page-toast-w {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 32px;
  right: 0;
  bottom: 0;
  z-index: 9999;
  width: 100%;
}

.page-toast-item {
  display: flex;
  position: relative;
  border-radius: 16px;
  padding: 16px 44px 16px 16px;
  background-color: rgb(var(--toast-back));
  width: 100%;
  box-shadow: var(--toast-shadow);
  transition: var(--trn-std);
  margin-top: 16px;
}

.toast-item-alert {
  background-color: rgb(var(--toast-back-alert));
}

.toast-item-success {
  background-color: rgb(var(--toast-back-success));
}

.toast-item-ready {
  background-color: rgb(var(--toast-back-ready));
}

.page-toast-item span {
  color: rgb(var(--toast-color-invert));
}

.page-toast-item .toast-close-btn:before,
.page-toast-item .toast-close-btn:after {
  background-color: rgb(var(--toast-color-invert));
}

/* breadcrumb */
.breadcrumb-wrapper {
  display: flex;
  width: 100%;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(var(--c-border-primary));
}

.breadcrumb-wrapper .ico-c {
  max-width: 12px;
  max-height: 12px;
}

.breadcrumb-wrapper a,
.breadcrumb-wrapper span,
.breadcrumb-wrapper .breadcrumb-link {
  display: flex;
  align-items: center;
  padding: 8px 12px;
}

.breadcrumbs-list {
  display: flex;
  align-items: center;
}

.breadcrumbs-list,
.breadcrumbs-back {
  border-radius: 8px;
  background-color: rgb(var(--c-breadcrumb-button-back));
  max-height: 32px;
}

.breadcrumbs-back {
  margin-right: 8px;
  padding: 0 !important;
}

.breadcrumbs-back .ico-clickable {
  padding: 8px 12px;
  cursor: pointer;
}

.breadcrumbs-back svg {
  transform: rotate(180deg);
  justify-content: center;
  width: 8px;
}

.breadcrumbs-list a {
  border-right: 1px solid rgb(var(--c-border-primary));
}

/* pagination */
.list-paging-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 12px;
  position: relative;
}

.pagination-content {
  background-color: rgb(244, 244, 244);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  position: relative;
}

.pagination-nav {
  display: flex;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 0 8px;
}

.pagination-nav svg {
  height: 16px;
}

.pagination-nav-prev svg {
  transform: rotate(180deg);
}

.pagination-current-page {
  border: none;
  max-width: 60px;
  margin: 0 12px;
  text-align: center;
}

.pagination-total-page {
  margin-right: 12px;
}

/* forms */
.section-header-search {
  width: calc(100vw - 48px);
  padding: 8px;
  background-color: rgb(var(--c-section-header-button-back));
  left: 24px;
    max-width: 100vw;
    position: fixed;
}

#list-search-form {
  display: flex;
  flex: 1;
  align-items: center;
}

#list-search-form input {
  flex: 1;
}

/* section forms */
.form-part {
  background-color: rgb(var(--c-section-back));
  border-radius: var(--section-border-radius);
  box-shadow: var(--sh-form);
  position: relative;
  display: flex;
  transition: var(--trn-std);
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 12px;
  width: 100%;
}

.form-title {
  display: flex;
  justify-content: space-between;
}

.form-title .form-item {
  margin-bottom: 0;
}

.form-title input {
  width: 100%;
}

.form-title-buttons {
  display: flex;
}

.form-title input {
  font-size: 1.25em;
  font-weight: 500;
}

.title-second {
  width: 100%;
  display: flex;
  padding-top: 16px;
  padding-left: 8px;
}

.form-buttons {
  display: flex;
}

.form-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
}

.form-inner-content {
  width: 100%;
}

.form-content .form-part {
  flex-direction: column;
}

.form-part-title {
  display: flex;
  width: 100%;
  padding: 8px 0;
  margin-bottom: 16px;
  justify-content: space-between;
  align-items: center;
}

.form-part-title-buttons {
  display: flex;
}

.form-part-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
  position: relative;
  overflow-x: auto;
}

.form-item {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.form-item-display {
  border: 1px solid #dddddd;
  padding: 8px;
  margin-bottom: 0;
}

.panel-content .form-item.form-item-display {
  padding: 8px;
}

.form-item-wb {
  flex-wrap: nowrap;
  align-items: flex-end;
}

.display-title {
  width: 100%;
  padding-bottom: 8px;
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 8px;
}

.form-item-display-nb {
  border: none;
  padding: 0;
}

.form-item-button {
  display: flex;
  flex-shrink: 0;
}

.form-display-extra {
  border-top: 1px solid #e7e7e7;
  margin-top: 8px;
  padding: 8px 8px 0 8px;
  width: 100%;
}

.panel-content .form-item {
  padding: 16px;
  margin-bottom: 0;
  align-items: flex-start;
}

.preview-content .form-item {
  align-items: flex-start;
  padding: 0 !important;
}

.preview-content .display-title {
  padding-top: 8px;
}

.form-select-input .form-item {
  margin-bottom: 0;
  padding: 0;
}

.preview-shadow .form-item-half {
  width: 50%;
  padding-right: 16px;
}

.form-item-title {
  width: 100%;
  margin-bottom: 8px;
}

.form-item-picture {
  width: 120px;
  height: 120px;
  margin-right: 8px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgb(var(--c-border-primary));
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(var(--c-default-grey-back));
}

.form-item-picture.small-picture {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.form-item-picture .image-c {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
}

.form-item-picture .image-c img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form-item-picture.form-item-picture-single {
  width: 100%;
  height: 300px;
}

.form-item-picture input[type='file'] {
  width: 100%;
  height: 100%;
  display: none;
}

.form-item-description,
.form-item-alert {
  width: 100%;
  padding: 2px 8px;
  font-size: .9em;
}

.form-item-description {
  color: rgb(var(--form-description-color));
  font-style: italic;
}

.form-item-alert {
  color: rgb(var(--form-alert-color));
  font-weight: 600;
}

.form-inner-comment {
  margin: 10px 0;
  background-color: rgb(var(--c-default-grey-back));
  padding: 8px;
  border-radius: 4px;
}

.form-inner-comment.success {
  background-color: rgba(var(--toast-back-success), .2);
}

.form-inner-comment.waiting {
  background-color: rgba(var(--toast-back-ready), .2);
}

.form-inner-comment.alert {
  background-color: rgba(var(--toast-back-alert), .2);
}

.form-inner-comment.success-d {
  padding: 12px;
  width: 100%;
  color: #fff;
  background-color: rgba(var(--toast-back-success));
}

.form-inner-comment.waiting-d {
  padding: 12px;
  width: 100%;
  color: #fff;
  background-color: rgba(var(--toast-back-ready));
}

.form-inner-comment.alert-d {
  padding: 12px;
  width: 100%;
  color: #fff;
  background-color: rgba(var(--toast-back-alert));
}

.form-inner-comment.new-d {
  padding: 12px;
  width: 100%;
  color: #fff;
  background-color: rgba(var(--toast-back-new));
}

.waiting-d strong,
.alert-d strong,
.success-d strong,
.new-d strong {
  color: #fff;
  text-decoration: underline;
}

.button-documents {
  width: 100%;
  justify-content: space-between;
}

.file-item {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid rgb(var(--form-input-border-color));
  margin-bottom: 8px;
  border-radius: 8px;
  width: 100%;
}

.file-item-title {
  width: 100%;
  border-bottom: 1px solid rgb(var(--c-table-border));
  padding: 8px;
}

.file-item-file-c {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

.only-image .ico-replace {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
}

.file-item-file {
  display: flex;
  align-items: center;
  padding: 8px;
  width: 100%;
}

.file-item-name {
  word-wrap: break-word;
  overflow: hidden;
}

.file-item-file-c .ico-replace {
  position: absolute;
  right: 0;
}

/* tabs */
.tabs-buttons-c {
  display: flex;
  margin: 32px 0;
  border-bottom: 1px solid rgb(var(--c-border-primary));
  width: 100%;
  position: relative;
  overflow: hidden;
}

.tab-button {
  min-height: 48px;
  background-color: rgb(var(--c-tab-back));
  color: rgb(var(--c-tab-text));
  padding: 12px 24px;
  border-radius: var(--tab-border-radius);
  cursor: pointer;
  margin: 0 50px;
  width: calc(100% - 100px);
  flex-shrink: 0;
  text-align: center;
  transition: var(--trn-std);
}

.tab-button.tab-selected,
.tab-button:hover {
  color: rgb(var(--c-tab-selected-text));
  background-color: rgb(var(--c-tab-selected-back));
}

.tabs-contents-c {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.tab-content {
  width: 100%;
  display: inline-block;
  flex-shrink: 0;
}

.tab-animate {
  transition-timing-function: ease-in-out;
  transition-property: all;
}

.tab-nav-button {
  position: absolute;
  display: flex;
  width: 44px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  height: 100%;
}

.tab-nav-button-prev {
  left: 0;
}

.tab-nav-button-prev .ico-c {
  transform: rotate(180deg);
}

.tab-nav-button-next {
  right: 0;
}

.tab-nav-button .ico-c {
  width: 32px;
  height: 32px;
}

.tab-nav-button .ico-c svg {
  max-width: 32px;
  max-height: 32px;
}

/* Site Management */
.menu-list-group {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.menu-list-item {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px 4px 16px;
  border: 1px solid #dfdfdf;
  margin-bottom: 8px;
  border-radius: 8px;
  cursor: grab;
}

.menu-list-item.menu-list-item-page {
  cursor: default;
}

.menu-list-item-buttons {
  display: flex;
}

/* Dashboard */
.dashboard-list-C {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.dashboard-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--table-padding);
  border-bottom: 1px solid rgb(var(--c-table-seperator))
}

.dashboard-list-item:hover {
  background-color: rgb(240, 240, 240);
}

@media screen and (min-width: 768px) {
  .section-header{
    flex-wrap: nowrap;
  }
  .section-header-buttons-c.collapsable .section-header-mobile-menu {
    display: none;
  }

  .section-header-buttons {
    display: flex;
    box-shadow: none;
    top: 0;
    min-width: inherit;
    background-color: transparent;
    position: relative;
    border: none;
    padding: 0;
  }

  .page-toast-w {
    width: inherit;
    max-width: 460px;
    flex-shrink: 0;
  }

  .page-toast-item {
    width: auto;
  }

  .section-header-search {
    left: initial;
    right: 100%;
    max-width: 480px;
    top: 100%;
    position: absolute;
  }
}

@media screen and (min-width: 992px) {
  .menu-side-w .menu-sub {
    position: absolute;
    left: 100%;
  }

  table.table-border th,
  table.table-border td {
    min-width: inherit;
  }

  .menu-side-w {
    left: 0;
  }

  .menu-side-shadow {
    display: none;
    pointer-events: none;
  }

  main {
    padding: calc(var(--sz-header) + var(--pd-main)) var(--pd-main) var(--pd-main) calc(var(--sz-side-menu) + var(--pd-main));
    flex-wrap: wrap;
  }

  .section-header {
    padding: var(--section-padding);
  }

  .main-page main section {
    width: 49%;
  }

  .panel-wrapper {
    max-width: 480px;
  }

  .panel-wrapper.panel-wide {
    max-width: 800px;
  }

  .panel-wrapper.panel-full {
    width: 100%;
    max-width: calc(100% - 200px);
  }

  .panel-wrapper.panel-right.showme {
    left: calc(100% - 480px);
  }

  .panel-wrapper.panel-right.panel-wide.showme {
    left: calc(100% - 800px);
  }

  .panel-wrapper.panel-right.panel-full.showme {
    left: 200px;
  }

  .form-item-half {
    width: 50%;
    padding-right: 16px;
  }

  .table-cell-flx-row .form-item {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1025px) {
  .tabs-buttons-c {
    overflow: visible;
  }

  .tab-button {
    width: auto;
    margin-right: 4px;
    margin-left: 0;
  }

  .tab-nav-button {
    display: none;
  }
}

@media screen and (min-width: 1200px) {
  .menu-sub-mobile-fix {
    width: initial;
    min-width: 480px;
    right: 0;
  }

  .form-content {
    column-gap: 1%;
    column-count: 2;
  }

  .form-inner-content-left {
    width: 60%;
  }

  .form-inner-content-right {
    width: 39%;
    margin-left: auto;
  }
}

@media screen and (min-width: 1400px) {
  .main-page main section {
    width: 24%;
  }
}

@media screen and (min-width: 1600px) {
  .section-header h1 {
    font-size: 1.25em;
  }
}

@media print {

  html,
  body {
    max-width: 100%;
  }

  header,
  footer,
  .breadcrumb-wrapper,
  .tabs-buttons-c,
  .menu-side-w,
  .section-header-buttons-c,
  .ico-section-header-btn,
  .form-part-title-buttons,
  .ico-sort,
  .list-paging-wrapper,
  .panel-wrapper {
    display: none !important;
  }

  main {
    padding: var(--pd-main) !important;
    max-width: 100vw !important;
  }

  .form-item.form-item-half {
    width: 50% !important;
  }

  .tab-content,
  .table-list {
    width: 100% !important;
  }

  .list-wrapper {
    overflow: visible;
    overflow-x: visible;
    width: 100%;
  }

  .print .main-w {
    display: none;
  }

  .print-c {
    width: 100%;
    z-index: -1;
    font-size: 16px;
  }

  .print-c * {
    font-size: 12pt;
  }
}