html {
  font-size: 16px;
}
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
@media (min-width: 768px) {
  body {
    overflow-y: auto;
  }
}
h6 {
  font-size: 0.85rem;
}
h5 {
  font-size: 1rem;
}
h4 {
  font-size: 1.25rem;
}
h3 {
  font-size: 1.5rem;
}
h2 {
  font-size: 1.75rem;
}
h1 {
  font-size: 2rem;
}
a[ng-click],
a[onclick],
a[ui-sref] {
  cursor: pointer;
}
body {
  font-size: 1rem;
  background: #efefef;
}
header {
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
          justify-content: space-between;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
  padding: .5em 2em;
  background: #ddd;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
header h1,
header h2,
header h3,
header h4,
header h5,
header h6 {
  margin: 0;
}
header login {
  position: relative;
  text-align: right;
  -webkit-order: 2;
     -moz-box-ordinal-group: 3;
          order: 2;
}
@media (min-width: 768px) {
  header {
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    margin-bottom: 1em;
  }
}
.c-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5em 0;
  background: #ddd;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
          justify-content: space-between;
  -webkit-align-items: stretch;
     -moz-box-align: stretch;
          align-items: stretch;
}
.c-nav > .btn {
  -webkit-flex: 1;
     -moz-box-flex: 1;
          flex: 1;
}
@media (min-width: 768px) {
  .c-nav {
    display: none;
  }
}
.l-page {
  position: relative;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-flex-direction: row;
     -moz-box-orient: horizontal;
     -moz-box-direction: normal;
          flex-direction: row;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
          justify-content: space-between;
  -webkit-align-items: stretch;
     -moz-box-align: stretch;
          align-items: stretch;
  height: 100%;
  width: 100%;
}
.l-page > .l-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  max-width: 0;
  min-width: 0;
  overflow-x: hidden;
  transition: all ease 0.5s;
  background: #333;
  color: #fff;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.l-page > .l-sidebar.is-open {
  max-width: 16em;
  min-width: 16em;
}
.l-page > .l-main {
  -webkit-flex: 1;
     -moz-box-flex: 1;
          flex: 1;
  overflow: auto;
  /* note: any children should probably have padding applied */
}
.l-page > .l-main > [ng-view],
.l-page > .l-main > [ui-view] {
  height: 100%;
  width: 100%;
}
@media (min-width: 1200px) {
  .l-page > .l-sidebar {
    position: relative;
    -webkit-flex: 1;
       -moz-box-flex: 1;
            flex: 1;
    max-width: 16em;
    min-width: 16em;
  }
}
#nav-button {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
}
@media (min-width: 1200px) {
  #nav-button {
    display: none;
  }
}
.l-container {
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
          flex-direction: column;
  -webkit-justify-content: space-around;
          justify-content: space-around;
  -webkit-align-items: flex-start;
     -moz-box-align: start;
          align-items: flex-start;
}
@media (min-width: 768px) {
  .l-container {
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
            flex-direction: row;
  }
}
.l-column {
  width: 100%;
}
@media (min-width: 768px) {
  .l-column {
    -webkit-flex: 1;
       -moz-box-flex: 1;
            flex: 1;
  }
  .l-column.has-gutter {
    margin-right: 1em;
  }
  .l-column.has-gutter:last-child {
    margin-right: 0;
  }
}
.c-character {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2em 1em;
  overflow-y: auto;
}
@media (min-width: 768px) {
  .c-character {
    position: relative;
    padding: 1em 2em;
    top: 0;
  }
}
.form-control {
  background: #feffeb;
}
.c-btn {
  font-size: 1em;
  width: 2.5em;
  height: 2.5em;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
  border: 0;
  border-radius: 100%;
}
.c-btn--danger {
  color: #d9534f;
  background: transparent;
}
.c-btn--danger:hover {
  background: #d9534f;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.c-btn--info {
  color: #5bc0de;
  background: transparent;
}
.c-btn--info:hover {
  background: #5bc0de;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.c-btn--sm {
  font-size: 0.95em;
  width: 2.25em;
  height: 2.25em;
}
.c-card {
  padding: 0.5em 1em;
  margin-bottom: 1em;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  display: none;
}
.c-card.is-shown {
  display: block;
}
.c-card.always-shown {
  display: block!important;
}
@media (min-width: 768px) {
  .c-card {
    display: block;
    padding: 1em 2em;
  }
}
.c-bubble {
  display: inline-block;
  width: 2em;
  height: 2em;
  margin: 0 0.5em;
  position: relative;
  border: 1px solid #777;
  border-radius: 100%;
  cursor: pointer;
  background: #fff;
}
.c-bubble:hover {
  background: #e1efe3;
  border-color: #333;
}
.c-bubble.active:after {
  content: "X";
  font-size: 2em;
  position: absolute;
  top: -7px;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}
