table {
  width: 100%;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

table tbody .row {
  background: var(--ego-row-odd);
  border-radius: 24px;
}

table tbody .row:nth-child(even) {
  background: var(--ego-row-even);
}

table tbody .row.sl>.main {
  background: var(--ego-row-selected) !important;
}

table .row>.main,
table .row>.details>.sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-radius: 24px;

  padding: 5px 8px;
  margin: 8px 0;
  color: white;
  gap: 4px;
}

table .row .main {
  background: var(--ego-row-odd);
  transition: background-color 0.25s ease, border-radius .2s ease;
}

table .row .main:hover {
  border-radius: 14px;
}

table tbody .row:nth-child(even) .main {
  background: var(--ego-row-even);
}

table tbody .row.deleted {
  opacity: 0.85;
  background: #7a0e0e;
}

table tbody .row.deleted .main {
  background: #7a0e0e;
}

table tbody .row.disabled {
  opacity: 0.6;
}

table tbody .row.disabled .main {
  background: #27292ebb;
}

table tbody .row .main:hover,
table tbody .row:nth-child(even) .main:hover {
  background: var(--ego-row-hov);
}

table tbody .row.deleted .main:hover {
  background: #8e1919;
}

table tbody .row.disabled .main:hover {
  background: #464a53bb;
}

table thead {
  position: sticky;
  top: 0;
  background: var(--ego-bg-1);
  z-index: 2;
}

table thead .row>div.main {
  outline: solid 2px var(--ego-bg-1);
  background: var(--ego-row-head);
  margin-bottom: 0;
}

table .row .main>div {
  position: relative;
}

table .row div.sortable.sort {
  border-top-right-radius: 17px;
  background: #ffffff22;
}


table thead .sort-bubble {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 9px;
  font-size: 9pt;
  background: var(--ego-interactable);
  color: var(--ego-interactable-content);
  transition: border-radius 0.2s ease;
  text-align: center;
}

table .row div.sortable:hover>.sort-bubble {
  border-radius: 4px;
}


table .row .details>div.sub {
  background: var(--ego-row-sub);
}

