@mixin dt-dark {
  .dt {
    & .header {
      & .title {
        color: darken($md-dark-text-primary, 30%) !important;
      }

      background-color: transparent !important;

      & .filter {
        @include interaction-dark-surface;
      }

      & .more {
        @include interaction-dark-surface;
      }

      & .searchDiv {
        & .searchInput {
          &::placeholder {
            color: $md-dark-text-primary;
            opacity: 0.75 !important;
          }
        }

        & .icon {
          & svg {
            fill: $md-dark-text-primary;
            opacity: 0.75 !important;
          }
        }
      }
    }

    & .filterCont {
      & .row {
        background-color: $md-dark-surface;
        @include interaction-dark-surface;

        & .c50 {
          & .textfield {
            background-color: $md-dark-surface;
            @include interaction-dark-surface;

            & .elem {
              background-color: $md-dark-surface;
              @include interaction-dark-surface;

              &::placeholder {
                color: $md-dark-text-primary;
              }
            }

            & .trailing {
              & svg {
                fill: $md-dark-text-primary;
              }
            }
          }
        }
      }
    }

    & table {
      background-color: $md-dark-background;

      & thead {
        & tr {
          opacity: 1 !important;
          background-color: $md-dark-background;

          & th {
            opacity: 1 !important;
            background-color: $md-dark-background;
            color: $md-dark-text-primary;
            @include interaction-dark-surface;

            & label {
              opacity: 0.5 !important;
              color: $md-dark-text-primary;
            }

            & span {
              opacity: 0.5 !important;
              color: $md-dark-text-primary;
            }

            &::before {
              filter: invert(1);
            }
          }
        }
      }

      & tbody {
        & tr {
          background-color: $md-dark-surface;

          & td {
            @include interaction-dark-surface;

            & .checkAll:checked {
              background-color: $md-dark-surface;
              border-color: $md-dark-text-primary;
            }

            & label {
              color: $md-dark-text-primary;
            }

            & span {
              color: $md-dark-text-primary;
              opacity: 0.5 !important;
            }
          }

          & .tdWithBehavior {
            & span {
              color: $md-dark-text-primary;
              opacity: 1 !important;
            }
          }
        }

        & .highlightTr {
          background-color: $md-dark-secondary !important;

          & td {
            @include interaction-dark-secondary;

            & .checkAll:checked {
              background-color: $md-dark-secondary !important;
            }
          }
        }
      }
    }

    & .footer {
      @include interaction-dark-surface;

      & label {
        color: $md-dark-text-primary;
        @include interaction-dark-primary-text;
      }
    }

    &>table {
      & tr {
        opacity: 1 !important;
      }
    }
  }

  .dt-simple-fullcont {
    background-color: $md-dark-surface;

    table {

      &>thead {
        text-align: left;
        background-color: $md-dark-surface;

        &>tr {
          &>th {
            color: #fff;
            opacity: .5;
          }
        }
      }

      &>tbody {

        &>tr {
          background-color: $md-dark-surface;

          &>td {

            &>.cell-data {

              &>.value-text {
                color: #fff;
                opacity: .5;
              }
            }
          }

          &>.titleOnBody {
            color: #fff;
            opacity: .5;
          }
        }

        &>.group-row {

          &>td {
            color: #fff;
            opacity: .5;
          }
        }
      }
    }
  }
}