@import url("https://fonts.googleapis.com/css?family=Yantramanav:300,400,700");
:root {
  --blue: #408FEC;
  --blue--accent: #A1CAFA;
  --blue--light: #8EBDF1;
  --blue--lightest: #F6FAFF;
  --purple: #79589F;
  --purple--accent: #AC8ECE;
  --purple--light: #A997BF;
  --purple--lightest: #F7F3FB;
  --green: #74C080;
  --green--accent: #ADE28F;
  --green--light: #ABD7B4;
  --green--lightest: #F8FCF9;
  --orange: #FA9F47;
  --orange--accent: #FFD3A0;
  --orange--light: #FBC595;
  --orange--lightest: #FFFAF6;
  --red: #D64141;
  --red--accent: #F37A65;
  --red--light: #E58F8F;
  --red--lightest: #FDF6F6;
  --gray--1000: #14171B;
  --gray--900: #24292e;
  --gray--800: #2f363d;
  --gray--700: #444d56;
  --gray--600: #586069;
  --gray--500: #6a737d;
  --gray--400: #959da5;
  --gray--300: #d1d5da;
  --gray--200: #e1e4e8;
  --gray--100: #f6f8fa;
  --black: #000000;
  --white: #ffffff;
  --black--50: rgba(0,0,0,.5);
  --black--20: rgba(0,0,0,.2);
  --black--10: rgba(0,0,0,.1);
  --black--5: rgba(0,0,0,.05);
  --brand--dark: #211746;
  --brand: #430098;
  --brand--light: #7673C0;
  --accent--dark: #032E61;
  --accent: var(--blue);
  --accent--light: var(--blue--light);
  --primary: var(--purple);
  --primary--accent: var(--purple--accent);
  --primary--light: var(--purple--light);
  --danger: var(--red);
  --danger--accent: var(--red--accent);
  --danger--light: var(--red--light);
  --warning: var(--orange);
  --warning--accent: var(--orange--accent);
  --warning--light: var(--orange--light);
  --success: var(--green);
  --success--accent: var(--green--accent);
  --success--light: var(--green--light);
  --info: var(--blue);
  --info--accent: var(--blue--accent);
  --info--light: var(--blue--light);
  --default: var(--gray--600);
  --default--accent: var(--gray--600);
  --default--light: var(--gray--500);
  --root--bg: var(--gray--100);
  --root--color: var(--gray--900);
  --root--color-secondary: var(--gray--700);
  --root--font: 'Yantramanav';
  --root--text-size: 1.8rem;
  --component--bg: var(--white);
  --component--bg-accent: var(--gray--100);
}

:root.theme--dark {
  --root--bg: var(--gray--1000);
  --root--color: var(--gray--100);
  --root--color-secondary: var(--gray--400);
  --component--bg: var(--gray--900);
  --component--bg-accent: var(--gray--800);
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: var(--root--bg);
  color: var(--root--color);
  font-family: var(--root--font);
  font-size: var(--root--text-size);
  font-weight: 300;
}

p {
  line-height: 1.4;
  margin: 0;
  color: var(--root--color-secondary);
}
p:not(:last-of-type) {
  margin-bottom: 32px;
}

small {
  font-size: 0.78em;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.44em;
}

h3 {
  font-size: 1.22em;
}

h4 {
  font-size: var(--root--text-size);
}

h5 {
  font-size: 0.78em;
}

h6 {
  font-size: 0.67em;
}

h1, h2, h3 {
  margin: 0 0 16px;
}

h4, h5, h6 {
  margin: 0 0 8px;
}

.l-grid {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 800px;
  margin: auto;
  margin-top: 2vh;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .l-grid {
    margin-top: 10vh;
    flex-direction: row;
  }
}
.l-grid__item {
  width: 100%;
  padding: 0 8px;
}
.l-grid__item--sm {
  flex: 2;
}
.l-grid__item--md {
  flex: 3;
}

.c-card {
  background: var(--component--bg);
  width: 100%;
  border-radius: 0.5rem;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 5px 12px -2px rgba(0, 0, 0, 0.1), 0px 18px 36px -6px rgba(0, 0, 0, 0.1);
  margin: 0 auto 16px;
}
.c-card__header, .c-card__body, .c-card__footer {
  padding: 16px 32px;
}
.c-card__header, .c-card__footer {
  display: flex;
}
.c-card__header {
  background: var(--component--bg-accent);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  justify-content: space-between;
  align-items: center;
}
.c-card__footer {
  background: var(--component--bg-accent);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  justify-content: flex-end;
}
.c-card__title {
  font-size: 1.22em;
  font-weight: 700;
}

