@charset "UTF-8";
/* ==========================================================================
  Browser support
  ========================================================================== */
/* Typography
   ========================================================================== */
/* Grid
   ========================================================================== */
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

audio,
canvas,
video {
  display: inline-block; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden],
template {
  display: none; }

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

a {
  background: transparent; }

a:focus {
  outline: thin dotted; }

a:active,
a:hover {
  outline: 0; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

mark {
  background: #ff0;
  color: #000; }

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em; }

pre {
  white-space: pre-wrap; }

q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 0; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  padding: 0; }

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0; }

button,
input {
  line-height: normal; }

button,
select {
  text-transform: none; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled],
html input[disabled] {
  cursor: default; }

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto;
  vertical-align: top; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html {
  font-size: 62.5%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

body {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #5d6e73;
  background-color: transparent; }

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit; }

a {
  color: #49a8d5;
  text-decoration: none; }
  a:hover, a:focus {
    color: #2780aa;
    text-decoration: underline; }
  a:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }

img {
  vertical-align: middle; }

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto; }

.img-rounded {
  border-radius: 6px; }

.img-thumbnail {
  padding: 4px;
  line-height: 1.5;
  background-color: transparent;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  display: inline-block;
  max-width: 100%;
  height: auto; }

.img-circle {
  border-radius: 50%; }