table .row>.main>div,
table .row>.details>.sub>div {
  min-height: 32px;
  padding: 8px 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

table .row div.deadline-red {
  background: rgba(231, 14, 14, 0.352);
}

table .row div.deadline-yellow {
  background: rgba(240, 240, 11, 0.342);
}

table .row div.cant {
  background: var(--ego-c-bg);
  padding-left: 8px;
}

table .row div.cant>i {
  min-width: 32px;
  display: inline-block;
  text-align: center;
}

table .row div.cant-w {
  color: var(--ego-c-b);
}

table .row div.cant-d {
  color: var(--ego-c-r);
  background: var(--ego-c-r-bg);
}

table .row div.editable,
table .row div.sortable,
table .row div.cant {
  border-radius: 32px;
  transition: border-radius 0.2s ease, background-color 0.2s ease;
}

table .row div.editable:hover,
table .row div.sortable:hover {
  background: #ffffff33;
  border-radius: 8px;
}

table .row .main span.empty,
table .row .sub span.empty {
  color: #ccc6;
}

.search>.search-bar {
  position: relative;
}

.search>.search-bar>input {
  padding-left: 36px;
  padding-right: 36px;
}

.search>.search-bar>button {
  position: absolute;
  height: 100%;
  right: 0;
  top: 0;
  margin: 0;
  width: 32px;
}

.search>.search-bar>.icon {
  position: absolute;
  color: var(--ego-interactable-content);
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  width: 32px;
  padding: 8px;
}

.search>.filters {
  display: none;
}

.search>.filters>.columns {
  display: flex;
  gap: 5px;
}

.search>.filters>.columns {
  border-radius: 8px;
  gap: 5px;
}

tbody .id,
tbody .cf,
tbody .mono {
  font-family: "Ubuntu-Mono", "Lucida Console", "Courier New", monospace;
  font-size: 13pt;
}

tbody .cf {
  letter-spacing: 2px;
}

@media only screen and (min-width: 768px) {

  table .row .main,
  table .row .sub {
    flex-wrap: nowrap !important;
  }
}

table button {
  display: inline-block;
  width: unset;
  min-width: 32px;
  border-radius: 4px;
  padding: 5px 8px;
  margin: 0 2px;
}

table .ruoli button {
  width: 0;
  flex-grow: 1;
  margin: 0;
}
table .ruoli button.active {
 background: var(--interact-action);
 color: var(--interact-action-content);
}

table .row .main>div.w-f,
table .row .details .sub>div.w-f {
  flex: 1 1 0;
  min-width: unset;
  max-width: unset;
  text-overflow: unset;
}

table .row .main>div,
table .row .details .sub>div {
  flex: 3 3 96px;
  min-width: 96px;
  min-width: 512px;
}

table .row .main>div.w-xxs,
table .row .details .sub>div.w-xxs {
  flex: 1 1 32px;
  min-width: 32px;
  max-width: 48px;
  text-align: center;
  text-overflow: unset;
}

table .row .main>div.w-xs,
table .row .details .sub>div.w-xs {
  flex: 1 1 40px;
  min-width: 40px;
  max-width: 68px;
  text-align: center;
  text-overflow: unset;
}

table .row .main>div.w-s,
table .row .details .sub>div.w-s {
  flex: 2 2 64px;
  min-width: 64px;
  max-width: 120px;
}

table .row .main>div.w-m,
table .row .details .sub>div.w-m {
  flex: 3 3 96px;
  min-width: 96px;
  max-width: 192px;
}

table .row .main>div.w-l,
table .row .details .sub>div.w-l {
  flex: 4 4 96px;
  min-width: 128px;
  max-width: 256px;
}

table .row .main>div.w-xl,
table .row .details .sub>div.w-xl {
  flex: 5 5 96px;
  min-width: 192px;
  max-width: 320px;
}

/* codice fiscale */
table .row .main>div.t-cf,
table .row .details .sub>div.t-cf {
  flex: unset;
  width: 192px;
  min-width: 192px;
  max-width: 192px;
}

/* data */
table .row .main>div.t-dt,
table .row .details .sub>div.t-dt {
  flex: unset;
  width: 128px;
  min-width: 100px;
  max-width: 128px;
  text-align: center;
}

/* Targa */
table .row .main>div.t-trg,
table .row .details .sub>div.t-trg {
  flex: unset;
  width: 102px;
  min-width: 96px;
  max-width: 128px;
  text-align: center;
}

/*
table tbody .row .t-trg {
  border-radius: 6px;
  color: rgb(21, 21, 21);
  background: rgb(239, 239, 239);
  border: solid 12px rgb(43, 69, 237);
  border-bottom: 0;
  border-top: 0;
}
table tbody .row .t-trg:hover {
  border-radius: 12px;
  background: white;
  color: black;
}*/
table .status {
  width: 28px;
  height: 28px;
  background: black;
  border-radius: 16px;
  margin: -4px auto;
}

table .status.st-0 {
  background: #1e21273c;
}

table .status.st-1 {
  background: #6a88ac;
}

table .status.st-2 {
  background: #d10606;
  background: linear-gradient(-15deg, #e41e1e, #fa2828);
}

table .status.st-3 {
  background: rgb(240, 240, 13);
}

table .status.st-4 {
  background: #05df5c;
  background: linear-gradient(-15deg, #05df5c, #10e967);
}

table .status.st-5 {
  background: #087ef4;
}

@media screen and (max-width: 768px) {
  .no-mobile {
    display: none;
  }
}

table>thead>.row .main>.ext,
table>tbody>.row .main>.ext,
table>tbody>.row .details>.sub>.ext {
  display: block;
  flex: unset;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  margin: 0;
  margin-left: 4px;
  text-align: center;
}

table>thead>.row .main>.option,
table>tbody>.row .main>button,
table>tbody>.row .details>.sub>.option {
  display: block;
  flex: unset;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  margin: 0;
  margin-right: 4px;
  text-align: center;
}

table>tbody>.row .main>button {
  border-radius: 16px;
  height: 28px;
}

#options {
  position: absolute;
  min-height: 50px;
  min-width: 160px;
  padding: 4px;
  background: #eee;
  z-index: 100;
  border-radius: 8px;
  box-shadow: 2px 4px 4px #1114;
}

#options i {
  display: inline-block;
  width: 32px;
  text-align: center;
}

#options>div {
  padding: 8px 4px;
  border-bottom: solid 1px #bbb;
  color: #1c1c1c;
}

#options>div:last-child {
  border-bottom: none;
}

#options>div:hover {
  background: rgb(255, 255, 255);
  border-radius: 4px;
  color: #27272d;
  border-color: #141416;
}

#options-close {
  z-index: 10;
  background: var(--ego-focus-bg);
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
}

table .row .money>span {
  font-size: 11pt;
}