.cui-icon {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  color: #546e7a; }
  .cui-icon svg {
    height: 16px;
    width: 16px;
    min-width: 16px;
    min-height: 16px; }
  .cui-icon svg {
    display: block;
    stroke: currentColor;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none; }
  .cui-icon.cui-icon-action:hover {
    cursor: pointer;
    color: #263238; }
  .cui-icon.cui-xs svg,
  .cui-xs .cui-icon svg {
    height: 14px;
    width: 14px;
    min-width: 14px;
    min-height: 14px; }
  .cui-icon.cui-sm svg,
  .cui-sm .cui-icon svg {
    height: 14px;
    width: 14px;
    min-width: 14px;
    min-height: 14px; }
  .cui-icon.cui-lg svg,
  .cui-lg .cui-icon svg {
    height: 18px;
    width: 18px;
    min-width: 18px;
    min-height: 18px; }
  .cui-icon.cui-xl svg,
  .cui-xl .cui-icon svg {
    height: 20px;
    width: 20px;
    min-width: 20px;
    min-height: 20px; }
  .cui-icon.cui-primary,
  .cui-primary > .cui-icon {
    color: #5c6bc0; }
    .cui-icon.cui-primary.cui-icon-action:hover,
    .cui-primary > .cui-icon.cui-icon-action:hover {
      color: #5360ad; }
  .cui-icon.cui-positive,
  .cui-positive > .cui-icon {
    color: #4caf50; }
    .cui-icon.cui-positive.cui-icon-action:hover,
    .cui-positive > .cui-icon.cui-icon-action:hover {
      color: #449e48; }
  .cui-icon.cui-negative,
  .cui-negative > .cui-icon {
    color: #f44336; }
    .cui-icon.cui-negative.cui-icon-action:hover,
    .cui-negative > .cui-icon.cui-icon-action:hover {
      color: #dc3c31; }
  .cui-icon.cui-warning,
  .cui-warning > .cui-icon {
    color: #f57c00; }
    .cui-icon.cui-warning.cui-icon-action:hover,
    .cui-warning > .cui-icon.cui-icon-action:hover {
      color: #dd7000; }