/* colors */
/* logo icon colors */
/* color shades */
/* heatmap display */
/* categorical display */
/* colors */
/* logo icon colors */
/* color shades */
/* heatmap display */
/* categorical display */
/* colors */
/* logo icon colors */
/* color shades */
/* heatmap display */
/* categorical display */
/* /styles/mixins.scss */
.gio-flip-container {
  perspective: 1000px;
  padding: 0; }

/* flip the pane when hovered */
.gio-flip-container:hover:not(.no-hover) .gio-flipper:not(.no-hover), .gio-flip-container.hover .gio-flipper:not(.no-hover) {
  transform: rotateY(180deg);
  transition-delay: 0.2s; }

/* flip speed goes here */
.gio-flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
  width: 100%;
  height: 100%; }
  .gio-flipper__front, .gio-flipper__back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 2.5px;
    height: 100%;
    left: 0;
    overflow: hidden;
    padding: 5px 10px;
    position: absolute;
    text-align: right;
    top: 0;
    width: 100%; }
  .gio-flipper__front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg); }
  .gio-flipper__back {
    word-break: break-all;
    height: 30px;
    transform: rotateY(180deg); }
    .gio-flipper__back.vertical {
      transform: rotateX(180deg); }

.clickable {
  cursor: pointer; }