.visible-banner #Visualize {
  & .vizbuilder {
    height: calc(100vh - var(--nav-height) - var(--banner-height));
    & .area-sidebar {
      height: calc(100vh - var(--nav-height) - var(--banner-height));
      @media (max-width: 600px) {
        height: auto;
      }
    }
    & .area-chart {
      height: calc(100vh - var(--nav-height) - var(--banner-height));
      @media (max-width: 600px) {
        height: inherit;
      }
    }
    @media (max-width: 600px) {
      height: auto;
    }
  }
  &.visualize-intro {
    height: calc(100vh - var(--banner-height));
    @media (max-width: 600px) {
      height: auto;
    }
  }
}

#Visualize {
  & h1 {
    display: inline-block;
    font-family: "Pathway Gothic One", sans-serif;
    font-size: 47px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
    width: auto;
    &:hover {
      cursor: help;
    }
  }
  & .bp3-popover-target {
    width: 100%;
  }
  & .bp3-button {
    margin-bottom: 15px;
  }
}

.vizbuilder {
  background-color: var(--white);
  height: calc(100vh - var(--nav-height));
  margin-top: var(--nav-height);
  @media (max-width: 600px) {
    align-items: center;
    flex-direction: column;
    height: auto;
  }
  & .area-middle {
    & .toggle-sidebar {
      top: 28px;
      & .bp3-button {
        background: none;
        box-shadow: none;
        &:before {
          color: var(--red);
        }
      }
    }
    @media (max-width: 600px) {
      left: 0;
      position: fixed;
      top: 40px;
    }
  }
  & .area-sidebar {
    /* height: calc(100vh - var(--nav-height) - var(--banner-height)); */
    height: calc(100vh - var(--nav-height));
    padding-top: 0;
    position: relative;
    width: 300px;
    @media (max-width: 600px) {
      display: block;
      flex: 0;
      height: auto;
      padding: 0 25px 0;
      width: 100%;
    }
    & .sources h3 {
      display: none;
    }
    & .sources .bp3-html-select {
      margin-top: 5px;
    }
    & .sources p {
      font-size: 12px !important;
      & .source-link {
        font-weight: 700;
      }
    }
    & .sources > div > span {
      color: var(--darkgray);
      font-family: "Palanquin", sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1px;
      margin-bottom: 5px;
      text-transform: uppercase;
    }
    & .sources > div > .source-link {
      color: var(--darkgray);
      display: inline-block;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 15px;
    }
    & .bp3-checkbox {
      color: var(--red);
      cursor: pointer;
      display: block;
      font-family: "Palanquin", sans-serif;
      font-size: 12px;
      font-weight: 600;
      margin: 10px 5px 0;
      letter-spacing: 0.55px;
    }
    & .label {
      color: var(--darkgray);
      font-family: "Palanquin", sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1px;
      margin-bottom: 5px;
      text-align: left;
      text-transform: uppercase;
    }
    & .select-target-wrapper, & .select-wrapper {
      border: 1px solid #bbb !important;
      width: 100%;
      & .select-option {
        padding: 4px 9px;
      }
    }
    & .select-item {
      padding: 4px 7px 7px;
      & .select-label {
        white-space: normal;
      }
    }
    & .select-option {
      background: white;
      border-radius: 0;
      color: #949494;
      font-family: "Palanquin", sans-serif;
      font-size: 13px;
      &:hover {
        background: rgb(241, 241, 241);
      }
      & .source {
        font-size: 0.8em;
      }
    }
    & .group-level .select-popover-content input,
    & .group-level .select-popover-content .bp3-icon-search {
      display: none;
    }
    & .group-combine {
      display: none;
    }
    & .control-items {
      & .bp3-popover-content {
        max-width: 248px;
        padding: 0;
        & .select-popover-content {
          min-width: 248px;
        }
        & input {
          border-radius: 0;
        }
        & .padded {
          padding-left: 15px;
        }
      }
      & .group-item, & .filter-item {
        background-color: white;
        border: 1px solid #bbb;
        color: var(--darkgray);
        font-family: "Palanquin", sans-serif;
        font-size: 13px;
        margin: 0 0 5px;
        padding: 10px;
        & > legend {
          display: none;
        }
        &.edit {
          & .group-members {
            margin: 0 0 10px;
            & .bp3-multi-select {
              border: 0;
              border-radius: 0;
              & .bp3-input-ghost {
                font-size: 13px;
                margin-bottom: 3px;
                padding: 0 8px;
              }
              & .bp3-tag > .bp3-text-overflow-ellipsis {
                white-space: normal;
              }
            }
            & > span {
              background-color: #eee;
              border-radius: 3px;
              display: inline-block;
              font-size: 12px;
              font-weight: 800;
              margin: 5px 5px 0 0;
              padding: 2px 5px 3px;
            }
            & .select-member {
              background-color: transparent;
              border-radius: 0;
              margin: 0;
              padding: 0;
              width: 100%;
            }
          }
        }
        & .filter-name, & .filter-operator, & .filter-value {
          display: inline-block;
          font-size: 13px;
          margin-right: 0;
          margin-bottom: 3px;
          text-transform: none;
        }
        & .filter-operator {
          text-transform: lowercase;
        }
        & .filter-value {
          background-color: #eee;
          border-radius: 3px;
          display: inline-block;
          font-size: 12px;
          font-weight: 800;
          padding: 2px 5px 3px;
        }
        & .bp3-numeric-input {
          & input, & .bp3-button-group {
            border-radius: 0;
            height: 35px;
          }
          & .bp3-button-group {
            height: 35px;
            & .bp3-button {
              border-radius: 0;
              flex: 1;
              margin-bottom: 0 !important;
            }
          }
        }
        & .actions {
          margin-top: 0;
          text-align: right;
          & button {
            background: none;
            border: 1px solid var(--red);
            border-radius: 0;
            box-shadow: none;
            color: var(--red);
            font-family: "Palanquin", sans-serif;
            font-size: 13px;
            font-weight: 600;
            margin: 0 0 0 5px !important;
            &:hover {
              color: var(--red) !important;
            }
            &.bp3-intent-primary {
              background: var(--red);
              color: white;
              &:hover {
                color: white !important;
              }
            }
            &.action-reset, &.action-update {
              margin-top: 5px;
            }
          }
        }
      }
    }
    & .bp3-button.group-add, & .bp3-button.filter-add, & .bp3-button.action-reset, & .filter-manager > .bp3-button, & .bp3-icon-shopping-cart, & .bp3-icon-series-derived {
      background: none;
      border: 1px solid var(--red);
      border-radius: 0;
      box-shadow: none;
      color: var(--red) !important;
      font-family: "Palanquin", sans-serif;
      font-size: 13px;
      font-weight: 600;
      text-align: center;
      transition: background 0.1s, color 0.1s;
      &.bp3-disabled {
        display: none;
      }
      & .bp3-icon, &:before {
        color: var(--red);
        font-size: 13px;
        transition: color 0.1s;
      }
      &:hover {
        background: var(--red);
        box-shadow: none;
        color: white !important;
        & .bp3-icon, &:before {
          color: white;
        }
      }
    }
    & .control:last-child {
      margin-bottom: 0;
    }
    & .ranking {
      & ol {
        font-family: "Palanquin", sans-serif;
        font-weight: 300;
        line-height: 16px;
        margin-bottom: 20px;
        margin-top: 0;
        padding-left: 30px;
        width: 100%;
        & .ranking-item {
          font-size: 12px;
          padding: 2px 5px;
          & .item-label {

          }
          & .item-value {
            font-weight: 500;
          }
        }
      }
    }
  }
  & .area-chart {
    flex: 1 0;
    height: calc(100vh - var(--nav-height));
    padding: 25px;
    @media (max-width: 600px) {
      display: block;
      flex: none;
      height: inherit;
      overflow: visible;
      width: 100%;
    }
    & .wrapper {
      padding: 0;
      @media (max-width: 600px) {
        display: block;
        flex: none;
        height: inherit;
        overflow: visible;
      }
      &.single .chart-card .wrapper {
        padding-top: 30px;
      }
      & .chart-card {
        min-width: 400px;
        @media (max-width: 768px) {
          flex: 0;
          min-width: 100%;
        }
        & .wrapper {
          background: white;
          border: 1px solid #bbb;
          box-sizing: border-box;
          min-height: 400px;
          padding: 5px;
          position: relative;
          & .chart-toolbar {
            margin: 0;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 2;
            & button {
              background: white;
              padding: 0 5px;
              &:before {
                font-size: 14px;
                margin: 0;
              }
              & .bp3-button-text {
                display: none;
              }
              &:hover:before {
                color: var(--red);
              }
            }
          }
        }
      }
    }
    & .error-message {
      & a[role="button"], & .bp3-heading ~ div {
        display: none;
      }
    }
  }
}

