///////////////////////////// File System Diagrams /////////////////////////////

.fs-diagram {
  display: inline-block;
  margin: 1rem 0 2rem;
  padding: 1.5rem 2.5rem 1.5rem 1.5rem;
  font-family: $code;
  border-radius: $radius;
  box-shadow: 1px 3px 10px $article-shadow;
  & > ul { padding: 0; margin: 0;
    li { line-height: 2rem; color: $article-code; }
    ul { 
      padding-left: 2rem;
      margin: 0;

      li {
        position: relative;
        margin: 0 0 0 -1.45rem;
        padding-left: 1.45rem;
        line-height: 2.5rem;
        border-left: 1px solid $article-code;
        &:before {
          content: "";
          display: inline-block;
          width: 1rem;
          height: .25rem;
          margin-right: .55rem;
          margin-left: -1.45rem;
          border-top: 1px solid $article-code;
        }
        &:last-child {
          border: none;
          &:after {
            content: "";
            position: absolute;
            margin: 0;
            padding: 0;
            left: 0;
            top: 0;
            height: 1.4rem;
            border-left: 1px solid $article-code;
          }
        }
      }
    }
  }
  ul { list-style: none; }
}

///////////////////////////////// Shard diagram ////////////////////////////////
#shard-diagram, #data-retention {
  display: flex;
  flex-direction: column;
  max-width: 550px;
  margin: 2.5rem auto 3rem;

  p {margin-bottom: 0; line-height: 1.25em;}

  .periods {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .timeline {
    display: flex;
    flex-direction: row;
    margin-top: .25rem;
    padding:  0 .5rem;

    .interval {
      border-top: 1px solid $article-text;
      border-right: 1px solid $article-text;
      height: .75rem;
      flex-grow: 1;
      &:first-child {
        border-left: 1px solid $article-text;
      }
    }

    .one-quarter {width: 25%; height: .75rem;}
    .three-quarters {width: 75%; height: .75rem;}
    .border-left {border-left: 1px solid $article-text;}
    .retention-label {
      position: relative;
      &:before {
        content: "";
        display: inline-block;
        width: .65rem;
        margin-right: .5rem;
        border-top: 1px solid $article-text;
        vertical-align: middle;
      }
    }
    .deleted-label {
      color: $r-ruby;
      text-align: center;
      font-size: .9rem;
    }
  }
  .shard-groups {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: .25rem;
    padding: .5rem;
    line-height: 1rem;

    .shard-group {
      margin:  0 .25rem;
      text-align: center;
      padding: .5rem;
      border-radius: .5rem;
      background: $html-diagram-shard-group-bg;
      flex-grow: 1;
      box-shadow: 2px 2px 8px $article-shadow;
      p:first-child {margin-bottom: .75rem;}

      .shard {
        display: block;
        margin-top: .5rem;
        padding: .65rem 1rem;
        color: #fff;
        border-radius: .25rem;
        @include gradient($article-table-header, 90deg);
        background-attachment: fixed;
      }

      &.deleted {
        opacity: .3;
        .shard {@include gradient($grad-red-dark)}
      }
    }
  }
}

///////////////// Data model table in InfluxDB 2.4+ get started ////////////////

.series-diagram {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 1rem 3.25rem 1.75rem 0;
  padding-right: 1.5rem;
  border-right: 2px solid $tooltip-bg;
  
  table {margin: 0;}

  &:after {
    content: "Series";
    top: 4rem;
    right: -3.5rem;
  }

  &:last-child {margin-bottom: 3rem;}

}

table tr.point{
  border: 2px solid $tooltip-bg;

  &:after {
    content: "Point";
    bottom: -.8rem;
    left: 1rem;
  }
}

.series-diagram, table tr.point {
  position: relative;
  &:after {
    color: $tooltip-text;
    background: $tooltip-bg;
    border-radius: $radius;
    position: absolute;
    font-size: .9rem;
    font-weight: $medium;
    padding: .2rem .5rem;
    line-height: .9rem;
  }
}