.l-actions {
  display: inline-flex;
  justify-content: space-between;
}
.l-actions *:not(:first-of-type) {
  margin-left: 8px;
}

.c-button {
  font-family: inherit;
  border: 0;
  border-radius: 0.3rem;
  padding: 4px 16px;
  font-size: var(--root--text-size);
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  text-align: center;
  box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.1), 0px 5px 12px -2px rgba(0, 0, 0, 0.1);
  text-shadow: 0px 2px 2px var(--black--20);
  transition: all 120ms ease-out 0s;
}
.c-button:active, .c-button:focus {
  outline: 0;
}
.c-button--sm {
  font-size: 0.78em;
  height: auto;
}
.c-button--lg {
  font-size: 1.22em;
  text-shadow: 0px 2px 2px var(--black--20);
  height: 48px;
}
.c-button--full {
  width: 100%;
  display: flex;
}
.c-button--ghost {
  background: transparent;
  color: var(--root--color-secondary);
  box-shadow: none;
  text-shadow: none;
}
.c-button--ghost:hover, .c-button--ghost:focus {
  background: var(--black--5);
}

.c-button--primary {
  background: var(--primary);
  background: linear-gradient(to right, var(--primary--accent), var(--primary));
}
.c-button--primary:active, .c-button--primary:focus {
  box-shadow: 0px 0px 0px 2px var(--primary--light);
}
.c-button--primary:active {
  background: var(--primary);
}
.c-button--primary:hover, .c-button--primary:focus {
  background: linear-gradient(to right, var(--primary--light), var(--primary));
}

.c-button--outline-primary {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}
.c-button--outline-primary:active, .c-button--outline-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--primary--light);
}
.c-button--outline-primary:active {
  background: var(--primary);
}
.c-button--outline-primary:hover, .c-button--outline-primary:focus {
  background: var(--primary);
  color: var(--white);
}

.c-button--success {
  background: var(--success);
  background: linear-gradient(to right, var(--success--accent), var(--success));
}
.c-button--success:active, .c-button--success:focus {
  box-shadow: 0px 0px 0px 2px var(--success--light);
}
.c-button--success:active {
  background: var(--success);
}
.c-button--success:hover, .c-button--success:focus {
  background: linear-gradient(to right, var(--success--light), var(--success));
}

.c-button--outline-success {
  background: transparent;
  border: 1px solid var(--success);
  color: var(--success);
}
.c-button--outline-success:active, .c-button--outline-success:focus {
  box-shadow: 0px 0px 0px 2px var(--success--light);
}
.c-button--outline-success:active {
  background: var(--success);
}
.c-button--outline-success:hover, .c-button--outline-success:focus {
  background: var(--success);
  color: var(--white);
}

.c-button--danger {
  background: var(--danger);
  background: linear-gradient(to right, var(--danger--accent), var(--danger));
}
.c-button--danger:active, .c-button--danger:focus {
  box-shadow: 0px 0px 0px 2px var(--danger--light);
}
.c-button--danger:active {
  background: var(--danger);
}
.c-button--danger:hover, .c-button--danger:focus {
  background: linear-gradient(to right, var(--danger--light), var(--danger));
}

.c-button--outline-danger {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}
.c-button--outline-danger:active, .c-button--outline-danger:focus {
  box-shadow: 0px 0px 0px 2px var(--danger--light);
}
.c-button--outline-danger:active {
  background: var(--danger);
}
.c-button--outline-danger:hover, .c-button--outline-danger:focus {
  background: var(--danger);
  color: var(--white);
}

.c-button--warning {
  background: var(--warning);
  background: linear-gradient(to right, var(--warning--accent), var(--warning));
}
.c-button--warning:active, .c-button--warning:focus {
  box-shadow: 0px 0px 0px 2px var(--warning--light);
}
.c-button--warning:active {
  background: var(--warning);
}
.c-button--warning:hover, .c-button--warning:focus {
  background: linear-gradient(to right, var(--warning--light), var(--warning));
}

.c-button--outline-warning {
  background: transparent;
  border: 1px solid var(--warning);
  color: var(--warning);
}
.c-button--outline-warning:active, .c-button--outline-warning:focus {
  box-shadow: 0px 0px 0px 2px var(--warning--light);
}
.c-button--outline-warning:active {
  background: var(--warning);
}
.c-button--outline-warning:hover, .c-button--outline-warning:focus {
  background: var(--warning);
  color: var(--white);
}