hr {
  margin-top: 22px;
  margin-bottom: 22px;
  border: 0;
  border-top: 1px solid #eeeeee; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0; }

p {
  margin: 0 0 11px; }

.lead {
  margin-bottom: 22px;
  font-size: 17px;
  font-weight: 200;
  line-height: 1.4; }
  @media (min-width: 768px) {
    .lead {
      font-size: 22.5px; } }

small,
.small {
  font-size: 85%; }

cite {
  font-style: normal; }

.text-muted {
  color: #d4d9da !important; }

.text-primary {
  color: #1b92cb; }
  .text-primary:hover {
    color: #15729e; }

.text-warning {
  color: #c1b293; }
  .text-warning:hover {
    color: #ae9b73; }

.text-danger {
  color: #b94242; }
  .text-danger:hover {
    color: #933535; }

.text-success {
  color: #74af7e; }
  .text-success:hover {
    color: #589863; }

.text-info {
  color: #8e8837; }
  .text-info:hover {
    color: #696529; }

.text-left {
  text-align: left; }

.text-right {
  text-align: right; }

.text-center {
  text-align: center; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: #34928a; }
  h1 small,
  h1 .small, h2 small,
  h2 .small, h3 small,
  h3 .small, h4 small,
  h4 .small, h5 small,
  h5 .small, h6 small,
  h6 .small,
  .h1 small,
  .h1 .small, .h2 small,
  .h2 .small, .h3 small,
  .h3 .small, .h4 small,
  .h4 .small, .h5 small,
  .h5 .small, .h6 small,
  .h6 .small {
    font-weight: normal;
    line-height: 1;
    color: #999999; }

h1,
h2,
h3 {
  margin-top: 22px;
  margin-bottom: 11px; }
  h1 small,
  h1 .small,
  h2 small,
  h2 .small,
  h3 small,
  h3 .small {
    font-size: 65%; }

h4,
h5,
h6 {
  margin-top: 11px;
  margin-bottom: 11px; }
  h4 small,
  h4 .small,
  h5 small,
  h5 .small,
  h6 small,
  h6 .small {
    font-size: 75%; }

h1, .h1 {
  font-size: 20px; }

h2, .h2 {
  font-size: 22px; }

h3, .h3 {
  font-size: 18px; }

h4, .h4 {
  font-size: 18px; }

h5, .h5 {
  font-size: 16px; }

h6, .h6 {
  font-size: 15px; }

.page-header {
  padding-bottom: 10px;
  margin: 44px 0 22px;
  border-bottom: 1px solid #eeeeee; }

ul,
ol {
  margin-top: 0;
  margin-bottom: 11px; }
  ul ul,
  ul ol,
  ol ul,
  ol ol {
    margin-bottom: 0; }

.list-unstyled, .list-inline, .list-inline-divider, .list-vertical-divider, .list-vertical-divider-2, .page-footer .list-footer, .list-breadcrumb, .list-steps, .headers .nav-list, .page-footer .list-legal {
  padding-left: 0;
  list-style: none; }

.list-inline > li, .list-inline-divider > li, .list-vertical-divider > li, .list-vertical-divider-2 > li, .page-footer .list-footer > li, .list-breadcrumb > li, .list-steps > li, .headers .nav-list > li, .page-footer .list-legal > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px; }
  .list-inline > li:first-child, .list-inline-divider > li:first-child, .list-vertical-divider > li:first-child, .list-vertical-divider-2 > li:first-child, .page-footer .list-footer > li:first-child, .list-breadcrumb > li:first-child, .list-steps > li:first-child, .headers .nav-list > li:first-child, .page-footer .list-legal > li:first-child {
    padding-left: 0; }

dl {
  margin-bottom: 22px; }

dt,
dd {
  line-height: 1.5; }

dt {
  font-weight: bold; }

dd {
  margin-left: 0; }

@media (min-width: 768px) {
  .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .dl-horizontal dd {
    margin-left: 180px; }
    .dl-horizontal dd:before, .dl-horizontal dd:after {
      content: " ";
      /* 1 */
      display: table;
      /* 2 */ }
    .dl-horizontal dd:after {
      clear: both; } }
abbr[title],
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #999999; }

abbr.initialism {
  font-size: 90%;
  text-transform: uppercase; }

blockquote {
  padding: 11px 22px;
  margin: 0 0 22px;
  border-left: 5px solid #eeeeee; }
  blockquote p {
    font-size: 18.75px;
    font-weight: 300;
    line-height: 1.25; }
  blockquote p:last-child {
    margin-bottom: 0; }
  blockquote small {
    display: block;
    line-height: 1.5;
    color: #999999; }
    blockquote small:before {
      content: '\2014 \00A0'; }
  blockquote.pull-right {
    padding-right: 15px;
    padding-left: 0;
    border-right: 5px solid #eeeeee;
    border-left: 0; }
    blockquote.pull-right p,
    blockquote.pull-right small,
    blockquote.pull-right .small {
      text-align: right; }
    blockquote.pull-right small:before,
    blockquote.pull-right .small:before {
      content: ''; }
    blockquote.pull-right small:after,
    blockquote.pull-right .small:after {
      content: '\00A0 \2014'; }

blockquote:before,
blockquote:after {
  content: ""; }

address {
  margin-bottom: 22px;
  font-style: normal;
  line-height: 1.5; }

code,
kbd,
pre,
samp {
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace; }

code {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  white-space: nowrap;
  border-radius: 4px; }

pre {
  display: block;
  padding: 10.5px;
  margin: 0 0 11px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-all;
  word-wrap: break-word;
  color: #333333;
  background-color: whitesmoke;
  border: 1px solid #cccccc;
  border-radius: 4px; }
  pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0; }

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll; }

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px; }
  .container:before, .container:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */ }
  .container:after {
    clear: both; }

.row {
  margin-left: -15px;
  margin-right: -15px; }
  .row:before, .row:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */ }
  .row:after {
    clear: both; }

.col-xs-23, .col-sm-23, .col-md-23, .col-lg-23, .col-xs-22, .col-sm-22, .col-md-22, .col-lg-22, .col-xs-21, .col-sm-21, .col-md-21, .col-lg-21, .col-xs-20, .col-sm-20, .col-md-20, .col-lg-20, .col-xs-19, .col-sm-19, .col-md-19, .col-lg-19, .col-xs-18, .col-sm-18, .col-md-18, .col-lg-18, .col-xs-17, .col-sm-17, .col-md-17, .col-lg-17, .col-xs-16, .col-sm-16, .col-md-16, .col-lg-16, .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15, .col-xs-14, .col-sm-14, .col-md-14, .col-lg-14, .col-xs-13, .col-sm-13, .col-md-13, .col-lg-13, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-24, .col-sm-24, .col-md-24, .col-lg-24 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }

.col-xs-23, .col-xs-22, .col-xs-21, .col-xs-20, .col-xs-19, .col-xs-18, .col-xs-17, .col-xs-16, .col-xs-15, .col-xs-14, .col-xs-13, .col-xs-12, .col-xs-11, .col-xs-10, .col-xs-9, .col-xs-8, .col-xs-7, .col-xs-6, .col-xs-5, .col-xs-4, .col-xs-3, .col-xs-2, .col-xs-1, .col-xs-24 {
  float: left; }

.col-xs-1 {
  width: 4.16667%; }

.col-xs-2 {
  width: 8.33333%; }

.col-xs-3 {
  width: 12.5%; }

.col-xs-4 {
  width: 16.66667%; }

.col-xs-5 {
  width: 20.83333%; }

.col-xs-6 {
  width: 25%; }

.col-xs-7 {
  width: 29.16667%; }

.col-xs-8 {
  width: 33.33333%; }

.col-xs-9 {
  width: 37.5%; }

.col-xs-10 {
  width: 41.66667%; }

.col-xs-11 {
  width: 45.83333%; }

.col-xs-12 {
  width: 50%; }

.col-xs-13 {
  width: 54.16667%; }

.col-xs-14 {
  width: 58.33333%; }

.col-xs-15 {
  width: 62.5%; }

.col-xs-16 {
  width: 66.66667%; }

.col-xs-17 {
  width: 70.83333%; }

.col-xs-18 {
  width: 75%; }

.col-xs-19 {
  width: 79.16667%; }

.col-xs-20 {
  width: 83.33333%; }

.col-xs-21 {
  width: 87.5%; }

.col-xs-22 {
  width: 91.66667%; }

.col-xs-23 {
  width: 95.83333%; }

.col-xs-24 {
  width: 100%; }

.col-xs-pull-1 {
  right: 4.16667%; }

.col-xs-pull-2 {
  right: 8.33333%; }

.col-xs-pull-3 {
  right: 12.5%; }

.col-xs-pull-4 {
  right: 16.66667%; }

.col-xs-pull-5 {
  right: 20.83333%; }

.col-xs-pull-6 {
  right: 25%; }

.col-xs-pull-7 {
  right: 29.16667%; }

.col-xs-pull-8 {
  right: 33.33333%; }

.col-xs-pull-9 {
  right: 37.5%; }

.col-xs-pull-10 {
  right: 41.66667%; }

.col-xs-pull-11 {
  right: 45.83333%; }

.col-xs-pull-12 {
  right: 50%; }

.col-xs-pull-13 {
  right: 54.16667%; }

.col-xs-pull-14 {
  right: 58.33333%; }

.col-xs-pull-15 {
  right: 62.5%; }

.col-xs-pull-16 {
  right: 66.66667%; }

.col-xs-pull-17 {
  right: 70.83333%; }

.col-xs-pull-18 {
  right: 75%; }

.col-xs-pull-19 {
  right: 79.16667%; }

.col-xs-pull-20 {
  right: 83.33333%; }

.col-xs-pull-21 {
  right: 87.5%; }

.col-xs-pull-22 {
  right: 91.66667%; }

.col-xs-pull-23 {
  right: 95.83333%; }

.col-xs-pull-24 {
  right: 100%; }

.col-xs-push-1 {
  left: 4.16667%; }

.col-xs-push-2 {
  left: 8.33333%; }

.col-xs-push-3 {
  left: 12.5%; }

.col-xs-push-4 {
  left: 16.66667%; }

.col-xs-push-5 {
  left: 20.83333%; }

.col-xs-push-6 {
  left: 25%; }

.col-xs-push-7 {
  left: 29.16667%; }

.col-xs-push-8 {
  left: 33.33333%; }

.col-xs-push-9 {
  left: 37.5%; }

.col-xs-push-10 {
  left: 41.66667%; }

.col-xs-push-11 {
  left: 45.83333%; }

.col-xs-push-12 {
  left: 50%; }

.col-xs-push-13 {
  left: 54.16667%; }

.col-xs-push-14 {
  left: 58.33333%; }

.col-xs-push-15 {
  left: 62.5%; }

.col-xs-push-16 {
  left: 66.66667%; }

.col-xs-push-17 {
  left: 70.83333%; }

.col-xs-push-18 {
  left: 75%; }

.col-xs-push-19 {
  left: 79.16667%; }

.col-xs-push-20 {
  left: 83.33333%; }

.col-xs-push-21 {
  left: 87.5%; }

.col-xs-push-22 {
  left: 91.66667%; }

.col-xs-push-23 {
  left: 95.83333%; }

.col-xs-push-24 {
  left: 100%; }

.col-xs-offset-1 {
  margin-left: 4.16667%; }

.col-xs-offset-2 {
  margin-left: 8.33333%; }

.col-xs-offset-3 {
  margin-left: 12.5%; }

.col-xs-offset-4 {
  margin-left: 16.66667%; }

.col-xs-offset-5 {
  margin-left: 20.83333%; }

.col-xs-offset-6 {
  margin-left: 25%; }

.col-xs-offset-7 {
  margin-left: 29.16667%; }

.col-xs-offset-8 {
  margin-left: 33.33333%; }

.col-xs-offset-9 {
  margin-left: 37.5%; }

.col-xs-offset-10 {
  margin-left: 41.66667%; }

.col-xs-offset-11 {
  margin-left: 45.83333%; }

.col-xs-offset-12 {
  margin-left: 50%; }

.col-xs-offset-13 {
  margin-left: 54.16667%; }

.col-xs-offset-14 {
  margin-left: 58.33333%; }

.col-xs-offset-15 {
  margin-left: 62.5%; }

.col-xs-offset-16 {
  margin-left: 66.66667%; }

.col-xs-offset-17 {
  margin-left: 70.83333%; }

.col-xs-offset-18 {
  margin-left: 75%; }

.col-xs-offset-19 {
  margin-left: 79.16667%; }

.col-xs-offset-20 {
  margin-left: 83.33333%; }

.col-xs-offset-21 {
  margin-left: 87.5%; }

.col-xs-offset-22 {
  margin-left: 91.66667%; }

.col-xs-offset-23 {
  margin-left: 95.83333%; }

.col-xs-offset-24 {
  margin-left: 100%; }

@media (min-width: 768px) {
  .container {
    width: 750px; }

  .col-sm-23, .col-sm-22, .col-sm-21, .col-sm-20, .col-sm-19, .col-sm-18, .col-sm-17, .col-sm-16, .col-sm-15, .col-sm-14, .col-sm-13, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col-sm-24 {
    float: left; }

  .col-sm-1 {
    width: 4.16667%; }

  .col-sm-2 {
    width: 8.33333%; }

  .col-sm-3 {
    width: 12.5%; }

  .col-sm-4 {
    width: 16.66667%; }

  .col-sm-5 {
    width: 20.83333%; }

  .col-sm-6 {
    width: 25%; }

  .col-sm-7 {
    width: 29.16667%; }

  .col-sm-8 {
    width: 33.33333%; }

  .col-sm-9 {
    width: 37.5%; }

  .col-sm-10 {
    width: 41.66667%; }

  .col-sm-11 {
    width: 45.83333%; }

  .col-sm-12 {
    width: 50%; }

  .col-sm-13 {
    width: 54.16667%; }

  .col-sm-14 {
    width: 58.33333%; }

  .col-sm-15 {
    width: 62.5%; }

  .col-sm-16 {
    width: 66.66667%; }

  .col-sm-17 {
    width: 70.83333%; }

  .col-sm-18 {
    width: 75%; }

  .col-sm-19 {
    width: 79.16667%; }

  .col-sm-20 {
    width: 83.33333%; }

  .col-sm-21 {
    width: 87.5%; }

  .col-sm-22 {
    width: 91.66667%; }

  .col-sm-23 {
    width: 95.83333%; }

  .col-sm-24 {
    width: 100%; }

  .col-sm-pull-1 {
    right: 4.16667%; }

  .col-sm-pull-2 {
    right: 8.33333%; }

  .col-sm-pull-3 {
    right: 12.5%; }

  .col-sm-pull-4 {
    right: 16.66667%; }

  .col-sm-pull-5 {
    right: 20.83333%; }

  .col-sm-pull-6 {
    right: 25%; }

  .col-sm-pull-7 {
    right: 29.16667%; }

  .col-sm-pull-8 {
    right: 33.33333%; }

  .col-sm-pull-9 {
    right: 37.5%; }

  .col-sm-pull-10 {
    right: 41.66667%; }

  .col-sm-pull-11 {
    right: 45.83333%; }

  .col-sm-pull-12 {
    right: 50%; }

  .col-sm-pull-13 {
    right: 54.16667%; }

  .col-sm-pull-14 {
    right: 58.33333%; }

  .col-sm-pull-15 {
    right: 62.5%; }

  .col-sm-pull-16 {
    right: 66.66667%; }

  .col-sm-pull-17 {
    right: 70.83333%; }

  .col-sm-pull-18 {
    right: 75%; }

  .col-sm-pull-19 {
    right: 79.16667%; }

  .col-sm-pull-20 {
    right: 83.33333%; }

  .col-sm-pull-21 {
    right: 87.5%; }

  .col-sm-pull-22 {
    right: 91.66667%; }

  .col-sm-pull-23 {
    right: 95.83333%; }

  .col-sm-pull-24 {
    right: 100%; }

  .col-sm-push-1 {
    left: 4.16667%; }

  .col-sm-push-2 {
    left: 8.33333%; }

  .col-sm-push-3 {
    left: 12.5%; }

  .col-sm-push-4 {
    left: 16.66667%; }

  .col-sm-push-5 {
    left: 20.83333%; }

  .col-sm-push-6 {
    left: 25%; }

  .col-sm-push-7 {
    left: 29.16667%; }

  .col-sm-push-8 {
    left: 33.33333%; }

  .col-sm-push-9 {
    left: 37.5%; }

  .col-sm-push-10 {
    left: 41.66667%; }

  .col-sm-push-11 {
    left: 45.83333%; }

  .col-sm-push-12 {
    left: 50%; }

  .col-sm-push-13 {
    left: 54.16667%; }

  .col-sm-push-14 {
    left: 58.33333%; }

  .col-sm-push-15 {
    left: 62.5%; }

  .col-sm-push-16 {
    left: 66.66667%; }

  .col-sm-push-17 {
    left: 70.83333%; }

  .col-sm-push-18 {
    left: 75%; }

  .col-sm-push-19 {
    left: 79.16667%; }

  .col-sm-push-20 {
    left: 83.33333%; }

  .col-sm-push-21 {
    left: 87.5%; }

  .col-sm-push-22 {
    left: 91.66667%; }

  .col-sm-push-23 {
    left: 95.83333%; }

  .col-sm-push-24 {
    left: 100%; }

  .col-sm-offset-1 {
    margin-left: 4.16667%; }

  .col-sm-offset-2 {
    margin-left: 8.33333%; }

  .col-sm-offset-3 {
    margin-left: 12.5%; }

  .col-sm-offset-4 {
    margin-left: 16.66667%; }

  .col-sm-offset-5 {
    margin-left: 20.83333%; }

  .col-sm-offset-6 {
    margin-left: 25%; }

  .col-sm-offset-7 {
    margin-left: 29.16667%; }

  .col-sm-offset-8 {
    margin-left: 33.33333%; }

  .col-sm-offset-9 {
    margin-left: 37.5%; }

  .col-sm-offset-10 {
    margin-left: 41.66667%; }

  .col-sm-offset-11 {
    margin-left: 45.83333%; }

  .col-sm-offset-12 {
    margin-left: 50%; }

  .col-sm-offset-13 {
    margin-left: 54.16667%; }

  .col-sm-offset-14 {
    margin-left: 58.33333%; }

  .col-sm-offset-15 {
    margin-left: 62.5%; }

  .col-sm-offset-16 {
    margin-left: 66.66667%; }

  .col-sm-offset-17 {
    margin-left: 70.83333%; }

  .col-sm-offset-18 {
    margin-left: 75%; }

  .col-sm-offset-19 {
    margin-left: 79.16667%; }

  .col-sm-offset-20 {
    margin-left: 83.33333%; }

  .col-sm-offset-21 {
    margin-left: 87.5%; }

  .col-sm-offset-22 {
    margin-left: 91.66667%; }

  .col-sm-offset-23 {
    margin-left: 95.83333%; }

  .col-sm-offset-24 {
    margin-left: 100%; } }
@media (min-width: 992px) {
  .container {
    width: 970px; }

  .col-md-23, .col-md-22, .col-md-21, .col-md-20, .col-md-19, .col-md-18, .col-md-17, .col-md-16, .col-md-15, .col-md-14, .col-md-13, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-md-24 {
    float: left; }

  .col-md-1 {
    width: 4.16667%; }

  .col-md-2 {
    width: 8.33333%; }

  .col-md-3 {
    width: 12.5%; }

  .col-md-4 {
    width: 16.66667%; }

  .col-md-5 {
    width: 20.83333%; }

  .col-md-6 {
    width: 25%; }

  .col-md-7 {
    width: 29.16667%; }

  .col-md-8 {
    width: 33.33333%; }

  .col-md-9 {
    width: 37.5%; }

  .col-md-10 {
    width: 41.66667%; }

  .col-md-11 {
    width: 45.83333%; }

  .col-md-12 {
    width: 50%; }

  .col-md-13 {
    width: 54.16667%; }

  .col-md-14 {
    width: 58.33333%; }

  .col-md-15 {
    width: 62.5%; }

  .col-md-16 {
    width: 66.66667%; }

  .col-md-17 {
    width: 70.83333%; }

  .col-md-18 {
    width: 75%; }

  .col-md-19 {
    width: 79.16667%; }

  .col-md-20 {
    width: 83.33333%; }

  .col-md-21 {
    width: 87.5%; }

  .col-md-22 {
    width: 91.66667%; }

  .col-md-23 {
    width: 95.83333%; }

  .col-md-24 {
    width: 100%; }

  .col-md-pull-1 {
    right: 4.16667%; }

  .col-md-pull-2 {
    right: 8.33333%; }

  .col-md-pull-3 {
    right: 12.5%; }

  .col-md-pull-4 {
    right: 16.66667%; }

  .col-md-pull-5 {
    right: 20.83333%; }

  .col-md-pull-6 {
    right: 25%; }

  .col-md-pull-7 {
    right: 29.16667%; }

  .col-md-pull-8 {
    right: 33.33333%; }

  .col-md-pull-9 {
    right: 37.5%; }

  .col-md-pull-10 {
    right: 41.66667%; }

  .col-md-pull-11 {
    right: 45.83333%; }

  .col-md-pull-12 {
    right: 50%; }

  .col-md-pull-13 {
    right: 54.16667%; }

  .col-md-pull-14 {
    right: 58.33333%; }

  .col-md-pull-15 {
    right: 62.5%; }

  .col-md-pull-16 {
    right: 66.66667%; }

  .col-md-pull-17 {
    right: 70.83333%; }

  .col-md-pull-18 {
    right: 75%; }

  .col-md-pull-19 {
    right: 79.16667%; }

  .col-md-pull-20 {
    right: 83.33333%; }

  .col-md-pull-21 {
    right: 87.5%; }

  .col-md-pull-22 {
    right: 91.66667%; }

  .col-md-pull-23 {
    right: 95.83333%; }

  .col-md-pull-24 {
    right: 100%; }

  .col-md-push-1 {
    left: 4.16667%; }

  .col-md-push-2 {
    left: 8.33333%; }

  .col-md-push-3 {
    left: 12.5%; }

  .col-md-push-4 {
    left: 16.66667%; }

  .col-md-push-5 {
    left: 20.83333%; }

  .col-md-push-6 {
    left: 25%; }

  .col-md-push-7 {
    left: 29.16667%; }

  .col-md-push-8 {
    left: 33.33333%; }

  .col-md-push-9 {
    left: 37.5%; }

  .col-md-push-10 {
    left: 41.66667%; }

  .col-md-push-11 {
    left: 45.83333%; }

  .col-md-push-12 {
    left: 50%; }

  .col-md-push-13 {
    left: 54.16667%; }

  .col-md-push-14 {
    left: 58.33333%; }

  .col-md-push-15 {
    left: 62.5%; }

  .col-md-push-16 {
    left: 66.66667%; }

  .col-md-push-17 {
    left: 70.83333%; }

  .col-md-push-18 {
    left: 75%; }

  .col-md-push-19 {
    left: 79.16667%; }

  .col-md-push-20 {
    left: 83.33333%; }

  .col-md-push-21 {
    left: 87.5%; }

  .col-md-push-22 {
    left: 91.66667%; }

  .col-md-push-23 {
    left: 95.83333%; }

  .col-md-push-24 {
    left: 100%; }

  .col-md-offset-1 {
    margin-left: 4.16667%; }

  .col-md-offset-2 {
    margin-left: 8.33333%; }

  .col-md-offset-3 {
    margin-left: 12.5%; }

  .col-md-offset-4 {
    margin-left: 16.66667%; }

  .col-md-offset-5 {
    margin-left: 20.83333%; }

  .col-md-offset-6 {
    margin-left: 25%; }

  .col-md-offset-7 {
    margin-left: 29.16667%; }

  .col-md-offset-8 {
    margin-left: 33.33333%; }

  .col-md-offset-9 {
    margin-left: 37.5%; }

  .col-md-offset-10 {
    margin-left: 41.66667%; }

  .col-md-offset-11 {
    margin-left: 45.83333%; }

  .col-md-offset-12 {
    margin-left: 50%; }

  .col-md-offset-13 {
    margin-left: 54.16667%; }

  .col-md-offset-14 {
    margin-left: 58.33333%; }

  .col-md-offset-15 {
    margin-left: 62.5%; }

  .col-md-offset-16 {
    margin-left: 66.66667%; }

  .col-md-offset-17 {
    margin-left: 70.83333%; }

  .col-md-offset-18 {
    margin-left: 75%; }

  .col-md-offset-19 {
    margin-left: 79.16667%; }

  .col-md-offset-20 {
    margin-left: 83.33333%; }

  .col-md-offset-21 {
    margin-left: 87.5%; }

  .col-md-offset-22 {
    margin-left: 91.66667%; }

  .col-md-offset-23 {
    margin-left: 95.83333%; }

  .col-md-offset-24 {
    margin-left: 100%; } }
@media (min-width: 1200px) {
  .container {
    width: 1170px; }

  .col-lg-23, .col-lg-22, .col-lg-21, .col-lg-20, .col-lg-19, .col-lg-18, .col-lg-17, .col-lg-16, .col-lg-15, .col-lg-14, .col-lg-13, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-lg-24 {
    float: left; }

  .col-lg-1 {
    width: 4.16667%; }

  .col-lg-2 {
    width: 8.33333%; }

  .col-lg-3 {
    width: 12.5%; }

  .col-lg-4 {
    width: 16.66667%; }

  .col-lg-5 {
    width: 20.83333%; }

  .col-lg-6 {
    width: 25%; }

  .col-lg-7 {
    width: 29.16667%; }

  .col-lg-8 {
    width: 33.33333%; }

  .col-lg-9 {
    width: 37.5%; }

  .col-lg-10 {
    width: 41.66667%; }

  .col-lg-11 {
    width: 45.83333%; }

  .col-lg-12 {
    width: 50%; }

  .col-lg-13 {
    width: 54.16667%; }

  .col-lg-14 {
    width: 58.33333%; }

  .col-lg-15 {
    width: 62.5%; }

  .col-lg-16 {
    width: 66.66667%; }

  .col-lg-17 {
    width: 70.83333%; }

  .col-lg-18 {
    width: 75%; }

  .col-lg-19 {
    width: 79.16667%; }

  .col-lg-20 {
    width: 83.33333%; }

  .col-lg-21 {
    width: 87.5%; }

  .col-lg-22 {
    width: 91.66667%; }

  .col-lg-23 {
    width: 95.83333%; }

  .col-lg-24 {
    width: 100%; }

  .col-lg-pull-1 {
    right: 4.16667%; }

  .col-lg-pull-2 {
    right: 8.33333%; }

  .col-lg-pull-3 {
    right: 12.5%; }

  .col-lg-pull-4 {
    right: 16.66667%; }

  .col-lg-pull-5 {
    right: 20.83333%; }

  .col-lg-pull-6 {
    right: 25%; }

  .col-lg-pull-7 {
    right: 29.16667%; }

  .col-lg-pull-8 {
    right: 33.33333%; }

  .col-lg-pull-9 {
    right: 37.5%; }

  .col-lg-pull-10 {
    right: 41.66667%; }

  .col-lg-pull-11 {
    right: 45.83333%; }

  .col-lg-pull-12 {
    right: 50%; }

  .col-lg-pull-13 {
    right: 54.16667%; }

  .col-lg-pull-14 {
    right: 58.33333%; }

  .col-lg-pull-15 {
    right: 62.5%; }

  .col-lg-pull-16 {
    right: 66.66667%; }

  .col-lg-pull-17 {
    right: 70.83333%; }

  .col-lg-pull-18 {
    right: 75%; }

  .col-lg-pull-19 {
    right: 79.16667%; }

  .col-lg-pull-20 {
    right: 83.33333%; }

  .col-lg-pull-21 {
    right: 87.5%; }

  .col-lg-pull-22 {
    right: 91.66667%; }

  .col-lg-pull-23 {
    right: 95.83333%; }

  .col-lg-pull-24 {
    right: 100%; }

  .col-lg-push-1 {
    left: 4.16667%; }

  .col-lg-push-2 {
    left: 8.33333%; }

  .col-lg-push-3 {
    left: 12.5%; }

  .col-lg-push-4 {
    left: 16.66667%; }

  .col-lg-push-5 {
    left: 20.83333%; }

  .col-lg-push-6 {
    left: 25%; }

  .col-lg-push-7 {
    left: 29.16667%; }

  .col-lg-push-8 {
    left: 33.33333%; }

  .col-lg-push-9 {
    left: 37.5%; }

  .col-lg-push-10 {
    left: 41.66667%; }

  .col-lg-push-11 {
    left: 45.83333%; }

  .col-lg-push-12 {
    left: 50%; }

  .col-lg-push-13 {
    left: 54.16667%; }

  .col-lg-push-14 {
    left: 58.33333%; }

  .col-lg-push-15 {
    left: 62.5%; }

  .col-lg-push-16 {
    left: 66.66667%; }

  .col-lg-push-17 {
    left: 70.83333%; }

  .col-lg-push-18 {
    left: 75%; }

  .col-lg-push-19 {
    left: 79.16667%; }

  .col-lg-push-20 {
    left: 83.33333%; }

  .col-lg-push-21 {
    left: 87.5%; }

  .col-lg-push-22 {
    left: 91.66667%; }

  .col-lg-push-23 {
    left: 95.83333%; }

  .col-lg-push-24 {
    left: 100%; }

  .col-lg-offset-1 {
    margin-left: 4.16667%; }

  .col-lg-offset-2 {
    margin-left: 8.33333%; }

  .col-lg-offset-3 {
    margin-left: 12.5%; }

  .col-lg-offset-4 {
    margin-left: 16.66667%; }

  .col-lg-offset-5 {
    margin-left: 20.83333%; }

  .col-lg-offset-6 {
    margin-left: 25%; }

  .col-lg-offset-7 {
    margin-left: 29.16667%; }

  .col-lg-offset-8 {
    margin-left: 33.33333%; }

  .col-lg-offset-9 {
    margin-left: 37.5%; }

  .col-lg-offset-10 {
    margin-left: 41.66667%; }

  .col-lg-offset-11 {
    margin-left: 45.83333%; }

  .col-lg-offset-12 {
    margin-left: 50%; }

  .col-lg-offset-13 {
    margin-left: 54.16667%; }

  .col-lg-offset-14 {
    margin-left: 58.33333%; }

  .col-lg-offset-15 {
    margin-left: 62.5%; }

  .col-lg-offset-16 {
    margin-left: 66.66667%; }

  .col-lg-offset-17 {
    margin-left: 70.83333%; }

  .col-lg-offset-18 {
    margin-left: 75%; }

  .col-lg-offset-19 {
    margin-left: 79.16667%; }

  .col-lg-offset-20 {
    margin-left: 83.33333%; }

  .col-lg-offset-21 {
    margin-left: 87.5%; }

  .col-lg-offset-22 {
    margin-left: 91.66667%; }

  .col-lg-offset-23 {
    margin-left: 95.83333%; }

  .col-lg-offset-24 {
    margin-left: 100%; } }
table {
  max-width: 100%;
  background-color: transparent; }

th {
  text-align: left; }

.table {
  width: 100%;
  margin-bottom: 22px; }
  .table > thead > tr > th,
  .table > thead > tr > td,
  .table > tbody > tr > th,
  .table > tbody > tr > td,
  .table > tfoot > tr > th,
  .table > tfoot > tr > td {
    padding: 8px 14px;
    line-height: 1.5;
    vertical-align: top;
    border-top: 1px solid #dddddd; }
  .table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #dddddd; }
  .table > caption + thead > tr:first-child > th,
  .table > caption + thead > tr:first-child > td,
  .table > colgroup + thead > tr:first-child > th,
  .table > colgroup + thead > tr:first-child > td,
  .table > thead:first-child > tr:first-child > th,
  .table > thead:first-child > tr:first-child > td {
    border-top: 0; }
  .table > tbody + tbody {
    border-top: 2px solid #dddddd; }
  .table .table {
    background-color: transparent; }

.table-condensed > thead > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > tfoot > tr > td {
  padding: 5px; }

.table-bordered {
  border: 1px solid #dddddd; }
  .table-bordered > thead > tr > th,
  .table-bordered > thead > tr > td,
  .table-bordered > tbody > tr > th,
  .table-bordered > tbody > tr > td,
  .table-bordered > tfoot > tr > th,
  .table-bordered > tfoot > tr > td {
    border: 1px solid #dddddd; }
  .table-bordered > thead > tr > th,
  .table-bordered > thead > tr > td {
    border-bottom-width: 2px; }

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f8f8f8; }

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: rgba(73, 168, 213, 0.07); }

table col[class*="col-"] {
  float: none;
  display: table-column; }

table td[class*="col-"],
table th[class*="col-"] {
  float: none;
  display: table-cell; }

.table > thead > tr > td.active,
.table > thead > tr > th.active, .table > thead > tr.active > td, .table > thead > tr.active > th,
.table > tbody > tr > td.active,
.table > tbody > tr > th.active,
.table > tbody > tr.active > td,
.table > tbody > tr.active > th,
.table > tfoot > tr > td.active,
.table > tfoot > tr > th.active,
.table > tfoot > tr.active > td,
.table > tfoot > tr.active > th {
  background-color: rgba(73, 168, 213, 0.07); }

.table > thead > tr > td.success,
.table > thead > tr > th.success, .table > thead > tr.success > td, .table > thead > tr.success > th,
.table > tbody > tr > td.success,
.table > tbody > tr > th.success,
.table > tbody > tr.success > td,
.table > tbody > tr.success > th,
.table > tfoot > tr > td.success,
.table > tfoot > tr > th.success,
.table > tfoot > tr.success > td,
.table > tfoot > tr.success > th {
  background-color: #676767; }

.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover, .table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr.success:hover > th {
  background-color: #5a5a5a; }

.table > thead > tr > td.danger,
.table > thead > tr > th.danger, .table > thead > tr.danger > td, .table > thead > tr.danger > th,
.table > tbody > tr > td.danger,
.table > tbody > tr > th.danger,
.table > tbody > tr.danger > td,
.table > tbody > tr.danger > th,
.table > tfoot > tr > td.danger,
.table > tfoot > tr > th.danger,
.table > tfoot > tr.danger > td,
.table > tfoot > tr.danger > th {
  background-color: #cb7171; }

.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover, .table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr.danger:hover > th {
  background-color: #c45e5e; }

.table > thead > tr > td.warning,
.table > thead > tr > th.warning, .table > thead > tr.warning > td, .table > thead > tr.warning > th,
.table > tbody > tr > td.warning,
.table > tbody > tr > th.warning,
.table > tbody > tr.warning > td,
.table > tbody > tr.warning > th,
.table > tfoot > tr > td.warning,
.table > tfoot > tr > th.warning,
.table > tfoot > tr.warning > td,
.table > tfoot > tr.warning > th {
  background-color: #f7eacd; }

.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover, .table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr.warning:hover > th {
  background-color: #f3e1b7; }

@media (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 16.5px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #dddddd;
    -webkit-overflow-scrolling: touch; }
    .table-responsive > .table {
      margin-bottom: 0; }
      .table-responsive > .table > thead > tr > th,
      .table-responsive > .table > thead > tr > td,
      .table-responsive > .table > tbody > tr > th,
      .table-responsive > .table > tbody > tr > td,
      .table-responsive > .table > tfoot > tr > th,
      .table-responsive > .table > tfoot > tr > td {
        white-space: nowrap; }
    .table-responsive > .table-bordered {
      border: 0; }
      .table-responsive > .table-bordered > thead > tr > th:first-child,
      .table-responsive > .table-bordered > thead > tr > td:first-child,
      .table-responsive > .table-bordered > tbody > tr > th:first-child,
      .table-responsive > .table-bordered > tbody > tr > td:first-child,
      .table-responsive > .table-bordered > tfoot > tr > th:first-child,
      .table-responsive > .table-bordered > tfoot > tr > td:first-child {
        border-left: 0; }
      .table-responsive > .table-bordered > thead > tr > th:last-child,
      .table-responsive > .table-bordered > thead > tr > td:last-child,
      .table-responsive > .table-bordered > tbody > tr > th:last-child,
      .table-responsive > .table-bordered > tbody > tr > td:last-child,
      .table-responsive > .table-bordered > tfoot > tr > th:last-child,
      .table-responsive > .table-bordered > tfoot > tr > td:last-child {
        border-right: 0; }
      .table-responsive > .table-bordered > tbody > tr:last-child > th,
      .table-responsive > .table-bordered > tbody > tr:last-child > td,
      .table-responsive > .table-bordered > tfoot > tr:last-child > th,
      .table-responsive > .table-bordered > tfoot > tr:last-child > td {
        border-bottom: 0; } }
fieldset {
  padding: 0;
  margin: 0;
  border: 0; }

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 22px;
  font-size: 22.5px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5; }

label {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: bold; }

input[type="search"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  /* IE8-9 */
  line-height: normal; }

input[type="file"] {
  display: block; }

select[multiple],
select[size] {
  height: auto; }

select optgroup {
  font-size: inherit;
  font-style: inherit;
  font-family: inherit; }

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px; }

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
  height: auto; }

output {
  display: block;
  padding-top: 9px;
  font-size: 15px;
  line-height: 1.5;
  color: #555555;
  vertical-align: middle; }

.form-control:-moz-placeholder {
  color: #9faaad; }
.form-control::-moz-placeholder {
  color: #9faaad; }
.form-control:-ms-input-placeholder {
  color: #9faaad; }
.form-control::-webkit-input-placeholder {
  color: #9faaad; }

.form-control {
  display: block;
  width: 100%;
  height: 40px;
  padding: 8px 20px;
  font-size: 15px;
  line-height: 1.5;
  color: #555555;
  vertical-align: middle;
  background-color: white;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
  .form-control:focus {
    border-color: #49a8d5;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(73, 168, 213, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(73, 168, 213, 0.6); }
  .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    cursor: not-allowed;
    background-color: #eeeeee; }

textarea.form-control {
  height: auto; }

.form-group {
  margin-bottom: 15px; }

.radio,
.checkbox {
  display: block;
  min-height: 22px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 20px;
  vertical-align: middle; }
  .radio label,
  .checkbox label {
    display: inline;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer; }

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  float: left;
  margin-left: -20px; }

.radio + .radio,
.checkbox + .checkbox {
  margin-top: -5px; }

.radio-inline,
.checkbox-inline {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  vertical-align: middle;
  font-weight: normal;
  cursor: pointer; }

.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px; }

input[type="radio"][disabled], fieldset[disabled] input[type="radio"],
input[type="checkbox"][disabled], fieldset[disabled]
input[type="checkbox"],
.radio[disabled], fieldset[disabled]
.radio,
.radio-inline[disabled], fieldset[disabled]
.radio-inline,
.checkbox[disabled], fieldset[disabled]
.checkbox,
.checkbox-inline[disabled], fieldset[disabled]
.checkbox-inline {
  cursor: not-allowed; }

.input-sm {
  height: 25px;
  padding: 2px 10px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 3px; }

select.input-sm {
  height: 25px;
  line-height: 25px; }

textarea.input-sm {
  height: auto; }

.input-lg {
  height: 47px;
  padding: 10px 26px;
  font-size: 19px;
  line-height: 1.33;
  border-radius: 6px; }

select.input-lg {
  height: 47px;
  line-height: 47px; }

textarea.input-lg {
  height: auto; }

.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline {
  color: #c1b293; }
.has-warning .form-control {
  border-color: #c1b293;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
  .has-warning .form-control:focus {
    border-color: #ae9b73;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #e6e0d4;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #e6e0d4; }
.has-warning .input-group-addon {
  color: #c1b293;
  border-color: #c1b293;
  background-color: #f7eacd; }

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
  color: #b94242; }
.has-error .form-control {
  border-color: #b94242;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
  .has-error .form-control:focus {
    border-color: #933535;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d68b8b;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d68b8b; }
.has-error .input-group-addon {
  color: #b94242;
  border-color: #b94242;
  background-color: #cb7171; }

.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline {
  color: #74af7e; }
.has-success .form-control {
  border-color: #74af7e;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
  .has-success .form-control:focus {
    border-color: #589863;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #b5d4ba;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #b5d4ba; }
.has-success .input-group-addon {
  color: #74af7e;
  border-color: #74af7e;
  background-color: #676767; }

.form-control-static {
  margin-bottom: 0; }

.help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #9fadb1; }

@media (min-width: 768px) {
  .form-inline .form-group, .navbar-form .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle; }
  .form-inline .form-control, .navbar-form .form-control {
    display: inline-block; }
  .form-inline .radio, .navbar-form .radio,
  .form-inline .checkbox,
  .navbar-form .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0; }
  .form-inline .radio input[type="radio"], .navbar-form .radio input[type="radio"],
  .form-inline .checkbox input[type="checkbox"],
  .navbar-form .checkbox input[type="checkbox"] {
    float: none;
    margin-left: 0; } }

.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 9px; }
.form-horizontal .form-group {
  margin-left: -15px;
  margin-right: -15px; }
  .form-horizontal .form-group:before, .form-horizontal .form-group:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */ }
  .form-horizontal .form-group:after {
    clear: both; }
.form-horizontal .form-control-static {
  padding-top: 9px; }
@media (min-width: 768px) {
  .form-horizontal .control-label {
    text-align: right; } }

.btn, .island-button, .forgot-password-button {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 8px 20px;
  font-size: 15px;
  line-height: 1.5;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none; }
  .btn:focus, .island-button:focus, .forgot-password-button:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
  .btn:hover, .island-button:hover, .forgot-password-button:hover, .btn:focus, .island-button:focus, .forgot-password-button:focus {
    color: #333333;
    text-decoration: none; }
  .btn:active, .island-button:active, .forgot-password-button:active, .btn.active, .active.island-button, .active.forgot-password-button {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
  .btn.disabled, .disabled.island-button, .disabled.forgot-password-button, .btn[disabled], [disabled].island-button, [disabled].forgot-password-button, fieldset[disabled] .btn, fieldset[disabled] .island-button, fieldset[disabled] .forgot-password-button {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none; }

.btn-link {
  color: #49a8d5;
  font-weight: normal;
  cursor: pointer;
  border-radius: 0; }
  .btn-link, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none; }
  .btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
    border-color: transparent; }
  .btn-link:hover, .btn-link:focus {
    color: #2780aa;
    text-decoration: underline;
    background-color: transparent; }
  .btn-link[disabled]:hover, .btn-link[disabled]:focus, fieldset[disabled] .btn-link:hover, fieldset[disabled] .btn-link:focus {
    color: #999999;
    text-decoration: none; }

.btn-lg, .btn-group-lg > .btn, .btn-group-lg > .island-button, .btn-group-lg > .forgot-password-button, .island-button, .forgot-password-button {
  padding: 10px 26px;
  font-size: 19px;
  line-height: 1.33;
  border-radius: 6px; }

.btn-sm, .btn-group-sm > .btn, .btn-group-sm > .island-button, .btn-group-sm > .forgot-password-button,
.btn-xs,
.btn-group-xs > .btn,
.btn-group-xs > .island-button,
.btn-group-xs > .forgot-password-button {
  padding: 2px 10px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 3px; }

.btn-xs, .btn-group-xs > .btn, .btn-group-xs > .island-button, .btn-group-xs > .forgot-password-button {
  padding: 1px 5px; }

.btn-block, .island-button, .forgot-password-button {
  display: block;
  width: 100%;
  padding-left: 0;
  padding-right: 0; }

.btn-block + .btn-block, .island-button + .btn-block, .forgot-password-button + .btn-block, .btn-block + .island-button, .island-button + .island-button, .forgot-password-button + .island-button, .btn-block + .forgot-password-button, .island-button + .forgot-password-button, .forgot-password-button + .forgot-password-button {
  margin-top: 5px; }

input[type="submit"].btn-block, input[type="submit"].island-button, input[type="submit"].forgot-password-button,
input[type="reset"].btn-block,
input[type="reset"].island-button,
input[type="reset"].forgot-password-button,
input[type="button"].btn-block,
input[type="button"].island-button,
input[type="button"].forgot-password-button {
  width: 100%; }

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear; }
  .fade.in {
    opacity: 1; }

.collapse {
  display: none; }
  .collapse.in {
    display: block; }

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  transition: height 0.35s ease; }

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid black;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-bottom: 0 dotted; }

.dropdown {
  position: relative; }

.dropdown-toggle:focus {
  outline: 0; }

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 15px;
  background-color: white;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box; }
  .dropdown-menu.pull-right {
    right: 0;
    left: auto; }
  .dropdown-menu .divider {
    height: 1px;
    margin: 10px 0;
    overflow: hidden;
    background-color: #e5e5e5; }
  .dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.5;
    color: #333333;
    white-space: nowrap; }

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: whitesmoke; }

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
  color: white;
  text-decoration: none;
  outline: 0;
  background-color: #1b92cb; }

.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
  color: #999999; }

.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed; }

.open > .dropdown-menu {
  display: block; }
.open > a {
  outline: 0; }

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 13px;
  line-height: 1.5;
  color: #999999; }

.dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 990; }

.pull-right > .dropdown-menu {
  right: 0;
  left: auto; }

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  border-top: 0 dotted;
  border-bottom: 4px solid black;
  content: ""; }
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 1px; }

@media (min-width: 768px) {
  .navbar-right .dropdown-menu {
    right: 0;
    left: auto; } }
.btn-default .caret {
  border-top-color: #333333; }
.btn-primary .caret, .btn-success .caret, .btn-warning .caret, .btn-danger .caret, .btn-info .caret {
  border-top-color: #fff; }

.dropup .btn-default .caret {
  border-bottom-color: #333333; }
.dropup .btn-primary .caret,
.dropup .btn-success .caret,
.dropup .btn-warning .caret,
.dropup .btn-danger .caret,
.dropup .btn-info .caret {
  border-bottom-color: #fff; }

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle; }
  .btn-group > .btn, .btn-group > .island-button, .btn-group > .forgot-password-button,
  .btn-group-vertical > .btn,
  .btn-group-vertical > .island-button,
  .btn-group-vertical > .forgot-password-button {
    position: relative;
    float: left; }
    .btn-group > .btn:hover, .btn-group > .island-button:hover, .btn-group > .forgot-password-button:hover, .btn-group > .btn:focus, .btn-group > .island-button:focus, .btn-group > .forgot-password-button:focus, .btn-group > .btn:active, .btn-group > .island-button:active, .btn-group > .forgot-password-button:active, .btn-group > .btn.active, .btn-group > .active.island-button, .btn-group > .active.forgot-password-button,
    .btn-group-vertical > .btn:hover,
    .btn-group-vertical > .island-button:hover,
    .btn-group-vertical > .forgot-password-button:hover,
    .btn-group-vertical > .btn:focus,
    .btn-group-vertical > .island-button:focus,
    .btn-group-vertical > .forgot-password-button:focus,
    .btn-group-vertical > .btn:active,
    .btn-group-vertical > .island-button:active,
    .btn-group-vertical > .forgot-password-button:active,
    .btn-group-vertical > .btn.active,
    .btn-group-vertical > .active.island-button,
    .btn-group-vertical > .active.forgot-password-button {
      z-index: 2; }
    .btn-group > .btn:focus, .btn-group > .island-button:focus, .btn-group > .forgot-password-button:focus,
    .btn-group-vertical > .btn:focus,
    .btn-group-vertical > .island-button:focus,
    .btn-group-vertical > .forgot-password-button:focus {
      outline: none; }

.btn-group .btn + .btn, .btn-group .island-button + .btn, .btn-group .forgot-password-button + .btn, .btn-group .btn + .island-button, .btn-group .island-button + .island-button, .btn-group .forgot-password-button + .island-button, .btn-group .btn + .forgot-password-button, .btn-group .island-button + .forgot-password-button, .btn-group .forgot-password-button + .forgot-password-button,
.btn-group .btn + .btn-group,
.btn-group .island-button + .btn-group,
.btn-group .forgot-password-button + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .island-button,
.btn-group .btn-group + .forgot-password-button,
.btn-group .btn-group + .btn-group {
  margin-left: -1px; }

.btn-toolbar:before, .btn-toolbar:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }
.btn-toolbar:after {
  clear: both; }
.btn-toolbar .btn-group {
  float: left; }
.btn-toolbar > .btn + .btn, .btn-toolbar > .island-button + .btn, .btn-toolbar > .forgot-password-button + .btn, .btn-toolbar > .btn + .island-button, .btn-toolbar > .island-button + .island-button, .btn-toolbar > .forgot-password-button + .island-button, .btn-toolbar > .btn + .forgot-password-button, .btn-toolbar > .island-button + .forgot-password-button, .btn-toolbar > .forgot-password-button + .forgot-password-button,
.btn-toolbar > .btn + .btn-group,
.btn-toolbar > .island-button + .btn-group,
.btn-toolbar > .forgot-password-button + .btn-group,
.btn-toolbar > .btn-group + .btn,
.btn-toolbar > .btn-group + .island-button,
.btn-toolbar > .btn-group + .forgot-password-button,
.btn-toolbar > .btn-group + .btn-group {
  margin-left: 5px; }

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .btn-group > .island-button:not(:first-child):not(:last-child):not(.dropdown-toggle), .btn-group > .forgot-password-button:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0; }

.btn-group > .btn:first-child, .btn-group > .island-button:first-child, .btn-group > .forgot-password-button:first-child {
  margin-left: 0; }
  .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .btn-group > .island-button:first-child:not(:last-child):not(.dropdown-toggle), .btn-group > .forgot-password-button:first-child:not(:last-child):not(.dropdown-toggle) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0; }

.btn-group > .btn:last-child:not(:first-child), .btn-group > .island-button:last-child:not(:first-child), .btn-group > .forgot-password-button:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0; }

.btn-group > .btn-group {
  float: left; }

.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn, .btn-group > .btn-group:not(:first-child):not(:last-child) > .island-button, .btn-group > .btn-group:not(:first-child):not(:last-child) > .forgot-password-button {
  border-radius: 0; }

.btn-group > .btn-group:first-child > .btn:last-child, .btn-group > .btn-group:first-child > .island-button:last-child, .btn-group > .btn-group:first-child > .forgot-password-button:last-child,
.btn-group > .btn-group:first-child > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0; }

.btn-group > .btn-group:last-child > .btn:first-child, .btn-group > .btn-group:last-child > .island-button:first-child, .btn-group > .btn-group:last-child > .forgot-password-button:first-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0; }

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0; }

.btn-group > .btn + .dropdown-toggle, .btn-group > .island-button + .dropdown-toggle, .btn-group > .forgot-password-button + .dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px; }

.btn-group > .btn-lg + .dropdown-toggle, .btn-group-lg.btn-group > .btn + .dropdown-toggle, .btn-group > .island-button + .dropdown-toggle, .btn-group > .forgot-password-button + .dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px; }

.btn-group.open .dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
  .btn-group.open .dropdown-toggle.btn-link {
    -webkit-box-shadow: none;
    box-shadow: none; }

.btn .caret, .island-button .caret, .forgot-password-button .caret {
  margin-left: 0; }

.btn-lg .caret, .btn-group-lg > .btn .caret, .island-button .caret, .forgot-password-button .caret {
  border-width: 5px 5px 0;
  border-bottom-width: 0; }

.dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret, .dropup .island-button .caret, .dropup .forgot-password-button .caret {
  border-width: 0 5px 5px; }

.btn-group-vertical > .btn, .btn-group-vertical > .island-button, .btn-group-vertical > .forgot-password-button,
.btn-group-vertical > .btn-group {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%; }
.btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }
.btn-group-vertical > .btn-group:after {
  clear: both; }
.btn-group-vertical > .btn-group > .btn, .btn-group-vertical > .btn-group > .island-button, .btn-group-vertical > .btn-group > .forgot-password-button {
  float: none; }
.btn-group-vertical > .btn + .btn, .btn-group-vertical > .island-button + .btn, .btn-group-vertical > .forgot-password-button + .btn, .btn-group-vertical > .btn + .island-button, .btn-group-vertical > .island-button + .island-button, .btn-group-vertical > .forgot-password-button + .island-button, .btn-group-vertical > .btn + .forgot-password-button, .btn-group-vertical > .island-button + .forgot-password-button, .btn-group-vertical > .forgot-password-button + .forgot-password-button,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .island-button + .btn-group,
.btn-group-vertical > .forgot-password-button + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .island-button,
.btn-group-vertical > .btn-group + .forgot-password-button,
.btn-group-vertical > .btn-group + .btn-group {
  margin-top: -1px;
  margin-left: 0; }

.btn-group-vertical > .btn:not(:first-child):not(:last-child), .btn-group-vertical > .island-button:not(:first-child):not(:last-child), .btn-group-vertical > .forgot-password-button:not(:first-child):not(:last-child) {
  border-radius: 0; }
.btn-group-vertical > .btn:first-child:not(:last-child), .btn-group-vertical > .island-button:first-child:not(:last-child), .btn-group-vertical > .forgot-password-button:first-child:not(:last-child) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0; }
.btn-group-vertical > .btn:last-child:not(:first-child), .btn-group-vertical > .island-button:last-child:not(:first-child), .btn-group-vertical > .forgot-password-button:last-child:not(:first-child) {
  border-bottom-left-radius: 4px;
  border-top-right-radius: 0;
  border-top-left-radius: 0; }

.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn, .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .island-button, .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .forgot-password-button {
  border-radius: 0; }

.btn-group-vertical > .btn-group:first-child > .btn:last-child, .btn-group-vertical > .btn-group:first-child > .island-button:last-child, .btn-group-vertical > .btn-group:first-child > .forgot-password-button:last-child,
.btn-group-vertical > .btn-group:first-child > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0; }

.btn-group-vertical > .btn-group:last-child > .btn:first-child, .btn-group-vertical > .btn-group:last-child > .island-button:first-child, .btn-group-vertical > .btn-group:last-child > .forgot-password-button:first-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0; }

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate; }
  .btn-group-justified .btn, .btn-group-justified .island-button, .btn-group-justified .forgot-password-button {
    float: none;
    display: table-cell;
    width: 1%; }

[data-toggle="buttons"] > .btn > input[type="radio"], [data-toggle="buttons"] > .island-button > input[type="radio"], [data-toggle="buttons"] > .forgot-password-button > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"],
[data-toggle="buttons"] > .island-button > input[type="checkbox"],
[data-toggle="buttons"] > .forgot-password-button > input[type="checkbox"] {
  display: none; }

.nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none; }
  .nav:before, .nav:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */ }
  .nav:after {
    clear: both; }
  .nav > li {
    position: relative;
    display: block; }
    .nav > li > a {
      position: relative;
      display: block;
      padding: 5px 10px; }
      .nav > li > a:hover, .nav > li > a:focus {
        text-decoration: none;
        background-color: #eeeeee; }
    .nav > li.disabled > a {
      color: #999999; }
      .nav > li.disabled > a:hover, .nav > li.disabled > a:focus {
        color: #999999;
        text-decoration: none;
        background-color: transparent;
        cursor: not-allowed; }
  .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: #eeeeee;
    border-color: #49a8d5; }
    .nav .open > a .caret, .nav .open > a:hover .caret, .nav .open > a:focus .caret {
      border-top-color: #2780aa;
      border-bottom-color: #2780aa; }
  .nav .nav-divider {
    height: 1px;
    margin: 10px 0;
    overflow: hidden;
    background-color: #e5e5e5; }
  .nav > li > a > img {
    max-width: none; }

.nav-tabs {
  border-bottom: 1px solid #dddddd; }
  .nav-tabs > li {
    float: left;
    margin-bottom: -1px; }
    .nav-tabs > li > a {
      margin-right: 2px;
      line-height: 1.5;
      border: 1px solid transparent;
      border-radius: 4px 4px 0 0; }
      .nav-tabs > li > a:hover {
        border-color: #eeeeee #eeeeee #dddddd; }
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
      color: #34928a;
      background-color: #d4d9da;
      border: 1px solid #34928a;
      border-bottom-color: transparent;
      cursor: default; }

.nav-pills > li {
  float: left; }
  .nav-pills > li > a {
    border-radius: 4px; }
  .nav-pills > li + li {
    margin-left: 2px; }
  .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    color: #f8f8f8;
    background-color: #02786e; }
    .nav-pills > li.active > a .caret, .nav-pills > li.active > a:hover .caret, .nav-pills > li.active > a:focus .caret {
      border-top-color: #f8f8f8;
      border-bottom-color: #f8f8f8; }

.nav-stacked > li {
  float: none; }
  .nav-stacked > li + li {
    margin-top: 2px;
    margin-left: 0; }

.nav-justified, .nav-tabs.nav-justified {
  width: 100%; }
  .nav-justified > li, .nav-tabs.nav-justified > li {
    float: none; }
    .nav-justified > li > a, .nav-tabs.nav-justified > li > a {
      text-align: center;
      margin-bottom: 5px; }
  .nav-justified > .dropdown .dropdown-menu {
    top: auto;
    left: auto; }
  @media (min-width: 768px) {
    .nav-justified > li, .nav-tabs.nav-justified > li {
      display: table-cell;
      width: 1%; }
      .nav-justified > li > a, .nav-tabs.nav-justified > li > a {
        margin-bottom: 0; } }

.nav-tabs-justified, .nav-tabs.nav-justified {
  border-bottom: 0; }
  .nav-tabs-justified > li > a, .nav-tabs.nav-justified > li > a {
    margin-right: 0;
    border-radius: 4px; }
  .nav-tabs-justified > .active > a, .nav-tabs.nav-justified > .active > a,
  .nav-tabs-justified > .active > a:hover,
  .nav-tabs.nav-justified > .active > a:hover,
  .nav-tabs-justified > .active > a:focus,
  .nav-tabs.nav-justified > .active > a:focus {
    border: 1px solid #dddddd; }
  @media (min-width: 768px) {
    .nav-tabs-justified > li > a, .nav-tabs.nav-justified > li > a {
      border-bottom: 1px solid #dddddd;
      border-radius: 4px 4px 0 0; }
    .nav-tabs-justified > .active > a, .nav-tabs.nav-justified > .active > a,
    .nav-tabs-justified > .active > a:hover,
    .nav-tabs.nav-justified > .active > a:hover,
    .nav-tabs-justified > .active > a:focus,
    .nav-tabs.nav-justified > .active > a:focus {
      border-bottom-color: transparent; } }

.tab-content > .tab-pane {
  display: none; }
.tab-content > .active {
  display: block; }

.nav .caret {
  border-top-color: #49a8d5;
  border-bottom-color: #49a8d5; }

.nav a:hover .caret {
  border-top-color: #2780aa;
  border-bottom-color: #2780aa; }

.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-right-radius: 0;
  border-top-left-radius: 0; }

.navbar {
  position: relative;
  min-height: 75px;
  margin-bottom: 0;
  border: 1px solid transparent; }
  .navbar:before, .navbar:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */ }
  .navbar:after {
    clear: both; }
  @media (min-width: 768px) {
    .navbar {
      border-radius: 4px; } }

.navbar-header:before, .navbar-header:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }
.navbar-header:after {
  clear: both; }
@media (min-width: 768px) {
  .navbar-header {
    float: left; } }

.navbar-collapse {
  max-height: 340px;
  overflow-x: visible;
  padding-right: 15px;
  padding-left: 15px;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-overflow-scrolling: touch; }
  .navbar-collapse:before, .navbar-collapse:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */ }
  .navbar-collapse:after {
    clear: both; }
  .navbar-collapse.in {
    overflow-y: auto; }
  @media (min-width: 768px) {
    .navbar-collapse {
      width: auto;
      border-top: 0;
      box-shadow: none; }
      .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important; }
      .navbar-collapse.in {
        overflow-y: auto; }
      .navbar-collapse .navbar-nav.navbar-left:first-child {
        margin-left: -15px; }
      .navbar-collapse .navbar-nav.navbar-right:last-child {
        margin-right: -15px; }
      .navbar-collapse .navbar-text:last-child {
        margin-right: 0; } }

.container > .navbar-header,
.container > .navbar-collapse {
  margin-right: -15px;
  margin-left: -15px; }
  @media (min-width: 768px) {
    .container > .navbar-header,
    .container > .navbar-collapse {
      margin-right: 0;
      margin-left: 0; } }

.navbar-static-top {
  z-index: 1000;
  border-width: 0 0 1px; }
  @media (min-width: 768px) {
    .navbar-static-top {
      border-radius: 0; } }

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030; }
  @media (min-width: 768px) {
    .navbar-fixed-top,
    .navbar-fixed-bottom {
      border-radius: 0; } }

.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px; }

.navbar-fixed-bottom {
  bottom: 0;
  margin-bottom: 0;
  border-width: 1px 0 0; }

.navbar-brand {
  float: left;
  padding: 12px 15px;
  font-size: 19px;
  line-height: 22px; }
  .navbar-brand:hover, .navbar-brand:focus {
    text-decoration: none; }
  @media (min-width: 768px) {
    .navbar > .container .navbar-brand {
      margin-left: -15px; } }

.navbar-toggle {
  position: relative;
  float: right;
  margin-right: 15px;
  padding: 9px 10px;
  margin-top: 20.5px;
  margin-bottom: 20.5px;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 4px; }
  .navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px; }
  .navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px; }
  @media (min-width: 768px) {
    .navbar-toggle {
      display: none; } }

.navbar-nav {
  margin: 6px -15px; }
  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 22px; }
  @media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu {
      position: static;
      float: none;
      width: auto;
      margin-top: 0;
      background-color: transparent;
      border: 0;
      box-shadow: none; }
      .navbar-nav .open .dropdown-menu > li > a,
      .navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 5px 15px 5px 25px; }
      .navbar-nav .open .dropdown-menu > li > a {
        line-height: 22px; }
        .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus {
          background-image: none; } }
  @media (min-width: 768px) {
    .navbar-nav {
      float: left;
      margin: 0; }
      .navbar-nav > li {
        float: left; }
        .navbar-nav > li > a {
          padding-top: 26.5px;
          padding-bottom: 26.5px; } }

