:root {
  --table-border: 0px dashed #75a9d315;
  --table-background: transparent;
  --table-background-selceted: #1b202952;
  --table-background-selceted2: #f0e4e4;
  --table-background-selceted-light: #ffffff;
  --table-background-selceted-dark: #00e1ff;
  --table-background-header: #0f1014;
  --table-font-color: #8792a5;
  --table-font-color2: #444a55;
  --table-font-color3: #ffffff;
  --table-font-color4: #b0c5d3;
  --table-font-color5: #1ba8d3;
  --table-border-bottom-color-hover: #75a9d315;
  --table-border-bottom-color: #75a9d315;
  --table-font-color5b: #9ab8d6;
}

.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: 0px dashed var(--table-border-bottom-color);
  padding: 10px;
  border-radius: 10px;
  background-color: var(--table-background);
  transition: all 0ms ease-in-out;
  margin-bottom: 5px;
}

.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: 0px solid var(--table-border-bottom-color-hover);
  color: var(--table-font-color5b);
  text-shadow: none;

  background-size: 400% 400%;
  transition: all 0ms 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: 10px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  align-items: center;
}
.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: 10px;
  text-transform: uppercase;
}

.table-row.heading:hover {
  background-color: var(--table-background-header);
  transition: all 0ms ease-in-out;
  cursor: auto;
  animation: none;
}