body.embed {
  background-color: transparent;
}

body.visualize {
  @include font-smoothing(antialiased);

  // #content > section {
  //   @media all and (max-width: 768px) {
  //     @include flex-direction(column-reverse !important);
  //   }
  // }

  #content > section {
    position: relative;
  }

  nav {
    padding-bottom: 0px;

    @media all and (max-width: 768px) {
      padding-bottom: 5px;
    }
  }

  #container {
    margin-top: $header;

    @media all and (max-width: 768px) {
      margin-top: $header - 10;
      padding-top: 15px;
    }
  }

  #explorer.small ~ #main_viz {
    @include margin(0, 20px, 0, 5px, !important);

    @media all and (max-width: 768px) {
      @include margin(0, 0, 0, 0, !important);
    }
  }

  #content #main_viz {

    //@include margin(0, 20px, 0, -15px, !important);
    @include margin(0, 20px, 0, -5px, !important);

    @media all and (max-width: 768px) {
      @include margin(0, 0, 0, 0, !important);
    }

    .nav-section {
      @include flex();
      @include flex-direction(row);
      @include justify(space-between);
      @include align-items(baseline);
      @include padding(10px, 0, 10px, 0);
      @include margin(0, 0, 0, 0, !important);

      @media all and (max-width: 768px) {
        @include padding(0, 0, 10px, 0);
      }

      aside {
        @include flex(1 auto);
        width: auto !important;
        @include margin(0, 0, 0, 0);

        a {
          color: $lightlinkcolor;

          i {
            margin-top: 3px;
          }

          h2.year-nav {
            @include transition(opacity 0.5s);
            font-weight: 400;
            font-size: 26px;
            opacity: 0.6;
            @include padding(0, 10px, 0, 10px);

            &:hover {
              opacity: 1;
            }

            @media all and (min-width: 860px) and (max-width: 960px) {
              font-size: 22px;
            }

            @media all and (min-width: 501px) and (max-width: 859px) {
              font-size: 18px;
            }

            @media all and (max-width: 768px) {
              @include padding(0, 5px, 0, 5px);
            }

            @media all and (max-width: 500px) {
              font-size: 16px;
            }
          }
        }
      }

      content {
        @include margin(0, 0, 0, 0);

        h1 {
          @include text-align(center);

          @media all and (min-width: 920px) and (max-width: 1090px) {
            font-size: 30px;
          }
          @media all and (min-width: 860px) and (max-width: 919px) {
            font-size: 26px;
          }
          @media all and (min-width: 501px) and (max-width: 859px) {
            font-size: 22px;
          }
          @media all and (max-width: 500px) {
            font-size: 18px;
          }
        }
      }
    }
  }

  #explorer.small ~ #visualize_share {
    @include left(49%);
  }

  #visualize_share {
    @include transition(left 0.5s, right 0.5s);
    @include flex();
    @include flex-direction(row);
    position: fixed;
    //@include right(13px);
    top: $header - 20;
    @include left(60%);
    z-index: 19;

    @media all and (max-width: 768px) {
      display: none;
    }

    a {
      color: $brightlinkcolor;
      cursor: pointer;
      font-size: 15px;
      @include padding(15px, 8px, 15px, 8px);
      @include margin(0px, 0px, 0px, 0px);
      text-align: center;

      i {
        @include transition(opacity 0.1s);
        opacity: 0.7;
      }

      &:hover {
        i {
          opacity: 1;
        }
      }
    }
  }

  #collapse-container {
    position: relative;
    top: 30px;

    @media all and (max-width: 768px) {
      @include flex();
      @include justify(flex-start);
      @include flex-direction(row-reverse);
      top: -10px;
      @include right(20px);
    }
  }

  #collapse {
    @include transition(opacity 0.1s);
    color: white;
    font-size: 12px;
    opacity: 0.7;
    top: 0;
    @include left(0px);
    z-index: 18;
    height: 100%;
    width: 30px;

    @media all and (min-width: 769px) {
      position: absolute;
    }

    &:hover {
      cursor: pointer;
      opacity: 1;
    }

    .viz_menu {
      @include transition(background-position 0.5s, opacity 2s);
      opacity: 0;
    }

    i {
      color: $lightlinkcolor;
      @include transition(left 0.5s, right 0.5s);
      font-size: 16px;
      position: absolute;
    }

    .fa-toggle-on {
      @include left(250px);

      ~ .viz_menu {
        @include ltr {
          background-position: left -10px top 128px,
                               left -10px top 160px,
                               left -10px top 192px,
                               left -10px top 224px,
                               left -10px top 256px,
                               left -10px top 288px,
                               left -10px top 320px;
        }
        @include rtl {
          background-position: right -10px top 128px,
                               right -10px top 160px,
                               right -10px top 192px,
                               right -10px top 224px,
                               right -10px top 256px,
                               right -10px top 288px,
                               right -10px top 320px;
        }
      }
    }

    .fa-toggle-off {
      @include left(0px);
      @include padding(0, 6px, 6px, 6px);
      background-color: $darkbackground;

      ~ .viz_menu {
        background-image: url('/static/img/icons/app/app_tree_map.png'),
                          url('/static/img/icons/app/app_stacked.png'),
                          url('/static/img/icons/app/app_network.png'),
                          url('/static/img/icons/app/app_rings.png'),
                          url('/static/img/icons/app/app_geo_map.png'),
                          url('/static/img/icons/app/app_line.png'),
                          url('/static/img/icons/app/app_scatter.png');
        background-attachment: fixed;
        background-repeat: no-repeat;

        @include ltr {
          background-position: left 8px top 128px,
                               left 8px top 160px,
                               left 8px top 192px,
                               left 8px top 224px,
                               left 8px top 256px,
                               left 8px top 288px,
                               left 8px top 320px;
        }
        @include rtl {
          background-position: right 8px top 128px,
                               right 8px top 160px,
                               right 8px top 192px,
                               right 8px top 224px,
                               right 8px top 256px,
                               right 8px top 288px,
                               right 8px top 320px;
        }

        background-size: 15px 15px;
        opacity: 1;
        width: 30px;
        height: 100%;
      }
    }

    @media all and (max-width: 768px) {
      top: 0;
      height: 20px;
      @include left(0px);

      i {
        @include left(0 !important);
        background-color: transparent !important;

        @include ltr {
          @include transform(rotate(90deg));
          @include padding(0px, 15px, 17px, 0, !important);
        }
        @include rtl {
          @include transform(rotate(270deg) scaleX(-1));
          @include padding(0px, 0px, 17px, 15px, !important);

        }
      }

      .viz_menu {
        display: none;
      }
    }
  }

  #collapse-text-container {
    @include (opacity 0.1s);
    @include left(13px);
    cursor: pointer;
    top: 0;
    height: 17px;
    opacity: 0.7;
    overflow: hidden;

    &:hover {
      opacity: 1;
    }

    .collapse-text {
      @include transition(top 0.25s ease-in-out);
      color: $medbordercolor;
      display: block;
      font-size: 13px;
      @include text-align(right);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 400;
      position: relative;
      top: -17px;
    }

    @media all and (min-width: 769px) {
      display: none;
      position: absolute;
    }

    @media all and (max-width: 768px) {
      display: inline-block;
    }

    &.to-open {
      .collapse-text {
        top: 0px;
      }
    }
  }

  aside#explorer {
    @include transition(margin-left, 0.5s, height 3s);
    @include margin(0, 25px, 0, 20px, !important);
    position: relative;
    top: 60px;

    &.small {
      @include margin-left(-$sidebar !important);
    }

    @media all and (max-width: 768px) {
      @include margin(0, 20px, 0, 20px, !important);
      top: 0;
      height: auto;

      &.small {
        display: none;
        height: 0;
        @include margin-left(20px !important);
      }

    }

    .app_button_group {
      @include flex;

      .app_button {
        @include flex-size(1);
        @include transition(opacity 0.5s);
        border-color: transparent;
        border-style: solid;
        border-width: 1px;
        display: inline-block;
        font-family: $montserrat;
        font-size: 13px;
        @include padding(2px, 5px, 2px, 5px);
        opacity: 0.7;
        text-transform: uppercase;

        img {
          @include margin-right(3px);
          width: 15px;
        }

        &:hover {
          cursor: pointer;
          opacity: 0.9;
        }

        &.open {
          background-color: $darkbackground;
          border-color: rgba(255,255,255,0.4) rgba(255,255,255,0.4) rgba(255,255,255,0) rgba(255,255,255,0.4) ;
          opacity: 1;
          border-style: solid;
        }

      }

    }

    .app_menu {
      border-color: rgba(255,255,255,0.4);
      border-style: solid;
      border-width: 1px;
      display: none;
      margin-top: -1px;
      margin-bottom: 5px;
      @include padding(10px, 10px, 10px, 10px);

      &.open {
        display: block;
      }

      h3 {
        font-size: 16px;
        @include margin(35px, 0, 20px, 0);
      }

      h4 {
        color: $medbordercolor;
        font-size: 13px;
        font-weight: 400;
        @include margin(0, 0, 10px, 0);
        display: none;
      }

      .build_header {
        @include margin-left(-5px);

        li {
          color: $lightbordercolor;
          font-size: 8px;
          text-transform: uppercase;
          font-weight: 700;
          display: inline-block;
          width: 32px;
          @include text-align(center);
        }
      }

      .build {
        @include flex;
        font-family: $source-sans;
        font-size: 12px;
        font-weight: 400;
        @include margin(0, 0, 10px, 0);

        &:last-child {
          margin-bottom: 0;
        }

        .build_title {
          @include flex-size(1);
          cursor: default;
          display: inline-block;
          font-size: 13px;
          letter-spacing: 0.05em;
          line-height: 1.1;
          text-transform: uppercase;
          opacity: 0.7;

          &.active {
            font-weight: 700;
            opacity: 1;
          }

        }

        .build_list {
          @include flex-size(1);
          display: inline-block;
          line-height: 1.5;

          .build_link {
            display: block;
            opacity: 0.7;

            &.active {
              font-weight: 700;
              opacity: 1;

              &:before {
                @include ltr {
                  content: unicode("f0da");
                }
                @include rtl {
                  content: unicode("f0d9");
                }
                font-family: FontAwesome;
                position: absolute;
                margin-top: 0px;
                @include margin-left(-10px);
              }
            }

            &:hover {
              opacity: 0.9;

              &:before {
                @include ltr {
                  content: unicode("f0da");
                }
                @include rtl {
                  content: unicode("f0d9");
                }
                font-family: FontAwesome;
                opacity: 0.7;
                position: absolute;
                margin-top: 0px;
                @include margin-left(-10px);
              }
            }

          }

        }

        // Melissa, these are the new visualize build styles. I separated them
        // here so that the original page will still work. We should keep them
        // separated until we merge them.
        &.new {
          @include justify(flex-start);
          @include align-items(center);
          @include margin(0, 0, 12px, 0, !important);

          .export ~ .build_link.active {
            //color: cornflowerblue;
          }

          .import ~ .build_link.active {
            //color: salmon;
          }

          .build_link {
            color: $lightbordercolor;
            font-size: 13px;

            &:hover {
              color: white;
            }
          }

          .build_link.active {
            font-weight: 700;
            color: white;

            // &:before {
            //   content: "\f0da";
            //   font-family: FontAwesome;
            //   opacity: 0.7;
            //   position: absolute;
            //   margin-top: 2px;
            //   @include margin-left(-10px);
            // }
          }

          &:hover {
            .build_link:before {
              @include ltr {
                content: unicode("f0da");
              }
              @include rtl {
                content: unicode("f0d9");
              }
              font-family: FontAwesome;
              opacity: 0.4;
              position: absolute;
              margin-top: 2px;
              @include margin-left(-10px);
            }
          }

          .build_icons {
            @include margin-left(-5px);
            @include margin-right(8px);
            min-width: 103px;

            // This is the overall style for all build icons. They get
            // additional classes based on their type and value.
            .build_icon {
              height: 13px;
              display: inline-block;
              @include margin(0, auto, 0, auto);
              position: relative;
              @include text-align(center);
              width: 32px;

              // These are the 3 shared classes each different value a type can
              // have. Here's what they mean:
              //  - "show": this attribute is being shown in the visualization
              //  - "all": this attribute is not being used/filtered
              //  - "id": this attribute is being filtered/selected
              &.show {
                &:before {
                  color: #fff;
                  border: 1px solid $pri-c-highlight;
                  border-radius: 50%;
                  @include padding(4px, 4px, 4px, 4px);
                }
              }
              &.all {
                &:before {
                  color: $l3-darkbackground;
                }
              }
              &.id {
                &:before {
                  color: #fff;
                }
              }

              // These styles are overrides for the specific variable types.
              &.origin {
                &:before {
                  font-family: FontAwesome;
                  font-size: 13px;
                }

                &.show {
                  &:before {
                    // institution
                    content: unicode("f0ac");
                  }
                }
                &.all {
                  &:before {
                    // globe
                    content: unicode("f0ac");
                    font-size: 15px;
                  }
                }
                &.id {
                  &:before {
                    // institution
                    content: unicode("f0ac");
                  }
                }
              }

              &.dest {
                &:before {
                  font-family: FontAwesome;
                  font-size: 13px;
                }

                &.show {
                  &:before {
                    // institution
                 ,   content: unicode("f0ac");
                  }
                }
                &.all {
                  &:before {
                    // globe
                  content: unicode("f0ac");
                    font-size: 15px;
                  }
                }
                &.id {
                  &:before {
                    // institution
                    content: unicode("f0ac");
                  }
                }
              }

              &.prod {
                &:before {
                  font-family: FontAwesome;
                  font-size: 13px;
                }

                &.show {
                  &:before {
                    // truck
                    content: unicode("f0d1");

                  }
                }
                &.all {
                  &:before {
                    // truck
                    content: unicode("f0d1");
                  }
                }
                &.id {
                  &:before {
                    // truck
                    content: unicode("f0d1");
                  }
                }
              }

            }

            // These next few additional classes defined the "trade flow" of
            // the build. In most cases they are just import/export, but there a
            // couple of special cases.
            &.export {

              & > .build_icon {
                // &:after {
                //   content: "";
                //   background-repeat: no-repeat;
                //   background-size: cover;
                //   width: 13px;
                //   height: 13px;
                //   position: absolute;
                // }

                &.show {
                  &:before {
                    border: 1px solid cornflowerblue;
                  }
                }
              }

              & > .origin.id {
                & + .prod.show {
                  &:after {
                    @include transform(scaleX(-1));
                    background-image: url('/static/img/visualize/one_many_exp.png');
                    @include right(-8px);
                  }

                  & + .dest.all {
                    &:after {
                      //background-image: url('/static/img/visualize/many_one_exp.png') !important;
                      @include left(-8px);
                    }
                  }
                }

                & + .prod.id, & + .prod.all {
                  &:after {
                    background-image: url('/static/img/visualize/one_one_exp.png');
                    @include right(-8px);
                  }

                  & + .dest.show {
                    &:after {
                      background-image: url('/static/img/visualize/one_many_exp.png') !important;
                      @include left(-8px);
                    }
                  }
                }

                & ~ .dest.id {
                  &:after {
                    background-image: url('/static/img/visualize/one_one_exp.png') !important;
                    @include left(-8px);
                  }

                  & ~ .prod.show {
                    &:after {
                      background-image: url('/static/img/visualize/one_one_exp.png') !important;
                      @include left(-8px);
                    }
                  }
                }
              }

              & > .origin.show {
                & + .prod.id {
                  &:after {
                    @include transform(scaleX(-1));
                    background-image: url('/static/img/visualize/many_one_exp.png');
                    @include right(-8px);
                  }

                  & + .dest.all {
                    &:after {
                      background-image: url('/static/img/visualize/one_one_exp.png') !important;
                      @include left(-8px);
                    }
                  }
                }
              }

              & > .prod {
                @include transform(scaleX(-1));
              }

            }

            &.import {

              & > .build_icon {
                // &:after {
                //   content: "";
                //   background-repeat: no-repeat;
                //   background-size: cover;
                //   width: 13px;
                //   height: 13px;
                //   position: absolute;
                // }

                &.show {
                  &:before {
                    border: 1px solid salmon;
                  }
                }
              }

              & > .origin.id {
                & + .prod.show {
                  &:after {
                    background-image: url('/static/img/visualize/one_many_imp.png');
                    @include left(-8px);
                  }

                  & + .dest.all {
                    &:after {
                      //background-image: url('/static/img/visualize/many_one_imp.png') !important;
                      @include left(-8px);
                    }
                  }
                }

                & + .prod.id, & + .prod.all {
                  &:after {
                    background-image: url('/static/img/visualize/one_one_imp.png');
                    @include left(-8px);
                  }

                  & + .dest.show {
                    &:after {
                      background-image: url('/static/img/visualize/one_many_imp.png') !important;
                      @include left(-8px);
                    }
                  }
                }

                & ~ .dest.id {
                  &:after {
                    background-image: url('/static/img/visualize/one_one_imp.png') !important;
                    @include left(-8px);
                  }

                  & ~ .prod.show {
                    &:after {
                      background-image: url('/static/img/visualize/one_one_imp.png') !important;
                      @include left(-8px);
                    }
                  }
                }
              }

              & > .origin.show {
                & + .prod.id {
                  &:after {
                    background-image: url('/static/img/visualize/many_one_imp.png');
                    @include left(-8px);
                  }

                  & + .dest.all {
                    &:after {
                      background-image: url('/static/img/visualize/one_one_imp.png') !important;
                      @include left(-8px);
                    }
                  }
                }
              }

            }

            // Line chart showing Trade Balance (both imports and exports)
            &.show {
              //background-color: green;
            }

            // Line chart showing ECI rankings
            &.eci {
              //background-color: purple;
            }

          }

        }

      }

    }

    #changers {
      @include flex;
      @include justify(space-between);
      @include flex-wrap(wrap);
      margin-top: 5px;

      h2 {
        font-size: 28px;
        margin-bottom: 28px;
      }

      h3 {
        font-size: 16px;
        @include margin(25px, 0, 5px, 0);
      }

      h4 {
        font-family: $montserrat;
        font-size: 12px;
        margin-bottom: 5px;
        margin-top: -5px;
        text-transform: uppercase;
      }

      .ui {
        @include margin(12px, 0, 0, 0);

        .d3plus_node {
          border-color: rgba(255,255,255,0.4) !important;
        }

      }

      .ui#product .d3plus_node:not(.d3plus_button_active) {
        color: #fff !important;
      }

      #build {
        -webkit-user-select: none;
        -webkit-appearance: none;
        -webkit-tap-highlight-color: transparent;
        background-color: $darkbordercolor;
        border: 0;
        border-radius: 2px;
        color: white;
        cursor: pointer;
        display: block;
        font-family: $montserrat;
        font-size: 13px;
        @include margin(10px, 0, 20px, 0);
        @include padding(9px, 10px, 9px, 10px);
        outline: none;
        position: relative;
        @include text-align(center);
        @include text-shadow(0 1px 1px rgba(0,0,0,0.1));
        text-transform: uppercase;
        width: 100%;


        &:after {
          position: absolute;
          content: "";
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          border-radius: 2px;
        }

        &:hover:after {
          box-shadow: inset 0 -2px rgba(0,0,0,0.3);
        }

        &:active:after {
          box-shadow: inset 0 2px 1px rgba(0,0,0,0.2);
        }

      }

    }

  }

  .d3plus_drop_search input {
    background-color: #3f464f !important;
    color: white;
  }

  .d3plus_button_active {
    font-weight: 700 !important;
  }

  .d3plus_tooltip {
    font-family: $source-sans !important;
    font-weight: 400 !important;

    .d3plus_tooltip_data_value {
      font-weight: 700 !important;
    }
  }

  .d3plus_tooltip_title, .d3plus_tooltip_footer {
    font-family: $montserrat !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }

  .d3plus_tooltip_container {
    font-family: $source-sans !important;
    font-weight: 400 !important;
  }

  .d3plus_tooltip_container a.related,
  .d3plus_tooltip_container a.profile {
    @include transition(opacity 0.5s);
    color: #fff;
    display: block;
    @include margin(10px, 0, 0, 0);
    opacity: 0.75;
    @include padding(14px, 24px, 6px, 4px);
    position: relative;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.3;

    &:hover {
      opacity: 0.6;
    }

    &:after {
        bottom: 2px;
        @include ltr {
          content: unicode("f105");
        }
        @include rtl {
          content: unicode("f104");
        }
        display: block;
        font-family: FontAwesome;
        font-size: 20px;
        -webkit-font-smoothing: antialiased;
        font-style: normal;
        font-weight: normal;
        line-height: 38px;
        position: absolute;
        @include right(12px);
        text-decoration: inherit;
    }

  }

  .d3plus_tooltip_container a.related {
    @include padding(6px, 24px, 6px, 40px);

    &:before {
      font-size: 12px;
      line-height: 38px;
      background-position: 50%;
      background-repeat: no-repeat;
      background-size: 80%;
      content: "";
      display: block;
      height: 100%;
      @include left(0px);
      position: absolute;
      @include text-align(center);
      text-decoration: none;
      top: 0px;
      width: 38px;
    }
   //  &.tree_map:before {
   //    background-image: url("/static/img/icons/app/app_tree_map_black.png");
   //  }
   //  &.rings:before {
   // background-image: url("/static/img/icons/app/app_rings_black.png");
   //  }
  }

  .d3plus_tooltip_container a.profile {
    color: white !important;
  }

  .d3plus_tooltip_container a.profile img {
    width: 30px;
    @include margin(-8px, 6px, 0, 0);
  }
}

