:root {
  --screen-sm-min: 768px;
  --screen-md-min: 992px;
  --screen-lg-min: 1200px;
  --grid-gutter-width: 30px;
  --container-sm: calc(720 + var(--grid-gutter-width));
  --container-md: calc(940 + var(--grid-gutter-width));
  --container-lg: calc(1140 + var(--grid-gutter-width));
  --navbar-height: 122px;
  --navbar-height-short: 56px;
  --summary-height-stacked: 82px;
  --statusbar-height-stacked: 54px;
  --footer-height: 60px;

  /* Gray Colors */
  --gray-base: #000;
  --gray-darker-faded: color(var(--gray-darker) alpha(95%));
  --gray-darker: color(var(--gray-base) tint(13.5%)); /* #222 */
  --gray-dark: color(var(--gray-base) tint(20%));   /* #333 */
  --gray: color(var(--gray-base) tint(33.5%)); /* #555 */
  --gray-light: color(var(--gray-base) tint(46.7%)); /* #777 */
  --gray-medium: color(var(--gray-base) tint(73.5%)); /* #bbb */
  --gray-lighter: color(var(--gray-base) tint(93.5%)); /* #eee */
  --gray-lighter-faded: color(var(--gray-lighter) alpha(95%));
  --gray-border: color(var(--gray-base) tint(80%)); /* #ccc */

  --grey50: #eceff1;
  --grey100: #f5f5f5;
  --grey300: #e0e0e0;
  --grey500: #9e9e9e;
  --grey700: #616161;
  --green100: #c8e6c9;
  --green200: #a5d6a7;
  --green300: #81c784;
  --green500: #4caf50;
  --green700: #388e3c;
  --red100: #ffcdd2;
  --red300: #e57373;
  --red500: #f44336;
  --red700: #d32f2f;
  --ltblue100: #b3e5fc;
  --ltblue300: #4fc3f7;
  --ltblue500: #03a9f4;
  --ltblue700: #0288d1;
  --black87: rgba(0, 0, 0, 0.87);
  --black54: rgba(0, 0, 0, 0.54);
  --black38: rgba(0, 0, 0, 0.38);
  --bluegrey500: #607d8b;
  --bluegrey800: #37474f;
  --bluegrey900: #263238;
  --light-icon-active: rgba(255, 255, 255, 1);
  --light-icon-inactive: rgba(255, 255, 255, 0.5);
  --dark-icon-active: var(--black54);
  --dark-icon-inactive: var(--black38);
  --amber300: #ffd54f;
  --amber400: #ffca28;
  --amber500: #ffc107;
  --yellow700: #fbc02d;
  --yellow800: #f9a825;

  /* Brand Colors */
  --brand-primary: color(#428bca shade(6.5%)); /* #337ab7 */
  --brand-success: #4caf50;
  --brand-info: #5bc0de;
  --brand-warning: #f0ad4e;
  --brand-danger: #d9534f;
  --text-color: var(--black87);
  --body-bg: #f2f2f2;
  --link-color: var(--brand-primary);
  --link-hover-color: color(var(--link-color) shade(15%));
  --list-group-border: #ddd;

  /* Type */
  --font-family-sans-serif: 'robotoregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-family-base: var(--font-family-sans-serif);
  --font-family-mono: 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;
  --font-size-base: 14px;
  --line-height-base: 1.429; /* 1.428571429 20/14 */
  --line-height-computed: 20px; /* floor((--font-size-base * --line-height-base)); */
  --headings-font-family: inherit;
  --headings-font-weight: 400;
  --headings-line-height: 1.1;
  --headings-color: inherit;
  --headings-small-color: var(--gray-light);
  --font-size-h1: 36px; /* floor((@font-size-base * 2.6)); */
  --font-size-h2: 30px; /* floor((@font-size-base * 2.15)); */
  --font-size-h3: 24px; /* ceil((@font-size-base * 1.7)); */
  --font-size-h4: 18px; /* ceil((@font-size-base * 1.25)); */
  --font-size-h5: var(--font-size-base);
  --font-size-h6: 12px; /* ceil((@font-size-base * 0.85)); */

  /* Apply Rules */
  --clearfix: {
    &:before {
      content: ' ';
      display: table;
    }

    &:after {
      content: ' ';
      display: table;
      clear: both;
    }
  }

  --button-reset: {
    border: none;
    background: transparent;
    padding: 0;

    &:focus {
      outline: none;
    }
  }

  --link-transition: {
    transition: color 0.2s ease-out;
  }

  --button-base: {
    @apply --button-reset;
    @apply --link-transition;

    cursor: pointer;
  }

  --column-base: {
    position: relative;
    min-height: 1px;
  }

  --column: {
    @apply --column-base;

    padding-left: calc(var(--grid-gutter-width) / 2);
    padding-right: calc(var(--grid-gutter-width) / 2);
  }

  --row: {
    @apply --clearfix;

    margin-left: calc(var(--grid-gutter-width) / -2);
    margin-right: calc(var(--grid-gutter-width) / -2);
  }

  --list-unstyled: {
    list-style: none;
    padding-left: 0;
  }

  --text-overflow: {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  --font-light: {
    font-family: 'robotolight';
  }
  --font-regular: {
    font-family: 'robotoregular';
  }
  --font-medium: {
    font-family: 'robotomedium';
  }

  --z-depth-1: {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  }
  --z-depth-1-half: {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  }
  --z-depth-2: {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  --z-depth-3: {
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  }
  --z-depth-4: {
    box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  }
  --z-depth-5: {
    box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
  }
}

@custom-media --screen-sm (width >= 768px);
@custom-media --screen-md (width >= 992px);
@custom-media --screen-lg (width >= 1200px);

.trans-color {
  @apply --link-transition;
}