.custom-table {
  display: block;
  width: 100%;
  overflow-x: auto;

  //custom-table__th-wrapper
  &__th-wrapper {
    display: flex;
    cursor: pointer;
    word-break: inherit;
    align-items: flex-end;

    span {
      word-break: inherit;
    }
  }

  //custom-table-unread
  &-unread {
    td {
      &:nth-child(1) {
        position: relative;

        &::before {
          content: "";
          position: absolute;
          width: 2px;
          height: 100%;
          left: 0;
          top: 0;
          background: var(--Main2);
        }
      }
    }
  }

  //custom-table-striped
  &-striped {
    tbody {
      tr {
        &:nth-child(even) {
          background-color: var(--Disabled)!important;
        }
      }
    }
  }

  //custom-table__filter
  &__filter {
    position: relative;
    cursor: pointer;

    //custom-table__filter-wrapper
    &-wrapper {
      background: #ffffff;
      box-shadow: 0px 4px 10px rgba(58, 58, 58, 0.25);
      border-radius: 4px;
      position: absolute;
      opacity: 0;
      visibility: hidden;
      z-index: 99;
      top: 100%;
      right: 0;
      padding: 8px;
      width: 215px;
    }

    &.open {
      .custom-table__filter-wrapper {
        opacity: 1;
        visibility: visible;
      }
    }

    &.active {
      svg {
        path {
          stroke: #3a3a3a;
          fill: var(--Main1);
        }
      }
    }
  }

  //custom-table-disabled
  &-disabled {
    &:not(td:nth-child(1)) {
      color: var(--Secondary);
    }
  }

  table {
    width: 100%;
    text-align: left;
    background-color: transparent;
    border-spacing: 0;

    thead {
      background: var(--Disabled);

      .sort-asc {
				.custom-table__sort {        
          path {
            &:nth-child(2){
              fill: var(--Main2);
            }
          }
        }
			}
	
			.sort-desc {
        .custom-table__sort {        
          path {
            &:nth-child(1){
              fill: var(--Main2);
            }
          }
        }
			}
    }

    td {
      padding: 8px;
      max-width: 340px;
			vertical-align: top;
      
        a{
          color: initial;
        }
    }

    th {
      padding: 8px;
			vertical-align: bottom;
      word-break: inherit;
      font-weight: bold;

      svg {
        margin-left: 8px;
        cursor: pointer;
      }
    }
  }

  &.table-fixed{
    table {
      table-layout: fixed;
      word-wrap: break-word;
    }
  }
}