@import "shared-styles";

//$EXTRA_LARGE_FONT_SIZE: 32px;
.color-palette {
  margin: 0 auto;
  td {
    height: 90px;
    width: 180px;
    color: $WHITE_FONT_COLOR;
    font-size: 36px;
    text-shadow:
        -1px -1px $PRIMARY_FONT_COLOR,
        1px -1px $PRIMARY_FONT_COLOR,
        -1px 1px $PRIMARY_FONT_COLOR,
        1px 1px $PRIMARY_FONT_COLOR;
    text-align: center;
  }
}

// ******** Primary Colors ********
td[title="$RED"] {
  background-color: $RED;
}
td[title="$LIGHT_RED"] {
  background-color: $LIGHT-RED;
}
td[title="$DARK_RED"] {
  background-color: $DARK-RED;
}
td[title="$GREEN"] {
  background-color: $GREEN;
}
td[title="$LIGHT_GREEN"] {
  background-color: $LIGHT-GREEN;
}
td[title="$DARK_GREEN"] {
  background-color: $DARK-GREEN;
}
td[title="$BLUE"] {
  background-color: $BLUE;
}
td[title="$LIGHT_BLUE"] {
  background-color: $LIGHT-BLUE;
}
td[title="$DARK_BLUE"] {
  background-color: $DARK-BLUE;
}
td[title="$YELLOW"] {
  background-color: $YELLOW;
}
td[title="$LIGHT_YELLOW"] {
  background-color: $LIGHT-YELLOW;
}
td[title="$PURPLE"] {
  background-color: $PURPLE;
}
td[title="$DARK_PURPLE"] {
  background-color: $DARK-PURPLE;
}



// ******** Fonts ********
td[title="$PRIMARY_FONT_COLOR"] {
  background-color: $PRIMARY_FONT_COLOR;
}
td[title="$SECONDARY_FONT_COLOR"] {
  background-color: $SECONDARY_FONT_COLOR;
}
td[title="$TERTIARY_FONT_COLOR"] {
  background-color: $TERTIARY_FONT_COLOR;
}
td[title="$WHITE_FONT_COLOR"] {
  background-color: $WHITE_FONT_COLOR;
}

// ******** Backgrounds ********
td[title="$PRIMARY_BACKGROUND_COLOR"] {
  background-color: $PRIMARY_BACKGROUND_COLOR;
}
td[title="$SECONDARY_BACKGROUND_COLOR"] {
  background-color: $SECONDARY_BACKGROUND_COLOR;
}
td[title="$TERTIARY_BACKGROUND_COLOR"] {
  background-color: $TERTIARY_BACKGROUND_COLOR;
}

td[title="$GREEN_BACKGROUND_COLOR"] {
  background-color: $GREEN_BACKGROUND_COLOR;
}
td[title="$YELLOW_BACKGROUND_COLOR"] {
  background-color: $YELLOW_BACKGROUND_COLOR;
}
td[title="$RED_BACKGROUND_COLOR"] {
  background-color: $RED_BACKGROUND_COLOR;
}
td[title="$WHITE_BACKGROUND_COLOR"] {
  background-color: $WHITE_BACKGROUND_COLOR;
}
td[title="$BLUE_BACKGROUND_COLOR"] {
  background-color: $BLUE_BACKGROUND_COLOR;
}

// ******** Badge Colors ********
td[title="$BADGE_COLOR_ONE"] {
  background-color: $BADGE_COLOR_ONE;
}
td[title="$BADGE_COLOR_TWO"] {
  background-color: $BADGE_COLOR_TWO;
}
td[title="$BADGE_COLOR_THREE"] {
  background-color: $BADGE_COLOR_THREE;
}
td[title="$BADGE_COLOR_FOUR"] {
  background-color: $BADGE_COLOR_FOUR;
}
td[title="$BADGE_COLOR_FIVE"] {
  background-color: $BADGE_COLOR_FIVE;
}
td[title="$BADGE_COLOR_SIX"] {
  background-color: $BADGE_COLOR_SIX;
}
td[title="$BADGE_COLOR_SEVEN"] {
  background-color: $BADGE_COLOR_SEVEN;
}

// ******** Icon Colors ********
td[title="$ICON_COLOR_ONE"] {
  background-color: $ICON_COLOR_ONE;
}
td[title="$ICON_COLOR_TWO"] {
  background-color: $ICON_COLOR_TWO;
}
td[title="$ICON_COLOR_THREE"] {
  background-color: $ICON_COLOR_THREE;
}
td[title="$ICON_HOTNESS_COLOR"] {
  background-color: $ICON_HOTNESS_COLOR;
}
td[title="$ICON_ANDROID_COLOR"] {
  background-color: $ICON_ANDROID_COLOR;
}