.visualize-intro {
  align-items: flex-start;
  background-color: var(--white);
  display: flex;
  height: 100vh;
  justify-content: center;
  padding: 0;
  width: 100%;
  @media (max-width: 900px) {
    align-items: center;
    flex-direction: column;
    height: auto;
  }
  & .text {
    margin: 0 35px;
    max-width: 350px;
    padding-top: calc(var(--nav-height) + 35px);
    width: calc(100% - 70px);
    & .video {
      height: 197px;
      max-width: 350px;
      width: 100%;
    }
    & p {
      margin: 10px 0;
      width: 100%;
    }
    & .bp3-button {
      background: var(--red);
      border: 1px solid var(--red);
      border-radius: 0;
      box-shadow: none;
      color: white;
      font-size: 13px;
      font-weight: 600;
      text-align: center;
      &:before {
        color: white;
        font-size: 13px;
      }
      &:hover {
        background: var(--red);
        border: 1px solid var(--red);
        box-shadow: none;
      }
    }
  }
  & .examples {
    flex: 1;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: calc(var(--nav-height) + 35px) 35px 35px 0;
    @media (max-width: 900px) {
      flex: none;
      height: auto;
      overflow: none;
      padding: 35px 0 0;
      width: 100%;
    }
    & .carousel {
      margin-bottom: 25px;

      & h2 {
        font-size: 24px;
        margin-bottom: 0;
        padding-left: calc(25px + 1rem);
        @media (max-width: 400px) {
          font-size: 20px;
        }
        & svg {
          height: 25px;
          margin-right: 5px;
          margin-top: -2px;
          vertical-align: top;
          width: 25px;
          & *[stroke="#FFFFFF"] {
            stroke: var(--black);
          }
          & *[fill="#FFFFFF"] {
            fill: var(--black);
          }
        }
      }

      /* slide layout */
      & .slick-list {
        /* offset item spacing */
        margin: 0 0 0 25px;
        width: calc(100% - 50px);

        /* space out items */
        & .slick-slide {
          margin: 1rem;
        }

        /* equally sized cards (width & height) */
        & .slick-track {
          display: flex;

          & > * {
            display: flex;
            flex: 1 1 25%;
            margin: 0 1rem;

            & > * {
              display: flex;
              width: 100%;

              & > * {
                width: 100%;
              }
            }
          }
        }
      }

      /* controls */
      & .slick-arrow {
        opacity: 0.5;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        transition: opacity 0.1s ease-out;
        width: 25px;
        z-index: 1;

        /* theming */
        & .slick-arrow-button {
          border: 0;
          background: none;
          padding: 0;
          width: 25px;

          &:focus {
            outline: none;
          }
          & .bp3-icon-standard {
            font-size: 20px;
          }
        }

        /* left / right arrow positioning */
        &.slick-prev {
          left: 0.5rem; /* half width */
        }
        &.slick-next {
          right: 0.5rem; /* half width */
        }

        /* interactions */
        &:hover {
          opacity: 1;
        }

        /* hidden state (on first or last slide) */
        &.slick-disabled {
          opacity: 0;
        }
      }

      /* vendor styles */
      & .slick-loading .slick-slide,
      & .slick-loading .slick-track {
        visibility: hidden;
      }

      & .slick-slider {
        position: relative;
        user-select: none;
        touch-action: pan-y;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
      }

      & .slick-list {
        overflow: hidden;
        /* cursor: ew-resize; */

        &.dragging {
          cursor: pointer;
          cursor: hand;
        }
      }

      & .slick-track:after,
      & .slick-track:before {
        display: table;
        content: '';
      }

      & .slick-track:after {
        clear: both;
      }

      & .slick-slide {
        display: none;
        float: left;
      }
    }
  }
  & .advanced {
    margin: 10px 0;
    opacity: 0.5;
    &:hover {
      cursor: pointer;
      opacity: 1;
      text-decoration: underline;
    }
  }
}


