/* Variables - a mix of Old and New */

:root {

/* Octagon Design System Colors */

/* Start Yung's palette */ 

  /* COLORS */
  /* primary */

  /*--black: #000000;*/

  /* secondary */
/* End Yung's palette */

  /* Components Colors */

  /* Basic Colors used in components*/ /* was used for sidebar - Yung's theme uses slightly lighter charcoal #454545*/
  
  /* other */

  /* margins */
}

.octagon.microcard {
  color: #777776;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr;
  font-size: 13.6px;
  font-size: 0.85rem;
  height: 90px;
  width: 300px
}

.octagon.microcard .text-uppercase {
text-transform: uppercase;
}

.octagon.microcard.bordered {
border: 2px solid rgb(229, 230, 231);
}

.octagon.microcard .microcard__message {
grid-area: message;
text-transform: uppercase
}

.octagon.microcard .microcard__message h3, .octagon.microcard .microcard__message h4 {
margin: 0;
}

.octagon.microcard .microcard__message h3 {
font-size: 17.5px;
font-weight: 400;
}

.octagon.microcard .microcard__message h4 {
font-size: 12px;
}

.octagon.microcard .microcard__count {
bottom: 5px;
color: #bdc3c7;
font-size: 42.4px;
font-size: 2.65rem;
position: absolute;
right: 25px;
}

.microcard__content {
  padding: 0 4px;
}

.microcard--variant-a {
  grid-template-areas:
    "gutter header header"
    "gutter primary secondary"
}

.microcard--variant-a .microcard_header {
-ms-flex-item-align: center;
    align-self: center;
color: #666666;
font-size: 1.2em;
grid-area: header;
padding: 4px 0 0 4px;
}

.microcard--variant-a .microcard__gutter {
grid-area: gutter;
width: 8px;
}

.microcard--variant-a .microcard__gutter--hidden {
width: 0;
}

.microcard--variant-a .microcard__primary {
grid-area: primary;
}

.microcard--variant-a .microcard__secondary {
grid-area: secondary;
padding: 2px;
}