.c-button--info {
  background: var(--info);
  background: linear-gradient(to right, var(--info--accent), var(--info));
}
.c-button--info:active, .c-button--info:focus {
  box-shadow: 0px 0px 0px 2px var(--info--light);
}
.c-button--info:active {
  background: var(--info);
}
.c-button--info:hover, .c-button--info:focus {
  background: linear-gradient(to right, var(--info--light), var(--info));
}

.c-button--outline-info {
  background: transparent;
  border: 1px solid var(--info);
  color: var(--info);
}
.c-button--outline-info:active, .c-button--outline-info:focus {
  box-shadow: 0px 0px 0px 2px var(--info--light);
}
.c-button--outline-info:active {
  background: var(--info);
}
.c-button--outline-info:hover, .c-button--outline-info:focus {
  background: var(--info);
  color: var(--white);
}

.c-button--default {
  background: var(--default);
  background: linear-gradient(to right, var(--default--accent), var(--default));
}
.c-button--default:active, .c-button--default:focus {
  box-shadow: 0px 0px 0px 2px var(--default--light);
}
.c-button--default:active {
  background: var(--default);
}
.c-button--default:hover, .c-button--default:focus {
  background: linear-gradient(to right, var(--default--light), var(--default));
}

.c-button--outline-default {
  background: transparent;
  border: 1px solid var(--default);
  color: var(--default);
}
.c-button--outline-default:active, .c-button--outline-default:focus {
  box-shadow: 0px 0px 0px 2px var(--default--light);
}
.c-button--outline-default:active {
  background: var(--default);
}
.c-button--outline-default:hover, .c-button--outline-default:focus {
  background: var(--default);
  color: var(--white);
}

.c-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.c-list:hover > .c-contact {
  background: var(--black--5);
  opacity: .8;
}
.c-list:hover > .c-contact:hover {
  background: var(--component--bg);
  opacity: 1;
}

.c-contact {
  padding: 16px 32px;
  background: var(--component--bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: all 120ms ease-out 0s;
}
.c-contact .l-actions {
  transition: all 120ms ease-out 0ms;
}
@media screen and (min-width: 769px) {
  .c-contact .l-actions {
    opacity: .5;
    -webkit-filter: grayscale(0.5);
            filter: grayscale(0.5);
  }
}
.c-contact:hover, .c-contact:focus {
  box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.1), 0px 12px 25px -4px rgba(0, 0, 0, 0.1);
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  z-index: 10;
  border-radius: 0.3rem;
}
.c-contact:hover .l-actions, .c-contact:focus .l-actions {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
  opacity: 1;
}
.c-contact__avatar {
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 2px;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 3px 6px -1px rgba(0, 0, 0, 0.1);
  background-position: center center;
  background-color: var(--black--10);
  background-size: cover;
  margin-right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  text-transform: uppercase;
  color: var(--white);
}
.c-contact__left {
  display: inline-flex;
}
.c-contact__name {
  font-weight: 700;
}
.c-contact__description {
  color: var(--root--color-secondary);
}

.c-empty-state {
  padding: 16px 32px;
  background: var(--black--5);
}
.c-empty-state__hero {
  display: block;
  width: 100%;
  max-width: 250px;
  margin: 0 auto 16px;
}

.label {
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.label__icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  color: var(--root--color-secondary);
}

.c-form-field {
  width: 100%;
  margin-bottom: 16px;
}
.c-form-field__label {
  font-weight: 700;
  font-size: 0.78em;
  display: inline-block;
  margin-bottom: 4px;
}
.c-form-field__input {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  padding: 8px 16px;
  border: 0;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  background: var(--component--bg-accent);
  transition: all 120ms ease-out 0s;
}
.c-form-field__input::-webkit-input-placeholder {
  opacity: .4;
  color: inherit;
}
.c-form-field__input:-ms-input-placeholder {
  opacity: .4;
  color: inherit;
}
.c-form-field__input::-ms-input-placeholder {
  opacity: .4;
  color: inherit;
}
.c-form-field__input::placeholder {
  opacity: .4;
  color: inherit;
}
.c-form-field__input:focus, .c-form-field__input:active {
  outline: 0;
  box-shadow: 0px 0px 0px 2px var(--primary);
}

.l-form {
  margin-bottom: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--black--20);
  border-top: 1px solid var(--black--20);
  height: auto;
  overflow: inherit;
  transition: all 240ms ease-out 0ms;
}
.l-form--closed {
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
}

