@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700|Roboto:400,500,700");

.direction-up,
.change.up {
  color: rgba(143, 211, 49, 1.0) !important;
}

.direction-down,
.change.down {
  color: #F13F42 !important;
}

/* Grid Areas */

.layout-item.sidebar {
  grid-area: sidebar;
}

.layout-item.content {
  grid-area: content;
}

.layout-item.header {
  grid-area: header;
}

/* Grid */

.application {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header"
    "sidebar content";
  color: #444;
  background: #0A0A0B;
  height: 100vh;
  width: 100vw;
}

/* Header */

.layout-item.header {
  padding: 0 0 0 15px;
  height: 30px;
  line-height: 30px;
  background-color: #0A0A0B;
  display: flex;
  position: relative;
  z-index: 2;
}

.layout-item.header .header-logo {
  font-weight: 600;
  color: #ebebeb;
  flex: 1;
  -webkit-app-region: drag;
}

.layout-item.header .header-logo .header-image {
  width: 18px;
  margin-right: 4px;
  position: relative;
  top: 2px;
  display: inline-block;
}

.layout-item.header .header-logo .header-text {
  top: -1px;
  position: relative;
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.layout-item.header .btn {
  background: none;
  padding: 0 5px;
}

.layout-item.header .btn:hover {
  box-shadow: none;
  background: rgba(255,255,255,0.1)
}


/* Content */

.layout-item.content {
  width: 100%;
  border-radius: 5px 0 0 0;
  overflow: auto;
}

/* Portfolio */

.portfolio-breakdown {
  margin-top: 15px;
  margin-bottom: 30px;
  display: grid;
  grid-gap: 30px 15px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  text-align: center;
}

.portfolio-breakdown h4, h5 {
  margin: 0;
  padding: 0;
  font-weight: 500;
}

.portfolio-breakdown h4 {
  color: #aaa;
  font-family: 'Roboto Mono', monospace;
}