.hierarchy-list-header {
  & .hierarchy-list-header-tokens {
    margin-left: 0;
    & .hierarchy-list-token  {
      color: var(--black);
      font-size: 14px;
      font-weight: 800;
      padding: 7px 7px 0;
      &.level-1 {
        color: rgb(72, 72, 72);
        font-size: 12px;
        font-style: italic;
        padding: 0 7px 7px;
      }
      &:last-child {
        padding-bottom: 7px;
      }
    }
  }
  & .bp3-button {
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--red);
    opacity: 0.75;
    outline: 0;
    & .bp3-icon {
      color: var(--red);
      font-size: 14px;
    }
    &:hover {
      opacity: 1;
    }
  }
}
& .catlist-content {
  & li {
    list-style: none;
    padding: 0;
    & .bp3-menu-item  {
      font-size: 12px;
      & .bp3-tag {
        font-size: 10px;
        font-weight: 700;
        margin: 1px 2px 1px 0;
        opacity: 0.5;
        padding: 0px 3px 1px;
      }
      &.bp3-active {
        background-color: var(--red);
        & .bp3-tag {
          opacity: 1;
        }
      }
    }
  }
}

.virlist-wrapper {
  margin-top: 5px;
}

.virlist-wrapper .measure-select {
  margin: 0;
  & .measure-label {
    margin: 0;
    & .topic {
       color: var(--black);
       font-size: 14px;
       font-weight: 800;
       padding: 7px 6px 0;
    }
    & .subtopic {
       color: rgb(72, 72, 72);
       font-size: 12px;
       font-style: italic;
       padding: 0 6px 7px;
    }
  }
  & ~ li {
    border: none !important;
    list-style: none;
    padding: 0;
    & .bp3-menu-item  {
      font-size: 12px;
      & .bp3-tag {
        font-size: 10px;
        font-weight: 700;
        margin: 1px 2px 1px 0;
        opacity: 0.5;
        padding: 0px 3px 1px;
      }
      &.bp3-active {
        background-color: var(--red);
        & .bp3-tag {
          opacity: 1;
        }
      }
    }
  }
}

.bp3-popover-content {
  & .bp3-menu {
    margin-top: 5px;
    max-height: 200px;
    padding-top: 0 !important;
    width: 259px;
    & li {
      list-style: none;
      padding: 0;
      &.bp3-menu-header {
        border-top: 0;
        margin: 0;
        padding: 5px;
        & .bp3-heading {
          padding: 0;
        }
      }
      & .bp3-menu-item  {
        font-size: 12px;
        & .bp3-tag {
          font-size: 10px;
          font-weight: 700;
          margin: 1px 2px 1px 0;
          opacity: 0.5;
          padding: 0px 3px 1px;
        }
        &.bp3-active {
          background-color: var(--red);
          & .bp3-tag {
            opacity: 1;
          }
        }
      }
    }
  }
}
