$rank_sidebar: 150px;

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

  #container {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;

    #content section.nav-section {
      margin: 0 20px 10px 20px;

      content {
        margin: 0 !important;
      }
      aside {
        font-size: 26px;
        margin: 10px 10px 0 0 ;
        width: 50px;
        text-align: right;
      }
    }

    #content section.about-section {
      content {
        column-count: 3;
        column-gap: 20px;
        margin: 0 20px 10px 20px;
        @media all and (max-width: 950px) {
          column-count: 2;
          column-gap: 15px;
        }
        @media all and (max-width: 600px) {
          column-count: 1;
        }
      }
    }

    #content section.download-section {
      margin: 10px 20px 20px 20px;
      content {
        text-align: center;
        margin: 0;
      }
    }

    #content section.settings-section {
      @media all and (max-width: 950px) {
        flex-direction: column;
      }
      background-color: #3f464f;
      margin: 0 20px 10px 20px;

      content {
        flex: 2;
        padding: 10px;
        margin: 0 !important;
        @media all and (max-width: 375px) {
          padding: 2px 10px;
        }
        ul.settings-list {
          @media all and (max-width: 375px) {
            margin: 5px 0;
          }
          border: 1px solid #63737f;
          border-radius: 4px;
          display: inline-block;
          li {
            margin: 0 0 0 8px;
            padding: 0;
            display: inline-block;
            a {
              border-radius: 4px;
              display: inline-block;
              padding: 4px 6px;
              white-space: nowrap;
              &.active {
                background-color: #212831;
              }
            }
          }
        }

        &.settings-attr {
          flex: 1;
        }
        &.settings-classification {
          flex: 2;
        }
        &.settings-complexity-type {
          flex: 1;
        }
        &.settings-year {
          flex: 3;
        }
      }
    }

    #content section.ranking-section {
      display: block;
      margin: 0 20px;

      content {
        margin: 0 !important;
      }
    }

    table {
      background-color: $l-darkbackground;
      color: #ccc;
      border: 1px solid $darkbordercolor;
      margin-bottom: 20px;

      a {
        @include margin-left(7px);
        color: white;
        font-weight: 700;

        &:hover {
          border-bottom: 0;
          &:after {
            @include ltr {
              content: unicode("f105");
            }
            @include rtl {
              content: unicode("f104");
            }
            font-family: FontAwesome;

            @include padding-left(7px);
          }
        }
      }

      tr {
        .sparkline-col {
          @media all and (max-width: 740px) {
            display: none !important;
          }
        }
      }

      th {
       @include rtl {
        text-align: right;
       }
      }

      th[data-sortable] {
        display: table-cell !important;

        i {
          @include transition(opacity 0.1s);
          display: inline-block;
          @include margin-left(5px);
          padding-top: 3px;
          opacity: 0.5;

          &.fa-sort-down, &.fa-sort-up {
            opacity: 1;
          }

          &.fa-sort-down {
            margin-top: -3px;
          }

          &.fa-sort-up {
            margin-top: 3px;
          }

        }

        &:hover {
          cursor: pointer;

          i {
            opacity: 1;
          }

        }

        &.delta, &.id {
          @media all and (max-width: 500px) {
            display: none !important;
          }
        }
      }

      .rank {
        font-weight: bold;
        @include text-align(center);
        width: 50px;
      }

      .delta {
        @include text-align(left);
        width: 50px;

        .fa-caret-up {
          // color: #00cc00;
          color: $pri-c-highlight;
        }
        .fa-caret-down {
          // color: #cc0000;
          color: $sec-w-highlight;
        }
      }

      .id {
        @include text-align(center);
        width: 50px;
      }

      .country, .product {
        @include flex;
        @include align-items(center);
        @include justify(flex-start);
        max-width: 350px;
        img {
          @include margin-right(5px);
          width: 20px;
        }
      }

      .eci, .pci {
        width: 50px;
      }

      .rank, .eci, .pci {
        width: 20px;
      }

      .delta, .id {
        @media all and (max-width: 500px) {
          display: none;
        }
      }

    }

  }


}