.sql table {

  tr.points {
    position: relative;
    td:first-child{
      &:before, &:after {
        display: block;
        border-radius: $radius;
        position: absolute;
        font-size: .9rem;
        font-weight: $medium;
        padding: .2rem .5rem;
        line-height: .9rem;
        z-index: 1;
        top: -.25rem;
        opacity: 0;
        transition: opacity .2s, top .2s;
      }
      &:before {
        content: "Point 1";
        color: $g20-white;
        background: $br-new-magenta;
      }
      &:after {
        content: "Point 2";
        color: $tooltip-text;
        background: $tooltip-bg;
        left: 5rem;
      }
    }

    &:hover { td:first-child {
      &:before, &:after {
        opacity: 1;
        top: -.65rem;
      }
    }}
  }
  span.point{
    position: relative;
    display: inline-block;

    &.one:before{
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 2px;
      border-top: 2px solid $br-new-magenta;
      bottom: -2px;
    }
    &.two:after{
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 2px;
      border-top: 2px solid $tooltip-bg;
      bottom: -8px;
    }
  }
}

////////////// Line protocol anatomy in InfluxDB 2.4+ get started //////////////

#line-protocol-anatomy {
  overflow: scroll;
  margin: 3rem 0 2.5rem;

  p {
    padding: 3rem 0 2rem;
    white-space: nowrap;
    font-family: $code;
    overflow: visible;
    text-align: center;
    
    span{
      padding: .75rem 0 .75rem;
      &.el {
        position: relative;
        border-top: 2px solid $tooltip-bg;

        &:before{
          display: block;
          position: absolute;
          font-family: $proxima;
          font-size: .95rem;
          color: $tooltip-bg;
          font-weight: $medium;
          top: -2.75rem;
          left: 50%;
          transform: translateX(-50%);
        }
        &:after{
          content: "";
          display: block;
          position: absolute;
          height: 1rem;
          width: 2px;
          top: -1rem;
          left: 50%;
          transform: translateX(-50%);
          background: $tooltip-bg;
        }
        &.measurement:before{content: "measurement"}
        &.tagset:before{content: "tag set"}
        &.fieldset:before{content: "field set"}
        &.timestamp:before{content: "timestamp"}
      }

      &.whitespace, &.comma{
        position: relative;
        border-bottom: 2px solid $tooltip-bg;

        &:before{
          white-space: nowrap;
          display: block;
          position: absolute;
          font-family: $proxima;
          font-size: .95rem;
          color: $tooltip-bg;
          font-weight: $medium;
          bottom: -2.75rem;
          left: 50%;
          transform: translateX(-50%);
        }
        &:after{
          content: "";
          display: block;
          position: absolute;
          height: 1rem;
          width: 2px;
          bottom: -1rem;
          left: 50%;
          transform: translateX(-50%);
          background: $tooltip-bg;
        }
        &.whitespace:before{content: attr(data-whitespace) " whitespace";}
        &.comma:before{content: attr(data-whitespace) "1st comma";}
      }
    }
  }

  &.v3 {p span.measurement::before{content: "table";}}
  &.hide-elements {p span.el { border: none; &:before, &:after {display: none}}}
  &.hide-commas {p span.comma { border: none; &:before, &:after {display: none}}}
  &.hide-whitespace {p span.whitespace { border: none; &:before, &:after {display: none}}}
}

/////////////////////////// InfluxQL window diagram ////////////////////////////

#influxql-window-diagram {
  min-width: 520px;
  overflow: scroll;
  display: flex;
  flex-direction: row;
  
  #timerange-label {
    position: relative;
    width: .7rem;
    margin: 10.5rem .5rem 6.5rem .5rem;
    border-width: 1px 0 1px 1px;
    border-style: solid;
    border-color: rgba($article-text, .3);

    &::before {
      content: "Queried time range";
      display: block;
      position: absolute;
      background: $article-bg;
      padding: 0 .75rem;
      font-weight: $medium;
      font-size: .9rem;
      color: rgba($article-text, .5);
      transform: rotate(-90deg);
      white-space: nowrap;
      top: 13.5rem;
      left: -4.7rem;
    }
  }

  td {
    font-weight: medium;
    color: $article-bold;

    span.exclude {
      opacity: .35;
      font-weight: normal;
    }
  }

  .windows {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4rem 0 2.5rem .25rem;
  }

  .window-hour {
    justify-content: space-between;
    height: 100%;
    margin-bottom: .5rem;
    border-left: 1px solid rgba($article-text, .3);
    flex: 1 1 0;
    position: relative;

    &::before, &::after {
      content: "";
      position: absolute;
      display: block;
      width: 9px;
      height: 1px;
      left: -10px;
      border-top: 1px solid rgba($article-text, .3);
    }
    &::before {top: 0}
    &::after {bottom: -1px} 
      
    p {
      white-space: nowrap;
      margin-top: .55rem;
      position: relative;

      &::before {
        content: "";
        display: inline-block;
        margin-right: .5rem;
        width: 1rem;
        height: 0;
        border-top: 1px solid rgba($article-text, .3);
        vertical-align: middle;
      }
      &::after {
        content: "Predefined window boundary";
        display: block;
        position: absolute;
        top: 1.25rem;
        left: 1.5rem;
        font-size: .9rem;
        font-weight: $medium;
        color: rgba($article-text, .5);
      }
    }
  }
}