.c-bubble.disabled {
  display: none;
  background: #efefef;
  border-color: #dedede;
  cursor: default;
}
@media (min-width: 992px) {
  .c-bubble.disabled {
    display: inline-block;
  }
}
.c-indicator--save {
  position: fixed;
  bottom: 75px;
  right: 0;
  width: 200px;
  padding: 1em 1em;
  color: #fff;
  background: #a3e0a2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  opacity: 1;
}
.c-indicator--save.ng-hide-add,
.c-indicator--save.ng-hide-remove {
  transition: opacity linear 0.25s;
}
.c-indicator--save.ng-hide {
  opacity: 0;
}
.c-skill-group {
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
          flex-direction: column;
  padding: .5em 0;
}
.c-skill-group label {
  display: inline-block;
  color: #777;
}
.c-skill-group > *:last-child {
  -webkit-flex: 1;
     -moz-box-flex: 1;
          flex: 1;
}
.c-skill-group > *:first-child {
  width: 100%;
}
@media (min-width: 768px) {
  .c-skill-group {
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
            flex-direction: row;
    border-top: 1px solid #ddd;
  }
  .c-skill-group label {
    display: block;
  }
  .c-skill-group > *:first-child {
    width: 120px;
  }
}
.stress__track {
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
}
.stress__track > input {
  width: 50px;
}
.c-power {
  padding: .5em 0;
}
.c-power label {
  color: #777;
}
.form-flex.c-editor {
  padding: 1em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  border-radius: 4px;
  background: #f1f1f1;
}
.form-flex .form-group {
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
          justify-content: space-between;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
}
.form-flex .form-group > div {
  -webkit-flex: 1;
     -moz-box-flex: 1;
          flex: 1;
}
.form-flex .control-label {
  width: 33%;
  max-width: 150px;
}
.c-sidebar {
  position: relative;
  width: 16em;
  height: 100%;
  top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
          flex-direction: column;
  -webkit-align-items: stretch;
     -moz-box-align: stretch;
          align-items: stretch;
}
.c-sidebar .c-menu {
  -webkit-flex: 1 1 auto;
     -moz-box-flex: 1;
          flex: 1 1 auto;
  overflow-y: auto;
}
.c-sidebar a {
  color: #fff;
}
.c-menu .c-menu__option {
  padding: 0.5em 1em;
}
.c-menu .c-menu__option .btn,
.c-menu .c-menu__option .c-btn {
  display: none;
}
.c-menu .c-menu__option:hover {
  background: #777;
}
.c-menu .c-menu__option:hover .btn,
.c-menu .c-menu__option:hover .c-btn {
  display: initial;
}
.c-menu > h3,
.c-menu > h4,
.c-menu > h5 {
  padding: 0 1em;
}
.c-menu > p {
  padding: 0 1em;
}
.c-login-menu {
  -webkit-flex: 50px;
     -moz-box-flex: 50px;
          flex: 50px;
  padding: 1em;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  background: #222;
}
.c-login-menu .c-login__user {
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
}