body {
  font: 11px sans-serif;
  font-family: system-ui;
  margin: 0;
  overflow: hidden;
}



.tokens {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  flex: 1;

  overflow-y: hidden;

  display: flex !important;
  flex-flow: row nowrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}

  .groupCol, .patternCol, .valuesetCol, .codeCol {
    /* flex: 1; */
    padding: 0 20px;
    padding-top: 20px;
    overflow-y: scroll;
  }

  .groupCol {
    border-right: 1px solid #E5E5E5;
    width: 100px;
    background-color: #fff;
  }

  .patternCol {
    border-right: 1px solid #E5E5E5;
    width: 160px;
    background-color: #F8F8F8;
  }

    .groupRow {
      font-size: 10px;
      color: #858585;
      padding: 6px 0;
      text-transform: uppercase;
      cursor: pointer;
      cursor: hand;
      position: relative;
      z-index: 1;
    }
      .groupRow:hover::before {
        content: " ";
        position: absolute;
        left: -8px; right: -8px;
        top: 0; bottom: 0;
        background-color: #eee;
        z-index: -10;
        border-radius: 4px;
      }

      .groupRow.selected::before {
        content: " ";
        position: absolute;
        left: -8px; right: -8px;
        top: 0; bottom: 0;
        background-color: #eee;
        z-index: -10;
        border-radius: 4px;
      }

      .groupRow.selected:hover::before {
        content: " ";
        position: absolute;
        left: -8px; right: -8px;
        top: 0; bottom: 0;
        background-color: #ddd;
        z-index: -10;
        border-radius: 4px;
      }

    .patternList {
      padding-bottom: 20px;
    }

      .patternRow {
        font-size: 12px;
        color: #000000;
        padding: 6px 0;
        cursor: pointer;
        cursor: hand;
        position: relative;
        margin-bottom: 2px;
        z-index: 1;
      }

        .patternRow:hover::before {
          content: " ";
          position: absolute;
          left: -8px; right: -8px;
          top: 0; bottom: 0;
          background-color: #eee;
          z-index: -10;

          border-radius: 4px;
        }

        .patternRow.selected::before {
          content: " ";
          position: absolute;
          left: -8px; right: -8px;
          top: 0; bottom: 0;
          background-color: #eee;
          z-index: -10;
          border-radius: 4px;
        }

        .patternRow.selected:hover::before {
          content: " ";
          position: absolute;
          left: -8px; right: -8px;
          top: 0; bottom: 0;
          background-color: #ddd;
          z-index: -10;

          border-radius: 4px;
        }

  .valuesetCol {
    /* flex: 1.4; */
    width: 200px;
    background-color: #F8F8F8;
  }

  .valuesetCol::-webkit-scrollbar-thumb {
    border: 4px solid #F8F8F8;
  }

    .valueRow {
      margin-bottom: 16px;
      cursor: pointer;
      cursor: hand;
      position: relative;
      z-index: 10;
    }

      .valueRow:hover::before {
        content: " ";
        position: absolute;
        left: -8px; right: -8px;
        top: -8px; bottom: -8px;
        background-color: #eee;
        z-index: -10;
        border-radius: 4px;
      }

      .valueRow.selected::before {
        content: " ";
        position: absolute;
        left: -8px; right: -8px;
        top: -8px; bottom: -8px;
        background-color: #eee;
        z-index: -10;
        border-radius: 4px;
      }

      .valueRow.selected:hover::before {
        content: " ";
        position: absolute;
        left: -8px; right: -8px;
        top: -8px; bottom: -8px;
        background-color: #ddd;
        z-index: -10;
        border-radius: 4px;
      }

    .valueRow * {
      position: relative;
      z-index: 1;
    }

      .chip {
        background-color: white;
        margin-top: 4px;
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12);
      }

      .chip.color {
        height: 23px;
        border-radius: 2px;
        width: 100%;
      }

      .chip.effect {
        height: 23px;
        border-radius: 2px;
        width: 100%;
        margin-top: 8px;
        margin-bottom: 8px;
      }

      .chip.text {
        padding: 8px;
      }

      .chip.icon {
        width: 40px; height: 40px;
      }

      .chip.comp {
        background-color: rgba(0,0,0,0);
        height: 80px;
        position: relative;
        box-shadow: none;
      }

        .compContent {
          position: absolute;
          /*top: 8px; right: 8px; left: 8px; bottom: 8px;*/
          top: 0; right: 0; left: 0; bottom: 0;
        }

        .compContentBody {
          position: absolute;
          border: 2px dotted rgba(150,150,150,0.5);
        }

      .valueTitle {
        font-size: 12px;
      }
    

      .codeCol h1 {
        color: #fff;
      }

        .codeCol .version {
          position: fixed;
          bottom: 20px; right: 20px;
          color: white;
        }
      
      .mixinExample {
        padding: 4px 10px;
        border-radius: 4px;
        position: relative;
        cursor: pointer;
      }
        .mixinExample:hover {
          background-color: #333;
        }
        .mixinExample:hover:after {
          content: "copy to clipboard";
          color: #aaa;
          position: absolute;
          right: 10px;
          top: calc( 50% - 8px );
        }

  .codeCol {
    position: relative;
    flex: 1;
    background-color: #000;

    color: #fff;
    padding-bottom: 40px;
  }


::-webkit-scrollbar {
    width: 12px;
}
  
::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0); 
}
  
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #ccc; 
    border: 4px solid #fff;
}

.codeCol::-webkit-scrollbar-thumb {
  background-color: #555; 
  border: 4px solid #000;
}