﻿.flex-grid > .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #FFFFFF;
  border: none;
  border-bottom: 2px solid #eef0f0;
  transition: all 200ms ease-in-out;
  margin-left: 0px;
  margin-right: 0px; }

.flex-grid > .row.header {
  border-bottom: 2px solid #eef0f0;
  font-weight: 700;
  font-size: 14px; }

.flex-grid > .row:first-child {
  border-top: 1px solid #ddd; }

/* Border versions */
.flex-grid.bordered {
  border: 1px solid #eef0f0; }

.flex-grid.bordered > .row:first-child {
  border-top: none; }

.flex-grid.bordered > .row .col {
  border: 1px solid #eef0f0; }

.flex-grid > .row.header.no-border {
  border-bottom: none; }

/* Zebra-striping */
.flex-grid.striped > .row:nth-of-type(2n) {
  background-color: #f9fafb; }

/* Hover effect */
.flex-grid.striped > .row:hover:nth-of-type(2n) {
  background-color: #f9fafb; }

.flex-grid > .row.summary {
  border-top: 1px solid #ababab;
  border-bottom: 1px solid #ababab;
  background-color: rgba(0, 0, 0, 0.05);
  font-weight: 500;
  font-size: 13px; }

.flex-grid > .row.summary:hover {
  background-color: color("alabaster");
  border: 1px solid color("cornflower"); }

.flex-grid > .row .col {
  white-space: normal;
  font-size: 14px; }

/*report engine col overrides to allow report to scroll versus wrap*/
.flex-grid > .row .col {
  min-width: 80px;
  padding: 8px 5px 8px 5px; }

.flex-grid > .row .col.auto-size {
  min-width: 5%;
  padding-left: 1%;
  padding-right: 1%; }

.flex-grid > .row .col.nowrap {
  white-space: nowrap; }

/*override auto col widths as needed*/
.flex-grid > .row .col.col-icon {
  min-width: 35px;
  width: 35px;
  -ms-flex-preferred-size: 35px;
  flex-basis: 35px;
  max-width: 35px;
  font-size: 16px; }

.flex-grid > .row .col.col-avatar {
  min-width: 80px;
  width: 80px;
  -ms-flex-preferred-size: 80px;
  flex-basis: 80px;
  max-width: 80px;
  height: 80px;
  font-size: 42px;
  font-weight: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24px;
  color: color("white");
  border-radius: 4px; }

.flex-grid > .row .col.col-x-small {
  min-width: 50px;
  width: 50px;
  -ms-flex-preferred-size: 50px;
  flex-basis: 50px;
  max-width: 50px; }

.flex-grid > .row .col.col-small {
  min-width: 90px;
  width: 90px;
  -ms-flex-preferred-size: 90px;
  flex-basis: 90px;
  max-width: 90px; }

.flex-grid > .row .col.col-smedium {
  min-width: 130px;
  width: 130px;
  -ms-flex-preferred-size: 130px;
  flex-basis: 130px;
  max-width: 130px; }

.flex-grid > .row .col.col-medium {
  min-width: 160px;
  width: 160px;
  -ms-flex-preferred-size: 160px;
  flex-basis: 160px;
  max-width: 160px; }

.flex-grid > .row .col.col-large {
  min-width: 200px;
  width: 200px;
  -ms-flex-preferred-size: 200px;
  flex-basis: 200px;
  max-width: 200px; }

.flex-grid > .row .col.col-x-large {
  min-width: 250px;
  width: 250px;
  -ms-flex-preferred-size: 250px;
  flex-basis: 250px;
  max-width: 250px; }

.flex-grid > .row .col.col-10 {
  min-width: 10%;
  width: 10%;
  -ms-flex-preferred-size: 10%;
  flex-basis: 10%;
  max-width: 10%; }

.flex-grid > .row .col.col-15 {
  min-width: 15%;
  width: 15%;
  -ms-flex-preferred-size: 15%;
  flex-basis: 15%;
  max-width: 15%; }

.flex-grid > .row .col.col-20 {
  min-width: 20%;
  width: 20%;
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  max-width: 20%; }

.flex-grid > .row .col.col-25 {
  min-width: 25%;
  width: 25%;
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%; }

.flex-grid > .row .col.col-30 {
  min-width: 30%;
  width: 30%;
  -ms-flex-preferred-size: 30%;
  flex-basis: 30%;
  max-width: 30%; }

.flex-grid > .row .col.col-40 {
  min-width: 40%;
  width: 40%;
  -ms-flex-preferred-size: 40%;
  flex-basis: 40%;
  max-width: 40%; }

.flex-grid > .row .col.col-50 {
  min-width: 50%;
  width: 50%;
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%; }

.flex-grid > .row .col.col-60 {
  min-width: 60%;
  width: 60%;
  -ms-flex-preferred-size: 60%;
  flex-basis: 60%;
  max-width: 60%; }

.flex-grid > .row .col.col-70 {
  min-width: 70%;
  width: 70%;
  -ms-flex-preferred-size: 70%;
  flex-basis: 70%;
  max-width: 70%; }

.flex-grid > .row .col.col-80 {
  min-width: 80%;
  width: 80%;
  -ms-flex-preferred-size: 80%;
  flex-basis: 80%;
  max-width: 80%; }

.flex-grid > .row .col.col-90 {
  min-width: 90%;
  width: 90%;
  -ms-flex-preferred-size: 90%;
  flex-basis: 90%;
  max-width: 90%; }

/*col alignment*/
.flex-grid > .row .col.left {
  text-align: left; }

.flex-grid > .row .col.center {
  text-align: center; }

.flex-grid > .row .col.right {
  text-align: right; }

/*row vertical alignment*/
.flex-grid > .row.top {
  align-items: flex-start; }

.flex-grid > .row.center {
  align-items: center; }

.flex-grid > .row.bottom {
  align-items: flex-end; }

.flex-grid > .row .col.nowrap .btn-icon-solo,
.flex-grid > .row .col.nowrap .btn-inline-add {
  display: inline-flex; }
