/* UX guide CSS overrides */
body {
  color: #0A0E0D;
  font-family: 'Lato', Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Bryant, Helvetica, sans-serif;
  overflow: hidden;
  src: url(/fonts/Bryant-Regular.ttf);
  text-overflow: ellipsis;
}
h1 {
  color: #65B360 !important;
  font-family: 'Bryant-Bold', Helvetica, sans-serif;
  font-size: 2.5rem;
  font-weight: bold;
  src: url(/fonts/Bryant-Bold.ttf);
  text-transform: uppercase;
}
h2 {
  color: #65B360 !important;
  font-family: 'UniversLTStd-LightCn', Helvetica, sans-serif;
  font-weight: 200;
  src: url(/fonts/UniversLTStd-LightCn.otf);
}
.title {
  background-color: #65B360;
  background-image: -webkit-linear-gradient(top, #89C75E, #65B360);
}
.title h1 {
  padding-left: 0.5rem;
}
fieldset label {
  line-height: 1.7rem;
}
input.error {
  border-color: #F04124;
}
#main-wrapper {
  background-color: #F0F0F0;
}
#sidebar, #sidebar > div {
  background: #FFF;
}
#sidebar input {
  font-size: 75%;
  height: inherit;
  margin-bottom: 0.5rem;
}
#sidebar .search-results {
  background-color: #FFF;
  border: 1px solid #DDD;
  left: 1.4rem;
  overflow: hidden;
  padding-bottom: 0.008rem;
  position: absolute;
  text-overflow: ellipsis;
  top: 2rem;
  width: 97%;
}
.search-results ul {
  list-style: none;
}
.highlight {
  background-color: yellow;
}
#main {
  background-color: #F0F0F0;
  visibility: hidden;
}
small {
  font-size: 80%;
}
sup {
  padding-left: 0.25rem;
}

ul.menu-bar {
  margin-bottom: 1rem;
  overflow-x: auto;
}
ul.menu-bar li a:hover {
  background-color: #048F8E;
  color: #FDFDFD;
}
p.description {
  background: #FFF;
  padding: 0.6rem;
}
/*** Colors ***/
ul.colors {
  list-style: none;
}
ul.colors li {
  border: 1px solid #CCC;
  display: list-item;
  float: left;
  font-size: 0.8rem;
  margin: 0 0.2rem 0.5rem 0;
  padding: 0.5rem;
  text-align: center;
}
.swatch {
  display: block;
  height: 100px;
  margin-bottom: 0.5rem;
  width: 100px;
}

/*** Icons ***/
.icon-placeholder {
  color: #EEE;
  font-size: 20rem;
}
#icons-font-awesome i {
  font-weight: normal;
  padding-right: 1rem;
}

.material-icons, .accordion .accordion-item .accordion-content .inner-accordion .accordion .accordion-item.is-active .accordion-title::after, .accordion .accordion-item .accordion-content .inner-accordion .accordion .accordion-item .accordion-title::after, .menu-panel + .grid-block .accordion .accordion-item .accordion-title::after, .menu-panel + mobi-dashboard-item-title .accordion .accordion-item .accordion-title::after, button.copy-to-clipboard::before, .card.info-card .card-section .accordion .accordion-item.is-active .accordion-title::after, .card.info-card .card-section .accordion .accordion-item .accordion-title::after, .card.info-card .charts .chart .chart-item .accordion .accordion-item .accordion-title::after, .charts .chart .card.info-card .chart-item .accordion .accordion-item .accordion-title::after, .person .info-card .card-section .accordion .accordion-item.is-active .accordion-title::after, .person .info-card .card-section .accordion .accordion-item .accordion-title::after, .person .info-card .charts .chart .chart-item .accordion .accordion-item .accordion-title::after, .charts .chart .person .info-card .chart-item .accordion .accordion-item .accordion-title::after, .spin-container::before, input + .identifier::before, .list-items ul li .accordion .accordion-item .accordion-content .accordion .accordion-item.is-active .accordion-title::after, .list-items ul li .accordion .accordion-item .accordion-content .accordion .accordion-item .accordion-title::after, mobi-dashboard-item-title .accordion-title-link::before, mobi-dashboard-item-title .title-menu::before, mobi-dashboard-item-title .reorder-item::before, .notifications li::before {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 1rem;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}
.material-icons.small {
  font-size: 80%;
}
.material-icons.medium {
  font-size: 120%;
}
.material-icons.large {
  font-size: 135%;
}
.material-icons.x-large {
  font-size: 165%;
}
.material-icons.xx-large {
  font-size: 200%;
}
.material-icons.huge {
  font-size: 500%;
}