@media (min-width: 768px) {
  .navbar-left {
    float: left !important; }

  .navbar-right {
    float: right !important; } }
.navbar-form {
  margin-left: -15px;
  margin-right: -15px;
  padding: 10px 15px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-top: 17.5px;
  margin-bottom: 17.5px; }
  @media (max-width: 767px) {
    .navbar-form .form-group {
      margin-bottom: 5px; } }
  @media (min-width: 768px) {
    .navbar-form {
      width: auto;
      border: 0;
      margin-left: 0;
      margin-right: 0;
      padding-top: 0;
      padding-bottom: 0;
      -webkit-box-shadow: none;
      box-shadow: none; } }

.navbar-nav > li > .dropdown-menu {
  margin-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0; }

.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0; }

.navbar-nav.pull-right > li > .dropdown-menu,
.navbar-nav > li > .dropdown-menu.pull-right {
  left: auto;
  right: 0; }

.navbar-btn {
  margin-top: 17.5px;
  margin-bottom: 17.5px; }

.navbar-text {
  float: left;
  margin-top: 26.5px;
  margin-bottom: 26.5px; }
  @media (min-width: 768px) {
    .navbar-text {
      margin-left: 15px;
      margin-right: 15px; } }

.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7; }
  .navbar-default .navbar-brand {
    color: #777777; }
    .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
      color: #5e5e5e;
      background-color: transparent; }
  .navbar-default .navbar-text {
    color: #777777; }
  .navbar-default .navbar-nav > li > a {
    color: #777777; }
    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
      color: #333333;
      background-color: transparent; }
  .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #555555;
    background-color: #e7e7e7; }
  .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus {
    color: #cccccc;
    background-color: transparent; }
  .navbar-default .navbar-toggle {
    border-color: #dddddd; }
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
      background-color: #dddddd; }
    .navbar-default .navbar-toggle .icon-bar {
      background-color: #cccccc; }
  .navbar-default .navbar-collapse,
  .navbar-default .navbar-form {
    border-color: #e7e7e7; }
  .navbar-default .navbar-nav > .dropdown > a:hover .caret,
  .navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333333;
    border-bottom-color: #333333; }
  .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: #e7e7e7;
    color: #555555; }
    .navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret {
      border-top-color: #555555;
      border-bottom-color: #555555; }
  .navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777777;
    border-bottom-color: #777777; }
  @media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
      color: #777777; }
      .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333333;
        background-color: transparent; }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
      color: #555555;
      background-color: #e7e7e7; }
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
      color: #cccccc;
      background-color: transparent; } }
  .navbar-default .navbar-link {
    color: #777777; }
    .navbar-default .navbar-link:hover {
      color: #333333; }

.navbar-inverse {
  background-color: #34928a;
  border-color: transparent; }
  .navbar-inverse .navbar-brand {
    color: #f8f8f8; }
    .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
      color: white;
      background-color: transparent; }
  .navbar-inverse .navbar-text {
    color: #f8f8f8; }
  .navbar-inverse .navbar-nav > li > a {
    color: #72b5ad; }
    .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
      color: white;
      background-color: transparent; }
  .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: #f8f8f8;
    background-color: #34928a; }
  .navbar-inverse .navbar-nav > .disabled > a, .navbar-inverse .navbar-nav > .disabled > a:hover, .navbar-inverse .navbar-nav > .disabled > a:focus {
    color: #444444;
    background-color: transparent; }
  .navbar-inverse .navbar-toggle {
    border-color: #72b5ad; }
    .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
      background-color: #02786e; }
    .navbar-inverse .navbar-toggle .icon-bar {
      background-color: #f8f8f8; }
  .navbar-inverse .navbar-collapse,
  .navbar-inverse .navbar-form {
    border-color: #2b7871; }
  .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
    background-color: #34928a;
    color: #f8f8f8; }
  .navbar-inverse .navbar-nav > .dropdown > a:hover .caret {
    border-top-color: white;
    border-bottom-color: white; }
  .navbar-inverse .navbar-nav > .dropdown > a .caret {
    border-top-color: #72b5ad;
    border-bottom-color: #72b5ad; }
  .navbar-inverse .navbar-nav > .open > a .caret, .navbar-inverse .navbar-nav > .open > a:hover .caret, .navbar-inverse .navbar-nav > .open > a:focus .caret {
    border-top-color: #f8f8f8;
    border-bottom-color: #f8f8f8; }
  @media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
      border-color: transparent; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
      color: #72b5ad; }
      .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
        color: white;
        background-color: transparent; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
      color: #f8f8f8;
      background-color: #34928a; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
      color: #444444;
      background-color: transparent; } }
  .navbar-inverse .navbar-link {
    color: #72b5ad; }
    .navbar-inverse .navbar-link:hover {
      color: white; }

.alert {
  padding: 15px;
  margin-bottom: 22px;
  border: 1px solid transparent;
  border-radius: 6px; }
  .alert h4 {
    margin-top: 0;
    color: inherit; }
  .alert .alert-link {
    font-weight: bold; }
  .alert > p,
  .alert > ul {
    margin-bottom: 0; }
  .alert > p + p {
    margin-top: 5px; }

.alert-dismissable {
  padding-right: 35px; }
  .alert-dismissable .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit; }

.alert-success {
  background-color: #99d1a1;
  border-color: #74af7e;
  color: #676767; }
  .alert-success hr {
    border-top-color: #64a66f; }
  .alert-success .alert-link {
    color: #4e4e4e; }

.alert-info, .alert-notice {
  background-color: #c8e9ed;
  border-color: #8ac0c4;
  color: #676767; }
  .alert-info hr, .alert-notice hr {
    border-top-color: #79b7bb; }
  .alert-info .alert-link, .alert-notice .alert-link {
    color: #4e4e4e; }

.alert-warning {
  background-color: #f7eacd;
  border-color: #c1b293;
  color: #676767; }
  .alert-warning hr {
    border-top-color: #b8a683; }
  .alert-warning .alert-link {
    color: #4e4e4e; }

.alert-danger {
  background-color: #cb7171;
  border-color: #b94242;
  color: #f8f8f8; }
  .alert-danger hr {
    border-top-color: #a63b3b; }
  .alert-danger .alert-link {
    color: #dfdfdf; }

.media,
.media-body {
  overflow: hidden;
  zoom: 1; }

.media,
.media .media {
  margin-top: 15px; }

.media:first-child {
  margin-top: 0; }

.media-object {
  display: block; }

.media-heading {
  margin: 0 0 5px; }

.media > .pull-left {
  margin-right: 10px; }
.media > .pull-right {
  margin-left: 10px; }

.media-list {
  padding-left: 0;
  list-style: none; }

.list-group {
  margin-bottom: 20px;
  padding-left: 0; }

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: white;
  border: 1px solid #dddddd; }
  .list-group-item:first-child {
    border-top-right-radius: 0;
    border-top-left-radius: 0; }
  .list-group-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0; }
  .list-group-item > .badge {
    float: right; }
  .list-group-item > .badge + .badge {
    margin-right: 5px; }

a.list-group-item {
  color: #555555; }
  a.list-group-item .list-group-item-heading {
    color: #333333; }
  a.list-group-item:hover, a.list-group-item:focus {
    text-decoration: none;
    background-color: whitesmoke; }
  a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus {
    z-index: 2;
    color: white;
    background-color: #1b92cb;
    border-color: #1b92cb; }
    a.list-group-item.active .list-group-item-heading, a.list-group-item.active:hover .list-group-item-heading, a.list-group-item.active:focus .list-group-item-heading {
      color: inherit; }
    a.list-group-item.active .list-group-item-text, a.list-group-item.active:hover .list-group-item-text, a.list-group-item.active:focus .list-group-item-text {
      color: #bce3f6; }

.list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px; }

.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3; }

.panel {
  margin-bottom: 22px;
  background-color: white;
  border: 1px solid transparent;
  border-radius: 0;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); }

.panel-body {
  padding: 15px; }
  .panel-body:before, .panel-body:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */ }
  .panel-body:after {
    clear: both; }

.panel > .list-group {
  margin-bottom: 0; }
  .panel > .list-group .list-group-item {
    border-width: 1px 0; }
    .panel > .list-group .list-group-item:first-child {
      border-top-right-radius: 0;
      border-top-left-radius: 0; }
    .panel > .list-group .list-group-item:last-child {
      border-bottom: 0; }

.panel-heading + .list-group .list-group-item:first-child {
  border-top-width: 0; }

.panel > .table,
.panel > .table-responsive {
  margin-bottom: 0; }
.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive {
  border-top: 1px solid #dddddd; }
.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
  border: 0; }
  .panel > .table-bordered > thead > tr > th:first-child,
  .panel > .table-bordered > thead > tr > td:first-child,
  .panel > .table-bordered > tbody > tr > th:first-child,
  .panel > .table-bordered > tbody > tr > td:first-child,
  .panel > .table-bordered > tfoot > tr > th:first-child,
  .panel > .table-bordered > tfoot > tr > td:first-child,
  .panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
  .panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
  .panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0; }
  .panel > .table-bordered > thead > tr > th:last-child,
  .panel > .table-bordered > thead > tr > td:last-child,
  .panel > .table-bordered > tbody > tr > th:last-child,
  .panel > .table-bordered > tbody > tr > td:last-child,
  .panel > .table-bordered > tfoot > tr > th:last-child,
  .panel > .table-bordered > tfoot > tr > td:last-child,
  .panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
  .panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
  .panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0; }
  .panel > .table-bordered > thead > tr:last-child > th, .panel > .table-bordered > thead > tr:last-child > td,
  .panel > .table-bordered > tbody > tr:last-child > th,
  .panel > .table-bordered > tbody > tr:last-child > td,
  .panel > .table-bordered > tfoot > tr:last-child > th,
  .panel > .table-bordered > tfoot > tr:last-child > td,
  .panel > .table-responsive > .table-bordered > thead > tr:last-child > th,
  .panel > .table-responsive > .table-bordered > thead > tr:last-child > td,
  .panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0; }

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-right-radius: -1;
  border-top-left-radius: -1; }
  .panel-heading > .dropdown .dropdown-toggle {
    color: inherit; }

.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 17px; }
  .panel-title > a {
    color: inherit; }

.panel-footer {
  padding: 10px 15px;
  background-color: whitesmoke;
  border-top: 1px solid #dddddd;
  border-bottom-right-radius: -1;
  border-bottom-left-radius: -1; }

.panel-group .panel {
  margin-bottom: 0;
  border-radius: 0;
  overflow: hidden; }
  .panel-group .panel + .panel {
    margin-top: 5px; }
.panel-group .panel-heading {
  border-bottom: 0; }
  .panel-group .panel-heading + .panel-collapse .panel-body {
    border-top: 1px solid #dddddd; }
.panel-group .panel-footer {
  border-top: 0; }
  .panel-group .panel-footer + .panel-collapse .panel-body {
    border-bottom: 1px solid #dddddd; }

.panel-default {
  border-color: transparent; }
  .panel-default > .panel-heading {
    color: #5d6e73;
    background-color: none;
    border-color: transparent; }
    .panel-default > .panel-heading + .panel-collapse .panel-body {
      border-top-color: transparent; }
    .panel-default > .panel-heading > .dropdown .caret {
      border-color: #5d6e73 transparent; }
  .panel-default > .panel-footer + .panel-collapse .panel-body {
    border-bottom-color: transparent; }

.panel-primary {
  border-color: #1b92cb; }
  .panel-primary > .panel-heading {
    color: white;
    background-color: #1b92cb;
    border-color: #1b92cb; }
    .panel-primary > .panel-heading + .panel-collapse .panel-body {
      border-top-color: #1b92cb; }
    .panel-primary > .panel-heading > .dropdown .caret {
      border-color: white transparent; }
  .panel-primary > .panel-footer + .panel-collapse .panel-body {
    border-bottom-color: #1b92cb; }

.panel-success {
  border-color: #74af7e; }
  .panel-success > .panel-heading {
    color: #74af7e;
    background-color: #676767;
    border-color: #74af7e; }
    .panel-success > .panel-heading + .panel-collapse .panel-body {
      border-top-color: #74af7e; }
    .panel-success > .panel-heading > .dropdown .caret {
      border-color: #74af7e transparent; }
  .panel-success > .panel-footer + .panel-collapse .panel-body {
    border-bottom-color: #74af7e; }

.panel-warning {
  border-color: #c1b293; }
  .panel-warning > .panel-heading {
    color: #c1b293;
    background-color: #f7eacd;
    border-color: #c1b293; }
    .panel-warning > .panel-heading + .panel-collapse .panel-body {
      border-top-color: #c1b293; }
    .panel-warning > .panel-heading > .dropdown .caret {
      border-color: #c1b293 transparent; }
  .panel-warning > .panel-footer + .panel-collapse .panel-body {
    border-bottom-color: #c1b293; }

.panel-danger {
  border-color: #b94242; }
  .panel-danger > .panel-heading {
    color: #b94242;
    background-color: #cb7171;
    border-color: #b94242; }
    .panel-danger > .panel-heading + .panel-collapse .panel-body {
      border-top-color: #b94242; }
    .panel-danger > .panel-heading > .dropdown .caret {
      border-color: #b94242 transparent; }
  .panel-danger > .panel-footer + .panel-collapse .panel-body {
    border-bottom-color: #b94242; }

.panel-info {
  border-color: #c0b84d; }
  .panel-info > .panel-heading {
    color: #8e8837;
    background-color: #e2df80;
    border-color: #c0b84d; }
    .panel-info > .panel-heading + .panel-collapse .panel-body {
      border-top-color: #c0b84d; }
    .panel-info > .panel-heading > .dropdown .caret {
      border-color: #8e8837 transparent; }
  .panel-info > .panel-footer + .panel-collapse .panel-body {
    border-bottom-color: #c0b84d; }

.close {
  float: right;
  font-size: 22.5px;
  font-weight: bold;
  line-height: 1;
  color: black;
  text-shadow: 0 1px 0 white;
  opacity: 0.2;
  filter: alpha(opacity=20); }
  .close:hover, .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.5;
    filter: alpha(opacity=50); }

button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none; }

.modal-open {
  overflow: hidden; }

.modal {
  display: none;
  overflow: auto;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040; }
  .modal.fade .modal-dialog {
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    transform: translate(0, -25%);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -moz-transition: -moz-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out; }
  .modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0); }

.modal-dialog {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  padding: 10px;
  z-index: 1050; }

.modal-content {
  position: relative;
  background-color: #f8f8f8;
  border: 1px solid #34928a;
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  outline: none; }

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  background-color: black; }
  .modal-backdrop.fade {
    opacity: 0;
    filter: alpha(opacity=0); }
  .modal-backdrop.in {
    opacity: 0.5;
    filter: alpha(opacity=50); }

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  min-height: 16.5px; }

.modal-header .close {
  margin-top: -2px; }

.modal-title {
  margin: 0;
  line-height: 1.5; }

.modal-body {
  position: relative;
  padding: 20px; }

.modal-footer {
  margin-top: 15px;
  padding: 19px 20px 20px;
  text-align: right;
  border-top: 1px solid #e5e5e5; }
  .modal-footer:before, .modal-footer:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */ }
  .modal-footer:after {
    clear: both; }
  .modal-footer .btn + .btn, .modal-footer .island-button + .btn, .modal-footer .forgot-password-button + .btn, .modal-footer .btn + .island-button, .modal-footer .island-button + .island-button, .modal-footer .forgot-password-button + .island-button, .modal-footer .btn + .forgot-password-button, .modal-footer .island-button + .forgot-password-button, .modal-footer .forgot-password-button + .forgot-password-button {
    margin-left: 5px;
    margin-bottom: 0; }
  .modal-footer .btn-group .btn + .btn, .modal-footer .btn-group .island-button + .btn, .modal-footer .btn-group .forgot-password-button + .btn, .modal-footer .btn-group .btn + .island-button, .modal-footer .btn-group .island-button + .island-button, .modal-footer .btn-group .forgot-password-button + .island-button, .modal-footer .btn-group .btn + .forgot-password-button, .modal-footer .btn-group .island-button + .forgot-password-button, .modal-footer .btn-group .forgot-password-button + .forgot-password-button {
    margin-left: -1px; }
  .modal-footer .btn-block + .btn-block, .modal-footer .island-button + .btn-block, .modal-footer .forgot-password-button + .btn-block, .modal-footer .btn-block + .island-button, .modal-footer .island-button + .island-button, .modal-footer .forgot-password-button + .island-button, .modal-footer .btn-block + .forgot-password-button, .modal-footer .island-button + .forgot-password-button, .modal-footer .forgot-password-button + .forgot-password-button {
    margin-left: 0; }

@media screen and (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    padding-top: 30px;
    padding-bottom: 30px; }

  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } }
.tooltip {
  position: absolute;
  z-index: 1030;
  display: block;
  visibility: visible;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  filter: alpha(opacity=0); }
  .tooltip.in {
    opacity: 0.9;
    filter: alpha(opacity=90); }
  .tooltip.top {
    margin-top: -3px;
    padding: 5px 0; }
  .tooltip.right {
    margin-left: 3px;
    padding: 0 5px; }
  .tooltip.bottom {
    margin-top: 3px;
    padding: 5px 0; }
  .tooltip.left {
    margin-left: -3px;
    padding: 0 5px; }

.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #d4d9da;
  text-align: center;
  text-decoration: none;
  background-color: #414141;
  border-radius: 4px; }

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid; }

.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #414141; }
.tooltip.top-left .tooltip-arrow {
  bottom: 0;
  left: 5px;
  border-width: 5px 5px 0;
  border-top-color: #414141; }
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  right: 5px;
  border-width: 5px 5px 0;
  border-top-color: #414141; }
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #414141; }
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #414141; }
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #414141; }
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  left: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #414141; }
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  right: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #414141; }

@-ms-viewport {
  width: device-width; }

.visible-xs,
tr.visible-xs,
th.visible-xs,
td.visible-xs {
  display: none !important; }

@media (max-width: 767px) {
  .visible-xs {
    display: block !important; }

  tr.visible-xs {
    display: table-row !important; }

  th.visible-xs,
  td.visible-xs {
    display: table-cell !important; } }
@media (min-width: 768px) and (max-width: 991px) {
  .visible-xs.visible-sm {
    display: block !important; }

  tr.visible-xs.visible-sm {
    display: table-row !important; }

  th.visible-xs.visible-sm,
  td.visible-xs.visible-sm {
    display: table-cell !important; } }
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-xs.visible-md {
    display: block !important; }

  tr.visible-xs.visible-md {
    display: table-row !important; }

  th.visible-xs.visible-md,
  td.visible-xs.visible-md {
    display: table-cell !important; } }
@media (min-width: 1200px) {
  .visible-xs.visible-lg {
    display: block !important; }

  tr.visible-xs.visible-lg {
    display: table-row !important; }

  th.visible-xs.visible-lg,
  td.visible-xs.visible-lg {
    display: table-cell !important; } }
.visible-sm,
tr.visible-sm,
th.visible-sm,
td.visible-sm {
  display: none !important; }

@media (max-width: 767px) {
  .visible-sm.visible-xs {
    display: block !important; }

  tr.visible-sm.visible-xs {
    display: table-row !important; }

  th.visible-sm.visible-xs,
  td.visible-sm.visible-xs {
    display: table-cell !important; } }
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important; }

  tr.visible-sm {
    display: table-row !important; }

  th.visible-sm,
  td.visible-sm {
    display: table-cell !important; } }
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-sm.visible-md {
    display: block !important; }

  tr.visible-sm.visible-md {
    display: table-row !important; }

  th.visible-sm.visible-md,
  td.visible-sm.visible-md {
    display: table-cell !important; } }
@media (min-width: 1200px) {
  .visible-sm.visible-lg {
    display: block !important; }

  tr.visible-sm.visible-lg {
    display: table-row !important; }

  th.visible-sm.visible-lg,
  td.visible-sm.visible-lg {
    display: table-cell !important; } }
.visible-md,
tr.visible-md,
th.visible-md,
td.visible-md {
  display: none !important; }

@media (max-width: 767px) {
  .visible-md.visible-xs {
    display: block !important; }

  tr.visible-md.visible-xs {
    display: table-row !important; }

  th.visible-md.visible-xs,
  td.visible-md.visible-xs {
    display: table-cell !important; } }
@media (min-width: 768px) and (max-width: 991px) {
  .visible-md.visible-sm {
    display: block !important; }

  tr.visible-md.visible-sm {
    display: table-row !important; }

  th.visible-md.visible-sm,
  td.visible-md.visible-sm {
    display: table-cell !important; } }
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important; }

  tr.visible-md {
    display: table-row !important; }

  th.visible-md,
  td.visible-md {
    display: table-cell !important; } }
@media (min-width: 1200px) {
  .visible-md.visible-lg {
    display: block !important; }

  tr.visible-md.visible-lg {
    display: table-row !important; }

  th.visible-md.visible-lg,
  td.visible-md.visible-lg {
    display: table-cell !important; } }
.visible-lg,
tr.visible-lg,
th.visible-lg,
td.visible-lg {
  display: none !important; }

@media (max-width: 767px) {
  .visible-lg.visible-xs {
    display: block !important; }

  tr.visible-lg.visible-xs {
    display: table-row !important; }

  th.visible-lg.visible-xs,
  td.visible-lg.visible-xs {
    display: table-cell !important; } }
@media (min-width: 768px) and (max-width: 991px) {
  .visible-lg.visible-sm {
    display: block !important; }

  tr.visible-lg.visible-sm {
    display: table-row !important; }

  th.visible-lg.visible-sm,
  td.visible-lg.visible-sm {
    display: table-cell !important; } }
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-lg.visible-md {
    display: block !important; }

  tr.visible-lg.visible-md {
    display: table-row !important; }

  th.visible-lg.visible-md,
  td.visible-lg.visible-md {
    display: table-cell !important; } }
@media (min-width: 1200px) {
  .visible-lg {
    display: block !important; }

  tr.visible-lg {
    display: table-row !important; }

  th.visible-lg,
  td.visible-lg {
    display: table-cell !important; } }
.hidden-xs {
  display: block !important; }

tr.hidden-xs {
  display: table-row !important; }

th.hidden-xs,
td.hidden-xs {
  display: table-cell !important; }

@media (max-width: 767px) {
  .hidden-xs,
  tr.hidden-xs,
  th.hidden-xs,
  td.hidden-xs {
    display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-xs.hidden-sm,
  tr.hidden-xs.hidden-sm,
  th.hidden-xs.hidden-sm,
  td.hidden-xs.hidden-sm {
    display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-xs.hidden-md,
  tr.hidden-xs.hidden-md,
  th.hidden-xs.hidden-md,
  td.hidden-xs.hidden-md {
    display: none !important; } }
@media (min-width: 1200px) {
  .hidden-xs.hidden-lg,
  tr.hidden-xs.hidden-lg,
  th.hidden-xs.hidden-lg,
  td.hidden-xs.hidden-lg {
    display: none !important; } }
.hidden-sm {
  display: block !important; }

tr.hidden-sm {
  display: table-row !important; }

th.hidden-sm,
td.hidden-sm {
  display: table-cell !important; }

@media (max-width: 767px) {
  .hidden-sm.hidden-xs,
  tr.hidden-sm.hidden-xs,
  th.hidden-sm.hidden-xs,
  td.hidden-sm.hidden-xs {
    display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm,
  tr.hidden-sm,
  th.hidden-sm,
  td.hidden-sm {
    display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-sm.hidden-md,
  tr.hidden-sm.hidden-md,
  th.hidden-sm.hidden-md,
  td.hidden-sm.hidden-md {
    display: none !important; } }
@media (min-width: 1200px) {
  .hidden-sm.hidden-lg,
  tr.hidden-sm.hidden-lg,
  th.hidden-sm.hidden-lg,
  td.hidden-sm.hidden-lg {
    display: none !important; } }
.hidden-md {
  display: block !important; }

tr.hidden-md {
  display: table-row !important; }

th.hidden-md,
td.hidden-md {
  display: table-cell !important; }

@media (max-width: 767px) {
  .hidden-md.hidden-xs,
  tr.hidden-md.hidden-xs,
  th.hidden-md.hidden-xs,
  td.hidden-md.hidden-xs {
    display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-md.hidden-sm,
  tr.hidden-md.hidden-sm,
  th.hidden-md.hidden-sm,
  td.hidden-md.hidden-sm {
    display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md,
  tr.hidden-md,
  th.hidden-md,
  td.hidden-md {
    display: none !important; } }
@media (min-width: 1200px) {
  .hidden-md.hidden-lg,
  tr.hidden-md.hidden-lg,
  th.hidden-md.hidden-lg,
  td.hidden-md.hidden-lg {
    display: none !important; } }
.hidden-lg {
  display: block !important; }

tr.hidden-lg {
  display: table-row !important; }

th.hidden-lg,
td.hidden-lg {
  display: table-cell !important; }

@media (max-width: 767px) {
  .hidden-lg.hidden-xs,
  tr.hidden-lg.hidden-xs,
  th.hidden-lg.hidden-xs,
  td.hidden-lg.hidden-xs {
    display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-lg.hidden-sm,
  tr.hidden-lg.hidden-sm,
  th.hidden-lg.hidden-sm,
  td.hidden-lg.hidden-sm {
    display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-lg.hidden-md,
  tr.hidden-lg.hidden-md,
  th.hidden-lg.hidden-md,
  td.hidden-lg.hidden-md {
    display: none !important; } }
@media (min-width: 1200px) {
  .hidden-lg,
  tr.hidden-lg,
  th.hidden-lg,
  td.hidden-lg {
    display: none !important; } }
.visible-print,
tr.visible-print,
th.visible-print,
td.visible-print {
  display: none !important; }

@media print {
  .visible-print {
    display: block !important; }

  tr.visible-print {
    display: table-row !important; }

  th.visible-print,
  td.visible-print {
    display: table-cell !important; }

  .hidden-print,
  tr.hidden-print,
  th.hidden-print,
  td.hidden-print {
    display: none !important; } }
/* ==========================================================================
  Compass Helpers
  ========================================================================== */
/* ==========================================================================
   Mixin and functions
   ========================================================================== */
/*
 * clearfix     used project wide to clear floats and create a new formatting context
 * usage      @include clearfix-me(<empty|overflow|facebook|micro|stubborn>)
 * $clearfix-method sets default method
 */
.box, .box .boxHead,
.box .boxFoot, .list-vertical-divider, .list-vertical-divider-2 {
  zoom: 1; }
  .box:before, .box .boxHead:before,
  .box .boxFoot:before, .list-vertical-divider:before, .list-vertical-divider-2:before, .box:after, .box .boxHead:after,
  .box .boxFoot:after, .list-vertical-divider:after, .list-vertical-divider-2:after {
    content: " ";
    display: table; }
  .box:after, .box .boxHead:after,
  .box .boxFoot:after, .list-vertical-divider:after, .list-vertical-divider-2:after {
    clear: both; }

.footer-login, .page-wrap-login:after {
  display: table-cell; }
  .footer-login:after, .page-wrap-login:after {
    clear: both;
    display: block;
    visibility: hidden;
    overflow: hidden;
    height: 0 !important;
    line-height: 0;
    font-size: xx-large;
    content: "x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x"; }

/**
 * Convert font-size from px to rem with px fallback
 *
 * @param $size - the value in pixel you want to convert
 *
 * e.g. p {@include fontSize(12px);}
 * 
 */
/* ==========================================================================
   Utility classes
   ========================================================================== */
/* ==========================================================================
   Typography
   ========================================================================== */
/* ==========================================================================
   Link
   ========================================================================== */
/* ==========================================================================
   Grid
   ========================================================================== */
/* ==========================================================================
   Box
   ========================================================================== */
/**
	* @desc         Base box mixin for grouping content
	* @name         Box Mixin
	* @author       mobywhale
	* @tested       Chrome, Firefox, IE7-9  
	* @requires     variables.scss
	*/
.box {
  position: relative; }
  .box .boxHead,
  .box .boxFoot {
    padding: 0 30px; }
  .box .boxBody {
    padding: 0 30px; }

/* ==========================================================================
   Divider
   ========================================================================== */
/* ==========================================================================
   List
   ========================================================================== */
/**
* @name         List
* @desc         Basic list with no bullets and no margins
* @author       
* @tested       
* @requires     
*/
/*
 * Define your own spacing classes for lists
 * 
 * @param $units - specific spacing units you want to use. Must go from small to large
 * e.g. @include ooListWhitespace((5px,10px,20px));
 *
 */
/* ==========================================================================
   Media block
   ========================================================================== */
/* ==========================================================================
   Inline media block
   ========================================================================== */
/* ==========================================================================
   Table
   ========================================================================== */
/* ==========================================================================
   Form
   ========================================================================== */
/* ==========================================================================
   Button
   ========================================================================== */
/* ==========================================================================
   Template
   ========================================================================== */
/* ==========================================================================
   Icon
   ========================================================================== */
/* ==========================================================================
   Whitespace
   ========================================================================== */
/**
* @desc         Create spacing classes and default spacing.
* @name         Whitespace
* @author       Fiona
* @tested       Safari, Chrome, Firefox, IE7-9
* @requires     _variables.scss
*/
/* ==========================================================================
   Default spacing
   ========================================================================== */
.box {
  margin-top: 1.5;
  margin-bottom: 1.5; }

table h1, table h2, table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl, table blockquote, table .media, table pre {
  margin-top: 0;
  margin-bottom: 0; }

/* *
 * debug default spacing 
 * set $debug-spacing to true to visualize spacing and positioning
 */
/* ==========================================================================
   Spacing helpers
   ========================================================================== */
/**
 * Spacing helpers 
 * Should be used to modify the default spacing between objects (not between nodes of the same object)
 * Please use judiciously. You want to be using defaults most of the time, these are exceptions! 
 * <type><location><size>
 *
 * p,m 				padding,margin
 * a,t,r,b,l,h,v	all,top,right,bottom,left,horizontal,vertical
 * s,m,l,n 			small(5px),medium(10px),large(20px),none(0px)
 */
/*
 * Can define your own spacing units, or calculate the units based on how many spacing sizes you want
 * 
 * @param $units - specific spacing units you want to use. Must go from small to large
 * e.g. @include whitespace((5px,10px,20px));
 *
 * @param $sizes - how many sizes you want. Calculate sizes based on line-height
 * e.g. @include whitespace((), 4);
 *
 */
/* FOPPPPPP!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*doc
---
title: Hiding and Showing
name: hide
category: Base CSS
---
### Javascript

Try disabling js and rendering this page.

```haml_example
%h3.invisible-no-js Won't show if browser doesn't support JS.
```

### Printing
Try printing this page to see these styles in action.

```haml_example
%h3.print-only This will only show when printed
%h3.no-print This will not show when printed
```

*/
.no-js .invisible-no-js {
  visibility: hidden; }

.print-only {
  display: none; }

/* Button Mixins */
.container-main {
  padding-bottom: 30px; }

/*doc
---
title: Backgrounds
name: background
category: Base CSS
---

Background color classes can be applied to any element.


*/
/*doc
---
title: Grays
name: 3_gray
parent: background
category: Base CSS
---

<div class="row mvxl">
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-default-1"></div>
      <div class="chip-color-name">.bkg-default-1</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-default-2"></div>
      <div class="chip-color-name">.bkg-default-2</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-default-3"></div>
      <div class="chip-color-name">.bkg-default-3</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-default-4"></div>
      <div class="chip-color-name">.bkg-default-4</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-default-5"></div>
      <div class="chip-color-name">.bkg-default-5</div>
    </div>
  </div>
</div>
*/
.bkg-default-1 {
  background-color: #414141; }

.bkg-default-2 {
  background-color: #676767; }

.bkg-default-3 {
  background-color: #b3b3b3; }

.bkg-default-4 {
  background-color: #ededed; }

.bkg-default-5 {
  background-color: #f8f8f8; }

/*doc
---
title: Primary
name: 1_primary_colors
parent: background
category: Base CSS
---
<div class="row mvxl">
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-primary-1"></div>
      <div class="chip-color-name">.bkg-primary-1</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-primary-2"></div>
      <div class="chip-color-name">.bkg-primary-2</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-primary-3"></div>
      <div class="chip-color-name">.bkg-primary-3</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-primary-4"></div>
      <div class="chip-color-name">.bkg-primary-4</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-primary-5"></div>
      <div class="chip-color-name">.bkg-primary-5</div>
    </div>
  </div>
</div>
*/
.bkg-primary-1 {
  background-color: #003731; }

.bkg-primary-2 {
  background-color: #015952; }

.bkg-primary-3 {
  background-color: #02786e; }

.bkg-primary-4 {
  background-color: #34928a; }

.bkg-primary-5 {
  background-color: #72b5ad; }

/*doc
---
title: Steel
name: 2_steel_colors
parent: background
category: Base CSS
---
<div class="row mvxl">
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-steel-1"></div>
      <div class="chip-color-name">.bkg-steel-1</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-steel-2"></div>
      <div class="chip-color-name">.bkg-steel-2</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-steel-3"></div>
      <div class="chip-color-name">.bkg-steel-3</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-steel-4"></div>
      <div class="chip-color-name">.bkg-steel-4</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-steel-5"></div>
      <div class="chip-color-name">.bkg-steel-5</div>
    </div>
  </div>
</div>
*/
.bkg-steel-1 {
  background-color: #43575c; }

.bkg-steel-2 {
  background-color: #5d6e73; }

.bkg-steel-3 {
  background-color: #78868a; }

.bkg-steel-4 {
  background-color: #9faaad; }

.bkg-steel-5 {
  background-color: #d4d9da; }

/*doc
---
title: Images
name: images
parent: background
category: Base CSS
---


<div class="row mvxl">
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-highlight-1"></div>
      <div class="chip-color-name">bkg-highlight-1</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-highlight-2"></div>
      <div class="chip-color-name">bkg-highlight-2</div>
    </div>
  </div>
</div>

*/
.bkg-highlight-1 {
  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(1, #63ada7), color-stop(0, #00776d)); }

.bkg-highlight-2 {
  background: #f8f8f8 url('/images/gray-cloud.png') no-repeat 50% 150px; }

/*doc
---
title: Overlay
name: overlay
parent: background
category: Base CSS
---

The background overlay style is partially transparent.

<div class="row">
  <div class="col-md-4">
    <div class="chip">
      <div class="chip-color bkg-overlay"></div>
      <div class="chip-color-name">bkg-overlay</div>
    </div>
  </div>
</div>
*/
.bkg-overlay {
  background-color: rgba(154, 202, 198, 0.4); }

/*doc
---
title: Typography
name: type
category: Base CSS
---

Headings can be used to define the applications typographical hierarchy.

```haml_example
%h1 h1.heading level 1
%h2 h2.heading level 2
%h3 h3.heading level 3
%h4 h4.heading level 4
%h5 h5.heading level 5
%h6 h6.heading level 6
%p This is an example of our base font styles. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
```

### Separating code and visual semantics

Sometimes you may need to use a heading which has different visual and code semantics. You can accomplish this by combining classes with elements (classes take visual precedence over elements in this case):

```haml_example
  %h2.h1 h2.heading level 1 class applied
```

If it's not a heading but you need similar visual treatment you can add just the class to any element
  (Use headings when possible since they add semantic value).

```haml_example
  %div.h2 div.heading level 2
```

*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-weight: 400;
  text-transform: none; }

h1, .h1 {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .03em; }

h2, .h2 {
  font-weight: 400;
  color: #5d6e73; }

h4, .h4 {
  color: #5d6e73; }

h5, .h5 {
  color: #78868a; }

h6, .h6 {
  color: #5d6e73;
  margin-bottom: 0;
  margin-top: 5px;
  font-weight: 600; }

/*doc
---
title: Emphasis
name: emphasis
parent: type
category: Base CSS
---

## Emphasize //TODO: make into a table

Classes exist to let you decorate and emphasize text. Feel free to combine.


```haml_example
%small De-emphasize text with the small element
%strong rendered as bold text
%em rendered as italicized text
%p.type-em-1 type-em-1 text
%p.type-em-2 type-em-2 text
%p.type-em-3 type-em-3 text
```

*/
.type-em-1 {
  text-transform: uppercase !important; }

.type-em-2 {
  color: #78868a;
  font-weight: 600; }

.type-em-3 {
  font-size: 52px !important;
  font-weight: 600 !important; }

/*doc
---
title: Colors
name: colors
parent: type
category: Base CSS
---

```haml_example
%p.type-accent-2 Dark Teal text
%p.type-accent-3 Teal text
%p.type-accent-4 Another shade of teal text
%p.type-accent-5 Even lighter shade of teal text
%p.type-primary-2 Gray text
%p.type-primary-4 Another shade of gray
%p.type-primary-5 Even lighter gray
%p.type-inverse{style:'background-color: #000'} type-inverse text
```

*/
.type-accent-2 {
  color: #015952 !important; }

.type-accent-3 {
  color: #02786e !important; }

.type-accent-4 {
  color: #34928a !important; }

.type-accent-5 {
  color: #72b5ad !important; }

.type-inverse {
  color: #f8f8f8 !important; }

a:hover.type-inverse {
  color: #015952 !important; }

.type-primary-2 {
  color: #5d6e73 !important; }

.type-primary-3 {
  color: #78868a !important; }

.type-primary-4 {
  color: #9faaad !important; }

.type-primary-5 {
  color: #d4d9da !important; }

/*doc
---
title: Deemphasize
name: deemphasize
parent: type
category: Base CSS
---

```haml_example
%h4.type-deemphasis h4 with type-deemphasis causes lightest font-weight

%h4.type-deemphasis-3 h4 with type-deemphasis causes normal font-weight

%h1.type-deemphasis-2 h1 with type-deemphasis-2 causes lowercase text
```

*/
.type-deemphasis {
  font-weight: 200 !important; }

.type-deemphasis-2 {
  text-transform: none !important; }

.type-deemphasis-3 {
  font-weight: 400 !important; }

/*doc
---
title: Ellipsis
name: ellipsis
parent: type
category: Base CSS
---

```haml_example
%p.type-ellipsis-2-lines Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
%p.type-ellipsis-3-lines Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
```

*/
.type-ellipsis-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; }

.type-ellipsis-3-lines {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; }

/*doc
---
title: Single line Ellipsis
name: ellipsis_1_line
parent: ellipsis
category: Base CSS
---

The type `.ellipsis-1-line` adds ellipsis to text when there is too much. Combine it with `.col-md-*` classes to get the width you want.

```haml_example
%p.type-ellipsis-1-line Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
```

*/
.type-ellipsis-1-line {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis; }

/*doc
---
title: Alignment
name: alignment
parent: type
category: Base CSS
---

Alignment classes can be used to align text top, bottom, middle or left, right, center.

Class                 | Description
--------------------- | -----------------
`.txt-l`              | Aligns text to the left
`.txt-r`              | Aligns text to the right
`.txt-c`              | Centers text horizontally
`.txt-t`              | Aligns text to the top
`.txt-b`              | Aligns text to the bottom
`.txt-m`              | Centers text vertically

*/
.txt-c, table .txt-c, table tr .txt-c, table tr td.txt-c {
  text-align: center; }

.txt-l, table .txt-l, table tr .txt-l, table tr td.txt-l {
  text-align: left; }

.txt-r, table .txt-r, table tr .txt-r, table tr td.txt-r {
  text-align: right; }

.txt-t, table .txt-t, table tr .txt-t, table tr td.txt-t {
  vertical-align: top; }

.txt-b, table .txt-b, table tr .txt-b, table tr td.txt-b {
  vertical-align: bottom; }

.txt-m, table .txt-m, table tr .txt-m, table tr td.txt-m {
  vertical-align: middle; }

.h1-login {
  color: #34928a;
  font-size: 23px;
  font-weight: 400;
  text-transform: none; }

.h2-login {
  color: #b3b3b3;
  font-weight: normal;
  font-size: 18px;
  text-transform: none; }

/*doc
---
title: Iconography
name: iconography
category: Base CSS
---

We use Font Awesome for scalable vector icons that can be customized — size, color, drop shadow,
and anything that can be done with CSS. These icons will always match the font color.


Button                                             | Class                  | Description
-------------------------------------------------- | ---------------------- | -----------
<i class="fa fa-plus"></i>                         | `.fa.fa-plus`          | Renders our plus icon
<i class="fa fa-user"></i>                         | `.fa.fa-user`          | Renders our person icon
<i class="fa fa-sort-down"></i>                    | `.fa.fa-sort-down`     | Renders our triangle icon
<i class="fa fa-cog"></i>                          | `.fa.fa-cog`           | Renders our gear icon
<i class="fa fa-times"></i>                        | `.fa.fa-times`         | Renders our 'x' icon
<i class="fa fa-check"></i>                        | `.fa.fa-check`         | Renders our check icon
<i class="fa fa-chevron-right"></i>                | `.fa.fa-chevron-right` | Renders our right chevron icon
<i class="fa fa-chevron-up"></i>                   | `.fa.fa-chevron-up`    | Renders our down chevron icon
<i class="fa fa-chevron-down"></i>                 | `.fa.fa-chevron-down`  | Renders our down chevron icon
<i class="fa fa-windows"></i>                      | `.fa.fa-windows`       | Renders our Windows icon
<i class="fa fa-apple"></i>                        | `.fa.fa-apple`         | Renders our Apple icon
<i class="fa fa-linux"></i>                        | `.fa.fa-linux`         | Renders our Linux icon

*/
/*doc
---
title: Buttons
name: button
category: Base CSS
---

Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:

```haml_example
%button.btn.btn-primary Button
%a.btn.btn-primary{href: "http://trulia.com"} Link
```

If your button is actually a link to another page, please use the
`<a>` element, while if your button performs an action, such as submitting
a form or triggering some javascript event, then use a `<button>` element.

##Button Sizes
There are three 3 sizes for buttons: Large, medium (default)
and small. Simply apply the size modifier class for the desired size.
There is also an additional modifier that will make the button take the
full width of the container. It may be used with the any of the button
size and style modifiers.

Button                                                             | Modifier Class
------------------------------------------------------------------ | -----------------
<button class="btn btn-primary btn-xl">Extra Large</button>        | `btn btn-primary btn-xl`
<button class="btn btn-primary btn-lg">Large</button>              | `btn btn-primary btn-lg`
<button class="btn btn-primary">Default</button>                   | `btn btn-primary`
<button class="btn btn-primary btn-sm">Small</button>              | `btn btn-primary btn-sm`
*/
/*doc
---
title: Full width Buttons
name: full_width_button
parent: button
category: Base CSS
---

Create block level buttons—those that span the full width of a parent— by adding `.btn-block`.

```haml_example
%button.btn.btn-primary.btn-block Full width button
```

*/
.btn, .island-button, .forgot-password-button {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em; }

.btn-xl {
  padding: 0 0;
  font-size: 23px;
  line-height: 2.48;
  border-radius: 6px;
  min-width: 306px; }

/*doc
---
parent: button
name: buttonSkins
title: Button Styles
---

Button                                                     | Disabled                                                   | Class              | Description
---------------------------------------------------------- | ---------------------------------------------------------- | ------------------ | -----------
<button class="btn btn-default">Default</button>           |<button class="btn btn-default" disabled>Default</button>   | `btn btn-default`  | This is what buttons look like, this is the go to button style.
<button class="btn btn-primary">Primary</button>           |<button class="btn btn-primary" disabled>Primary</button>   | `btn btn-primary`  | Use this button as the primary call to action
<button class="btn btn-lowlight">Lowlight</button>         |<button class="btn btn-lowlight" disabled>Lowlight</button> | `btn btn-lowlight` | Use this button for other actions, like cancel/dismiss
<button class="btn btn-danger">Delete</button>             |<button class="btn btn-danger" disabled>Delete</button>     | `btn btn-danger`   | This button is for delete actions, these actions should also have a confirmation dialog
*/
.btn-default {
  background-color: transparent;
  color: #49a8d5;
  font-size: 12px; }
  .btn-default:hover, .btn-default:active {
    box-shadow: 0 0 0 1px #d4d9da;
    background-color: #f8f8f8;
    color: #2780aa; }

.btn-primary {
  color: #f8f8f8;
  background-color: #49a8d5;
  border: none; }
  .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
    color: #f8f8f8;
    background-color: #18789e; }
  .open .btn-primary.dropdown-toggle {
    color: #f8f8f8;
    background-color: #18789e; }
  .btn-primary:active, .btn-primary.active {
    background-image: none; }
  .open .btn-primary.dropdown-toggle {
    background-image: none; }
  .btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled]:active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active {
    background-color: #78868a;
    color: #d4d9da; }

.btn-lowlight {
  color: #f8f8f8;
  background-color: #9faaad;
  border: none; }
  .btn-lowlight:hover, .btn-lowlight:focus, .btn-lowlight:active, .btn-lowlight.active {
    color: #f8f8f8;
    background-color: #78868a; }
  .open .btn-lowlight.dropdown-toggle {
    color: #f8f8f8;
    background-color: #78868a; }
  .btn-lowlight:active, .btn-lowlight.active {
    background-image: none; }
  .open .btn-lowlight.dropdown-toggle {
    background-image: none; }
  .btn-lowlight.disabled, .btn-lowlight.disabled:hover, .btn-lowlight.disabled:focus, .btn-lowlight.disabled:active, .btn-lowlight.disabled.active, .btn-lowlight[disabled], .btn-lowlight[disabled]:hover, .btn-lowlight[disabled]:focus, .btn-lowlight[disabled]:active, .btn-lowlight[disabled].active, fieldset[disabled] .btn-lowlight, fieldset[disabled] .btn-lowlight:hover, fieldset[disabled] .btn-lowlight:focus, fieldset[disabled] .btn-lowlight:active, fieldset[disabled] .btn-lowlight.active {
    background-color: #78868a;
    color: #d4d9da; }

.btn-danger {
  color: #f8f8f8;
  background-color: #cb7171;
  border: none; }
  .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
    color: #f8f8f8;
    background-color: #b94242; }
  .open .btn-danger.dropdown-toggle {
    color: #f8f8f8;
    background-color: #b94242; }
  .btn-danger:active, .btn-danger.active {
    background-image: none; }
  .open .btn-danger.dropdown-toggle {
    background-image: none; }
  .btn-danger.disabled, .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled:active, .btn-danger.disabled.active, .btn-danger[disabled], .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled]:active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger, fieldset[disabled] .btn-danger:hover, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger.active {
    background-color: #78868a;
    color: #d4d9da; }

.btn-alternate, .island-button, .forgot-password-button {
  color: #eeeeee;
  background: #2281bc;
  box-shadow: 0 2px 0 #196084;
  border: 1px solid #34928a;
  font-weight: normal;
  text-transform: none; }
/*doc
---
title: Login Button
name: button_login
parent: button
category: Base CSS
---

There is a specific button style for the login pages:

```haml_example
  %button.btn.btn-alternate.btn-lg Alternate Button
```

Do not use this button on normal application pages.

*/
.btn-alternate:hover, .island-button:hover, .forgot-password-button:hover, .btn-alternate:focus, .island-button:focus, .forgot-password-button:focus, .btn-alternate:active, .island-button:active, .forgot-password-button:active, .btn-alternate.active, .active.island-button, .active.forgot-password-button {
    color: #eeeeee;
    background-color: #1675a2; }
  .open .btn-alternate.dropdown-toggle, .open .dropdown-toggle.island-button, .open .dropdown-toggle.forgot-password-button {
    color: #eeeeee;
    background-color: #1678a7; }
  .btn-alternate:active, .island-button:active, .forgot-password-button:active, .btn-alternate.active, .active.island-button, .active.forgot-password-button {
    background-image: none; }
  .open .btn-alternate.dropdown-toggle, .open .dropdown-toggle.island-button, .open .dropdown-toggle.forgot-password-button {
    background-image: none; }
  .btn-alternate.disabled, .disabled.island-button, .disabled.forgot-password-button, .btn-alternate.disabled:hover, .disabled.island-button:hover, .disabled.forgot-password-button:hover, .btn-alternate.disabled:focus, .disabled.island-button:focus, .disabled.forgot-password-button:focus, .btn-alternate.disabled:active, .disabled.island-button:active, .disabled.forgot-password-button:active, .btn-alternate.disabled.active, .disabled.active.island-button, .disabled.active.forgot-password-button, .btn-alternate[disabled], [disabled].island-button, [disabled].forgot-password-button, .btn-alternate[disabled]:hover, [disabled].island-button:hover, [disabled].forgot-password-button:hover, .btn-alternate[disabled]:focus, [disabled].island-button:focus, [disabled].forgot-password-button:focus, .btn-alternate[disabled]:active, [disabled].island-button:active, [disabled].forgot-password-button:active, .btn-alternate[disabled].active, [disabled].active.island-button, [disabled].active.forgot-password-button, fieldset[disabled] .btn-alternate, fieldset[disabled] .island-button, fieldset[disabled] .forgot-password-button, fieldset[disabled] .btn-alternate:hover, fieldset[disabled] .island-button:hover, fieldset[disabled] .forgot-password-button:hover, fieldset[disabled] .btn-alternate:focus, fieldset[disabled] .island-button:focus, fieldset[disabled] .forgot-password-button:focus, fieldset[disabled] .btn-alternate:active, fieldset[disabled] .island-button:active, fieldset[disabled] .forgot-password-button:active, fieldset[disabled] .btn-alternate.active, fieldset[disabled] .active.island-button, fieldset[disabled] .active.forgot-password-button {
    background-color: #1b92cb; }

.btn-lg, .btn-group-lg > .btn, .btn-group-lg > .island-button, .btn-group-lg > .forgot-password-button, .island-button, .forgot-password-button {
  padding: 10px 26px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 3px; }

/*doc
---
title: Links
name: link
category: Base CSS
---

There are four different kinds of links you can use to connect related content. In most cases (unless the designer specifically asks for another type of link) you should choose the default link.

```haml_example
%a{href: "http://google.com"}
  %i.fa.fa-plus
  link with an icon
```

Link                                                                      | Class              | Description
------------------------------------------------------------------------- | ------------------ | -----------
<a href="http://google.com">default link</a>                                     |                    | This is what buttons look like, this is the go to button style.
<a class="link-highlight" href="http://google.com">highlight link</a>            | `link-highlight`   | Use this button as the primary call to action
<a class="link-lowlight" href="http://google.com">lowlight link</a>              | `link-lowlight`    | I'm afraid I can't let you do that, yet.
<span class="bkg-primary-3 phs pvs"><a class="link-inverse" href="http://google.com">inverse link</a></span> | `link-inverse`    | I go on a non-white background
<a href="http://google.com"><i class="fa fa-plus"></i> link with an icon </a>     |                    | This button is for delete actions, these actions should also have a confirmation dialog
*/
a:hover {
  text-decoration: none; }

.link-highlight {
  color: #34928a; }
  .link-highlight:hover {
    color: #2780aa; }

.link-lowlight {
  color: #414141; }
  .link-lowlight:hover {
    color: #1b1b1b;
    text-decoration: underline; }

.link-inverse {
  color: #f8f8f8; }
  .link-inverse:hover {
    color: #72b5ad; }

/*doc
---
title: Grids
name: grids
category: Base CSS
---

This library includes a responsive, mobile first fluid grid system that appropriately
scales up to 24 columns as the device or viewport size increases.

```haml_example
.container
  .row.grid-show
    .col-md-3
      col-md-3
    .col-md-3
      col-md-3
    .col-md-3
      col-md-3
    .col-md-3
      col-md-3
    .col-md-3
      col-md-3
    .col-md-3
      col-md-3
    .col-md-3
      col-md-3
    .col-md-3
      col-md-3

  .row.grid-show
    .col-md-4
      col-md-4
    .col-md-8
      col-md-8
    .col-md-6
      col-md-6
    .col-md-6
      col-md-6

  .row.grid-show
    .col-md-12
      col-md-12
    .col-md-12
      col-md-12

```

*/
/*doc
---
title: Media
name: media
category: Base CSS
---

The default media allow to float a media object (images, video, audio) to the left or right of a content block.

```haml_example
.media
  %a.pull-left{:href => "#"}
    %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"}
  .media-body
    %h4.media-heading Media heading
    %p
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
```

Wrap the image in a fixed-size `.image-container` to make sure the image isn't
larger than the container

```haml_example
.media
  %a.pull-left{:href => "#"}
    .image-container{style: "width: 100px; height: 50px;"}
      %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"}
  .media-body
    %h4.media-heading Media heading
    %p
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
```
*/
.media .image-container .media-object {
  margin: auto;
  max-height: 100%;
  max-width: 100%; }

/*doc
---
title: Table
name: table
category: Base CSS
---

Class                 | Description
--------------------- | -----------------
`.table`              | Base table class, applies spacing and cross browser support. Unfortunately inherits some undesirable styles from bootstrap.
`.table-standard`     | Adds a dark header with inverted text and a border around the outside, but not on individual cells.
`.table-hover`        | Adds a light blue background color to table rows when the user hovers over them (use to indicate clickability)
`.table-striped`      | Applies zebra striping to a table.

*/
/*doc
---
title: Standard Table
name: table-standard
parent: table
category: Base CSS
---

This is the standard table used throughout our application. Typically it is paired `.table-striped`



```haml_example

%table.table.table-standard.table-striped
  %thead
    %tr
      %th
        Service Instance
      %th
        Service Plan
      %th
        Bound Apps
  %tbody
    %tr
      %td
        oracle-db-sct
      %td
        Oracle DB
      %td
        12
    %tr
      %td
        oracle-db-sct
      %td
        Oracle DB
      %td
        12
    %tr
      %td
        oracle-db-sct
      %td
        Oracle DB
      %td
        12
    %tr
      %td
        oracle-db-sct
      %td
        Oracle DB
      %td
        12
```

*/
.table-standard {
  border: none; }
  .table-standard tbody tr td, .table-standard tbody tr th, .table-standard tbody tr .td, .table-standard tbody tr .th, .table-standard tbody .tr td, .table-standard tbody .tr th, .table-standard tbody .tr .td, .table-standard tbody .tr .th, .table-standard thead tr td, .table-standard thead tr th, .table-standard thead tr .td, .table-standard thead tr .th, .table-standard thead .tr td, .table-standard thead .tr th, .table-standard thead .tr .td, .table-standard thead .tr .th, .table-standard .tbody tr td, .table-standard .tbody tr th, .table-standard .tbody tr .td, .table-standard .tbody tr .th, .table-standard .tbody .tr td, .table-standard .tbody .tr th, .table-standard .tbody .tr .td, .table-standard .tbody .tr .th, .table-standard .thead tr td, .table-standard .thead tr th, .table-standard .thead tr .td, .table-standard .thead tr .th, .table-standard .thead .tr td, .table-standard .thead .tr th, .table-standard .thead .tr .td, .table-standard .thead .tr .th {
    border: none; }
  .table-standard thead tr:first-child, .table-standard thead .tr:first-child, .table-standard .thead tr:first-child, .table-standard .thead .tr:first-child {
    border-top: 1px solid #78868a; }
  .table-standard thead tr th, .table-standard thead tr .th, .table-standard thead .tr th, .table-standard thead .tr .th, .table-standard .thead tr th, .table-standard .thead tr .th, .table-standard .thead .tr th, .table-standard .thead .tr .th {
    border-bottom: none; }
  .table-standard thead tr th:first-child, .table-standard thead tr .th:first-child, .table-standard thead .tr th:first-child, .table-standard thead .tr .th:first-child, .table-standard .thead tr th:first-child, .table-standard .thead tr .th:first-child, .table-standard .thead .tr th:first-child, .table-standard .thead .tr .th:first-child {
    border-left: 1px solid #78868a; }
  .table-standard thead tr th:last-child, .table-standard thead tr .th:last-child, .table-standard thead .tr th:last-child, .table-standard thead .tr .th:last-child, .table-standard .thead tr th:last-child, .table-standard .thead tr .th:last-child, .table-standard .thead .tr th:last-child, .table-standard .thead .tr .th:last-child {
    border-right: 1px solid #78868a; }
  .table-standard tbody tr:last-child, .table-standard tbody .tr:last-child, .table-standard .tbody tr:last-child, .table-standard .tbody .tr:last-child {
    border-bottom: 2px solid #f8f8f8; }
  .table-standard > thead > tr, .table-standard > .thead > .tr {
    background-color: #78868a; }
    .table-standard > thead > tr > th, .table-standard > thead > tr > .th, .table-standard > .thead > .tr > th, .table-standard > .thead > .tr > .th {
      color: #f8f8f8;
      font-weight: 600;
      font-size: 13px;
      padding-left: 0; }
      .table-standard > thead > tr > th:before, .table-standard > thead > tr > .th:before, .table-standard > .thead > .tr > th:before, .table-standard > .thead > .tr > .th:before {
        content: "";
        height: 15px;
        width: 0;
        display: block;
        float: left;
        margin-right: 10px;
        border-left: 1px solid #f8f8f8; }
      .table-standard > thead > tr > th:first-child:before, .table-standard > thead > tr > .th:first-child:before, .table-standard > .thead > .tr > th:first-child:before, .table-standard > .thead > .tr > .th:first-child:before {
        content: "";
        border-color: transparent; }

.table-hack .thead, .table-hack .tbody {
  padding: 0 15px; }
.table-hack .th {
  padding: 8px 15px; }
.table-hack .td {
  padding: 20px 15px; }
.table-hack .tbody .tr:nth-child(odd) {
  background-color: #f8f8f8; }

/*doc
---
title: Horizontal Table
name: table-horizontal
parent: table
category: Base CSS
---

This is the horizontal table used mainly on the user profile page. Typically it is paired `.table-striped` and `.table-standard`. It does not have a header row.



```haml_example

%table.table.table-standard.table-striped.table-horizontal
  %tbody
    %tr
      %th Email
      %td joe@example.com
    %tr
      %th Current Password
      %td *******
    %tr
      %th First Name
      %td Joe
    %tr
      %th Last Name
      %td Bobs
    %tr
      %th Phone
      %td 415-555-0000
```

*/
.table-horizontal tbody tr:last-child {
  border: none; }
.table-horizontal tbody tr th, .table-horizontal tbody tr td {
  padding: 20px; }
.table-horizontal tbody tr th {
  font-weight: 400;
  text-align: right;
  width: 33%; }
.table-horizontal tbody tr td {
  font-weight: 600; }
  .table-horizontal tbody tr td:last-child {
    border: none; }

/*doc
---
title: Numerical Table
name: table-numerical
parent: table
category: Base CSS
---

This is the horizontal table used mainly on the user profile page. Typically it is paired `.table-striped` and `.table-standard`. It does not have a header row.



```haml_example

%table.table.table-standard.table-numerical
  %tbody
    %tr
      %th Email
      %td joe@example.com
    %tr
      %th Current Password
      %td *******
    %tr
      %th First Name
      %td Joe
    %tr
      %th Last Name
      %td Bobs
    %tr
      %th Phone
      %td 415-555-0000
```

*/
.table-numerical tbody tr:last-child {
  border: none; }
.table-numerical tbody tr th, .table-numerical tbody tr td {
  padding: 5px 0; }
.table-numerical tbody tr th {
  font-weight: 400;
  text-align: left;
  width: 33%;
  color: #78868a; }
.table-numerical tbody tr td {
  text-align: right; }
  .table-numerical tbody tr td:last-child {
    border: none; }

/*doc
---
title: Clickable Table
name: table-clickable
parent: table
category: Base CSS
---

Use this style of table when rows are clickable. It is possible to prevent a user from clicking on a row w/ a message by adding data-prevent-click and data-prevent-click-message to the row. (N.B.: This does not actually add any sort of permissions to the URL in question).
We are making the assumption here that table-hover will *only* be used if the table is clickable, because we add a pointer.



```haml_example

%table.table.table-standard.table-hover.table-striped{:'data-behavior' => 'ClickableTable'}
  %thead
    %tr
      %th
        Style
      %th{colspan: 2}
        Clickability
  %tbody
    %tr{:'data-target-path' => '/style_guide#link', :'data-prevent-click' => 'true', :'data-prevent-click-message' => "YOU'VE ENTERED THE FORBIDDEN ZONE"}
      %td
        Forbidden Links
      %td
        High
      %td.txt-m.txt-r
        %i.fa.fa-chevron-right.type-primary-4
    %tr{:'data-target-path' => '/style_guide#button'}
      %td
        Buttons
      %td
        Medium
      %td.txt-m.txt-r
        %i.fa.fa-chevron-right.type-primary-4
    %tr{:'data-target-path' => '/style_guide#type'}
      %td
        Typography
      %td
        Low
      %td.txt-m.txt-r
        %i.fa.fa-chevron-right.type-primary-4
```

*/
.table-hover {
  cursor: pointer; }

/*doc
---
title: Table Alignment
name: table_alignment
parent: table
category: Base CSS
---

Alignment classes can be used to align text top, bottom, middle or left, right, center. They can be applied to the `<table>`, `<tr>`,  `<td>`, or `<th>` and will affect all children. The *closest* class to the content will win in case of conflict.

Class                 | Description
--------------------- | -----------------
`.txt-l`              | Aligns text to the left
`.txt-r`              | Aligns text to the right
`.txt-c`              | Centers text horizontally
`.txt-t`              | Aligns text to the top
`.txt-b`              | Aligns text to the bottom
`.txt-m`              | Centers text vertically

*/
/* horizontal alignment */
/* vertical alignment */
/*doc
---
title: Panels
name: panel
category: Base CSS
---

Panels are often used to group related content. They include box headers, footers, and can be combined with any backgrounds.

Panels are typically a combination of contours, backgrounds, and content including headers and footers.

Panels                  | Modifier Class
----------------------- | -----------------
panel-simple            | `panel panel-simple`
panel-tile              | `panel panel-tile`
panel-heading-simple    | `panel-heading panel-heading-simple`
panel-heading-basic     | `panel-heading panel-heading-basic`
panel-footer-tile       | `panel-footer panel-footer-tile`


*/
.panel {
  box-shadow: none; }
  .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 {
    margin: 0; }

/*doc
---
title: Square Panel
name: panel-square
parent: panel
category: Base CSS
---

Square panels take advantage of a CSS box-model oddity (see [Fluid Squares](http://dinosaurswithlaserz.com/2011/07/18/fluid-squares-v2/) ).
They will be as tall as their containing element is wide.  Their content flows/overflows strangely though, so watch out. It is also extremely
tricky to center content inside of them -- see the application dashboard for an example.

```haml_example
.row
  .col-sm-6
    .panel.panel-simple.panel-square
      .panel-heading.panel-heading-simple
        Square Panel
      .panel-body
        Square Panel

```
*/
.panel-square {
  padding-bottom: 100%;
  height: 0; }

/*doc
---
title: Simple Panel
name: panel-simple
parent: panel
category: Base CSS
---

```haml_example
.panel.panel-simple
  .panel-body
    Simple Panel
```
*/
.panel-simple {
  border: 1px solid #ededed; }

/*doc
---
title: Tile
name: panel_tile
parent: panel
category: Base CSS
---

```haml_example
%a.panel.panel-tile{href: 'http://google.com'}
  .panel-body
    Tile
  .panel-footer
    This is the footer
```
*/
.panel-tile {
  border: 2px solid #d4d9da;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  height: 120px;
  overflow: hidden;
  color: #5d6e73;
  -webkit-transition: border 300ms ease-out;
  -moz-transition: border 300ms ease-out;
  transition: border 300ms ease-out; }
  .panel-tile .panel-body {
    flex: 1;
    padding: 25px 20px 0 20px;
    -webkit-transition: padding-top 300ms ease-out;
    -moz-transition: padding-top 300ms ease-out;
    transition: padding-top 300ms ease-out; }
  .panel-tile .panel-footer {
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-size: 12px;
    border-top: none;
    padding: 4px 15px 2px 15px;
    background: transparent;
    -webkit-transition: background 300ms ease-out;
    -moz-transition: background 300ms ease-out;
    transition: background 300ms ease-out; }
  .panel-tile:hover {
    border-color: #34928a;
    background-color: #ecefef;
    color: #5d6e73; }
    .panel-tile:hover .panel-body {
      padding-top: 15px; }
    .panel-tile:hover .panel-footer {
      background: #34928a;
      color: #ecefef; }

/*doc
---
title: Tile Simple
name: panel_tile_simple
parent: panel
category: Base CSS
---

```haml_example
.panel.panel-tile-simple
  .panel-body
    Tile
```
*/
.panel-tile-simple {
  background-color: #bcc4c6;
  border: 2px solid #d4d9da;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  height: 120px;
  overflow: hidden;
  color: #5d6e73; }
  .panel-tile-simple .panel-body {
    flex: 1;
    padding: 25px 20px 0 20px; }

/*doc
---
title: Panel Headings
name: panel-heading
category: Base CSS
---

Panel headings may be applied to any panel. They are completely interchangeable.
*/
/*doc
---
title: Basic
name: panel-heading-basic
parent: panel-heading
category: Base CSS
---

The basic heading is frequently used with the `.bkg-default-5` background color, as it is below, however it can be used with any box.

```haml_example
.panel.bkg-default-5
  .panel-heading.panel-heading-basic
    %h6 panel-heading-basic
  .panel-body
    Panel Content
```
*/
.panel-heading-basic {
  background-color: #d4d9da; }
  .panel-heading-basic, .panel-heading-basic h1, .panel-heading-basic h2, .panel-heading-basic h3, .panel-heading-basic h4, .panel-heading-basic h5, .panel-heading-basic h6 {
    color: #5d6e73;
    font-size: 22px; }

/*doc
---
title: Simple
name: panel-heading-Simple
parent: panel-heading
category: Base CSS
---

```haml_example
.panel.panel-simple
  .panel-heading.panel-heading-simple
    %h6 panel-heading-simple
  .panel-body
    Panel Content
```
*/
.panel-heading-simple {
  text-align: center; }
  .panel-heading-simple, .panel-heading-simple h1, .panel-heading-simple h2, .panel-heading-simple h3, .panel-heading-simple h4, .panel-heading-simple h5, .panel-heading-simple h6 {
    color: #9faaad;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase; }

.boxBgBasic {
  background-color: #eee; }

.boxDefault {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  border: none; }

.box .boxHeadBranded {
  background: #64aea8;
  text-transform: uppercase;
  font-family: "freight-sans-pro", sans-serif;
  font-weight: 300;
  font-size: 24px;
  color: #eee;
  padding: 21px 0 10px 87px;
  position: relative; }
  .box .boxHeadBranded:before {
    content: "";
    display: block;
    background: #00776d url('/images/p-logo.png') no-repeat center center;
    height: 100%;
    min-width: 65px;
    position: absolute;
    top: 0;
    left: 0; }

/*doc
---
title: Alerts
name: alert
category: Base CSS
---

Alerts are used to display flash messages to the user.

```haml_example
.alert.alert-success
  Success.
```

You can also make them dismissable:

```haml_example
.alert.alert-success.alert-dismissable
  %button.close{data: {dismiss: "alert"}}
    %i.fa.fa-times
  Success
.alert.alert-info.alert-dismissable
  %button.close{data: {dismiss: "alert"}}
    %i.fa.fa-times
  Info
.alert.alert-notice.alert-dismissable
  %button.close{data: {dismiss: "alert"}}
    %i.fa.fa-times
  Notice - deprecated. Use `.alert-info`
.alert.alert-warning.alert-dismissable
  %button.close{data: {dismiss: "alert"}}
    %i.fa.fa-times
  Warn
.alert.alert-danger.alert-dismissable
  %button.close{data: {dismiss: "alert"}}
    %i.fa.fa-times
  Danger
```

*/
.alert-dismissable {
  padding-right: 30px; }
  .alert-dismissable .close {
    right: -22.5px;
    top: -7.5px;
    font-size: 16px;
    color: #f8f8f8;
    opacity: 1.0; }
  .alert-dismissable.alert-warning .close, .alert-dismissable.alert-notice .close, .alert-dismissable.alert-info .close, .alert-dismissable.alert-notice .close {
    color: #9faaad; }

/*doc
---
title: Dividers
name: divider
category: Base CSS
---

Dividers draw horizontal lines between different content groupings.

```haml_example
%hr.divider-simple
```

```haml_example
%hr.divider-lowlight
```

*/
.divider-simple {
  border-top: 1px solid #b3b3b3; }

.divider-lowlight {
  border-top: 1px dashed #d4d9da; }

/*doc
---
title: Dropdown
name: dropdown
category: Base CSS
---

Dropdowns are the basic bootstrap dropdowns. Whenever possible use the browser
default dropdowns in the forms section. They are more naturally compatible with mobile.

```haml_example
.dropdown
  %a#triggerId{"data-target" => "#", "data-toggle" => "dropdown", :href => "#", :role => "button"}
    Dropdown
    %span.caret
  %ul.dropdown-menu{"aria-labelledby" => "triggerId", :role => "menu"}
    %li
      %a foo
    %li
      %a bar
```

*/
.dropdown .caret {
  border-top-color: initial; }

/*doc
---
title: Lists
name: lists
category: Base CSS
---
*/
/*doc
---
title: Inline List
name: list-inline
parent: lists
category: Base CSS
---

An inline list is one of the three methods for laying out content (including grids and the media block).

```haml_example
%ul.list-inline
  %li
    feep
  %li
    fop
  %li
    meep
```
*/
.list-inline, .list-inline-divider, .list-vertical-divider, .list-vertical-divider-2, .page-footer .list-footer, .list-breadcrumb, .list-steps, .headers .nav-list, .page-footer .list-legal {
  font-size: 0; }
  .list-inline > li, .list-inline-divider > li, .list-vertical-divider > li, .list-vertical-divider-2 > li, .page-footer .list-footer > li, .list-breadcrumb > li, .list-steps > li, .headers .nav-list > li, .page-footer .list-legal > li {
    font-size: 15px; }

/*doc
---
title: Ordered List
name: list-ordered
parent: lists
category: Base CSS
---


```haml_example
%ol
  %li
    feep
  %li
    fop
  %li
    meep
```
*/
/*doc
---
title: Unordered List
name: list-unordered
parent: lists
category: Base CSS
---


```haml_example
%ul
  %li
    feep
  %li
    fop
  %li
    meep
```
*/
/*doc
---
title: Unstyled List
name: list-unstyled
parent: lists
category: Base CSS
---

Places all list items on a single line with `display: inline-block;` and some light padding. The `.list-unstyled` class can be applied to either a `<ul>` or and `<ol>`.

```haml_example
%ul.list-unstyled
  %li
    feep
  %li
    fop
  %li
    meep
```
*/
/*doc
---
title: Inline Divider List
name: list-inline-divider
parent: lists
category: Base CSS
---

Places all list items on a single line with `display: inline-block;` and some light padding. The `.list-inline-divider` also adds a simple gray border.

```haml_example
%ul.list-inline-divider
  %li
    %a.type-em-1{href: "http://google.com"}
      Edit
  %li
    %a.type-em-1{href: "http://google.com"}
      Invite
```
*/
.list-inline-divider > li, .list-vertical-divider > li, .list-vertical-divider-2 > li, .page-footer .list-footer > li {
  border-left: 1px solid #b3b3b3; }
  .list-inline-divider > li:first-child, .list-vertical-divider > li:first-child, .list-vertical-divider-2 > li:first-child, .page-footer .list-footer > li:first-child {
    border: none; }

/*doc
---
title: Breadcrumb List
name: list-breadcrumb
parent: lists
category: Base CSS
---

The `.list-breadcrumb` can be used to provide additional page navigation.

```haml_example
%ul.list-breadcrumb
  %li
    %a{href: "http://google.com"}
      Parent
  %li
    %a{href: "http://google.com"}
      Child
  %li.current
    %a
      Current Page
```
*/
.list-breadcrumb > li {
  font-size: 0;
  padding-left: 0;
  padding-right: 0; }
  .list-breadcrumb > li a {
    font-size: 15px; }
  .list-breadcrumb > li:before {
    font-size: 15px;
    content: ">";
    padding-right: 5px;
    padding-left: 5px; }
  .list-breadcrumb > li:first-child:before {
    content: ""; }

/*doc
---
title: List Group
name: list-group
parent: lists
category: Base CSS
---

Use this list when you need simple gray borders between items

```haml_example
%ul.list-group
  %li.list-group-item
    item 1
  %li.list-group-item
    item 2
  %li.list-group-item
    item 3
```
*/
.list-group, .list-group > li {
  border-width: 1px 0; }

.list-group-item {
  background-color: transparent;
  padding-right: 0; }

/*doc
---
title: Vertical Divider List
name: list-vertical-divider
parent: lists
category: Base CSS
---

Use this list when you need larger gray borders between
items. It should be used in concert with grid column
sizes when you want the items to take a particular width.

We achieve equal height columns using the padding/margin hack,
so we need an additional `.height-enforcer` element to get the
right min-height.

```haml_example
%ul.list-vertical-divider
  %li.col-md-8
    .height-enforcer
      item 1
  %li.col-md-8
    .height-enforcer
      item 2
  %li.col-md-8
    .height-enforcer{style: 'height: 200px'}
      item 3, which is taller
```

```haml_example
%ul.list-vertical-divider-2
  %li.col-md-8
    .height-enforcer
      item 1
  %li.col-md-8
    .height-enforcer
      item 2
  %li.col-md-8
    .height-enforcer{style: 'height: 200px'}
      item 3, which is taller
```
*/
.list-vertical-divider, .list-vertical-divider-2 {
  overflow: hidden; }
  .list-vertical-divider > li, .list-vertical-divider-2 > li {
    border-left: 2px solid #d4d9da;
    padding-bottom: 9000px;
    margin-bottom: -9000px; }
    .list-vertical-divider > li .height-enforcer, .list-vertical-divider-2 > li .height-enforcer {
      min-height: 130px; }

.list-vertical-divider-2 {
  margin-bottom: 40px; }
  .list-vertical-divider-2 > li {
    border-left: 1px dashed #d4d9da;
    padding-left: 30px;
    padding-right: 30px; }
  .list-vertical-divider-2 > li:first-child {
    padding-left: 30px; }

/*doc
---
title: Steps List
name: list-steps
parent: lists
category: Base CSS
---

Use this list when you need to show the steps in a flow.

```haml_example
%ol.list-steps
  %li
    Sign up Account
  %li.current
    Create Organization
  %li
    Do other things
  %li
    And more things

```
*/
.list-steps > li {
  font-size: 18px;
  color: #72b5ad;
  margin-right: 45px;
  padding-left: 0;
  margin-bottom: 5px;
  counter-increment: list-steps; }
  .list-steps > li:before {
    content: counter(list-steps,decimal-leading-zero);
    padding: 3px 7px;
    text-align: center;
    display: inline-block;
    border: 2px solid #72b5ad;
    border-radius: 30px; }
  .list-steps > li.current {
    color: #02786e; }
    .list-steps > li.current:before {
      border-color: #02786e; }

/*doc
---
title: List Spacing
name: list-whitespace
parent: lists
category: Base CSS
---

Most lists come with built in default spacing that should work for you. However, if you find yourself needing to modify the spacing, you should do that with list spacing classes rather than whitespace classes. A single class can be applied to the list and all direct children will be modified.
The classes are constructed by specifying `<type><location><size>`.

<table>
    <tbody><tr>
      <th scope="col" colspan="3" class="txtL"><strong>Type:</strong></th>
    </tr>
    <tr>
      <th scope="row"><code>l</code></th>
      <td>list</td>
      <td>Space on the inside of each of the li direct children of the element</td>
    </tr>
    <tr>
      <th scope="col" colspan="3" class="txtL"><strong>Location:</strong></th>
    </tr>
    <tr>
      <th scope="row"><code>h</code></th>
      <td>horizontal</td>
      <td>Adds spacing to the left and right of the <code>li</code>.</td>
    </tr>
    <tr>
      <th scope="row"><code>v</code></th>
      <td>vertical</td>
      <td>Adds spacing to the top and bottom of the <code>li</code>.</td>
    </tr>
    <tr>
      <th scope="col" colspan="3" class="txtL"><strong>Size:</strong></th>
    </tr>
    <tr>
      <th scope="row"><code>xl</code></th>
      <td>extra large</td>
      <td>Adds 21 pixels of space</td>
    </tr>
    <tr>
      <th scope="row"><code>l</code></th>
      <td>large</td>
      <td>Adds 10 pixels of space</td>
    </tr>
    <tr>
      <th scope="row"><code>m</code></th>
      <td>medium</td>
      <td>Adds 7 pixels of space</td>
    </tr>
    <tr>
      <th scope="row"><code>s</code></th>
      <td>small</td>
      <td>Adds 5 pixels of space</td>
    </tr>
    <tr>
      <th scope="row"><code>n</code></th>
      <td>none</td>
      <td>Sets any existing space to 0</td>
    </tr>
  </tbody></table>

<div class="row">
  <div class="col-md-12">

  </div>
  <div class="col-md-12">

  </div>
</div>

#### Vertical Spacing Options

##### None

```haml_example
%ul.lvn
  %li
    feep
  %li
    fop
  %li
    meep
```

##### Small

```haml_example
%ul.lvs
  %li
    feep
  %li
    fop
  %li
    meep
```

##### Medium

```haml_example
%ul.lvm
  %li
    feep
  %li
    fop
  %li
    meep
```

##### Large

```haml_example
%ul.lvl
  %li
    feep
  %li
    fop
  %li
    meep
```

#### Horizontal Spacing Options

##### None

```haml_example
%ul.list-inline.lhn
  %li
    feep
  %li
    fop
  %li
    meep
```

##### Small

```haml_example
%ul.list-inline.lhs
  %li
    feep
  %li
    fop
  %li
    meep
```

##### Medium

```haml_example
%ul.list-inline.lhm
  %li
    feep
  %li
    fop
  %li
    meep
```

##### Large

```haml_example
%ul.list-inline.lhl
  %li
    feep
  %li
    fop
  %li
    meep
```

*/
/* build list spacing exceptions */
.lvn > li {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

.lvs > li {
  padding-top: 5px !important;
  padding-bottom: 5px !important; }

.lvm > li {
  padding-top: 10px !important;
  padding-bottom: 10px !important; }

.lvl > li {
  padding-top: 20px !important;
  padding-bottom: 20px !important; }

.lhn > li {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.lhs > li {
  padding-left: 5px !important;
  padding-right: 5px !important; }

.lhm > li {
  padding-left: 10px !important;
  padding-right: 10px !important; }

.lhl > li {
  padding-left: 20px !important;
  padding-right: 20px !important; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html {
  background-color: white; }

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  font-size: 15px; }

.page-wrapper {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  min-height: 100%; }
  .page-wrapper .page-body {
    flex: 1; }

.footer-login {
  padding: 13px 85px;
  width: 100%;
  background: #3b3c41;
  color: #ededed; }

.page-wrap-login {
  overflow: auto;
  min-height: 100%;
  margin-bottom: -46px; }

.page-wrap-login:after {
  content: "";
  display: block; }

.footer-login, .page-wrap-login:after {
  height: 46px; }

.page-login {
  width: 550px;
  margin: 100px auto 0 auto; }

/*doc
---
title: Whitespace
name: whitespace
category: Base CSS
---

Should be used to modify the default spacing between objects (not between nodes of the same object)
Please use judiciously. You want to be using defaults most of the time, these are exceptions!
`<type><location><size>`

Letter                           | Description
-------------------------------- | ------------------------------------------------------------------
p, m                             | padding, margin
a, t, r, b, l, h, v              | all, top, right, bottom, left, horizontal, vertical
n, s, m, l, xl, xxl, xxxl, xxxxl | none(0px), small(5px), medium(7px), large(10px), extra large(20px), extra extra large (40px), extra extra extra large (120px), extra extra extra extra large (140px)


```haml_example
%p A normal paragraph
%p.pal A paragraph with large padding
```


*/
.pan {
  padding: 0 !important; }

.man {
  margin: 0 !important; }

.pvn {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

.mvn {
  margin-top: 0 !important;
  margin-bottom: 0 !important; }

.phn {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.mhn {
  margin-left: 0 !important;
  margin-right: 0 !important; }

.ptn {
  padding-top: 0 !important; }

.mtn {
  margin-top: 0 !important; }

.prn {
  padding-right: 0 !important; }

.mrn {
  margin-right: 0 !important; }

.pbn {
  padding-bottom: 0 !important; }

.mbn {
  margin-bottom: 0 !important; }

.pln {
  padding-left: 0 !important; }

.mln {
  margin-left: 0 !important; }

.pas {
  padding: 5px !important; }

.mas {
  margin: 5px !important; }

.pvs {
  padding-top: 5px !important;
  padding-bottom: 5px !important; }

.mvs {
  margin-top: 5px !important;
  margin-bottom: 5px !important; }

.phs {
  padding-left: 5px !important;
  padding-right: 5px !important; }

.mhs {
  margin-left: 5px !important;
  margin-right: 5px !important; }

.pts {
  padding-top: 5px !important; }

.mts {
  margin-top: 5px !important; }

.prs {
  padding-right: 5px !important; }

.mrs {
  margin-right: 5px !important; }

.pbs {
  padding-bottom: 5px !important; }

.mbs {
  margin-bottom: 5px !important; }

.pls {
  padding-left: 5px !important; }

.mls {
  margin-left: 5px !important; }

.pam {
  padding: 7px !important; }

.mam {
  margin: 7px !important; }

.pvm {
  padding-top: 7px !important;
  padding-bottom: 7px !important; }

.mvm {
  margin-top: 7px !important;
  margin-bottom: 7px !important; }

.phm {
  padding-left: 7px !important;
  padding-right: 7px !important; }

.mhm {
  margin-left: 7px !important;
  margin-right: 7px !important; }

.ptm {
  padding-top: 7px !important; }

.mtm {
  margin-top: 7px !important; }

.prm {
  padding-right: 7px !important; }

.mrm {
  margin-right: 7px !important; }

.pbm {
  padding-bottom: 7px !important; }

.mbm {
  margin-bottom: 7px !important; }

.plm {
  padding-left: 7px !important; }

.mlm {
  margin-left: 7px !important; }

.pal {
  padding: 10px !important; }

.mal {
  margin: 10px !important; }

.pvl {
  padding-top: 10px !important;
  padding-bottom: 10px !important; }

.mvl {
  margin-top: 10px !important;
  margin-bottom: 10px !important; }

.phl {
  padding-left: 10px !important;
  padding-right: 10px !important; }

.mhl {
  margin-left: 10px !important;
  margin-right: 10px !important; }

.ptl {
  padding-top: 10px !important; }

.mtl {
  margin-top: 10px !important; }

.prl {
  padding-right: 10px !important; }

.mrl {
  margin-right: 10px !important; }

.pbl {
  padding-bottom: 10px !important; }

.mbl {
  margin-bottom: 10px !important; }

.pll {
  padding-left: 10px !important; }

.mll {
  margin-left: 10px !important; }

.paxl {
  padding: 20px !important; }

.maxl {
  margin: 20px !important; }

.pvxl {
  padding-top: 20px !important;
  padding-bottom: 20px !important; }

.mvxl {
  margin-top: 20px !important;
  margin-bottom: 20px !important; }

.phxl {
  padding-left: 20px !important;
  padding-right: 20px !important; }

.mhxl {
  margin-left: 20px !important;
  margin-right: 20px !important; }

.ptxl {
  padding-top: 20px !important; }

.mtxl {
  margin-top: 20px !important; }

.prxl {
  padding-right: 20px !important; }

.mrxl {
  margin-right: 20px !important; }

.pbxl {
  padding-bottom: 20px !important; }

.mbxl {
  margin-bottom: 20px !important; }

.plxl {
  padding-left: 20px !important; }

.mlxl {
  margin-left: 20px !important; }

.paxxl {
  padding: 40px !important; }

.maxxl {
  margin: 40px !important; }

.pvxxl {
  padding-top: 40px !important;
  padding-bottom: 40px !important; }

.mvxxl {
  margin-top: 40px !important;
  margin-bottom: 40px !important; }

.phxxl {
  padding-left: 40px !important;
  padding-right: 40px !important; }

.mhxxl {
  margin-left: 40px !important;
  margin-right: 40px !important; }

.ptxxl {
  padding-top: 40px !important; }

.mtxxl {
  margin-top: 40px !important; }

.prxxl {
  padding-right: 40px !important; }

.mrxxl {
  margin-right: 40px !important; }

.pbxxl {
  padding-bottom: 40px !important; }

.mbxxl {
  margin-bottom: 40px !important; }

.plxxl {
  padding-left: 40px !important; }

.mlxxl {
  margin-left: 40px !important; }

.paxxxl {
  padding: 120px !important; }

.maxxxl {
  margin: 120px !important; }

.pvxxxl {
  padding-top: 120px !important;
  padding-bottom: 120px !important; }

.mvxxxl {
  margin-top: 120px !important;
  margin-bottom: 120px !important; }

.phxxxl {
  padding-left: 120px !important;
  padding-right: 120px !important; }

.mhxxxl {
  margin-left: 120px !important;
  margin-right: 120px !important; }

.ptxxxl {
  padding-top: 120px !important; }

.mtxxxl {
  margin-top: 120px !important; }

.prxxxl {
  padding-right: 120px !important; }

.mrxxxl {
  margin-right: 120px !important; }

.pbxxxl {
  padding-bottom: 120px !important; }

.mbxxxl {
  margin-bottom: 120px !important; }

.plxxxl {
  padding-left: 120px !important; }

.mlxxxl {
  margin-left: 120px !important; }

.paxxxxl {
  padding: 140px !important; }

.maxxxxl {
  margin: 140px !important; }

.pvxxxxl {
  padding-top: 140px !important;
  padding-bottom: 140px !important; }

.mvxxxxl {
  margin-top: 140px !important;
  margin-bottom: 140px !important; }

.phxxxxl {
  padding-left: 140px !important;
  padding-right: 140px !important; }

.mhxxxxl {
  margin-left: 140px !important;
  margin-right: 140px !important; }

.ptxxxxl {
  padding-top: 140px !important; }

.mtxxxxl {
  margin-top: 140px !important; }

.prxxxxl {
  padding-right: 140px !important; }

.mrxxxxl {
  margin-right: 140px !important; }

.pbxxxxl {
  padding-bottom: 140px !important; }

.mbxxxxl {
  margin-bottom: 140px !important; }

.plxxxxl {
  padding-left: 140px !important; }

.mlxxxxl {
  margin-left: 140px !important; }

/*doc
---
title: Navigation
name: navigation
category: Base CSS
---


*/
/*doc
---
title: Pills
name: pills
parent: navigation
category: Base CSS
---

pill-group at the moment is only intended to be applied to an active nav-pill.

```haml_example
%ul.nav.nav-pills
  %li.active.pill-group
    %a{href: "#"}
      Development
    %a
      %i.fa.fa-cog
  %li
    %a{href: "#"}
      Staging
  %li
    %a{href: "#"}
      Production
```

*/
.nav-pills {
  font-size: 0; }
  .nav-pills li {
    font-size: 15px;
    margin-right: 10px;
    margin-bottom: 10px; }
    .nav-pills li a {
      background-color: #d4d9da;
      color: #9faaad; }
      .nav-pills li a:hover {
        background-color: #72b5ad;
        color: #f8f8f8; }
    .nav-pills li + li {
      margin-left: 0; }
  .nav-pills li.pill-group {
    position: relative; }
    .nav-pills li.pill-group a:first-child {
      padding-right: 40px; }
    .nav-pills li.pill-group a + a {
      position: absolute;
      top: 0;
      right: 0;
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
      cursor: pointer;
      border-left: 1px solid #34928a;
      color: #34928a;
      padding: 2px 7px;
      font-size: 18px; }
      .nav-pills li.pill-group a + a:hover {
        border-left-color: #72b5ad;
        color: #f8f8f8; }

.headers {
  margin-bottom: 20px; }
  .headers .nav-list-wrapper {
    background-color: #f8f8f8; }
  .headers .nav-list {
    text-align: right;
    margin: 0; }
    .headers .nav-list a {
      color: #72b5ad;
      padding: 5px 8px;
      display: inline-block; }
      .headers .nav-list a:hover, .headers .nav-list a:active {
        color: #02786e; }
  .headers .navbar-brand {
    font-size: 17px;
    font-weight: 200; }
    .headers .navbar-brand .image-logo {
      width: 177px;
      height: 50px;
      margin-right: 10px;
      display: inline-block;
      vertical-align: middle;
      background-position: top left;
      background-repeat: no-repeat;
      background-image: url('/images/logo-pws.png'); }
      .on_premise .headers .navbar-brand .image-logo {
        background-image: url('/images/logo-pcf.png'); }
    .headers .navbar-brand strong {
      display: block;
      margin-left: 2px;
      font-size: 18px;
      font-weight: 600; }
    .on_premise .headers .navbar-brand strong {
      display: inline; }
  .headers .navbar-list-divider {
    text-align: right;
    font-size: 0;
    margin-top: 18px; }
    .headers .navbar-list-divider > li {
      font-size: 15px;
      display: inline-block;
      border-left: 1px solid #72b5ad;
      min-height: 43px;
      padding-left: 18px;
      margin-left: 18px; }
      .headers .navbar-list-divider > li:first-child {
        border: none;
        padding-left: 0;
        margin-left: 0; }
  .headers .navbar-nav {
    margin-left: 0;
    margin-right: 0; }
    .headers .navbar-nav > li > a {
      padding-top: 11px;
      padding-bottom: 12px; }
  .headers .dropdown-nav {
    margin-right: 10px;
    width: 250px; }
    .headers .dropdown-nav .dropdown-toggle .org-name {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      -ms-text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis; }
    .headers .dropdown-nav .dropdown-toggle .user-email {
      display: inline-block;
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      -ms-text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis; }
    .headers .dropdown-nav .dropdown-toggle .caret {
      float: right; }
    .headers .dropdown-nav.open .dropdown-toggle {
      background-color: #015952 !important;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0; }
    .headers .dropdown-nav.open .dropdown-menu {
      width: auto !important;
      border-top: none;
      text-align: left;
      right: 2px;
      left: 2px;
      box-shadow: none;
      border-radius: 0; }
      .headers .dropdown-nav.open .dropdown-menu li.divider {
        background-color: #015952;
        margin-left: 13px;
        margin-right: 13px; }
      .headers .dropdown-nav.open .dropdown-menu li a {
        color: #34928a;
        padding-left: 13px;
        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis; }
      .headers .dropdown-nav.open .dropdown-menu li.item-organization a {
        color: #9faaad; }
    .headers .dropdown-nav .dropdown-toggle {
      color: #f8f8f8 !important;
      text-align: left;
      font-size: 15px;
      padding: 5px 10px;
      margin: 6px 2px 0 2px;
      border-radius: 3px;
      background-color: #02786e !important; }
      .headers .dropdown-nav .dropdown-toggle .caret {
        border-top-color: #72b5ad !important;
        border-bottom-color: #72b5ad !important;
        float: right;
        margin-top: 8px; }
  .headers .navbar-main > li > a {
    text-transform: uppercase; }
  .headers .navbar-main .active:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -27px;
    border-style: solid;
    border-width: 21px 28px 0 28px;
    border-color: #34928a transparent transparent transparent; }
  .headers .dropdown-nav-secondary {
    width: auto; }
    .headers .dropdown-nav-secondary a.dropdown-toggle {
      color: #f8f8f8 !important;
      font-weight: 200;
      text-transform: uppercase;
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      -ms-text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      background-color: transparent !important; }
      .headers .dropdown-nav-secondary a.dropdown-toggle .fa-user {
        font-size: 18px;
        margin-right: 5px; }
      .headers .dropdown-nav-secondary a.dropdown-toggle .caret {
        border-top-color: #f8f8f8 !important;
        border-bottom-color: #f8f8f8 !important; }
      .headers .dropdown-nav-secondary a.dropdown-toggle .user-email {
        vertical-align: middle;
        padding-right: 7px; }
    .headers .dropdown-nav-secondary.open a.dropdown-toggle {
      background-color: red; }
  .headers .navbar-signin {
    color: #f8f8f8; }
    .headers .navbar-signin a {
      display: inline-block;
      color: #f8f8f8; }
  .headers .subnav {
    background-color: #ededed;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 20px 20px 10px 20px; }
  @media (min-width: 768px) {
    .headers .navbar-collapse.in {
      overflow-y: visible; } }
  @media all and (max-width: 1200px) {
    .headers .dropdown-nav-secondary.open .dropdown-menu {
      left: auto; } }
  @media all and (max-width: 1200px) and (min-width: 768px) {
    .headers .dropdown-nav-secondary a.dropdown-toggle {
      width: 47px; }
      .headers .dropdown-nav-secondary a.dropdown-toggle .user-email {
        display: none; } }
  @media all and (max-width: 992px) and (min-width: 768px) {
    .headers .dropdown-nav-secondary .dropdown-menu {
      left: -111px; } }
  @media all and (max-width: 990px) {
    .headers .navbar-list-divider > li {
      padding-left: 8px;
      margin-left: 8px; }
    .headers .dropdown-nav {
      width: 100px; }
    .headers .dropdown-nav-secondary {
      width: auto; } }
  @media all and (max-width: 766px) {
    .headers .navbar-list-divider {
      text-align: left; }
      .headers .navbar-list-divider > li {
        border-left-width: 0;
        border-top: 1px solid #72b5ad;
        display: block;
        padding-left: 0;
        margin-left: 0; }
    .headers .dropdown-nav {
      width: auto;
      margin: 11px 10px 12px 10px; }
      .headers .dropdown-nav .dropdown-toggle .user-email {
        width: auto; }
      .headers .dropdown-nav.open .dropdown-menu {
        background-color: #fff;
        margin-right: 2px;
        margin-left: 2px; }
        .headers .dropdown-nav.open .dropdown-menu li a:focus, .headers .dropdown-nav.open .dropdown-menu li a:hover {
          color: #34928a; } }
  @media (max-width: 768px) {
    .headers .container-subnav {
      padding: 0; }
      .headers .container-subnav .subnav {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        padding: 10px; } }

/*doc
---
title: Tabs
name: tabs
category: Base CSS
---

You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` on an element.

*/
/*doc
---
title: Highlight Tabs
name: tab_highlight
parent: tabs
category: Base CSS
---

```haml_example
.tab-highlight
  .row
    .col-md-8
      %h1 Service Plans
      %ul.nav.nav-stacked
        %li.active
          %a{"data-toggle" => "tab", :href => "#home"}
            .row
              .col-md-10.tab-title
                Spark
              .col-md-14
                Free
        %li
          %a{"data-toggle" => "tab", :href => "#profile"}
            .row
              .col-md-10.tab-title
                Boost
              .col-md-14
                $10/month
        %li
          %a{"data-toggle" => "tab", :href => "#messages"}
            .row
              .col-md-10.tab-title
                Amp
              .col-md-14
                $50/month
        %li
          %a{"data-toggle" => "tab", :href => "#settings"}
            .row
              .col-md-10.tab-title
                Shockingly long plan name is important to test
              .col-md-14
                $1000/month

    .col-md-16
      %h1 Plan Features
      .tab-content
        #home.tab-pane.fade.in.active Content 1
        #profile.tab-pane.fade Content 2
        #messages.tab-pane.fade Content 3
        #settings.tab-pane.fade Content 4
```

*/
.tab-highlight .nav > li {
  position: relative;
  overflow: hidden;
  padding-right: 14px; }
  .tab-highlight .nav > li + li {
    margin-top: -2px; }
  .tab-highlight .nav > li > a {
    padding: 15px;
    color: #9faaad;
    border: 2px solid #d4d9da; }
  .tab-highlight .nav > li > a:hover {
    border-color: #34928a;
    z-index: 100;
    color: #34928a; }
.tab-highlight .nav > li.active a {
  z-index: 50; }
.tab-highlight .nav > li.active > a,
.tab-highlight .nav > li.active > a:hover {
  color: #ededed;
  background-color: #9faaad;
  padding: 17px;
  border-width: 0;
  cursor: default; }
.tab-highlight .nav > li.active > a:before {
  content: "";
  display: block;
  border-style: solid;
  border-width: 27.5px 0 27.5px 14px;
  border-color: transparent transparent transparent #9faaad;
  position: absolute;
  right: -14px;
  top: 50%;
  margin-top: -27.5px; }
.tab-highlight .nav .tab-title {
  text-transform: uppercase;
  font-size: 18px; }
.tab-highlight .tab-content {
  border-left: 2px solid #d4d9da;
  border-top: 2px solid #d4d9da;
  padding: 30px 45px;
  margin-left: -46px;
  min-height: 600px; }

/*doc
---
title: Collapse Toggle
name: collapse
category: Base CSS
---

Also see the select tabs for a toggle triggered by a select group.
This is frequently used in combination with our panel components.

```haml_example
#accordion-1.panel
  .panel-heading.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-1'}, href: '#myCollapse-1'}
    .row
      .col-md-1.pvm
        %a.icon-when-collapsed
          %i.fa.fa-plus-square
        %a.icon-when-expanded
          %i.fa.fa-minus-square
      .col-md-23
        %h3.type-em-1.type-primary-2 My fancy application
  #myCollapse-1.panel-collapse.collapse
    .panel-body
      This content should hide and show when the trigger is clicked.
```

*/
.collapse-trigger {
  color: #9faaad;
  background-color: #ededed;
  cursor: pointer; }
  .collapse-trigger:hover, .collapse-trigger:focus {
    color: #9faaad; }
  .collapse-trigger i {
    color: #9faaad; }
  .collapse-trigger .icon-when-collapsed i {
    display: none; }
  .collapse-trigger .icon-when-expanded i {
    display: block; }
  .collapse-trigger.collapsed {
    background-color: #f8f8f8; }
    .collapse-trigger.collapsed .icon-when-collapsed i {
      display: block; }
    .collapse-trigger.collapsed .icon-when-expanded i {
      display: none; }

.page-footer {
  padding-top: 15px;
  padding-bottom: 5px;
  background-color: #02786e;
  color: #f8f8f8;
  font-weight: 200; }
  .page-footer .list-footer {
    float: left; }
    .page-footer .list-footer > li + li {
      padding-left: 35px;
      margin-left: 35px;
      border-left-color: #72b5ad; }
    .page-footer .list-footer li:first-child {
      padding-left: 0; }
    .page-footer .list-footer > li {
      min-height: 25px;
      line-height: 25px; }
    .page-footer .list-footer a {
      display: inline-block; }
  .page-footer .list-legal {
    text-transform: uppercase; }
    .page-footer .list-legal > li + li {
      padding-left: 15px; }

/*doc
---
title: Forms
name: form
category: Base CSS
---

The application uses different form elements in different contexts.
You can combine them to make more elaborate and specific forms that meet your use case.

<div class="alert alert-warning">
<h2 class="mtn">Styleguide specific classes</h2>
We use the <code>.styleguide-form</code> class to make form elements easier to see in the
context of the styleguide. This class should be deleted when using form elements on actual
pages in the application.
</div>

*/
/*doc
---
title: Inputs & Labels
name: input
parent: form
category: Base CSS
---

An input with the label top aligned (this is the default layout).

```haml_example
%form.styleguide-form{:role => "form"}
  .form-group
    %label{:for => "exampleInputEmail1"}
      %abbr{:title => "required"} *
      Email address
    %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email", :required => "required", 'aria-required' => "true"}
```

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal
layout by adding `.form-horizontal` to the form. Doing so changes `.form-groups` to behave as grid rows, so no need for `.row`.

An input with the label left aligned

```haml_example
%form.styleguide-form.form-horizontal{:role => "form"}
  .form-group
    .col-md-6
      %label.control-label{:for => "exampleInputEmail1"}
        %abbr{:title => "required"} *
        Email address
    .col-md-18
      %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email", :required => "required", 'aria-required' => "true"}
```

An input with the label right aligned (N.B., control-label class provides the right alignment):

```haml_example
%form.styleguide-form.form-horizontal{:role => "form"}
  .form-group
    %label.col-md-6.control-label{:for => "exampleInputEmail1"}
      %abbr{:title => "required"} *
      Email address
    .col-md-18
      %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email", :required => "required", 'aria-required' => "true"}
```
*/
.form-group abbr {
  float: right;
  margin-left: 5px;
  border-bottom: 0; }
.form-group [class*="col"].control-label abbr {
  float: none;
  margin-right: 2px; }

label {
  font-weight: 400; }

::-webkit-input-placeholder {
  font-weight: 200; }

:-moz-placeholder {
  /* Firefox 18- */
  font-weight: 200; }

::-moz-placeholder {
  /* Firefox 19+ */
  font-weight: 200; }

:-ms-input-placeholder {
  font-weight: 200; }

/*doc
---
title: Text Area
name: textarea
parent: form
category: Base CSS
---

Text areas are used for larger amounts of input.

```haml_example
%form.styleguide-form{:role => "form"}
  .form-group
    %label{:for => "exampleTextAreaId"} Description
    %textarea#exampleTextAreaId.form-control{:rows => "3"}
```

*/
/*doc
---
title: Checkboxes & Radios
name: Checkboxes
parent: form
category: Base CSS
---
Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

### Default (stacked)

```haml_example
%form.styleguide-form{:role => "form"}
  .checkbox
    %label
      %input{:type => "checkbox", :value => ""}
        Option one is this and that&mdash;be sure to include why it's great
  .radio
    %label
      %input#optionsRadios1{:checked => "", :name => "optionsRadios", :type => "radio", :value => "option1"}
        Option one is this and that&mdash;be sure to include why it's great
  .radio
    %label
      %input#optionsRadios2{:name => "optionsRadios", :type => "radio", :value => "option2"}
        Option two can be something else and selecting it will deselect option one
```

### Inline checkboxes

Use `.checkbox-inline` or `.radio-inline` class to a series of checkboxes or radios for controls appear on the same line.

```haml_example
%form.styleguide-form{:role => "form"}
  .form-group
    %label.checkbox-inline
      %input#inlineCheckbox1{:type => "checkbox", :value => "option1"}
        1
    %label.checkbox-inline
      %input#inlineCheckbox2{:type => "checkbox", :value => "option2"}
        2
    %label.checkbox-inline
      %input#inlineCheckbox3{:type => "checkbox", :value => "option3"}
        3

  .form-group
    %label.radio-inline
      %input#inlineradio1{:type => "radio", :value => "option1"}
        1
    %label.radio-inline
      %input#inlineradio2{:type => "radio", :value => "option2"}
        2
    %label.radio-inline
      %input#inlineradio3{:type => "radio", :value => "option3"}
        3
```

*/
input[type="radio"] {
  margin-top: 2px; }

/*doc
---
title: Inline Forms
name: inline_forms
parent: form
category: Base CSS
---

Add `.form-inline` to your `<form>` for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.


<div class="alert alert-warning">
<h2 class="mtn">Requires custom widths</h2>
Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
</div>

<div class="alert alert-warning">
<h2 class="mtn">Always add labels</h2>
Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.
</div>


```haml_example
%form.styleguide-form.form-inline{:role => "form"}
  .form-group
    %label.sr-only{:for => "exampleInputEmail2"} Email address
    %input#exampleInputEmail2.form-control{:placeholder => "Enter email", :type => "email"}
  .form-group
    %label.sr-only{:for => "exampleInputPassword2"} Password
    %input#exampleInputPassword2.form-control{:placeholder => "Password", :type => "password"}
  .checkbox
    %label
      %input{:type => "checkbox"}
      Remember me
  %button.btn.btn-primary{:type => "submit"} Sign in
```
*/
/*doc
---
title: Inline Forms with Labels
name: inline_forms_with_labels
parent: form
category: Base CSS
---

Add `.form-inline.inline-labels` to your `<form>` for left-aligned and inline-block controls with labels inline with inputs.


```haml_example
%form.styleguide-form.form-inline.inline-labels{:role => "form"}
  .form-group
    %label{:for => "exampleInputEmail2"} Write a thing
    %input#exampleInputEmail2.form-control{:placeholder => "Write a thing", :type => "email"}
  .form-group
    %label{:for => "exampleSelect"} Choose a thing
    %select#exampleSelect.form-control
      %option thing
  .checkbox
    %label
      %input{:type => "checkbox"}
      Remember me
  %button.btn.btn-primary{:type => "submit"} Sign in
```
*/
.form-inline.inline-labels .form-group input, .inline-labels.navbar-form .form-group input, .form-inline.inline-labels .form-group select, .inline-labels.navbar-form .form-group select {
  width: auto !important; }

/*doc
---
title: HTML5 controls
name: html5_controls
parent: form
category: Base CSS
---

Examples of standard form controls supported in an example form layout.

Inputs
Most common form control, text-based input fields. Includes support for
all HTML5 types: `text`, `password`, `datetime`, `datetime-local`,
`date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`,
`tel`, and `color`.

<div class="alert alert-warning">
  <h2 class="mtn">Type declaration required</h2>
  Inputs will only be fully styled if their type is properly declared.
</div>

```haml_example
%form.styleguide-form{:role => "form"}
  %input.form-control{:placeholder => "Text input", :type => "text"}
```

Password field

```haml_example
%form.styleguide-form{:role => "form"}
  %input.form-control{:placeholder => "Password", :type => "password"}
```

Date

```haml_example
%form.styleguide-form{:role => "form"}
  %input.form-control{:placeholder => "Date", :type => "date"}
```

Number

```haml_example
%form.styleguide-form{:role => "form"}
  %input.form-control{:placeholder => "Number", :type => "number"}
```

With a min/max and default starting value

```haml_example
%form.styleguide-form{:role => "form"}
  %input.form-control{:placeholder => "Number", :type => "number", min: 0, max: 2, value: 1}
```

With a different increment value

```haml_example
%form.styleguide-form{:role => "form"}
  %input.form-control{:placeholder => "Number", :type => "number", step: 5}
```

Email

Use this with fields that require email addresses to pop up the correct keyboard on mobile

```haml_example
%form.styleguide-form{:role => "form"}
  %input.form-control{:placeholder => "Email", :type => "email"}
```

URL

Use this with fields that require urls to pop up the correct keyboard on mobile

```haml_example
%form.styleguide-form{:role => "form"}
  %input.form-control{:placeholder => "URL", :type => "url"}
```

Telephone

Use this with fields that require telephone numbers to pop up the dialpad on mobile

```haml_example
%form.styleguide-form{:role => "form"}
  %input.form-control{:placeholder => "Telephone", :type => "tel"}
```
*/
/*doc
---
title: Control states
name: validation
parent: form
category: Base CSS
---

### Validation

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles.

```haml_example
%form.styleguide-form{:role => "form"}
  .form-group.has-success
    %label.control-label{:for => "inputSuccess"} Input with success
    %input#inputSuccess.form-control{:type => "text"}

  .form-group.has-warning
    %label.control-label{:for => "inputWarning"} Input with warning
    %input#inputWarning.form-control{:type => "text"}

  .form-group.has-error
    %label.control-label{:for => "inputError"} Input with error
    %input#inputError.form-control{:type => "text"}
    %span.help-block.has-error Error help text

  .form-group.has-error
    .checkbox
      %label.control-label
        %input{:type => "checkbox", :value => ""}
          Checkbox which needs to be checked
      %span.help-block.has-error Error help text
```
*/
/* overrides bootstrap colors */
.has-success {
  position: relative; }
  .has-success:before {
    content: "\f00c";
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background-color: #74af7e;
    color: #f8f8f8;
    font-family: FontAwesome, monospace;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    text-align: center; }
  .has-success .control-label {
    color: #9faaad; }

.has-error input[type="checkbox"] {
  outline: 1px solid #b94242; }
.has-error .control-label {
  color: #9faaad; }

.has-warning .control-label {
  color: #9faaad; }

/*
---
title: Disabled Inputs
name: disabled
parent: validation
category: Base CSS
---
### Disabled Inputs

Inputs will occasionally need to be disabled. You can do that by adding the `disabled` attribute. Selects, checkboxes, fieldsets, buttons, and other form controls can all be disabled.

```haml_example
%input#disabledInput.form-control{:disabled => "", :placeholder => "Disabled input here...", :type => "text"}
```

*/
.form-control:focus {
  box-shadow: none; }

/*doc
---
title: Selects
name: selects
parent: form
category: Base CSS
---
Selects are excellent to use because they will automatically
behave as expected cross browser on different devices. Prefer
them over a custom dropdown whenever possible. Their size can
be changed via the [control sizing options](#control_sizing).

```haml_example
%form.styleguide-form{:role => "form"}
  %select.form-control
    %option default option
    %option an option
    %option another option
```
*/
/*doc
---
title: Control Sizing
name: control_sizing
parent: form
category: Base CSS
---
Set heights using classes like `.input-lg`, and set widths using grid column classes like `.col-lg-*`.

### Height sizing

Create larger or smaller form controls that match button sizes.

```haml_example
%form.styleguide-form{:role => "form"}
  %input.form-control.input-lg{:placeholder => ".input-lg", :type => "text"}
  %input.form-control{:placeholder => "Default input", :type => "text"}
  %input.form-control.input-sm{:placeholder => ".input-sm", :type => "text"}
  %select.form-control.input-lg
    %option .input-lg
    %option an option
    %option another option
  %select.form-control
    %option default select
    %option an option
    %option another option
  %select.form-control.input-sm
    %option .input-sm
    %option an option
    %option another option
```

### Column sizing

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

```haml_example
%form.styleguide-form{:role => "form"}
  .row
    .col-md-4
      %input.form-control{:placeholder => ".col-xs-2", :type => "text"}
    .col-md-6
      %input.form-control{:placeholder => ".col-xs-3", :type => "text"}
    .col-md-8
      %input.form-control{:placeholder => ".col-xs-4", :type => "text"}
```

*/
/*doc
---
title: Help Text
name: help_text
parent: form
category: Base CSS
---
Help text
Block level help text for form controls.

```haml_example
%form.styleguide-form{:role => "form"}
  %input.form-control{:type => "text"}
  %span.help-block A block of help text that breaks onto a new line and may extend beyond one line.
```

*/
/*doc
---
title: Static Control
name: static_control
parent: form
category: Base CSS
---
When you need to place plain text next to a form label within a horizontal form, use the `.form-control-static` class on a `<p>`.

```haml_example
%form.form-horizontal.styleguide-form{:role => "form"}
  .form-group
    %label.col-md-4.control-label Email
    .col-sm-10
      %p.form-control-static email@example.com
  .form-group
    %label.col-md-4.control-label{:for => "inputPassword"} Password
    .col-sm-10
      %input#inputPassword.form-control{:placeholder => "Password", :type => "password"}
```

*/
/*doc
---
title: Vertical static controls
name: static_controll
parent: form
category: Base CSS
---

```haml_example
%form.styleguide-form{:role => "form"}
  .form-group
    %label.control-label Email
    %p.form-control-static someguy@test.com
  .form-group
    %label.control-label{:for => "name"} Name
    %input#name.form-control{:placeholder => "name"}
```

*/
.help-inline {
  display: block;
  text-align: left;
  color: #cb7171;
  padding: 5px 0 0 16px;
  text-transform: capitalize; }

.input-sm {
  height: 25px;
  padding: 2px 10px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 3px; }

select.input-sm {
  height: 25px;
  line-height: 25px; }

textarea.input-sm {
  height: auto; }

.input-lg {
  height: 47px;
  padding: 10px 26px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 3px; }

select.input-lg {
  height: 47px;
  line-height: 47px; }

textarea.input-lg {
  height: auto; }

.control-label {
  color: #9faaad; }

p.form-control-static {
  color: #5d6e73; }

/*doc
---
title: Read Only Text Input
name: read_only_text_input
parent: form
category: Base CSS
---

This form is used to show information that a user may wish to copy and paste somewhere.

```haml_example
%input.form-control{:value => "This should auto highlight", 'data-behavior' => 'AutoSelect', readonly: 'readonly'}
```
*/
/*doc
---
title: Modals
name: modal
category: Base CSS
---

Modals do something worthwhile....
...
...

```haml_example
.modal.modal-basic.fade
  .modal-dialog
    .modal-content
      .modal-header
        %h3.modal-title Modal title
      .modal-body
        %p One fine body…
      .modal-footer
        %button.btn.btn-lowlight{"data-dismiss" => "modal", type: "button"} Cancel
        %button.btn.btn-primary{type: "button"} OK
```

## Live demo

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade modal-basic" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-lowlight" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
*/
.modal.modal-basic .modal-dialog {
  padding-top: 200px; }
.modal.modal-basic .modal-content {
  border-radius: 0;
  border-width: 2px; }
.modal.modal-basic .modal-header {
  background-color: #34928a;
  padding: 10px; }
  .modal.modal-basic .modal-header .modal-title {
    color: #f8f8f8; }
.modal.modal-basic .modal-footer {
  padding: 10px;
  background-color: #d4d9da;
  text-align: center; }

.modal-backdrop.in {
  opacity: 0.75;
  filter: alpha(opacity=75); }

.alert {
  margin: 1.5 0; }
  .alert .close {
    text-decoration: none;
    line-height: .7;
    text-shadow: none; }

.alert-error {
  background-color: #cb7171;
  border-color: #b94242;
  color: #f8f8f8; }
  .alert-error hr {
    border-top-color: #a63b3b; }
  .alert-error .alert-link {
    color: #dfdfdf; }

/*doc
---
title: Banners
name: banner
category: Base CSS
---

You can use a banner to let the team know which environment they're
working on. Leave off the `.banner-styleguide-wrapper` div when using it
in other contexts.

```haml_example
.banner-styleguide-wrapper
  .banner
    Acceptance
```

*/
.banner {
  background: #a81500;
  /* Old browsers */
  background: -moz-linear-gradient(top, #a81500 0%, #9b1200 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a81500), color-stop(100%, #9b1200));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #a81500 0%, #9b1200 100%);
  /* Chrome10+,Safari5.1+ */
  background: -ms-linear-gradient(top, #a81500 0%, #9b1200 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #a81500 0%, #9b1200 100%);
  /* W3C */
  color: white;
  padding: 5px 55px;
  text-align: center;
  font-size: 16px;
  font-weight: 200;
  position: fixed;
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2);
  top: 109px;
  left: -23px;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  z-index: 10000; }
  .banner:before {
    content: "";
    top: 2px;
    bottom: 2px;
    right: 2px;
    left: 2px;
    position: absolute;
    border: 1px dashed #c07074; }

/*doc
---
title: App Health Indicator
name: app_health_indicator
category: Base CSS
---

This component indicates application health. It has two sizes, many states, and can be editable or not depending on user permissions.

## States

The application health indicator can be `.running`, `.warning_75`, `.warning_50`, `.warning_25`, `.warning_0`, `.stopped`.

<div class="row">
  <div class="col-md-4">
    <div class="health running editable">
      <form accept-charset="UTF-8" action="/organizations/org-id/spaces/space-id/applications/application-id" class="state_form" id="edit_application_application-id" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="token-value">
        <input id="application_state" name="application[state]" type="hidden" value="STOPPED">
        <input class="indicator" data-action="Stop" data-confirm="Are you sure you want to stop app?" name="commit" title="Stop" type="submit" value="">
        <div class="value">100%</div>
      </form>
    </div>
  </div>
  <div class="col-md-4">
    <div class="health warning_75 editable">
      <form accept-charset="UTF-8" action="/organizations/org-id/spaces/space-id/applications/application-id" class="state_form" id="edit_application_application-id" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="token-value">
        <input id="application_state" name="application[state]" type="hidden" value="STOPPED">
        <input class="indicator" data-action="Stop" data-confirm="Are you sure you want to stop app?" name="commit" title="Stop" type="submit" value="">
        <div class="value">75%</div>
      </form>
    </div>
  </div>
  <div class="col-md-4">
    <div class="health warning_50 editable">
      <form accept-charset="UTF-8" action="/organizations/org-id/spaces/space-id/applications/application-id" class="state_form" id="edit_application_application-id" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="token-value">
        <input id="application_state" name="application[state]" type="hidden" value="STOPPED">
        <input class="indicator" data-action="Stop" data-confirm="Are you sure you want to stop app?" name="commit" title="Stop" type="submit" value="">
        <div class="value">50%</div>
      </form>
    </div>
  </div>
  <div class="col-md-4">
    <div class="health warning_25 editable">
      <form accept-charset="UTF-8" action="/organizations/org-id/spaces/space-id/applications/application-id" class="state_form" id="edit_application_application-id" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="token-value">
        <input id="application_state" name="application[state]" type="hidden" value="STOPPED">
        <input class="indicator" data-action="Stop" data-confirm="Are you sure you want to stop app?" name="commit" title="Stop" type="submit" value="">
        <div class="value">25%</div>
      </form>
    </div>
  </div>
  <div class="col-md-4">
    <div class="health warning_0 editable">
      <form accept-charset="UTF-8" action="/organizations/org-id/spaces/space-id/applications/application-id" class="state_form" id="edit_application_application-id" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="token-value">
        <input id="application_state" name="application[state]" type="hidden" value="STOPPED">
        <input class="indicator" data-action="Stop" data-confirm="Are you sure you want to stop app?" name="commit" title="Stop" type="submit" value="">
        <div class="value">0%</div>
      </form>
    </div>
  </div>
  <div class="col-md-4">
    <div class="health stopped editable">
      <form accept-charset="UTF-8" action="/organizations/org-id/spaces/space-id/applications/application-id" class="state_form" id="edit_application_application-id" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="token-value">
        <input id="application_state" name="application[state]" type="hidden" value="STARTED">
        <input class="indicator" data-action="Start" data-confirm="Are you sure you want to start app?" name="commit" title="Start" type="submit" value="">
        <div class="value">stopped</div>
      </form>
    </div>
  </div>
</div>


<div class="row">
  <div class="col-md-4">
    <div class="health health-indicator-large running editable">
      <form accept-charset="UTF-8" action="/organizations/org-id/spaces/space-id/applications/application-id" class="state_form" id="edit_application_application-id" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="token-value">
        <input id="application_state" name="application[state]" type="hidden" value="STOPPED">
        <input class="indicator" data-action="Stop" data-confirm="Are you sure you want to stop app?" name="commit" title="Stop" type="submit" value="">
        <div class="value">100%</div>
      </form>
    </div>
  </div>
  <div class="col-md-4">
    <div class="health health-indicator-large warning_75 editable">
      <form accept-charset="UTF-8" action="/organizations/org-id/spaces/space-id/applications/application-id" class="state_form" id="edit_application_application-id" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="token-value">
        <input id="application_state" name="application[state]" type="hidden" value="STOPPED">
        <input class="indicator" data-action="Stop" data-confirm="Are you sure you want to stop app?" name="commit" title="Stop" type="submit" value="">
        <div class="value">75%</div>
      </form>
    </div>
  </div>
  <div class="col-md-4">
    <div class="health health-indicator-large warning_50 editable">
      <form accept-charset="UTF-8" action="/organizations/org-id/spaces/space-id/applications/application-id" class="state_form" id="edit_application_application-id" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="token-value">
        <input id="application_state" name="application[state]" type="hidden" value="STOPPED">
        <input class="indicator" data-action="Stop" data-confirm="Are you sure you want to stop app?" name="commit" title="Stop" type="submit" value="">
        <div class="value">50%</div>
      </form>
    </div>
  </div>
  <div class="col-md-4">
    <div class="health health-indicator-large warning_25 editable">
      <form accept-charset="UTF-8" action="/organizations/org-id/spaces/space-id/applications/application-id" class="state_form" id="edit_application_application-id" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="token-value">
        <input id="application_state" name="application[state]" type="hidden" value="STOPPED">
        <input class="indicator" data-action="Stop" data-confirm="Are you sure you want to stop app?" name="commit" title="Stop" type="submit" value="">
        <div class="value">25%</div>
      </form>
    </div>
  </div>
  <div class="col-md-4">
    <div class="health health-indicator-large warning_0 editable">
      <form accept-charset="UTF-8" action="/organizations/org-id/spaces/space-id/applications/application-id" class="state_form" id="edit_application_application-id" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="token-value">
        <input id="application_state" name="application[state]" type="hidden" value="STOPPED">
        <input class="indicator" data-action="Stop" data-confirm="Are you sure you want to stop app?" name="commit" title="Stop" type="submit" value="">
        <div class="value">0%</div>
      </form>
    </div>
  </div>
  <div class="col-md-4">
    <div class="health health-indicator-large stopped editable">
      <form accept-charset="UTF-8" action="/organizations/org-id/spaces/space-id/applications/application-id" class="state_form" id="edit_application_application-id" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="token-value">
        <input id="application_state" name="application[state]" type="hidden" value="STARTED">
        <input class="indicator" data-action="Start" data-confirm="Are you sure you want to start app?" name="commit" title="Start" type="submit" value="">
        <div class="value">stopped</div>
      </form>
    </div>
  </div>
</div>

## Sizes

The application health indicator can be large or small using the `.application-health-sm` and `.application-health-lg` classes.

<div class="row">
  <div class="col-md-4">
    <p>Small</p>
    <div class="health running editable">
      <form accept-charset="UTF-8" action="/organizations/org-id/spaces/space-id/applications/application-id" class="state_form" id="edit_application_application-id" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="token-value">

        <input id="application_state" name="application[state]" type="hidden" value="STOPPED">
        <input class="indicator" data-action="Stop" data-confirm="Are you sure you want to stop app?" name="commit" title="Stop" type="submit" value="">
        <div class="value">100%</div>
      </form>
    </div>
  </div>
  <div class="col-md-4">
    <p>large</p>
      <div class="health health-indicator-large running editable">
      <form accept-charset="UTF-8" action="/organizations/org-id/spaces/space-id/applications/application-id" class="state_form" id="edit_application_application-id" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="token-value">

        <input id="application_state" name="application[state]" type="hidden" value="STOPPED">
        <input class="indicator" data-action="Stop" data-confirm="Are you sure you want to stop app?" name="commit" title="Stop" type="submit" value="">
        <div class="value">100%</div>
      </form>
    </div>
  </div>
</div>

## Enforcing Permissions

Depending if the user has permission to start and stop applications, the application health indicator will be `.editable` or not.

<div class="row mbl">
  <div class="col-md-4">
    <p>Not Editable</p>
    <div class="health running">
      <form accept-charset="UTF-8" action="/organizations/org-id/spaces/space-id/applications/application-id" class="state_form" id="edit_application_application-id" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="token-value">

        <input id="application_state" name="application[state]" type="hidden" value="STOPPED">
        <input class="indicator" data-action="Stop" data-confirm="Are you sure you want to stop app?" name="commit" title="Stop" type="submit" value="">
        <div class="value">100%</div>
      </form>
    </div>
  </div>
  <div class="col-md-4">
    <p>Editable</p>
    <div class="health running editable">
      <form accept-charset="UTF-8" action="/organizations/org-id/spaces/space-id/applications/application-id" class="state_form" id="edit_application_application-id" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="token-value">

        <input id="application_state" name="application[state]" type="hidden" value="STOPPED">
        <input class="indicator" data-action="Stop" data-confirm="Are you sure you want to stop app?" name="commit" title="Stop" type="submit" value="">
        <div class="value">100%</div>
      </form>
    </div>
  </div>
</div>

These states are handled automatically when you use the `application_state_indicator()`
helper in your templates. The latter parameter determines the size. The first
parameter is the application affected by the actions of the application health indicator.

```haml
=application_state_indicator(application)
=application_state_indicator(application, {:large_indicator: true})
```
*/
.health {
  width: 40px;
  position: relative; }
  .health form {
    margin: 0; }
  .health input:focus {
    outline: none; }
  .health .value {
    position: absolute;
    top: 0px;
    left: 0px;
    line-height: 40px;
    width: 40px;
    font-size: 10px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -1px;
    z-index: 2; }
  .health .indicator {
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    width: 40px;
    height: 40px;
    box-shadow: none;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 1; }
  .health.editable:hover:before {
    content: "\f04d";
    font-family: FontAwesome, monospace;
    color: #49a8d5;
    position: absolute;
    top: 50%;
    left: 50%;
    cursor: pointer;
    z-index: 0;
    font-size: 12px;
    margin-top: -8px;
    margin-left: -5px; }
  .health form {
    position: relative; }
    .health form:before {
      content: "";
      height: 100%;
      width: 100%;
      position: absolute;
      border-radius: 300px;
      border: 7px solid #d4d9da;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg); }
  .health.health-indicator-large form:before {
    border-width: 12px; }
  .health.running form:before {
    border-color: #52ad53; }
  .health.stopped form:before {
    border-color: #d4d9da; }
  .health.stopped.editable:hover:before {
    content: "\f04b";
    font-family: FontAwesome, monospace;
    font-size: 15px;
    margin-top: -11px;
    margin-left: -4px; }
  .health.warning_0 form:before {
    border-color: #b94242; }
  .health.warning_25 form:before {
    border-top-color: #b94242; }
  .health.warning_50 form:before {
    border-top-color: #b94242;
    border-right-color: #b94242; }
  .health.warning_75 form:before {
    border-color: #b94242 #b94242 #b94242 #d4d9da; }
  .health.editable:hover .value {
    display: none; }

.health-indicator-large {
  width: 64px;
  height: 64px;
  margin: auto;
  font-size: 14px;
}
  .health-indicator-large.editable:hover:before {
    font-size: 20px;
    margin-top: -14px;
    margin-left: -8px; }
  .health-indicator-large.stopped.editable:hover:before {
    font-size: 20px;
    margin-top: -14px;
    margin-left: -6px; }
  .health-indicator-large .value {
    line-height: 64px;
    width: 64px;
    font-size: 14px; }
  .health-indicator-large .indicator {
    width: 64px;
    height: 64px; }

/*doc
---
title: Gravatar
name: gravatar
category: Base CSS
---

*/
.gravatar {
  display: inline-block;
  position: relative; }
  .gravatar img {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
  .gravatar i {
    text-align: center;
    z-index: 1; }
  .gravatar i.overlay {
    background-color: transparent;
    z-index: 3;
    position: absolute; }

/*doc
---
title: Small Gravatar
name: small_gravatar
parent: gravatar
category: Base CSS
---

Allows you to show a gravatar with the proper default 'image' (icon).

To use in a view, simply call

`= render 'shared/gravatar_small', email: 'some@email.com'`

```haml_example
.gravatar.gravatar-sm
  %img{style_guide_assets:"https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&d=blank"}
  %i.fa.fa-user
.gravatar.gravatar-sm
  %img{style_guide_assets:"https://secure.gravatar.com/avatar/20c2a28872fde9c903c14c5b7e465ff7?s=20&d=blank"}
  %i.fa.fa-user
```

*/
/*doc
---
title: Small Gravatar With Envelope
name: small_gravatar_with_envelope
parent: gravatar
category: Base CSS
---

Allows you to show a gravatar with an icon overlay.

To use in a view, simply call

`= render 'shared/gravatar_small', email: 'some@email.com'`

```haml_example
.gravatar.gravatar-sm
  %img{style_guide_assets:"https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&d=blank"}
  %i.fa.fa-user
  %i.overlay.fa.fa-envelope

.gravatar.gravatar-sm.mlxl
  %img{style_guide_assets:"https://secure.gravatar.com/avatar/20c2a28872fde9c903c14c5b7e465ff7?s=20&d=blank"}
  %i.fa.fa-user
  %i.overlay.fa.fa-envelope

.gravatar.gravatar-sm.mlxl
  %img{style_guide_assets:"https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&d=blank"}
  %i.fa.fa-user.highlight
  %i.overlay.fa.fa-check

.gravatar.gravatar-sm.mlxl
  %img{style_guide_assets:"https://secure.gravatar.com/avatar/20c2a28872fde9c903c14c5b7e465ff7?s=20&d=blank"}
  %i.fa.fa-user
  %i.overlay.fa.fa-check
```
*/
/*doc
---
title: Small Gravatar With Envelope, Inverted
name: small_gravatar_with_envelope_inverted
parent: gravatar
category: Base CSS
---

Allows you to show a gravatar with an icon overlay on a dark background

To use in a view, simply call

```haml_example
.panel.bkg-default-4.mtl
  .panel-body.pvl.phxl
    .gravatar.gravatar-sm.gravatar-inverse
      %img{style_guide_assets:"https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&d=blank"}
      %i.fa.fa-user
      %i.overlay.fa.fa-envelope

```

*/
.gravatar-sm i {
  color: #d4d9da;
  font-size: 20px;
  line-height: 20px;
  width: 20px;
  height: 20px; }
.gravatar-sm.gravatar-inverse i {
  color: #9faaad; }
.gravatar-sm.gravatar-inverse .fa-envelope {
  text-shadow: 1px 0px 0px #9faaad, -1px 0px 0px #9faaad, 0px 1px 0px #9faaad, 0px 0px 0px #9faaad; }
.gravatar-sm i.highlight {
  color: #34928a; }
.gravatar-sm i.overlay {
  font-size: 10px;
  color: #fff;
  right: -30%;
  bottom: -25%; }
.gravatar-sm .fa-envelope {
  text-shadow: 1px 0px 0px #d4d9da, -1px 0px 0px #d4d9da, 0px 1px 0px #d4d9da, 0px 0px 0px #d4d9da; }
.gravatar-sm .fa-check {
  text-shadow: 1px 0px 0px #34928a, -1px 0px 0px #34928a, 0px 1px 0px #34928a, 0px 0px 0px #34928a; }

/*doc
---
title: Large Gravatar
name: large_gravatar
parent: gravatar
category: Base CSS
---

Allows you to show a gravatar with the proper default 'image' (icon).

Large gravatar has a white background so it can be used on the edit profile form.

To use in a view, simply call

`= render 'shared/gravatar_large', email: 'some@email.com'`

```haml_example
.gravatar.gravatar-lg
  %img{style_guide_assets:"https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=80&d=blank"}
  %i.fa.fa-user
.gravatar.gravatar-lg
  %img{style_guide_assets:"https://secure.gravatar.com/avatar/20c2a28872fde9c903c14c5b7e465ff7?s=80&d=blank"}
  %i.fa.fa-user
```

*/
.gravatar-lg {
  border: 3px solid #ecefef; }
  .gravatar-lg i {
    background-color: #fff;
    color: #ecefef;
    font-size: 62px;
    line-height: 80px;
    width: 80px;
    height: 80px; }

/*doc
---
title: Application Dashboard
name: application_dashboard
category: Base CSS
---

This is a hacky one-off to center the panel content + size the text


```haml_example
.row.application-dashboard
  .col-sm-8
    .panel.panel-simple.panel-square.application-health-panel
      .panel-heading.panel-heading-simple
        %h6 Status
      .panel-body
        .health.stopped.editable.health-indicator-large
          %form
            %input.indicator
            .value Stopped
  .col-sm-8
    .panel.panel-simple.panel-square
      .panel-heading.panel-heading-simple
        %h6 Instances
      .panel-body.txt-c
        1
  .col-sm-8
    .panel.panel-simple.panel-square
      .panel-heading.panel-heading-simple
        %h6 Memory
      .panel-body.txt-c
        128
        %span.units MB
```

*/
.application-dashboard .panel-square {
  position: relative; }
  .application-dashboard .panel-square .panel-body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    margin: auto;
    font-size: 24px;
    padding-top: 50%;
    margin-top: -1em; }
.application-dashboard .application-health-panel .panel-body {
  margin-top: -32px; }

/*doc
---
title: Editable
name: editable
category: Base CSS
---

Use this class for sections that can switch into an 'edit' mode.

```haml_example
.editable{data: {behavior: 'Editable'}}
  .panel.editable-show
    I'm viewing...
    %a.btn.btn-default{data: {editable: 'toggle', target: 'edit'}} Edit
  .panel.editable-edit
    I'm editing...
    %a.btn.btn-default{data: {editable: 'toggle', target: 'show'}} Cancel
```

*/
.editable .editable-show {
  display: block; }
.editable .editable-edit {
  display: none; }
.editable.edit .editable-show {
  display: none; }
.editable.edit .editable-edit {
  display: block; }

/*doc
---
title: Upgrade Your Account Widget
name: upgrade_your_account
category: Base CSS
---

```haml_example
.panel.panel-simple#upgrade_your_account.mtxl
  .panel-body
    .row.mvxl.ptxl
      .col-md-8.txt-c
        %h3.type-em-1.type-primary-4 More Memory
      .col-md-8.txt-c
        %h3.type-em-1.type-primary-4 Pay As You Go
      .col-md-8.txt-c
        %h3.type-em-1.type-primary-4 Premium Service Plans
    .row
      .col-md-8.txt-c
        .circle
          .text.type-accent-3 10GB
      .col-md-8.txt-c
        .row
          .col-md-16.col-md-offset-4
            .panel.panel-highlight.mtl
              .panel-body.pas
                .cost $0.03
                per gb per hour
      .col-md-8.txt-c
        .premium-services
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
          .tiny-circle>
```

*/
#upgrade_your_account .circle {
  display: inline-block;
  border: 3px solid #02786e;
  border-radius: 50%;
  width: 100px;
  height: 100px; }
  #upgrade_your_account .circle .text {
    text-align: center;
    line-height: 94px;
    font-size: 36px;
    font-weight: 600;
    top: 0;
    left: 0; }
#upgrade_your_account .panel-highlight {
  background-color: #02786e;
  border-radius: 5px;
  color: #f8f8f8;
  text-transform: uppercase;
  font-size: 18px; }
#upgrade_your_account .cost {
  font-size: 48px;
  line-height: 48px;
  font-weight: 400; }
#upgrade_your_account .premium-services {
  margin-top: 2px;
  display: inline-block;
  width: 175px;
  height: 100px; }
  #upgrade_your_account .premium-services .tiny-circle {
    background-color: #02786e;
    border-radius: 50%;
    margin-right: 2px;
    display: inline-block;
    width: 15px;
    height: 15px; }

/*doc
---
title: Spinners
name: spinners
category: Base CSS
---

Spin it

```haml_example
.spinner-lg.bkg-default-5.out
  %i.fa.fa-spin.fa-cog.mtxl

.spinner-sm.bkg-default-5.out
  %i.fa.fa-spin.fa-cog.mtxl
```

*/
.spinner-lg {
  margin-top: 64px;
  text-align: center; }
  .spinner-lg .fa-spin {
    font-size: 48px;
    opacity: 0.5; }

.spinner-sm {
  text-align: center;
  min-height: 320px; }
  .spinner-sm .fa-spin {
    font-size: 28px; }
  .spinner-sm.out {
    opacity: 0.2; }

/*doc
---
title: Tooltip
name: tooltip
category: Base CSS
---

Tooltip styles can be applied to any element. We often apply them to disabled
buttons which require a wrapper div as the hover event will not fire.

```haml_example
.with-tooltip{data: {title: "This is your tooltip"}}
  %button.btn.btn-primary{disabled: true} Button
```
*/
.with-tooltip {
  display: inline-block; }

/*doc
---
title: Overlay
name: overlay
category: Base CSS
---

Sits over the div it's on, can be used w/ or w/o a shim to cover the underlying content.

```haml_example
.overlay.in
  .overlay-shim.bkg-default-5
  .overlay-content
    OVERLAY CONTENT OVERLAY CONTENT yay
  I'm the underlying content
```
*/
.overlay {
  position: relative; }
  .overlay .overlay-shim {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    position: absolute;
    z-index: 1;
    opacity: 0.5; }
  .overlay .overlay-content {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    position: absolute;
    z-index: 2; }
  .overlay.in .overlay-shim {
    display: block; }
  .overlay.in .overlay-content {
    display: block; }

body {
  background-color: #f8f8f8; }

.header {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height: 62px; }

.content {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -40px; }

.footer, .footer-spacer {
  height: 40px; }

.footer {
  padding-left: 40px;
  color: #9faaad;
  font-size: 12px; }

h1 {
  font-size: 32px;
  font-weight: 300;
  line-height: 1em;
  text-transform: none;
  margin-top: 0;
  margin-bottom: 16px; }

h2 {
  font-size: 24px;
  font-weight: 300;
  color: #939393; }

.island {
  position: relative;
  text-align: center; }
  .island .island-content {
    width: 196px;
    margin: 0 auto; }

.island-landscape {
  border: 1px solid #e0e4e5;
  margin-left: auto;
  margin-right: auto;
  max-width: 700px;
  padding: 40px;
  position: relative;
  width: 88%; }
  .island-landscape:before, .island-landscape:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */ }
  .island-landscape:after {
    clear: both; }
  .island-landscape .island-title {
    float: left;
    width: 300px; }
    .island-landscape .island-title p {
      font-weight: 300; }
      .island-landscape .island-title p strong {
        font-weight: 400; }
  .island-landscape .island-content {
    float: right;
    width: 230px;
    margin: 0 auto; }
    .island-landscape .island-content .fa-envelope-o {
      float: left;
      font-size: 42px;
      width: 25%; }
    .island-landscape .island-content .instructions-sent {
      float: right;
      width: 75%; }
    .island-landscape .island-content .island-button, .island-landscape .island-content .forgot-password-button {
      clear: both; }

@media (max-width: 720px) {
  .island-landscape {
    border: none;
    padding: 0; }
    .island-landscape .island-title {
      float: none;
      margin: 0 auto 40px; }
    .island-landscape .island-content {
      float: none; } }
.island-footer {
  bottom: -2em;
  position: absolute;
  right: 0; }

form {
  margin-bottom: 8px; }

input {
  display: block;
  margin-bottom: 20px; }

.form-control {
  font-size: 16px;
  height: 36px;
  line-height: 1; }

::-webkit-input-placeholder {
  font-weight: 400; }

:-moz-placeholder {
  /* Firefox 18- */
  font-weight: 400; }

::-moz-placeholder {
  /* Firefox 19+ */
  font-weight: 400; }

:-ms-input-placeholder {
  font-weight: 400; }

.fa-envelope-o {
  font-size: 36px;
  color: #d4d9da;
  margin-bottom: 18px; }

.fa-chevron-down {
  font-size: 10px;
  margin-top: 4px;
  position: absolute;
  right: 8px;
  top: 5px; }

.instructions-sent {
  color: #43575c;
  font-weight: 300; }

.email-display {
  color: #43575c;
  font-size: 16px;
  margin-bottom: 16px; }

.left {
  display: inline-block;
  text-align: left;
  width: 50%; }

.right {
  display: inline-block;
  text-align: right;
  width: 50%; }

.link-lowlight {
  color: #7f7f7f;
  font-size: 13px;
  font-weight: 300; }

.error-message {
  background-color: #febfc1;
  color: #ab2a2a;
  width: 100%;
  font-size: 11px;
  padding: 12px;
  line-height: 12px;
  margin-bottom: 20px; }

.saml-login {
  border-bottom: 1px solid #cccccc;
  color: #cccccc;
  font-size: 11px;
  line-height: 18px;
  margin-bottom: 10px;
  padding: 10px 0; }
  .saml-login .saml-login-link {
    font-weight: 700; }
  .saml-login p {
    color: #7f7f7f; }

.nav {
  position: relative;
  font-size: 12px;
  float: right;
  margin: 12px 18px 0 0;
  min-width: 120px;
  color: #9faaad; }

.dropdown-trigger {
  cursor: pointer;
  padding: 4px 24px 4px 8px;
  position: relative; }

.dropdown-content {
  position: absolute;
  top: 110%;
  list-style: none outside none;
  padding: 0;
  display: none; }
  .dropdown-content a {
    color: #7f7f7f;
    display: block;
    min-width: 120px;
    min-height: 18px;
    padding: 4px 8px; }

.dropdown-trigger.open, .dropdown-content.open {
  background-color: white;
  display: block;
  color: #7f7f7f; }

.dropdown-trigger:hover, .dropdown-content a:hover {
  background-color: #e0e4e5;
  color: #43575c; }

.panel {
  background-color: white;
  width: 460px;
  padding: 40px;
  margin: 0 auto 0;
  text-align: center; }
  .panel .panel-content {
    color: #7f7f7f;
    text-align: left;
    margin-top: 16px; }
    .panel .panel-content h2 {
      color: #43575c; }
    .panel .panel-content p {
      margin-top: 10px; }
    .panel .panel-content ul {
      padding: 0px;
      list-style: none outside none; }

.application-link {
  font-size: 14px; }

.application-scopes {
  border: 1px solid #cccccc;
  margin: 12px 0;
  padding: 20px; }
  .application-scopes li {
    padding: 0 16px 16px 16px; }
    .application-scopes li:first-child {
      padding-top: 16px; }
  .application-scopes input {
    display: inline-block;
    margin: 6px 0;
    vertical-align: top; }
  .application-scopes label {
    width: 298px;
    margin-left: 10px; }
  .application-scopes .undecided label {
    font-weight: 600; }

.actions {
  margin-top: 40px;
  text-align: center; }
  .actions button[type='submit'] {
    height: 30px;
    line-height: 12px;
    margin: 0 10px;
    min-width: 120px; }

.profile span {
  display: inline-block;
  width: 60%; }
.profile a {
  display: inline-block;
  width: 40%;
  text-align: right; }

.client-scopes .application-scopes label {
  width: 276px; }

.application-label h3 {
  display: inline-block;
  width: 70%; }
.application-label a {
  display: inline-block;
  width: 30%; }

.revocation-scrim {
  background-color: rgba(66, 66, 66, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: none; }
  .revocation-scrim .revocation-modal {
    background-color: white;
    z-index: 1000;
    width: 400px;
    margin: 200px auto 0 auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
    .revocation-scrim .revocation-modal p {
      padding: 4px 18px 4px 18px; }
    .revocation-scrim .revocation-modal .revocation-modal-header {
      padding: 18px;
      border-bottom: 1px solid #d4d9da; }
      .revocation-scrim .revocation-modal .revocation-modal-header h3 {
        display: inline-block;
        width: 80%;
        height: auto;
        font-size: 14px;
        font-weight: 600;
        line-height: 14px;
        color: #424242;
        text-transform: uppercase; }
      .revocation-scrim .revocation-modal .revocation-modal-header .close-icon {
        display: inline-block;
        width: 20%;
        text-align: right;
        cursor: pointer; }
    .revocation-scrim .revocation-modal .revocation-actions {
      padding: 8px 18px 18px 0;
      text-align: right; }
      .revocation-scrim .revocation-modal .revocation-actions button {
        height: 28px;
        line-height: 12px;
        margin: 0 4px;
        min-width: 100px; }

.passcode input {
  text-align: center;
  font-size: 18px; }

.island-button, .forgot-password-button {
  font-size: 14px;
  height: 34px;
  padding: 0;
  line-height: 14px; }
  .island-button[disabled], [disabled].forgot-password-button {
    background-color: white;
    border-width: 1px 2px 2px 1px;
    border-color: rgba(0, 0, 0, 0.16);
    color: #7f7f7f;
    opacity: 1; }

.forgot-password-button {
  letter-spacing: 0; }

.tiles {
  list-style: none outside none;
  margin-top: 40px;
  padding: 0; }
  .tiles li {
    display: inline-block;
    margin-left: 32px; }
    .tiles li:first-child {
      margin-left: 0; }
  .tiles a {
    background-color: white;
    background-repeat: no-repeat;
    background-position: 68% 48%;
    background-size: contain;
    border: 1px solid #cccccc;
    display: block;
    height: 116px;
    overflow: hidden;
    text-indent: -10000px;
    width: 158px; }

.image-preload {
  background-repeat: no-repeat;
  background-position: -99999px -99999px; }

.alert {
  font-weight: 600;
  padding: 15px;
  margin-bottom: 50px;
  border: 1px solid transparent;
  border-radius: 0px;
  font-size: 13px;
  text-align: left; }

.alert-success {
  background-color: #afd79b;
  color: #165450; }

.alert-error {
  background-color: #febfc1;
  border-color: #febfc1;
  color: #ab2a2a; }

.alert p:before {
  font-family: FontAwesome, monospace;
  padding-right: 5px;
  font-size: 16px; }

.alert-success p:before {
  content: '\f058'; }

.alert-error p:before {
  content: '\f071'; }

h1 {
  color: #424242; }

.header {
  height: 68px; }

.island, .island-landscape {
  margin-top: 32px; }

.panel-container {
  margin-top: 32px; }