.wp-block-hs-brandguide-colors {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%; }
  .wp-block-hs-brandguide-colors .width-100 {
    width: 100%; }
  .wp-block-hs-brandguide-colors .width-50 {
    width: 50%; }
  .wp-block-hs-brandguide-colors .width-33-33 {
    width: 33.33%; }
  .wp-block-hs-brandguide-colors .width-25 {
    width: 25%; }
  .wp-block-hs-brandguide-colors .width-16-66 {
    width: 16.66%; }
  .wp-block-hs-brandguide-colors .wp-block-hs-brandguide-color {
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    position: relative; }
    .wp-block-hs-brandguide-colors .wp-block-hs-brandguide-color > div {
      -ms-flex-positive: 1;
          flex-grow: 1;
      padding: 8px; }
    .wp-block-hs-brandguide-colors .wp-block-hs-brandguide-color.has-content > div:not(.has-content) {
      -ms-flex-positive: 0;
          flex-grow: 0; }
    .wp-block-hs-brandguide-colors .wp-block-hs-brandguide-color.has-content.width-16-66 {
      width: 25%; }
    @media only screen and (max-width: 600px) {
      .wp-block-hs-brandguide-colors .wp-block-hs-brandguide-color.has-content.width-33-33, .wp-block-hs-brandguide-colors .wp-block-hs-brandguide-color.has-content.width-25, .wp-block-hs-brandguide-colors .wp-block-hs-brandguide-color.has-content.width-16-66 {
        width: 50%; } }
    .wp-block-hs-brandguide-colors .wp-block-hs-brandguide-color.has-content ul {
      margin-left: 16px; }
  .wp-block-hs-brandguide-colors .color-simple-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column;
        flex-flow: column;
    height: 100%;
    -ms-flex-pack: center;
        justify-content: center;
    padding-bottom: 16px;
    padding-top: 16px; }
  .wp-block-hs-brandguide-colors .color-advanced-wrapper {
    padding-bottom: 104px; }
  .wp-block-hs-brandguide-colors .color-hex.center,
  .wp-block-hs-brandguide-colors .color-name.center {
    text-align: center; }
  .wp-block-hs-brandguide-colors .color-name {
    font-weight: bolder; }
  .wp-block-hs-brandguide-colors .color-extras {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-positive: 1;
        flex-grow: 1;
    font-size: .8em;
    -ms-flex-pack: end;
        justify-content: flex-end;
    margin-top: 24px; }
  .wp-block-hs-brandguide-colors .color-copy-link {
    color: inherit;
    font-size: 12px;
    opacity: 0;
    position: absolute;
    right: 8px;
    top: 8px;
    -webkit-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s; }
    .wp-block-hs-brandguide-colors .color-copy-link .copy-text,
    .wp-block-hs-brandguide-colors .color-copy-link .copied-text {
      font-weight: bolder;
      opacity: 0;
      padding: 4px;
      pointer-events: none;
      position: absolute;
      right: 0;
      top: 28px;
      -webkit-transition: opacity .2s;
      -o-transition: opacity .2s;
      transition: opacity .2s;
      white-space: nowrap;
      z-index: 1; }
      .wp-block-hs-brandguide-colors .color-copy-link .copy-text::before,
      .wp-block-hs-brandguide-colors .color-copy-link .copied-text::before {
        border: 5px solid;
        border-color: inherit;
        bottom: 100%;
        content: "";
        position: absolute;
        right: 2px; }
    .wp-block-hs-brandguide-colors .color-copy-link svg {
      height: 18px;
      width: 18px; }
    .wp-block-hs-brandguide-colors .color-copy-link:hover .copy-text {
      opacity: 1; }
  .wp-block-hs-brandguide-colors .wp-block-hs-brandguide-color:hover .color-copy-link {
    opacity: 1; }
  .wp-block-hs-brandguide-colors .wp-block-hs-brandguide-color.copied .copy-text {
    opacity: 0; }
  .wp-block-hs-brandguide-colors .wp-block-hs-brandguide-color.copied .color-copy-link,
  .wp-block-hs-brandguide-colors .wp-block-hs-brandguide-color.copied .copied-text {
    opacity: 1; }
  .wp-block-hs-brandguide-colors .color-extra-content {
    margin-top: 10px; }