// ******** Chart Colors ********
td[title="$CHART_COLOR_ONE"] {
  background-color: $CHART_COLOR_ONE;
}
td[title="$CHART_COLOR_TWO"] {
  background-color: $CHART_COLOR_TWO;
}
td[title="$CHART_COLOR_THREE"] {
  background-color: $CHART_COLOR_THREE;
}

td[title="$CHART_COLOR_FOUR"] {
  background-color: $CHART_COLOR_FOUR;
}
td[title="$CHART_COLOR_FIVE"] {
  background-color: $CHART_COLOR_FIVE;
}
td[title="$CHART_COLOR_SIX"] {
  background-color: $CHART_COLOR_SIX;
}

td[title="$CHART_COLOR_SEVEN"] {
  background-color: $CHART_COLOR_SEVEN;
}
td[title="$CHART_COLOR_EIGHT"] {
  background-color: $CHART_COLOR_EIGHT;
}
td[title="$CHART_COLOR_NINE"] {
  background-color: $CHART_COLOR_NINE;
}

// ******** Product Colors ********
td[title="$REPUTATION_INTELLIGENCE_COLOR"] {
  background-color: $REPUTATION_INTELLIGENCE_COLOR;
  .reputation-icon {
    color: $WHITE_FONT_COLOR;
    font-size: $EXTRA_LARGE_FONT_SIZE;
    text-shadow: none;
  }
}
td[title="$SOCIAL_MARKETING_COLOR"] {
  background-color: $SOCIAL_MARKETING_COLOR;
  .socialmarket-icon {
    color: $WHITE_FONT_COLOR;
    font-size: $EXTRA_LARGE_FONT_SIZE;
    text-shadow: none;
  }
}
td[title="$PRESENCE_BUILDER_COLOR"] {
  background-color: $PRESENCE_BUILDER_COLOR;
  .presence-icon {
    color: $WHITE_FONT_COLOR;
    font-size: $EXTRA_LARGE_FONT_SIZE;
    text-shadow: none;
  }
}
td[title="$BRAND_ANAYLTICS_COLOR"] {
  background-color: $BRAND_ANALYTICS_COLOR;
  .brand-icon {
    color: $WHITE_FONT_COLOR;
    font-size: $EXTRA_LARGE_FONT_SIZE;
    text-shadow: none;
  }
}
td[title="$CONCIERGE_COLOR"] {
  background-color: $CONCIERGE_COLOR;
  .concierge-icon {
    color: $WHITE_FONT_COLOR;
    font-size: $EXTRA_LARGE_FONT_SIZE;
    text-shadow: none;
  }
}
td[title="$BUSINESS_CENTER_COLOR"] {
  background-color: $BUSINESS_CENTER_COLOR;
}
td[title="$SALES_TOOL_COLOR"] {
  background-color: $SALES_TOOL_COLOR;
  .sales-icon {
    color: $WHITE_FONT_COLOR;
    font-size: $EXTRA_LARGE_FONT_SIZE;
    text-shadow: none;
  }
}

// ******** Service Colors ********
td[title="$TWITTER_COLOR"] {
  background-color: $TWITTER_COLOR;
  .twitter-icon {
    color: $WHITE_FONT_COLOR;
    font-size: $EXTRA_LARGE_FONT_SIZE;
    text-shadow: none;
  }
}
td[title="$FACEBOOK_COLOR"] {
  background-color: $FACEBOOK_COLOR;
  .facebook-icon {
    color: $WHITE_FONT_COLOR;
    font-size: $EXTRA_LARGE_FONT_SIZE;
    text-shadow: none;
  }
}
td[title="$GOOGLEPLUS_COLOR"] {
  background-color: $GOOGLEPLUS_COLOR;
  .googleplus-icon {
    color: $WHITE_FONT_COLOR;
    font-size: $EXTRA_LARGE_FONT_SIZE;
    text-shadow: none;
  }
}
td[title="$LINKEDIN_COLOR"] {
  background-color: $LINKEDIN_COLOR;
  .linkedin-icon {
    color: $WHITE_FONT_COLOR;
    font-size: $EXTRA_LARGE_FONT_SIZE;
    text-shadow: none;
  }
}
td[title="$FOURSQUARE_COLOR"] {
  background-color: $FOURSQUARE_COLOR;
  .foursquare-icon {
    color: $WHITE_FONT_COLOR;
    font-size: $EXTRA_LARGE_FONT_SIZE;
    text-shadow: none;
  }
}

// ******** Header Styles ********
#shared-header .title .prod-icon {
  color: $CHART_COLOR_SIX;
}

#knockoutTable {
  .v-select-wrap {
    width: 80px;
  }
}

#labels {
  @include pie-clearfix();
}

.progress-example > div {
  float: left;
  margin: 20px;
}

.v-button-group {
  width: 100%;
}

.icon-box {
  padding-bottom: 25px;
  text-align: center;
  .fec-icon {
    font-size: 2rem;
  }
}