/////////////////////////// Scaling strategy diagrams //////////////////////////

.scaling-strategy {
  margin: 2rem 0 3rem;

  .node {
    border: 2px solid $article-text;
    border-radius: 6px;
    height: 6rem;
    width: 4rem;
  }

  .dashed {
    border-style: dashed;
    border-color: rgba($article-text, .5)
  }

  .outer {
    height: auto;
    width: fit-content;
    position: relative;
  }

  .inner {
    margin: 2rem 1.25rem -2px;
  }

  &.horizontal {
    display: flex;
    .node:not(:first-child) {margin-left: 1.25rem;}
  }
}

////////////////////////////// QUERY PLAN DIAGRAM //////////////////////////////

#query-plan-diagram {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  margin: 3rem 0 3.5rem;
  max-width: 800px;
  
  .plan-column {
    padding: 0 .5rem;
  }
  
  .plan-block {
    background: $article-code-bg;
    color: $article-code;
    text-align: center;
    padding: 1rem 1.5rem;
    border-radius: $radius * 2;
  }
  .plan-arrow {
    margin: .5rem auto;
    height: 1.5rem;
    width: 1px;
    border-left: 1px solid $article-code;
    position: relative;
    
    &:before {
      content: "\25B2";
      position: absolute;
      top: .25rem;
      left: -.32rem;
      color: $article-code;
      line-height: 0;
    }
    &.split {
      width: 50%;
      margin-top: 2rem;
      height: 1rem;
      display: flex;
      justify-content: center;
      border-width: 1px 1px 0 1px;
      border-style: solid;
      border-color: $article-code;

      &:before {
        position: relative;
        top: -1.25rem;
        left: -0.26rem;
        width: 0;
        margin-left: .2rem;
      }
      &:after {
        content: "";
        display: block;
        height: 1rem;
        width: 0;
        border-left: 1px solid $article-code;
        margin: -1rem 0;
      }
    }
  }
  .plan-single-column {
    display: flex;
    justify-content: center;
  }
  .plan-double-column {
    display: flex;
    justify-content: space-around;
  }
}

//////////////////////// SSO AUTHORIZATION FLOW DIAGRAM ////////////////////////

#sso-auth-flow {
  max-width: 650px;
  margin: 2rem auto;

  .row {
    display: flex;
    
    &.left {  justify-content: start;}
    &.center {  justify-content: center;}
    &.right {  justify-content: end;}
  }

  .auth-item {
    margin: 1rem;
    color: $g20-white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(-135deg, $article-table-header);
    border-radius: $radius * 2;
    min-width: 220px;
    min-height: 90px;
    text-align: center;
    font-weight: $medium;
  }

  #auth0, #idp {
    &::after {
      display: block;
      margin-top: .25rem;
      font-weight: normal;
      font-style: italic;
      font-size: 1rem;
      opacity: .75;
    }
  }

  #auth0::after {content: "Managed by InfluxData"}
  #idp::after {content: "Managed by you"}

  .arrow {
    display: block;
    width: 65px;
    height: 65px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $article-text;
    border-style: dashed;
    border-color: $article-text;

    &.right, &.left {
      &:before {
        content: attr(step);
        background: $article-bg;
        font-size: .9rem;
        width: 1.5rem;
        height: 1.5rem;
        border: 1px solid $article-text;
        text-align: center;
        line-height: 1.5rem;
        border-radius: 50%;
      }
      &:after {       
        position: absolute;
        line-height: 0;
        font-size: 1.35rem;
      }
    }

    &.right {
      border-radius: 0 100% 0 0;
      border-width: 2px 2px 0 0;
      align-self: flex-end;
      &:before {translate: 45% -45%; }
      &:after {
        content: "⏷";
        bottom: 0;
        right: -.4rem;
      }
    }
    &.left {
      border-radius: 0 0 0 100%;
      border-width: 0 0 2px 2px;
      align-self: flex-start;
      &:before {translate: -45% 45%;}
      &:after {
        content: "⏶";
        top: 0;
        left: -.4rem;
      }
    }
  }
}