// Style for download and share button images

#d3plus_drawer .d3plus_drawer_ui:nth-last-child(2) {
  .d3plus_node {
    border: 0 !important;
    background-color: transparent !important;
  }

  & + .d3plus_drawer_ui .d3plus_node {
    border: 0 !important;
    background-color: transparent !important;
  }
}

.d3plus_share, .d3plus_label {
  font-family: "Fira Sans Condensed" !important;
}

.d3plus_node img {
  height: 17px;
  width: 17px;

  &:hover {
    opacity: 0.6;
  }
}

/* Styles for d3plus tooltips */

.d3plus_tooltip_curtain {
  opacity: 0.4 !important;
}

.d3plus_tooltip_small {
  .d3plus_tooltip_title {
    @include padding(10px, 6px, 10px, 6px, !important);
  }

  .d3plus_tooltip_container {
    @include padding(3px, 3px, 3px, 5px !important);
  }
}

#d3plus_tooltip_id_tree_map.d3plus_tooltip_large {
  .d3plus_tooltip_container {
    @include padding(0,0,0,0, !important);
  }

  .d3plus_tooltip_body {
    @include padding(0, 7px, 0, 7px, !important);
  }
}

.d3plus_tooltip_large, .d3plus_tooltip_small {
  @include font-smoothing(antialiased);
  color: #ccc !important;
  font-family: $source-sans !important;

  .d3plus_tooltip_arrow {
    background-color: $darkbordercolor !important;
    border: 1px solid $darkbordercolor;
  }

  .d3plus_tooltip_container {
    background-color: $l-darkbackground !important;
    border: 1px solid $darkbordercolor;
    color: #ccc;
    line-height: 1.4;

    h3.related_viz {
      color: $medbordercolor;
      font-size: 12px;
      @include padding(15px, 0px, 10px, 0);
    }

    a.profile {
      @include flex();
      @include flex-direction(row);
      @include align-items(center);
      @include justify(flex-start);

      h3 {
        font-size: 16px;
        display: inline-block;
        line-height: 1.2;
        vertical-align: middle;
        width: auto;

        &:after {
          font-family: FontAwesome;
          @include padding-left(7px);

          @include rtl {
            content: unicode("f104");
          }
          @include ltr {
            position: absolute;
            content: unicode("f105");
          }
        }
      }

      &:hover {
        opacity: 0.8;
      }
    }
  }

  .d3plus_tooltip_body {
    height: 100%;
    background-color: $l2-darkbackground;
    @include padding-right(0 !important);

    .d3plus_tooltip_header {
      padding-top: 5px;

      .d3plus_tooltip_icon {
        display: none !important;
      }

      .d3plus_tooltip_title {
        width: 100% !important;
        max-width: 100% !important;
      }
    }
  }

  .d3plus_tooltip_html {
    @include padding(0,0,0,0, !important);
    word-wrap: break-word;
    overflow: scroll;
  }

  .d3plus_tooltip_icon {
    vertical-align: middle !important;
  }

  .d3plus_tooltip_title {
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 400;
    line-height: 1.2 !important;
    vertical-align: middle !important;
    @include padding(10px, 6px, 10px, 6px, !important);
  }

  .d3plus_tooltip_data_title {
    color: $medbordercolor;
    font-family: $montserrat !important;
    font-weight: 400 !important;
    letter-spacing: 1px;
    line-height: 1.15;
    @include padding(15px, 0px, 10px, 0, !important);
    text-transform: uppercase;
  }

  .d3plus_tooltip_focus_link {
    font-size: 14px;
    line-height: 1.2;
    width: 100%;
    @include padding-left(27px !important);

    div {
      height: 16px !important;
      width: 16px !important;
    }

    &:hover {
      color: #fff;
    }
  }

  .d3plus_tooltip_data_block {
    color: #ccc !important;
    font-size: 14px !important;
    @include padding(5px, 6px, 5px, 6px, !important);

    .d3plus_tooltip_data_name {
      font-weight: 700;

      .d3plus_tooltip_focus_link {
        &:hover{
          &:after {
            font-family: FontAwesome;
            @include padding-left(5px);

            @include rtl {
              content: unicode("f104");
            }
            @include ltr {
              position: absolute;
              content: unicode("f105");
            }
          }
        }
      }
    }

    & ~ div {

      img {
        display: inline-block;
        vertical-align: middle;
        width: 25px;
        @include margin(0, 5px, 0, 0);
      }

      a {
        display: block;
        width: 100%;

        &.profile {
          @include padding(0, 0, 2px, 3px);
          width: 98%;
          background-color: transparent !important;
          font-size: 18px;
          font-weight: 400;
          @include margin(10px, 0, 10px, 0);

          &:before {
            display: none;
          }
        }

        & ~ h3.related_viz {
          @include padding(5px, 0, 10px, 0);
        }

        &.related {
          @include transition(opacity 0.5s);
          color: #fff;
          font-size: 14px;
          line-height: 1.3;
          @include padding(6px, 0, 6px, 0);
          &:hover{
            opacity: 0.8;

            &:after {
              font-family: FontAwesome;
              @include padding-left(5px);

              @include rtl {
                content: unicode("f104");
              }
              @include ltr {
                position: absolute;
                content: unicode("f105");
              }
            }
          }
        }

        &.tree_map:before {
          background-image: url("/static/img/icons/app/app_tree_map.png");
        }

        &.stacked:before {
          background-image: url("/static/img/icons/app/app_stacked.png");
        }

        &.network:before {
          background-image: url("/static/img/icons/app/app_network.png");
        }

        &.rings:before {
          background-image: url("/static/img/icons/app/app_rings.png");
        }

        &.geo_map:before {
          background-image: url("/static/img/icons/app/app_geo_map.png");
        }

        &.compare:before {
          background-image: url("/static/img/icons/app/app_compare.png");
        }

        &.scatter:before {
          background-image: url("/static/img/icons/app/app_scatter.png");
        }

        &:before {
          background-repeat: no-repeat;
          background-size: 15px 15px;
          content: "";
          display: inline-block;
          @include margin-right(6px);
          @include left(0px);
          width: 13px;
          height: 14px;
          position: relative;
          top: 1px;
        }

      }

    }
  }

  .d3plus_tooltip_data_seperator {
    background-color: $darkbordercolor !important;
  }

  .d3plus_tooltip_html {
    @include margin(15px, 12px, 6px, 12px);
    @include padding-right(0px !important);
    height: 87% !important;

    img {
      display: inline-block;
      vertical-align: middle;
      width: 25px;
      @include margin(0, 5px, 0, 0);
    }

    a.related {
      @include transition(opacity 0.1s);
      color: #fff;
      display: block;
      position: relative;
      @include left(15px);
      width: 97%;
      font-size: 14px;
      line-height: 1.3;
      @include padding(6px, 0, 6px, 3px);

      &:hover {
        opacity: 0.8;

        &:after {
          font-family: FontAwesome;
          @include padding-left(5px);

          @include rtl {
            content: unicode("f104");
          }
          @include ltr {
            position: absolute;
            content: unicode("f105");
          }
        }
      }

      &.tree_map:before {
        background-image: url("/static/img/icons/app/app_tree_map.png");
      }

      &.stacked:before {
        background-image: url("/static/img/icons/app/app_stacked.png");
      }

      &.network:before {
        background-image: url("/static/img/icons/app/app_network.png");
      }

      &.rings:before {
        background-image: url("/static/img/icons/app/app_rings.png");
      }

      &.geo_map:before {
        background-image: url("/static/img/icons/app/app_geo_map.png");
      }

      &.compare:before {
        background-image: url("/static/img/icons/app/app_compare.png");
      }

      &.scatter:before {
        background-image: url("/static/img/icons/app/app_scatter.png");
      }

      &:before {
        background-repeat: no-repeat;
        background-size: 15px 15px;
        content: "";
        display: block;
        @include margin-right(8px);
        @include left(-15px);
        width: 15px;
        height: 15px;
        position: absolute;
        top: 8px;
      }

      &.profile {
        background-color: transparent !important;
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 10px;
      }

    }
  }
}

.d3plus_tooltip_close {
  top: 15px !important;
  right: 10px !important;
  color: #ccc !important;
  font-size: 35px !important;
  font-weight: 300 !important;
  background-color: transparent !important;
  box-shadow: none !important;

  &:hover {
    opacity: 0.6 !important;
  }
}

#d3plus_back_button {
  @include transition(opacity 0.5s);
  text-transform: uppercase;
  letter-spacing: 0.1em;

  &:hover {
    opacity: 0.7 !important;
  }
}

.viz_loader {
  @include animation(viz_loader 3s cubic-bezier(0.91, 0, 0.8, 0.51) infinite);
  display: none;
  height: 2px;
  @include left(0);
  @include margin(-1px, 2px, 0, 2px);
  opacity: 0.5;
  overflow: hidden;
  position: absolute;
  @include text-align(left);
  top: 0;
  z-index: 3;

  &.visible {
    display: block;
  }

}

@include keyframes(viz_loader) {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