/*** Metrics ***/
.metric-value {
  background-color: #65B360;
  background-image: -webkit-linear-gradient(top, #89C75E, #65B360);
}

/*** Card customization ***/
.card {
  border: 1px solid #C4C4C4;
}
.card .preview {
  background-color: #F0F0F0;
  padding: 2rem;
}
.card.column {
  padding: 0;
}
.card-divider {
  background-color: #F0F0F0;
  border-bottom: 1px solid #C4C4C4;
  color: #0A0E0D;
  font-size: 120%;
  font-weight: bold;
}
.card-section small {
  color: #048F8E;
}
.card-section label {
  font-size: 120%;
  font-weight: bold;
}

.card-divider-buttons {
  float: right;
}
.card-divider-buttons .actions {
  color: #65B360;
}
.card.setting .card-divider {
  font-size: 1em;
  font-weight: bold;
}
.card.conditional .card-divider select {
  margin-bottom: 0;
}
.card.conditional .card-divider .grid-content + .grid-content {
  line-height: 2rem;
}
.card.conditional .card-divider .button {
  margin: 0 0.5rem 0 0;
}
.card.conditional .card-section button {
  margin: 0;
}
.card.conditional .condition:hover {
  background-color: #EEE;
}
.card.conditional .form-label:hover {
  cursor: move;
}


/* Info Cards */

.card .info .card-divider-title span {
  float: left;
}
.card .info .card-divider-title .label {
  margin-left: 1rem;
}
.card .info .card-divider-buttons .actions {
  float: right;
}
.card .info .card-divider-buttons .fa {
  margin-right: .5rem;
}
.card .info .card-section .device-image {
  vertical-align: top;
}
.card .info .card-section .device-image .fa-mobile-phone {
  font-size: 2000%;
}
.card .info .card-section .card-details .accordion {
  border: none;
}
.card .info .card-section .card-details .accordion-title {
  background: none;
}
.card .info .card-section .card-details .accordion-title:hover {
  background: #F0F0F0;
}
.card .info .card-section .card-details .accordion-title dl {
  font-size: 1.2rem;
}
.card .info .card-section .card-details .accordion-content {
  font-size: 1rem;
}
.card .info .card-section .card-details dl {
  margin-bottom: 0;
  overflow: auto;
}
.card .info .card-section .card-details dl dt,
.card .info .card-section .card-details dl dd {
  float: left;
  margin-bottom: 0;
}
.card .info .card-section .card-details dl dt {
  clear: left;
  font-weight: bold;
  margin-right: 2%;
  width: 33%;
}
.card .info .card-section .card-details dl dd {
  margin-left: 0;
  margin-right: 3%;
  width: 62%;
}
.card .info .card-section .card-details dl dd i {
  padding-left: .5rem;
}

/** Change accordion expand/collapse icons **/
@charset "UTF-8";
.accordion-item > a:before {
  content: "▸";
  padding-left: 5px;
  float: right;
  font-size: 20px;
}
.accordion-item.is-active > a:before {
  content: "▾";
}

/** Icon cards **/

#icons-google-material h4 {
  margin-top: 1rem;
}
#icons-google-material .card {
  min-height: 185px;
  min-width: 200px;
  overflow-y: auto;
}

#icons-google-material .card-divider {
  background: none;
  border: none;
}
#icons-google-material.card .card-section pre {
  font-size: 75%;
  max-width: 300px;
  overflow-x: auto;
}
.icon-group {
  margin: 1rem 0;
}
.icon-preview {
  float: left;
  margin: 0 1.4rem;
}
.icon-preview .material-icons {
  vertical-align: -webkit-baseline-middle;
}
.icon-code {
  margin-left: 5rem;
}
/*** Tables ***/
table.tablesaw thead {
  border: none;
}
.tablesaw thead tr:first-child th {
  border-right: 1px solid #ccc;
  font-weight: bold;
  text-shadow: none;
  text-transform: none;
}
.tablesaw thead th {
  background-color: #65B360;
  color: #FDFDFD !important;
}
.tablesaw tbody {
  border: 1px solid #ccc;
}
.tablesaw tbody tr:nth-child(even) {
  background-color: #fff;
}
.tablesaw tr:nth-child(odd) {
  background-color: #f1f1f1;
}
.tablesaw tbody td {
  font-size: 0.875em;
}

/*** Alerts ***/
.alert-box {
  background-color: #DB1F26;
  color: #FDFDFD;
  margin-bottom: 1rem;
  margin-top: 2rem;
  padding: 1.5rem;
}
.alert-box.alert {
  background-color: #DB1F26;
}
.alert-box.info {
  background-color: #048F8E;
}
.alert-box i {
  font-style: normal;
}
.alert-box .fa:before {
  float: left;
  margin-right: 1rem;
  @include breakpoint(small) {
    font-size: 200%;
    margin-bottom: 1rem;
  }
  @include breakpoint(medium) {
    font-size: 125%;
  }
}

/*** Buttons ***/
.button span {
  margin-left: 0.2rem;
  vertical-align: 3px;
}

.button-group > li a i {
  position: relative;
  top: 2px;
}
.button-group > li {
  margin-left: 2px;
}
.button.secondary, .button.secondary:hover {
  background-color: #048F8E;
  color: #FFF;
}
.button.cancel {
  background-color: #C4C4C4;
}
.button.cancel:hover {
  background-color: #9e9e9e;
}
.button.cancel:active {
  background-color: #519e4c;
}
.button.warning, .button.warning:hover {
  background-color: #E0C426;
  color: #0A0E0D;
}

/* Navigation */
#navigation .card {
  max-height: 25rem;
  overflow-y: scroll;
}
.navigation h5 {
  font-weight: bold;
  margin-left: 1rem;
}
.navigation .sub1 h6 {
  margin-left: 3rem;
}
.navigation .sub2 h6 {
  margin-left: 5rem;
}