.c-media {
  padding: 16px;
  background: var(--black--5);
  border: 1px solid var(--black--10);
  display: flex;
  margin-bottom: 16px;
  border-radius: 0.5rem;
}
.c-media__avatar {
  width: 40px;
  height: 40px;
  background: var(--blue);
  border-radius: 0.5rem;
  margin-right: 16px;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
}
.c-media__subtitle {
  color: var(--root--color-secondary);
  letter-spacing: .05em;
  margin-bottom: 4px;
}

.c-toggle {
  width: 4.8rem;
  height: 2.4rem;
  background: var(--black--20);
  border-radius: 0.3rem;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  margin-right: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: .2rem;
  position: relative;
  transition: all 120ms ease-out 0s;
}
.c-toggle--active {
  background: var(--success);
  background: linear-gradient(to right, var(--success--accent), var(--success));
}
.c-toggle--active .c-toggle__handle {
  -webkit-transform: translateX(2.4rem);
          transform: translateX(2.4rem);
}
.c-toggle__handle {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transform-origin: center;
          transform-origin: center;
  height: 100%;
  width: 2rem;
  border-radius: 0.3rem;
  background: var(--gray--100);
  transition: all 120ms ease-out 0s;
}

.c-alert {
  width: 100%;
  padding: 8px 16px;
  margin-bottom: 16px;
  border-radius: 0.5rem;
  background: transparent;
  border: 1px solid var(--gray--300);
  font-size: 0.78em;
}

.c-alert--primary {
  border-color: var(--primary);
  color: var(--primary);
}

.c-alert--success {
  border-color: var(--success);
  color: var(--success);
}

.c-alert--danger {
  border-color: var(--danger);
  color: var(--danger);
}

.c-alert--warning {
  border-color: var(--warning);
  color: var(--warning);
}

.c-alert--info {
  border-color: var(--info);
  color: var(--info);
}

.c-alert--default {
  border-color: var(--default);
  color: var(--default);
}

.u-text--xs {
  font-size: 0.67em !important;
}

.u-text--sm {
  font-size: 0.78em !important;
}

.u-text--md {
  font-size: var(--root--text-size) !important;
}

.u-text--lg {
  font-size: 1.22em !important;
}

.u-text--xl {
  font-size: 1.44em !important;
}

.u-text--xxl {
  font-size: 2em !important;
}

.u-text--primary {
  color: var(--primary) !important;
}

.u-text--success {
  color: var(--success) !important;
}

.u-text--danger {
  color: var(--danger) !important;
}

.u-text--warning {
  color: var(--warning) !important;
}

.u-text--info {
  color: var(--info) !important;
}

.u-text--default {
  color: var(--default) !important;
}

.u-text--light {
  font-weight: 300 !important;
}

.u-text--regular {
  font-weight: 400 !important;
}

.u-text--bold {
  font-weight: 700 !important;
}

.u-text--center {
  text-align: center !important;
}

.u-text--left {
  text-align: left !important;
}

.u-text--right {
  text-align: right !important;
}

.c-overlay {
  background: var(--gray--500);
  opacity: .8;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 99;
}

@media screen and (max-width: 768px) {
  .u-hide--mobile {
    opacity: 0;
  }
}
.u-hide--mobile.is-open, .u-hide--mobile.is-closing {
  position: fixed;
  z-index: 999;
  bottom: 0;
  right: 0;
  left: 0;
  display: block !important;
}
.u-hide--mobile.is-open {
  -webkit-animation: mobileFadeIn 240ms ease-out 0s forwards;
          animation: mobileFadeIn 240ms ease-out 0s forwards;
}
.u-hide--mobile.is-closing {
  -webkit-animation: mobileFadeOut 120ms ease-out 0s forwards;
          animation: mobileFadeOut 120ms ease-out 0s forwards;
}
@media screen and (max-width: 768px) {
  .u-hide--mobile {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  #mobileAddBtn {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  #closeMobileAdd {
    display: none;
  }
}

@-webkit-keyframes mobileFadeIn {
  from {
    bottom: -100px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes mobileFadeIn {
  from {
    bottom: -100px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}
@-webkit-keyframes mobileFadeOut {
  from {
    bottom: 0px;
    opacity: 1;
  }
  to {
    bottom: -100px;
    opacity: 0;
  }
}
@keyframes mobileFadeOut {
  from {
    bottom: 0px;
    opacity: 1;
  }
  to {
    bottom: -100px;
    opacity: 0;
  }
}