:root {
  --table-border: 1px dashed #d8d8d815;
  --table-background: transparent;
  --table-background-selceted: #1a1a1a81;
  --table-background-selceted2: #d4d4d4;
  --table-background-selceted-light: #ffffff;
  --table-background-selceted-dark: #ff0000;
  --table-background-header: #33333311;
  --table-font-color: #4b4b4b;
  --table-font-color2: #383838;
  --table-font-color3: #ffffff;
  --table-font-color4: #d8d8d8ab;
  --table-font-color5: #d31b1b;
  --table-border-bottom-color-hover: #d31b1b;
  --table-border-bottom-color: #303030;
  --table-font-color5b: #ececec;
}

.table-container {
  display: flex;
  flex-flow: column nowrap;
  background-color: var(--table-background);
  width: 100%;
  margin: 0 auto;
  border-bottom: var(--table-border);
  border-radius: 0px;
  border-top: 1px solid var(--background-color);
}

.table-row {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  cursor: pointer;
  border-top: 0px solid var(--background-color);
  border-bottom: 1px dashed var(--table-border-bottom-color);
  padding: 10px;
  border-radius: 0px;
  background-color: var(--table-background);
  transition: all 200ms ease-in-out;
}

.table-row:hover,
.table-row-progress:hover,
.table-row-prospect:hover,
.table-row-hold:hover,
.table-row:hover .row-item3,
.table-row:hover .row-item2 {
  background-color: var(--table-background-selceted);
  border: 0px;
  border-bottom: 1px solid var(--table-border-bottom-color-hover);
  color: var(--table-font-color5b);
  text-shadow: none;

  background-size: 400% 400%;
  transition: all 200ms ease-in-out;
}

.table-row2 {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  border: 0px solid var(--background-color);
  border-bottom: var(--table-border);
  padding: 10px;
  border-radius: 0px;
  background-color: var(--table-background);
  border-bottom: 1px dashed #1b1b1b;
  transition: all 200ms ease-in-out;
}

.table-row2:hover {
  border-bottom: 1px dashed var(--table-border-bottom-color-hover);
  transition: all 0ms ease-in-out;
  text-shadow: none;
  color: var(--table-font-color5);
  border-radius: 0px;
}

.tabl .table-row-off {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  cursor: auto;
  border: 0px solid var(--background-color);
  border-bottom: var(--table-border);
  padding: 10px;
  border-radius: 0px;
  color: #3c3d4ece;
  background-color: var(--table-background);
}

.table-row-toggle {
  background-color: var(--table-background);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.08);
  transition: all 200ms ease-in-out;
}
.table-row .row-item2 {
  color: var(--table-font-color2);
}
.table-row .row-item3 {
  color: var(--table-font-color3);
}

.row-item {
  display: flex;
  flex: 1;
  font-size: var(--body-normal-font-size);
  transition: all 0ms ease-in-out;
  border-radius: 0px;
}
.row-item:hover {
  background-color: transparent;
  transition: all 0ms ease-in-out;
}

.row-item2 {
  display: flex;
  flex: 1;
  font-size: var(--body-normal-font-size);
  text-wrap: nowrap;
  transition: all 200ms ease-in-out;
  border-radius: 0px;
}
.row-item2:hover {
  background-color: transparent;
  transition: all 0ms ease-in-out;
}

.row-item3 {
  display: flex;
  flex: 1;
  font-size: var(--body-normal-font-size);
  text-wrap: nowrap;
  transition: all 200ms ease-in-out;
  border-radius: 0px;
}
.row-item3:hover {
  background-color: transparent;
  transition: all 0ms ease-in-out;
}

.table-row:last-child,
.table-row-prograss:last-child,
.table-row-hold:last-child,
.table-row-prospect:last-child,
.row-sub-container .row-item:last-child {
  border-bottom: 1;
}
.row-item .svg-icon {
  height: 20px;
  width: 20px;
}

.table-row .svg-icon path {
  fill: var(--svg-row-icon) !important;
}

.table-row:hover .svg-icon path {
  fill: var(--svg-row-icon-hover) !important;
}

.table-row.heading {
  background-color: var(--table-background-header);
  color: var(--table-font-color);
  border: 0px solid var(--background-color);
  border-radius: 5px;
}

.table-row.heading:hover {
  background-color: var(--table-background-header);
  transition: all 0ms ease-in-out;
  cursor: auto;
  animation: none;
}
