.sidebar-toggle {
  display: none;
  border: 1px solid #ddd;
  padding: .75rem;
  border-radius: .5rem;
  margin-bottom: 1rem;

  @media (max-width: 767px) {
    display: block;
  }

}


.wptv-sidebar {
  border-radius: 4px;
  border: 1px solid #ddd;
  @media (max-width: 767px) {
    display: none;
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 4.75rem;
  }

  .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    background: #eee;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    overflow: hidden;

    .filter {
      form {
        display: none;
      }

      .dashicons {
        position: relative;
        top: 2px;
        margin-left: 10px;
        cursor: pointer;

        &:hover {
          color: #f6931f;
        }
      }
    }

    &.search {
      .title {
        display: none;
      }

      .filter {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100%;
        overflow: hidden;

        form {
          display: block;
          margin-bottom: 0;
          width: 100%;

          input {
            background: #fff;
            padding: .3rem;
            @media (max-width: 767px) {
              width: 100%;
            }
          }
        }

        &-toggle {
          display: none;
        }

        .dashicons {
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          right: 0;
          padding: 0;
          margin: 0;
          background: #555;
          height: 100%;
          top: 0;
          width: 2rem;
          color: #fff;
          cursor: pointer;

          &:hover {
            color: #f6931f;
          }

          @media (max-width: 767px) {
            width: 4rem;
          }
        }
      }
    }

  }

  .sidebar-listing {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    padding-left: 0;
    margin: 0;
    justify-content: flex-start;
    height: 120vh;
    min-height: 72vh;
    overflow-y: scroll;
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;

    & > li {
      display: flex;
      flex-flow: column;
      align-items: flex-start;
      margin: 0;
      justify-content: flex-start;
      width: 100%;
      line-height: 1;
      padding: 10px 15px;

      &:first-child {
        border-radius: 0;
      }

      &:hover {
        background: rgba(#eee, .4);
        box-shadow: inset -8px -8px 6px -10px #555;
      }

      & > a {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        font-size: 16px;
        text-decoration: none;

        img {
          margin-right: 8px;
        }
      }

      &.active {
        background: rgba(#eee, .4);
        box-shadow: inset -8px -8px 6px -10px #555;
      }

    }
  }

  &.fixed {
    position: fixed;
    top: 25px;
  }

  &.shortcode {
    width: 100%;
    position: relative;
    top: inherit;
  }

}