// AUTH FLOW-SPECIFIC MEDIA QUERIES

@include media(small) {
  #sso-auth-flow {
    max-width: 350px;
    margin: 6rem auto;
    .row {
      flex-direction: column;
      margin: -50px 0;
    }
    .auth-item{
      margin: .5rem 0;
    }
    .arrow {
      width: 2rem;
      height: 55px;
      &.right, &.left {
        border-width: 0 2px 0 0;
        border-radius: 0;
      }
      &.right {
        align-self: flex-start;
        margin-left: 4rem;
        &:before{translate: 60% -15%;}
      }
      &.left {
        align-self: flex-end;
        margin-right: 6rem;
        &:before{translate: 60% 10%;}
        &:after {
          right: -.4rem;
          left: unset;
        }
      }
    }
  }

}

/////////////////////////// QUIX DOWNSAMPLING DIAGRAM //////////////////////////

#quix-downsample-pipeline {
  margin: 3rem auto;

  .logo-row {
    display: flex;

    &.top {
      justify-content: flex-start;
      margin-bottom: -2.6rem;

      .quix-connector {margin-top: .5rem;}
    }
    &.bottom {
      justify-content: flex-end;
      margin-top: -2.6rem;
    }
  }

  .influxdb-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 29%;
  }

  .influxdb-logo {
    background: $influxdb-logo;
    width: 175px;
    height: 55px;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    
    &:after {
      content: attr(data-precision) " data db";
      position: absolute;
      bottom: -2px;
      left: 45px;
      width: 100%;
      color: $article-text;
      font-style: italic;
      font-size: 1rem;
    }
  }

  .quix-connector {
    display: block;
    height: 80px;
    width: 20px;
    position: relative;

    &:before {
      content: "";
      display: block;
      height: 100%;
      width: 100%;
      background-color: $article-text;
      mask-image: url('/svgs/quix-connector-plug.svg');
      mask-repeat: no-repeat;
      background-size: contain;
    }

    &:after {
      content: "Connector";
      display: block;
      position: absolute;
      top: 1.5rem;
      left: 1.75rem;
      padding: .25rem .5rem;
      color: $article-text;
      font-size: 1rem;
      font-style: italic;
      background-color: $article-bg;
      border-radius: $radius * 3;
      border: 1.5px solid rgba($article-text, .5);
      box-shadow: 2px 2px 6px $sidebar-search-shadow;
    }
  }
  
  .quix-stream-container {
    display: flex;
    flex-direction: row;
    border: 2px dashed $article-text;
    background: rgba($article-text, .1);
    border-radius: $radius * 4;
    padding: 2.5rem;
    justify-content: space-between;
    align-items: center;
  }
  
  .quix-stream-component {
    padding: 1rem;
    border-radius: $radius * 2;
    border-style: dashed;
    border-width: 2px;
    position: relative;

    p {
        margin: 0;
        line-height: 1.2rem;
        font-size: 1rem;
        text-align: center;
        color: $article-bold;
      }
    
    &:before {
      content: url('/svgs/quix-python-heart.svg');
      display: block;
      position: absolute;
      width: 40px;
      height: 40px;
      top: -15px;
      left: -15px;
      filter:
        drop-shadow( 2px  0px 0px $article-bg) 
        drop-shadow(-2px  0px 0px $article-bg)
        drop-shadow( 0px  2px 0px $article-bg) 
        drop-shadow( 0px -2px 0px $article-bg);
    }
    
    &#source-producer {
      background: rgba($b-dodger, .2);
      border-color: $b-dodger
    }
    &#downsampling-process {
      background: rgba($br-magenta, .2);
      border-color: $br-magenta
    }
    &#sink-consumer {
      background: rgba($y-tiger, .2);
      border-color: $y-tiger
    }
  }

  .arrow {
    margin: .5rem .75rem .5rem .5rem;
    height: 2px;
    width: auto;
    min-width: 25px;
    background: $article-text;
    position: relative;

    &:after{
      content: "▶";
      position: absolute;
      right: -4px;
      top: -.48em;
      font-size: .75rem;
      color: $article-text;
    }
  }

  .kafka-toggle {
    display: flex;
    justify-content: flex-end;
    width: 60px;
    min-width: 60px;
    height: 40px;
    border-radius: 20px;
    background: $grey5;
    position: relative;

    &:after {
      content: "TOPIC:\A" attr(topic);
      position: absolute;
      width: 215%;
      color: $article-text;
      text-align: center;
      font-style: italic;
      bottom: -42px;
      font-size: .9rem;
      left: -60%;
      white-space: pre-wrap;
    }

    .toggle-icon {
      display: block;
      height: 34px;
      width: 34px;
      margin: 3px;
      border-radius: 50%;
      background: url('/svgs/apache-kafka-icon.svg');
      background-color: #fff;
      background-size: 86%;
      background-position: 90%;
      background-repeat: no-repeat;
    }
  }

  #quix-brand-icons {
    height: 50px;
    display: flex;
    align-items: flex-start;
    margin-top: -3rem;

    & > * {
      height: 45px;
      display: inline-block;
      background-color: $g0-obsidian;
      border-radius: $radius * 3;
      margin-right: .25rem;
      box-shadow: 0 1px 10px rgba($g20-white, .1);

      img {
        margin: 0;
        box-shadow: none;
        border-radius: 0;
        height: 100%;
      }
    }

    .quix-logo  {
      padding: .75rem;
    }

    .quix-streams-logo {
      position: relative;
      padding: .6rem;      

      &::after {
        content: "Quix\A Streams";
        display: inline-block;
        white-space: pre-wrap;
        font-size: .92rem;
        font-weight: $medium;
        color: $g20-white;
        line-height: .9rem;
        margin-left: .15rem;
      }
    }
  }
}

