.ce_mobileDeList {
  .md-ad-box {
    margin: 0 0 20px;

    h2 {
      margin: 0;
      font-size: 1.2rem;
      font-weight: 700;
    }

    &.horizontal {
      width: 100%;
      display: flex;
      min-height: inherit;
      flex-wrap: wrap;

      .detail {
        min-height: inherit;
        width: calc(100% - 320px);
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        @media (max-width: 767px) {
          width: 100%;
        }

        header {
          margin: 0;
          padding: 0;

          .custom-list {
            min-height: inherit;
            margin-bottom: 5px;
          }

          h2 {
            min-height: inherit;
          }
        }
      }

      .features-area {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
      }

      .features-list {
        width: 70%;
        margin: 0;

        @media (max-width: 767px) {
          width: 100%;
        }

        li {
          width: auto;
          margin: 0 30px 0 0;
        }
      }

      .image {
        height: 100%;
        width: 320px;

        @media (max-width: 767px) {
          width: 100%;
          padding-bottom: 0;
        }
      }

      .price {
        overflow: hidden;
        background: none;
        padding: 0;
        width: 30%;
        text-align: right;
        color: var(--boxes-text-color);

        @media (max-width: 767px) {
          width: 100%;
          text-align: left;
          margin: 20px 0 0;
        }
      }
    }

    @media (min-width: 768px) {
      margin: 0;
      width: calc(100% / 2);
      padding: 10px;
      box-shadow: none;

      &.horizontal {
        width: 100%;
      }
    }

    @media (min-width: 980px) {
      width: calc(100% / 3);

      &.horizontal {
        width: 100%;
      }
    }

    .detail {
      color: var(--boxes-text-color);
      background: var(--boxes-background);

      @media (max-width: 767px) {
          padding-bottom: 40px;
      }

      .features-list li {
        font-size: 14px;
      }

      header {
        border: none;

        .custom-list li {
          font-size: 12px;
        }

        h2 {
          color: var(--mateColor2-text-color);
        }
      }
    }

    .price {
      background: var(--mateColor1);
      font-family: var(--font3);
      color: var(--mateColorBlack);
      font-weight: 700;
      font-style: normal;
    }
  }

  .md-filters {
    background: none;
    padding: 0;

    a {
      color: var(--primary-link-font-color);

      &:hover {
        color: var(--primary-link-hover-font-color);
      }
    }

    .checkbox-group {
      overflow: hidden;
    }

    .md-filters-body {
      border: none;
      background: var(--boxes-background);
      padding: 20px;
      margin-top: 30px;
    }

    .md-filters-header {
      button {
        margin-bottom: 10px;
      }

      .md-filter-sort {
        display: flex;

        i {
          color: var(--mateColor2-text-color);
        }
      }
    }

    .ui-widget-content {
      background: var(--mateColorGreyLight);
    }

    .ui-slider-handle:nth-of-type(1):after, .ui-slider-handle:nth-of-type(2):after {
      background: var(--mateColorGreyLight);
    }

    .range-slider .ui-widget-header {
      background: var(--mateColor1);
    }

    .select-wrapper .caret {
      top: 15px;
    }
  }

  .md-ad-box:hover {
    box-shadow: none;

    .detail header h2 {
      color: var(--mateColor3-text-color);
    }

    .md-ad-box-overlap-wrapper {
      display: none;
    }
  }

  [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: relative;
    opacity: 1;
    pointer-events: all;
    margin-right: 5px;
  }

  .md-filters .checkbox-group {
    li label {
      font-size: 16px;
    }

    ul {
      padding: 0;
    }
  }

  @media (min-width: 768px) {
    .md-ads {
      display: flex;
      flex-wrap: wrap;
      margin-left: -10px;
      margin-right: -10px;
    }
  }
}

.ce_mobileDeReader {
  [class^="icon-"]:before {
    color: var(--mateColor2-text-color);
  }

  .back {
    display: none;
  }

  .ce_form .widget:nth-of-type(1) {
    margin-top: 0;
  }

  .md-detail {
    color: var(--primary-text-color);

    .content-slider img {
      margin: 0;

      @media (max-width: 767px) {
        max-height: inherit;
      }
    }

    .detail-list li {
      border: none;
      padding: 10px;

      &:nth-child(odd) {
        background: var(--boxes-background);
      }

      &:nth-child(even) {
        background: var(--mateColorWhite);
      }

      .label {
        font-weight: 700;
      }
    }

    input.text, form textarea {
      background: var(--boxes-background);
      color: var(--boxes-text-color);
    }

    .md-detail-box {
      background: none;
      padding: 0;
    }

    .md-detail-header {
      background: none;
      padding: 0;
      margin: 20px 0 40px;

      @media (max-width: 979px) {
        margin-bottom: 70px;
      }

      h1 {
        font-family: var(--font3);
      }

      .price {
        color: var(--mateColorBlack);
        background: var(--mateColor1);
        font-size: 1.2em;
        padding: 5px 10px;

        @media (max-width: 979px) {
          border: none;
          left: 0;
          margin: 0;
          bottom: -50px;
        }
      }
    }

    .md-detail-right {
      h2 {
        color: var(--mateColorBlack);
        font-size: 1.2em;
        margin: 0 0 20px;
      }

      [class^="icon-"]:before {
        color: var(--mateColorBlack);
      }
    }

    .md-detail-left {
      padding-right: 30px;

      @media (max-width: 979px) {
        padding-right: 0;
      }

      h2 {
        background: none;
        color: var(--mateColorBlack);
        font-size: 1.2em;
        margin: 0 0 20px;
        padding: 0;
        text-transform: uppercase;
      }
    }
  }

  .slider-control {
    background: none;
    box-shadow: none;

    .slider-menu b {
      color: var(--mateColor2-text-color);

      &.active {
        color: var(--mateColor3-text-color);
      }
    }

    .slider-prev, .slider-next {
      text-indent: -999999px;

      &:hover:before {
        color: var(--mateColor3-text-color);
      }

      &:before {
        font-family: "Material Icons";
        text-indent: 0;
        position: absolute;
        font-size: 1.5rem;
        color: var(--mateColor2-text-color);
        transition: all .3s;
      }
    }

    .slider-prev:before {
      content: "\e5c4";
      left: 0;
    }

    .slider-next:before {
      content: "\e5c8";
      right: 0;
    }
  }

  .slider-control a, .slider-control .slider-menu {
    top: 0;
  }

  .slider-wrapper > div {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

#wrapper #showFilters {
  @extend .btn;
  line-height: 1;
  height: 40px;
  position: relative;
  padding-left: 40px;
  font-size: 12px;

  i {
    position: absolute;
    left: 10px;
    top: 8px;
  }
}