/*--------------------------------------------------------------*\
    Colors
\*--------------------------------------------------------------*/
.ccm-page .color-swatches {
  margin: 0 -5px;
  overflow: hidden;
}
.ccm-page .color-swatch {
  border-radius: 3px;
  float: left;
  height: 60px;
  margin: 5px 5px;
  width: 60px;
}
@media (min-width: 768px) {
  .ccm-page .color-swatch {
    height: 100px;
    width: 100px;
  }
}
.ccm-page .color-swatch.brand-primary {
  background-color: #0a5192;
}
.ccm-page .color-swatch.brand-secondary {
  background-color: #908380;
}
.ccm-page .color-swatch.brand-third {
  background-color: #7f726f;
}
.ccm-page .color-swatch.brand-success {
  background-color: #5cb85c;
}
.ccm-page .color-swatch.brand-info {
  background-color: #777;
}
.ccm-page .color-swatch.brand-warning {
  background-color: #f0ad4e;
}
.ccm-page .color-swatch.brand-danger {
  background-color: #d9534f;
}
.ccm-page .color-swatch.gray-base {
  background-color: #dedad9;
}
.ccm-page .color-swatch.gray-darker {
  background-color: #887f7c;
}
.ccm-page .color-swatch.gray-dark {
  background-color: #b0a4a5;
}
.ccm-page .color-swatch.gray {
  background-color: #d3cecc;
}
.ccm-page .color-swatch.gray-light {
  background-color: #efedec;
}
.ccm-page .color-swatch.gray-lighter {
  background-color: #f4f2f2;
}
.ccm-page .pksl-metrics-short.default {
  margin: 0 -15px;
}
@media (min-width: 768px) {
  .ccm-page .pksl-metrics-short.default {
    align-items: center;
    bottom: 0;
    display: flex;
    left: 15px;
    max-width: 350px;
    position: absolute;
    top: 0;
    z-index: 2;
  }
}
.ccm-page .pksl-metrics-short.default .wrapper {
  background-color: #d3cfcf;
  padding: 19px 15px;
}
@media (min-width: 992px) {
  .ccm-page .pksl-metrics-short.default .wrapper {
    padding: 30px 15px;
  }
}
.ccm-page .pksl-metrics-short.default .wrapper .metric {
  display: flex;
}
.ccm-page .pksl-metrics-short.default .wrapper .metric:not(:first-of-type) {
  padding-top: 21px;
}
.ccm-page .pksl-metrics-short.default .wrapper .metric:not(:last-of-type) {
  border-bottom: 1px solid #fff;
  padding-bottom: 20px;
}
.ccm-page .pksl-metrics-short.default .wrapper .metric .content {
  flex-grow: 1;
  margin-right: 23px;
}
@media (min-width: 768px) {
  .ccm-page .pksl-metrics-short.default .wrapper .metric .content {
    min-width: 230px;
  }
}
@media (min-width: 992px) {
  .ccm-page .pksl-metrics-short.default .wrapper .metric .content {
    min-width: 250px;
  }
}
.ccm-page .pksl-metrics-short.default .wrapper .metric .content .additional,
.ccm-page .pksl-metrics-short.default .wrapper .metric .content .heading {
  display: flex;
  justify-content: space-between;
}
.ccm-page .pksl-metrics-short.default .wrapper .metric .content .additional {
  font-size: 0.85em;
}
.ccm-page .pksl-metrics-short.default .wrapper .metric .content .color-blue {
  color: #0a5192;
}
.ccm-page .pksl-metrics-short.default .wrapper .metric .content .color-white {
  color: #fff;
}
.ccm-page .pksl-metrics-short.default .wrapper .metric .content .heading {
  color: #0a5192;
  font-weight: bold;
}
.ccm-page .pksl-metrics-short.default .wrapper .metric .content .heading > div:first-child {
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ccm-page .pksl-metrics-short.default .wrapper .metric .icon {
  display: flex;
}
.ccm-page .pksl-metrics-short.default .wrapper .metric .icon img {
  width: 48px;
}
html.ccm-edit-mode .ccm-page .pksl-metrics-short {
  position: static;
}