//////////////////////// SQL WINDOW FRAME UNITS EXAMPLES ///////////////////////

table.window-frame-units {
  &.groups {
    .group {
      position: relative;
      outline-style: solid;
      outline-width: 3px;
      outline-offset: -5px;
      border-radius: 10px;

      &::before {
        content: "Row Group";
        display: block;
        padding: .25rem .5rem;
        position: absolute;
        top: 3px;
        left: 3px;
        border-radius: 4px;
        color: #fff;
        font-size: .8rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: .02em;
        box-shadow: 4px 4px 4px $article-bg;
      }

      td:nth-child(2), td:nth-child(3) {
        font-weight: bold;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 5px;        
      }

      &:nth-of-type(1) {     
        &::before {background: $br-new-magenta;}   
        outline-color: $br-new-magenta;
        td:nth-child(2), td:nth-child(3) {
          text-decoration-color: $br-new-magenta;
        }
      }
      &:nth-of-type(2) {
        &::before {background: $br-new-purple;}  
        outline-color: $br-new-purple;
        td:nth-child(2), td:nth-child(3) {
          text-decoration-color: $br-new-purple;
        }
      }
      &:nth-of-type(3) {
        &::before {background: $b-dodger;}  
        outline-color: $b-dodger;
        td:nth-child(2), td:nth-child(3) {
          text-decoration-color: $b-dodger;
        }
      }
      &:nth-of-type(4) {
        &::before {background: $b-sapphire;}  
        outline-color: $b-sapphire;
        td:nth-child(2), td:nth-child(3) {
          text-decoration-color: $b-sapphire;
        }
      }
    }
  }

  &.groups-with-frame {
    .frame, tr.current-row {
      position: relative;
      outline-style: solid;
      outline-width: 3px;
      outline-offset: -5px;
      border-radius: 10px;

      &::after {
        display: block;
        padding: .25rem .5rem;
        position: absolute;
        top: 3px;
        left: 3px;
        border-radius: 4px;
        color: #fff;
        font-size: .8rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: .02em;
        box-shadow: 4px 4px 4px $article-bg;
      }

      tr:nth-child(n + 1):nth-child(-n + 3) {
        td {text-decoration-color: $br-new-magenta;}
      }
      tr:nth-child(n + 4):nth-child(-n + 6) {
        td {text-decoration-color: $br-magenta;}
      }
      tr:nth-child(n + 7):nth-child(-n + 8) {
        td {text-decoration-color: $b-dodger;}
      }

      td:nth-child(n + 2):nth-child(-n + 3) {
        font-weight: bold;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 5px;
      }
    }
    tr.current-row {
      outline-color: $br-new-magenta;
      &::after {
        content: "Current Row";
        background: $br-new-magenta;
      }
      td {text-decoration-color: $b-dodger !important;}
    }

    .frame {
      outline-color: $br-new-purple;
      &::after {
        content: "Frame";
        background: $br-new-purple;
      }
    }
    .group {
      position: relative;
      outline-color: $b-sapphire;
      td:nth-child(2), td:nth-child(3) {
        font-weight: bold;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 5px;
        text-decoration-color: $b-sapphire;
      }
    }
  }

  &.range-interval {
    .frame, tr.current-row {
      position: relative;
      outline-style: solid;
      outline-width: 3px;
      outline-offset: -5px;
      border-radius: 10px;
      
      td:first-child {
        font-weight: bold;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 5px;
        text-decoration-color: $br-new-purple;
      }
      &::after {
        display: block;
        padding: .25rem .5rem;
        position: absolute;
        top: 3px;
        right: 3px;
        border-radius: 4px;
        color: #fff;
        font-size: .8rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: .02em;
        box-shadow: -4px 4px 4px $article-bg;
      }
    }
    tr.current-row {
      outline-color: $br-new-magenta;
      td:first-child {text-decoration-color: $br-new-magenta;}
      &::after {
        content: "Current Row";
        background: $br-new-magenta;
        box-shadow: -4px 4px 4px $article-table-row-alt;
      }
    }

    .frame {
      outline-color: $br-new-purple;
      &::after {
        content: "Frame";
        background: $br-new-purple;
      }
    }
  }

  &.range-numeric, &.rows {
    .frame, tr.current-row {
      position: relative;
      outline-style: solid;
      outline-width: 3px;
      outline-offset: -5px;
      border-radius: 10px;
      
      &::after {
        display: block;
        padding: .25rem .5rem;
        position: absolute;
        top: 3px;
        left: 3px;
        border-radius: 4px;
        color: #fff;
        font-size: .8rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: .02em;
        box-shadow: 4px 4px 4px $article-bg;
      }
    }
    tr.current-row {
      outline-color: $br-new-magenta;
      &::after {
        content: "Current Row";
        background: $br-new-magenta;
      }
    }

    .frame {
      outline-color: $br-new-purple;
      &::after {
        content: "Frame";
        background: $br-new-purple;
      }
    }
  }
  &.range-numeric {
    .frame {
      td:nth-child(3) {
        font-weight: bold;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 5px;
        text-decoration-color: $br-new-purple;
      }
      tr.current-row {
        td:nth-child(3) {text-decoration-color: $br-new-magenta;}
      }
    }
  }
}

////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
////////////////////////////////////////////////////////////////////////////////

@include media(large) {
  #quix-downsample-pipeline {
    max-width: 325px;
    
    .logo-row .influxdb-connector {width: 100%;}
    .quix-stream-container {flex-direction: column;}
    .arrow {
      margin: .5rem .5rem .75rem .5rem ;
      width: 2px;
      min-width: 2px;
      height: auto;
      min-height: 25px;
  
      &:after{
        content: "▼";
        right: -4.25px;
        bottom: -.5em;
        top: unset;
        font-size: 1rem;
      }
    }

    .kafka-toggle {
      margin-bottom: 1.5rem;
      &:after {
        content: "TOPIC: " attr(topic);
        width: 400%;
        bottom: -25px;
        left: -150%;
      }
    }

    #quix-brand-icons {
      margin-top: 1.5rem;
      align-items: center;
      justify-content: center;
    }
  }
}

@include media(small) {
  #shard-diagram {
    flex-direction: row;
    .periods {flex-direction: column; margin-right: .5rem; }
    .timeline {
      flex-direction: column;
      padding: .5rem 0;
      .interval {
        width: .75rem;
        border-top: none;
        border-right: none;
        border-left: 1px solid $article-text;
        border-bottom: 1px solid $article-text;
        &:first-child{ border-top: 1px solid $article-text; }
      }
    }
    .shard-groups {
      flex-direction: column;
      .shard-group { margin: .25rem 0;}
    }
  }

  .series-diagram {
    width: auto;
  }

  #influxql-window-diagram {
    justify-content: flex-start;
    min-width: 300px;
    .window-hour{
      width: 60px;
      p {
        transform: rotate(-90deg);
        position: relative;
        margin-top: 8.75rem;
        font-size: .95rem;
        
        &::before {
          transform: rotate(90deg);
          position: absolute;
          top: -.5rem;
          left: 4.5rem;
        }
        &::after {
          left: 0;
        }
      }
    }
  }
};