@charset "UTF-8";
/*doc --- title: Primary name: primary category: Colors --- Used for elements (i.e buttons, labels and ***) <div class="clearfix"> <div class="color-box brand-primary"> <span>$brand-primary</span> </div> <div class="color-box brand-success"> <span>$brand-success</span> </div> <div class="color-box brand-warning"> <span>$brand-warning</span> </div> <div class="color-box brand-danger"> <span>$brand-danger</span> </div> <div class="color-box color-1"> <span>$color-poptype-green</span> </div> <div class="color-box  color-2"> <span>$color-poptype-yellow</span> </div> <div class="color-box  color-3"> <span>$color-poptype-red</span> </div> <div class="color-box color-4"> <span>$color-poptype-blue</span> </div> <div class="color-box color-5"> <span>$color-poptype-magenta</span> </div> <div class="color-box color-6"> <span>$color-poptype-orange</span> </div> </div> */
/*doc --- title: Text name: text category: Colors --- Used for text, borders and list elements. <div class="clearfix"> <div class="color-box text-color"> <span>$text-color</span> </div> <div class="color-box text-color-dark"> <span>$text-color-dark</span> </div> <div class="color-box text-color-light"> <span>$text-color-light</span> </div> </div> */
/*doc --- title: UI Colors name: ui-colors category: Colors --- Used for borders, background and dividers <div class="clearfix"> <div class="color-box ui-color-default"> <span>$ui-color-default</span> </div> <div class="color-box ui-color-light"> <span>$ui-color-light</span> </div> <div class="color-box ui-color-lighter"> <span>$ui-color-lighter</span> </div> <div class="color-box ui-color-lightest"> <span>$ui-color-lightest</span> </div> </div> */
/*doc
---
title: Typography
name: typo
category: CSS
---
In general we should not use typography classes but instead use the correct semantic elements which in almost all
cases should have the correct styling.
*/
/*doc
---
title: Headings
name: headings
parent: typo
---
```html_example
<h1>H1 using the larger font size with golden  <small>This is a smaller text withing the header</small></h1>
<h2>H2 <small>$font-size-larger</small></h2>
<h3>H3 <small>$font-size-base</small></h3>
```
*/
/*doc --- title: Body copy name: body_copy parent: typo --- ```html_example <p class="lead"> <strong>.lead</strong> Bacon ipsum dolor amet brisket chicken shank, turducken venison shoulder beef ribs. Shoulder kielbasa cupim filet mignon. Ham pork chop andouille bacon turducken jowl fatback filet mignon meatloaf landjaeger. Pork belly boudin brisket tri-tip sirloin hamburger shankle tenderloin meatball venison picanha frankfurter. Kevin picanha andouille meatball, sirloin kielbasa ribeye corned beef pork belly bacon ground round. Pancetta swine flank prosciutto meatball. Swine ball tip chicken hamburger pork sirloin. </p> <p> Bacon ipsum dolor amet brisket chicken shank, turducken venison shoulder beef ribs. Shoulder kielbasa cupim filet mignon. Ham pork chop andouille bacon turducken jowl fatback filet mignon meatloaf landjaeger. Pork belly boudin brisket tri-tip sirloin hamburger shankle tenderloin meatball venison picanha frankfurter. Kevin picanha andouille meatball, sirloin kielbasa ribeye corned beef pork belly bacon ground round. Pancetta swine flank prosciutto meatball. Swine ball tip chicken hamburger pork sirloin. </p> ``` */
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic|Source+Sans+Pro:400,400italic,600,600italic,700,700italic);
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,500,500i,700");
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic|Source+Sans+Pro:400,400italic,600,600italic,700,700italic);
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,500,500i,700");
h1 { font-weight: 700; }

h1 small { display: block; font-size: 18px; margin-top: 10px; }

.lead { font-weight: normal; }

/*! Bootstrap v3.3.6 (http://getbootstrap.com) Copyright 2011-2015 Twitter, Inc. Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }

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

[hidden], template { display: none; }

a { background-color: transparent; }

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

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

b, strong { font-weight: bold; }

dfn { font-style: italic; }

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

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

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: 1em 40px; }

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

pre { overflow: auto; }

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

button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }

button { overflow: visible; }

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; }

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

input { line-height: normal; }

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

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

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

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

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

legend { border: 0; padding: 0; }

textarea { overflow: auto; }

optgroup { font-weight: bold; }

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

td, th { padding: 0; }

/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print { *, *:before, *:after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
  .navbar { display: none; }
  .btn > .caret, .dropup > .btn > .caret { border-top-color: #000 !important; }
  .label { border: 1px solid #000; }
  .table { border-collapse: collapse !important; }
  .table td, .table th { background-color: #fff !important; }
  .table-bordered th, .table-bordered td { border: 1px solid #ddd !important; } }

@font-face { font-family: 'Glyphicons Halflings'; src: url("bootstrap/glyphicons-halflings-regular.eot"); src: url("bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }

.glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.glyphicon-asterisk:before { content: "\002a"; }

.glyphicon-plus:before { content: "\002b"; }

.glyphicon-euro:before, .glyphicon-eur:before { content: "\20ac"; }

.glyphicon-minus:before { content: "\2212"; }

.glyphicon-cloud:before { content: "\2601"; }

.glyphicon-envelope:before { content: "\2709"; }

.glyphicon-pencil:before { content: "\270f"; }

.glyphicon-glass:before { content: "\e001"; }

.glyphicon-music:before { content: "\e002"; }

.glyphicon-search:before { content: "\e003"; }

.glyphicon-heart:before { content: "\e005"; }

.glyphicon-star:before { content: "\e006"; }

.glyphicon-star-empty:before { content: "\e007"; }

.glyphicon-user:before { content: "\e008"; }

.glyphicon-film:before { content: "\e009"; }

.glyphicon-th-large:before { content: "\e010"; }

.glyphicon-th:before { content: "\e011"; }

.glyphicon-th-list:before { content: "\e012"; }

.glyphicon-ok:before { content: "\e013"; }

.glyphicon-remove:before { content: "\e014"; }

.glyphicon-zoom-in:before { content: "\e015"; }

.glyphicon-zoom-out:before { content: "\e016"; }

.glyphicon-off:before { content: "\e017"; }

.glyphicon-signal:before { content: "\e018"; }

.glyphicon-cog:before { content: "\e019"; }

.glyphicon-trash:before { content: "\e020"; }

.glyphicon-home:before { content: "\e021"; }

.glyphicon-file:before { content: "\e022"; }

.glyphicon-time:before { content: "\e023"; }

.glyphicon-road:before { content: "\e024"; }

.glyphicon-download-alt:before { content: "\e025"; }

.glyphicon-download:before { content: "\e026"; }

.glyphicon-upload:before { content: "\e027"; }

.glyphicon-inbox:before { content: "\e028"; }

.glyphicon-play-circle:before { content: "\e029"; }

.glyphicon-repeat:before { content: "\e030"; }

.glyphicon-refresh:before { content: "\e031"; }

.glyphicon-list-alt:before { content: "\e032"; }

.glyphicon-lock:before { content: "\e033"; }

.glyphicon-flag:before { content: "\e034"; }

.glyphicon-headphones:before { content: "\e035"; }

.glyphicon-volume-off:before { content: "\e036"; }

.glyphicon-volume-down:before { content: "\e037"; }

.glyphicon-volume-up:before { content: "\e038"; }

.glyphicon-qrcode:before { content: "\e039"; }

.glyphicon-barcode:before { content: "\e040"; }

.glyphicon-tag:before { content: "\e041"; }

.glyphicon-tags:before { content: "\e042"; }

.glyphicon-book:before { content: "\e043"; }

.glyphicon-bookmark:before { content: "\e044"; }

.glyphicon-print:before { content: "\e045"; }

.glyphicon-camera:before { content: "\e046"; }

.glyphicon-font:before { content: "\e047"; }

.glyphicon-bold:before { content: "\e048"; }

.glyphicon-italic:before { content: "\e049"; }

.glyphicon-text-height:before { content: "\e050"; }

.glyphicon-text-width:before { content: "\e051"; }

.glyphicon-align-left:before { content: "\e052"; }

.glyphicon-align-center:before { content: "\e053"; }

.glyphicon-align-right:before { content: "\e054"; }

.glyphicon-align-justify:before { content: "\e055"; }

.glyphicon-list:before { content: "\e056"; }

.glyphicon-indent-left:before { content: "\e057"; }

.glyphicon-indent-right:before { content: "\e058"; }

.glyphicon-facetime-video:before { content: "\e059"; }

.glyphicon-picture:before { content: "\e060"; }

.glyphicon-map-marker:before { content: "\e062"; }

.glyphicon-adjust:before { content: "\e063"; }

.glyphicon-tint:before { content: "\e064"; }

.glyphicon-edit:before { content: "\e065"; }

.glyphicon-share:before { content: "\e066"; }

.glyphicon-check:before { content: "\e067"; }

.glyphicon-move:before { content: "\e068"; }

.glyphicon-step-backward:before { content: "\e069"; }

.glyphicon-fast-backward:before { content: "\e070"; }

.glyphicon-backward:before { content: "\e071"; }

.glyphicon-play:before { content: "\e072"; }

.glyphicon-pause:before { content: "\e073"; }

.glyphicon-stop:before { content: "\e074"; }

.glyphicon-forward:before { content: "\e075"; }

.glyphicon-fast-forward:before { content: "\e076"; }

.glyphicon-step-forward:before { content: "\e077"; }

.glyphicon-eject:before { content: "\e078"; }

.glyphicon-chevron-left:before { content: "\e079"; }

.glyphicon-chevron-right:before { content: "\e080"; }

.glyphicon-plus-sign:before { content: "\e081"; }

.glyphicon-minus-sign:before { content: "\e082"; }

.glyphicon-remove-sign:before { content: "\e083"; }

.glyphicon-ok-sign:before { content: "\e084"; }

.glyphicon-question-sign:before { content: "\e085"; }

.glyphicon-info-sign:before { content: "\e086"; }

.glyphicon-screenshot:before { content: "\e087"; }

.glyphicon-remove-circle:before { content: "\e088"; }

.glyphicon-ok-circle:before { content: "\e089"; }

.glyphicon-ban-circle:before { content: "\e090"; }

.glyphicon-arrow-left:before { content: "\e091"; }

.glyphicon-arrow-right:before { content: "\e092"; }

.glyphicon-arrow-up:before { content: "\e093"; }

.glyphicon-arrow-down:before { content: "\e094"; }

.glyphicon-share-alt:before { content: "\e095"; }

.glyphicon-resize-full:before { content: "\e096"; }

.glyphicon-resize-small:before { content: "\e097"; }

.glyphicon-exclamation-sign:before { content: "\e101"; }

.glyphicon-gift:before { content: "\e102"; }

.glyphicon-leaf:before { content: "\e103"; }

.glyphicon-fire:before { content: "\e104"; }

.glyphicon-eye-open:before { content: "\e105"; }

.glyphicon-eye-close:before { content: "\e106"; }

.glyphicon-warning-sign:before { content: "\e107"; }

.glyphicon-plane:before { content: "\e108"; }

.glyphicon-calendar:before { content: "\e109"; }

.glyphicon-random:before { content: "\e110"; }

.glyphicon-comment:before { content: "\e111"; }

.glyphicon-magnet:before { content: "\e112"; }

.glyphicon-chevron-up:before { content: "\e113"; }

.glyphicon-chevron-down:before { content: "\e114"; }

.glyphicon-retweet:before { content: "\e115"; }

.glyphicon-shopping-cart:before { content: "\e116"; }

.glyphicon-folder-close:before { content: "\e117"; }

.glyphicon-folder-open:before { content: "\e118"; }

.glyphicon-resize-vertical:before { content: "\e119"; }

.glyphicon-resize-horizontal:before { content: "\e120"; }

.glyphicon-hdd:before { content: "\e121"; }

.glyphicon-bullhorn:before { content: "\e122"; }

.glyphicon-bell:before { content: "\e123"; }

.glyphicon-certificate:before { content: "\e124"; }

.glyphicon-thumbs-up:before { content: "\e125"; }

.glyphicon-thumbs-down:before { content: "\e126"; }

.glyphicon-hand-right:before { content: "\e127"; }

.glyphicon-hand-left:before { content: "\e128"; }

.glyphicon-hand-up:before { content: "\e129"; }

.glyphicon-hand-down:before { content: "\e130"; }

.glyphicon-circle-arrow-right:before { content: "\e131"; }

.glyphicon-circle-arrow-left:before { content: "\e132"; }

.glyphicon-circle-arrow-up:before { content: "\e133"; }

.glyphicon-circle-arrow-down:before { content: "\e134"; }

.glyphicon-globe:before { content: "\e135"; }

.glyphicon-wrench:before { content: "\e136"; }

.glyphicon-tasks:before { content: "\e137"; }

.glyphicon-filter:before { content: "\e138"; }

.glyphicon-briefcase:before { content: "\e139"; }

.glyphicon-fullscreen:before { content: "\e140"; }

.glyphicon-dashboard:before { content: "\e141"; }

.glyphicon-paperclip:before { content: "\e142"; }

.glyphicon-heart-empty:before { content: "\e143"; }

.glyphicon-link:before { content: "\e144"; }

.glyphicon-phone:before { content: "\e145"; }

.glyphicon-pushpin:before { content: "\e146"; }

.glyphicon-usd:before { content: "\e148"; }

.glyphicon-gbp:before { content: "\e149"; }

.glyphicon-sort:before { content: "\e150"; }

.glyphicon-sort-by-alphabet:before { content: "\e151"; }

.glyphicon-sort-by-alphabet-alt:before { content: "\e152"; }

.glyphicon-sort-by-order:before { content: "\e153"; }

.glyphicon-sort-by-order-alt:before { content: "\e154"; }

.glyphicon-sort-by-attributes:before { content: "\e155"; }

.glyphicon-sort-by-attributes-alt:before { content: "\e156"; }

.glyphicon-unchecked:before { content: "\e157"; }

.glyphicon-expand:before { content: "\e158"; }

.glyphicon-collapse-down:before { content: "\e159"; }

.glyphicon-collapse-up:before { content: "\e160"; }

.glyphicon-log-in:before { content: "\e161"; }

.glyphicon-flash:before { content: "\e162"; }

.glyphicon-log-out:before { content: "\e163"; }

.glyphicon-new-window:before { content: "\e164"; }

.glyphicon-record:before { content: "\e165"; }

.glyphicon-save:before { content: "\e166"; }

.glyphicon-open:before { content: "\e167"; }

.glyphicon-saved:before { content: "\e168"; }

.glyphicon-import:before { content: "\e169"; }

.glyphicon-export:before { content: "\e170"; }

.glyphicon-send:before { content: "\e171"; }

.glyphicon-floppy-disk:before { content: "\e172"; }

.glyphicon-floppy-saved:before { content: "\e173"; }

.glyphicon-floppy-remove:before { content: "\e174"; }

.glyphicon-floppy-save:before { content: "\e175"; }

.glyphicon-floppy-open:before { content: "\e176"; }

.glyphicon-credit-card:before { content: "\e177"; }

.glyphicon-transfer:before { content: "\e178"; }

.glyphicon-cutlery:before { content: "\e179"; }

.glyphicon-header:before { content: "\e180"; }

.glyphicon-compressed:before { content: "\e181"; }

.glyphicon-earphone:before { content: "\e182"; }

.glyphicon-phone-alt:before { content: "\e183"; }

.glyphicon-tower:before { content: "\e184"; }

.glyphicon-stats:before { content: "\e185"; }

.glyphicon-sd-video:before { content: "\e186"; }

.glyphicon-hd-video:before { content: "\e187"; }

.glyphicon-subtitles:before { content: "\e188"; }

.glyphicon-sound-stereo:before { content: "\e189"; }

.glyphicon-sound-dolby:before { content: "\e190"; }

.glyphicon-sound-5-1:before { content: "\e191"; }

.glyphicon-sound-6-1:before { content: "\e192"; }

.glyphicon-sound-7-1:before { content: "\e193"; }

.glyphicon-copyright-mark:before { content: "\e194"; }

.glyphicon-registration-mark:before { content: "\e195"; }

.glyphicon-cloud-download:before { content: "\e197"; }

.glyphicon-cloud-upload:before { content: "\e198"; }

.glyphicon-tree-conifer:before { content: "\e199"; }

.glyphicon-tree-deciduous:before { content: "\e200"; }

.glyphicon-cd:before { content: "\e201"; }

.glyphicon-save-file:before { content: "\e202"; }

.glyphicon-open-file:before { content: "\e203"; }

.glyphicon-level-up:before { content: "\e204"; }

.glyphicon-copy:before { content: "\e205"; }

.glyphicon-paste:before { content: "\e206"; }

.glyphicon-alert:before { content: "\e209"; }

.glyphicon-equalizer:before { content: "\e210"; }

.glyphicon-king:before { content: "\e211"; }

.glyphicon-queen:before { content: "\e212"; }

.glyphicon-pawn:before { content: "\e213"; }

.glyphicon-bishop:before { content: "\e214"; }

.glyphicon-knight:before { content: "\e215"; }

.glyphicon-baby-formula:before { content: "\e216"; }

.glyphicon-tent:before { content: "\26fa"; }

.glyphicon-blackboard:before { content: "\e218"; }

.glyphicon-bed:before { content: "\e219"; }

.glyphicon-apple:before { content: "\f8ff"; }

.glyphicon-erase:before { content: "\e221"; }

.glyphicon-hourglass:before { content: "\231b"; }

.glyphicon-lamp:before { content: "\e223"; }

.glyphicon-duplicate:before { content: "\e224"; }

.glyphicon-piggy-bank:before { content: "\e225"; }

.glyphicon-scissors:before { content: "\e226"; }

.glyphicon-bitcoin:before { content: "\e227"; }

.glyphicon-btc:before { content: "\e227"; }

.glyphicon-xbt:before { content: "\e227"; }

.glyphicon-yen:before { content: "\00a5"; }

.glyphicon-jpy:before { content: "\00a5"; }

.glyphicon-ruble:before { content: "\20bd"; }

.glyphicon-rub:before { content: "\20bd"; }

.glyphicon-scale:before { content: "\e230"; }

.glyphicon-ice-lolly:before { content: "\e231"; }

.glyphicon-ice-lolly-tasted:before { content: "\e232"; }

.glyphicon-education:before { content: "\e233"; }

.glyphicon-option-horizontal:before { content: "\e234"; }

.glyphicon-option-vertical:before { content: "\e235"; }

.glyphicon-menu-hamburger:before { content: "\e236"; }

.glyphicon-modal-window:before { content: "\e237"; }

.glyphicon-oil:before { content: "\e238"; }

.glyphicon-grain:before { content: "\e239"; }

.glyphicon-sunglasses:before { content: "\e240"; }

.glyphicon-text-size:before { content: "\e241"; }

.glyphicon-text-color:before { content: "\e242"; }

.glyphicon-text-background:before { content: "\e243"; }

.glyphicon-object-align-top:before { content: "\e244"; }

.glyphicon-object-align-bottom:before { content: "\e245"; }

.glyphicon-object-align-horizontal:before { content: "\e246"; }

.glyphicon-object-align-left:before { content: "\e247"; }

.glyphicon-object-align-vertical:before { content: "\e248"; }

.glyphicon-object-align-right:before { content: "\e249"; }

.glyphicon-triangle-right:before { content: "\e250"; }

.glyphicon-triangle-left:before { content: "\e251"; }

.glyphicon-triangle-bottom:before { content: "\e252"; }

.glyphicon-triangle-top:before { content: "\e253"; }

.glyphicon-console:before { content: "\e254"; }

.glyphicon-superscript:before { content: "\e255"; }

.glyphicon-subscript:before { content: "\e256"; }

.glyphicon-menu-left:before { content: "\e257"; }

.glyphicon-menu-right:before { content: "\e258"; }

.glyphicon-menu-down:before { content: "\e259"; }

.glyphicon-menu-up:before { content: "\e260"; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

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

html { font-size: 10px; -webkit-tap-highlight-color: transparent; }

body { font-family: "Fira Sans", Arial, sans-serif; font-size: 16px; line-height: 1.375; color: #666; background-color: #fff; }

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

a { color: #0077cd; text-decoration: none; }

a:hover, a:focus { color: #23527c; text-decoration: underline; }

a:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }

figure { margin: 0; }

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.375; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; -webkit-transition: all 0.2s ease-in-out; -o-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, .rw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

.sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }

[role="button"] { cursor: pointer; }

h1, h2, h3, h4, h5, h6, .h1, .modal-header .modal-title, .h2, .h3, .h4, .h5, .h6 { font-family: inherit; font-weight: 500; line-height: 1.1; color: #333; }

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, .modal-header .modal-title small, .h1 .small, .modal-header .modal-title .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: #777777; }

h1, .h1, .modal-header .modal-title, h2, .h2, h3, .h3 { margin-top: 22px; margin-bottom: 11px; }

h1 small, h1 .small, .h1 small, .modal-header .modal-title small, .h1 .small, .modal-header .modal-title .small, h2 small, h2 .small, .h2 small, .h2 .small, h3 small, h3 .small, .h3 small, .h3 .small { font-size: 65%; }

h4, .h4, h5, .h5, h6, .h6 { margin-top: 11px; margin-bottom: 11px; }

h4 small, h4 .small, .h4 small, .h4 .small, h5 small, h5 .small, .h5 small, .h5 .small, h6 small, h6 .small, .h6 small, .h6 .small { font-size: 75%; }

h1, .h1, .modal-header .modal-title { font-size: 56px; }

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

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

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

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

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

p { margin: 0 0 11px; }

.lead { margin-bottom: 22px; font-size: 18px; font-weight: 300; line-height: 1.4; }

@media (min-width: 768px) { .lead { font-size: 24px; } }

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

mark, .mark { background-color: #fcf8e3; padding: .2em; }

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

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

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

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

.text-nowrap { white-space: nowrap; }

.text-lowercase { text-transform: lowercase; }

.text-uppercase, .initialism { text-transform: uppercase; }

.text-capitalize { text-transform: capitalize; }

.text-muted { color: #777777; }

.text-primary { color: #02ad55; }

a.text-primary:hover, a.text-primary:focus { color: #017b3c; }

.text-success { color: #3c763d; }

a.text-success:hover, a.text-success:focus { color: #2b542c; }

.text-info { color: #31708f; }

a.text-info:hover, a.text-info:focus { color: #245269; }

.text-warning { color: #8a6d3b; }

a.text-warning:hover, a.text-warning:focus { color: #66512c; }

.text-danger { color: #a94442; }

a.text-danger:hover, a.text-danger:focus { color: #843534; }

.bg-primary { color: #fff; }

.bg-primary { background-color: #02ad55; }

a.bg-primary:hover, a.bg-primary:focus { background-color: #017b3c; }

.bg-success { background-color: #dff0d8; }

a.bg-success:hover, a.bg-success:focus { background-color: #c1e2b3; }

.bg-info { background-color: #d9edf7; }

a.bg-info:hover, a.bg-info:focus { background-color: #afd9ee; }

.bg-warning { background-color: #fcf8e3; }

a.bg-warning:hover, a.bg-warning:focus { background-color: #f7ecb5; }

.bg-danger { background-color: #f2dede; }

a.bg-danger:hover, a.bg-danger:focus { background-color: #e4b9b9; }

.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 { padding-left: 0; list-style: none; }

.list-inline { padding-left: 0; list-style: none; margin-left: -5px; }

.list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; }

dl { margin-top: 0; margin-bottom: 22px; }

dt, dd { line-height: 1.375; }

dt { font-weight: bold; }

dd { margin-left: 0; }

.dl-horizontal dd:before, .dl-horizontal dd:after { content: " "; display: table; }

.dl-horizontal dd:after { clear: both; }

@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; } }

abbr[title], abbr[data-original-title] { cursor: help; border-bottom: 1px dotted #777777; }

.initialism { font-size: 90%; }

blockquote { padding: 11px 22px; margin: 0 0 22px; font-size: 17.5px; border-left: 5px solid #eeeeee; }

blockquote p:last-child, blockquote ul:last-child, blockquote ol:last-child { margin-bottom: 0; }

blockquote footer, blockquote small, blockquote .small { display: block; font-size: 80%; line-height: 1.375; color: #777777; }

blockquote footer:before, blockquote small:before, blockquote .small:before { content: '\2014 \00A0'; }

.blockquote-reverse, blockquote.pull-right { padding-right: 15px; padding-left: 0; border-right: 5px solid #eeeeee; border-left: 0; text-align: right; }

.blockquote-reverse footer:before, .blockquote-reverse small:before, .blockquote-reverse .small:before, blockquote.pull-right footer:before, blockquote.pull-right small:before, blockquote.pull-right .small:before { content: ''; }

.blockquote-reverse footer:after, .blockquote-reverse small:after, .blockquote-reverse .small:after, blockquote.pull-right footer:after, blockquote.pull-right small:after, blockquote.pull-right .small:after { content: '\00A0 \2014'; }

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

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

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

kbd { padding: 2px 4px; font-size: 90%; color: #fff; background-color: #333; border-radius: 2px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); }

kbd kbd { padding: 0; font-size: 100%; font-weight: bold; box-shadow: none; }

pre { display: block; padding: 10.5px; margin: 0 0 11px; font-size: 15px; line-height: 1.375; word-break: break-all; word-wrap: break-word; color: #333333; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 6px; }

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: " "; display: table; }

.container:after { clear: both; }

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

@media (min-width: 992px) { .container { width: 970px; } }

@media (min-width: 1200px) { .container { width: 970px; } }

.container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }

.container-fluid:before, .container-fluid:after { content: " "; display: table; }

.container-fluid:after { clear: both; }

.row { margin-left: -15px; margin-right: -15px; }

.row:before, .row:after { content: " "; display: table; }

.row:after { clear: both; }

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; }

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

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

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

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

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

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

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

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

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

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

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

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

.col-xs-pull-0 { right: auto; }

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

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

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

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

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

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

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

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

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

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

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

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

.col-xs-push-0 { left: auto; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 768px) { .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; }
  .col-sm-1 { width: 8.33333%; }
  .col-sm-2 { width: 16.66667%; }
  .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 33.33333%; }
  .col-sm-5 { width: 41.66667%; }
  .col-sm-6 { width: 50%; }
  .col-sm-7 { width: 58.33333%; }
  .col-sm-8 { width: 66.66667%; }
  .col-sm-9 { width: 75%; }
  .col-sm-10 { width: 83.33333%; }
  .col-sm-11 { width: 91.66667%; }
  .col-sm-12 { width: 100%; }
  .col-sm-pull-0 { right: auto; }
  .col-sm-pull-1 { right: 8.33333%; }
  .col-sm-pull-2 { right: 16.66667%; }
  .col-sm-pull-3 { right: 25%; }
  .col-sm-pull-4 { right: 33.33333%; }
  .col-sm-pull-5 { right: 41.66667%; }
  .col-sm-pull-6 { right: 50%; }
  .col-sm-pull-7 { right: 58.33333%; }
  .col-sm-pull-8 { right: 66.66667%; }
  .col-sm-pull-9 { right: 75%; }
  .col-sm-pull-10 { right: 83.33333%; }
  .col-sm-pull-11 { right: 91.66667%; }
  .col-sm-pull-12 { right: 100%; }
  .col-sm-push-0 { left: auto; }
  .col-sm-push-1 { left: 8.33333%; }
  .col-sm-push-2 { left: 16.66667%; }
  .col-sm-push-3 { left: 25%; }
  .col-sm-push-4 { left: 33.33333%; }
  .col-sm-push-5 { left: 41.66667%; }
  .col-sm-push-6 { left: 50%; }
  .col-sm-push-7 { left: 58.33333%; }
  .col-sm-push-8 { left: 66.66667%; }
  .col-sm-push-9 { left: 75%; }
  .col-sm-push-10 { left: 83.33333%; }
  .col-sm-push-11 { left: 91.66667%; }
  .col-sm-push-12 { left: 100%; }
  .col-sm-offset-0 { margin-left: 0%; }
  .col-sm-offset-1 { margin-left: 8.33333%; }
  .col-sm-offset-2 { margin-left: 16.66667%; }
  .col-sm-offset-3 { margin-left: 25%; }
  .col-sm-offset-4 { margin-left: 33.33333%; }
  .col-sm-offset-5 { margin-left: 41.66667%; }
  .col-sm-offset-6 { margin-left: 50%; }
  .col-sm-offset-7 { margin-left: 58.33333%; }
  .col-sm-offset-8 { margin-left: 66.66667%; }
  .col-sm-offset-9 { margin-left: 75%; }
  .col-sm-offset-10 { margin-left: 83.33333%; }
  .col-sm-offset-11 { margin-left: 91.66667%; }
  .col-sm-offset-12 { margin-left: 100%; } }

@media (min-width: 992px) { .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; }
  .col-md-1 { width: 8.33333%; }
  .col-md-2 { width: 16.66667%; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.33333%; }
  .col-md-5 { width: 41.66667%; }
  .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.33333%; }
  .col-md-8 { width: 66.66667%; }
  .col-md-9 { width: 75%; }
  .col-md-10 { width: 83.33333%; }
  .col-md-11 { width: 91.66667%; }
  .col-md-12 { width: 100%; }
  .col-md-pull-0 { right: auto; }
  .col-md-pull-1 { right: 8.33333%; }
  .col-md-pull-2 { right: 16.66667%; }
  .col-md-pull-3 { right: 25%; }
  .col-md-pull-4 { right: 33.33333%; }
  .col-md-pull-5 { right: 41.66667%; }
  .col-md-pull-6 { right: 50%; }
  .col-md-pull-7 { right: 58.33333%; }
  .col-md-pull-8 { right: 66.66667%; }
  .col-md-pull-9 { right: 75%; }
  .col-md-pull-10 { right: 83.33333%; }
  .col-md-pull-11 { right: 91.66667%; }
  .col-md-pull-12 { right: 100%; }
  .col-md-push-0 { left: auto; }
  .col-md-push-1 { left: 8.33333%; }
  .col-md-push-2 { left: 16.66667%; }
  .col-md-push-3 { left: 25%; }
  .col-md-push-4 { left: 33.33333%; }
  .col-md-push-5 { left: 41.66667%; }
  .col-md-push-6 { left: 50%; }
  .col-md-push-7 { left: 58.33333%; }
  .col-md-push-8 { left: 66.66667%; }
  .col-md-push-9 { left: 75%; }
  .col-md-push-10 { left: 83.33333%; }
  .col-md-push-11 { left: 91.66667%; }
  .col-md-push-12 { left: 100%; }
  .col-md-offset-0 { margin-left: 0%; }
  .col-md-offset-1 { margin-left: 8.33333%; }
  .col-md-offset-2 { margin-left: 16.66667%; }
  .col-md-offset-3 { margin-left: 25%; }
  .col-md-offset-4 { margin-left: 33.33333%; }
  .col-md-offset-5 { margin-left: 41.66667%; }
  .col-md-offset-6 { margin-left: 50%; }
  .col-md-offset-7 { margin-left: 58.33333%; }
  .col-md-offset-8 { margin-left: 66.66667%; }
  .col-md-offset-9 { margin-left: 75%; }
  .col-md-offset-10 { margin-left: 83.33333%; }
  .col-md-offset-11 { margin-left: 91.66667%; }
  .col-md-offset-12 { margin-left: 100%; } }

@media (min-width: 1200px) { .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; }
  .col-lg-1 { width: 8.33333%; }
  .col-lg-2 { width: 16.66667%; }
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.33333%; }
  .col-lg-5 { width: 41.66667%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.33333%; }
  .col-lg-8 { width: 66.66667%; }
  .col-lg-9 { width: 75%; }
  .col-lg-10 { width: 83.33333%; }
  .col-lg-11 { width: 91.66667%; }
  .col-lg-12 { width: 100%; }
  .col-lg-pull-0 { right: auto; }
  .col-lg-pull-1 { right: 8.33333%; }
  .col-lg-pull-2 { right: 16.66667%; }
  .col-lg-pull-3 { right: 25%; }
  .col-lg-pull-4 { right: 33.33333%; }
  .col-lg-pull-5 { right: 41.66667%; }
  .col-lg-pull-6 { right: 50%; }
  .col-lg-pull-7 { right: 58.33333%; }
  .col-lg-pull-8 { right: 66.66667%; }
  .col-lg-pull-9 { right: 75%; }
  .col-lg-pull-10 { right: 83.33333%; }
  .col-lg-pull-11 { right: 91.66667%; }
  .col-lg-pull-12 { right: 100%; }
  .col-lg-push-0 { left: auto; }
  .col-lg-push-1 { left: 8.33333%; }
  .col-lg-push-2 { left: 16.66667%; }
  .col-lg-push-3 { left: 25%; }
  .col-lg-push-4 { left: 33.33333%; }
  .col-lg-push-5 { left: 41.66667%; }
  .col-lg-push-6 { left: 50%; }
  .col-lg-push-7 { left: 58.33333%; }
  .col-lg-push-8 { left: 66.66667%; }
  .col-lg-push-9 { left: 75%; }
  .col-lg-push-10 { left: 83.33333%; }
  .col-lg-push-11 { left: 91.66667%; }
  .col-lg-push-12 { left: 100%; }
  .col-lg-offset-0 { margin-left: 0%; }
  .col-lg-offset-1 { margin-left: 8.33333%; }
  .col-lg-offset-2 { margin-left: 16.66667%; }
  .col-lg-offset-3 { margin-left: 25%; }
  .col-lg-offset-4 { margin-left: 33.33333%; }
  .col-lg-offset-5 { margin-left: 41.66667%; }
  .col-lg-offset-6 { margin-left: 50%; }
  .col-lg-offset-7 { margin-left: 58.33333%; }
  .col-lg-offset-8 { margin-left: 66.66667%; }
  .col-lg-offset-9 { margin-left: 75%; }
  .col-lg-offset-10 { margin-left: 83.33333%; }
  .col-lg-offset-11 { margin-left: 91.66667%; }
  .col-lg-offset-12 { margin-left: 100%; } }

table { background-color: transparent; }

caption { padding-top: 20px; padding-bottom: 20px; color: #777777; text-align: left; }

th { text-align: left; }

.table { width: 100%; max-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: 20px; line-height: 1.375; vertical-align: top; border-top: 1px solid #ddd; }

.table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid #ddd; }

.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 #ddd; }

.table .table { background-color: #fff; }

.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 #ddd; }

.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 #ddd; }

.table-bordered > thead > tr > th, .table-bordered > thead > tr > td { border-bottom-width: 2px; }

.table-striped > tbody > tr:nth-of-type(odd) { background-color: #b9e1ff; }

.table-hover > tbody > tr:hover { background-color: #f5f5f5; }

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

table td[class*="col-"], table th[class*="col-"] { position: static; 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: #f5f5f5; }

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

.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: #dff0d8; }

.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:hover > .success, .table-hover > tbody > tr.success:hover > th { background-color: #d0e9c6; }

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

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

.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: #fcf8e3; }

.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:hover > .warning, .table-hover > tbody > tr.warning:hover > th { background-color: #faf2cc; }

.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: #f2dede; }

.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:hover > .danger, .table-hover > tbody > tr.danger:hover > th { background-color: #ebcccc; }

.table-responsive { overflow-x: auto; min-height: 0.01%; }

@media screen and (max-width: 767px) { .table-responsive { width: 100%; margin-bottom: 16.5px; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #ddd; }
  .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; min-width: 0; }

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

label { display: inline-block; max-width: 100%; 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; line-height: normal; }

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

input[type="range"] { display: block; width: 100%; }

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

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

output { display: block; padding-top: 13px; font-size: 16px; line-height: 1.375; color: #555555; }

.form-control { display: block; width: 100%; height: 48px; padding: 12px 15px; font-size: 16px; line-height: 1.375; color: #555555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 6px; -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; -o-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: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }

.form-control::-moz-placeholder { color: #999; opacity: 1; }

.form-control:-ms-input-placeholder { color: #999; }

.form-control::-webkit-input-placeholder { color: #999; }

.form-control::-ms-expand { border: 0; background-color: transparent; }

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: #eeeeee; opacity: 1; }

.form-control[disabled], fieldset[disabled] .form-control { cursor: not-allowed; }

textarea.form-control { height: auto; }

input[type="search"] { -webkit-appearance: none; }

@media screen and (-webkit-min-device-pixel-ratio: 0) { input[type="date"].form-control, input[type="time"].form-control, input[type="datetime-local"].form-control, input[type="month"].form-control { line-height: 48px; }
  input[type="date"].input-sm, .input-group-sm > input[type="date"].form-control, .input-group-sm > input[type="date"].input-group-addon, .input-group-sm > .input-group-btn > input[type="date"].btn, .input-group-sm input[type="date"], input[type="time"].input-sm, .input-group-sm > input[type="time"].form-control, .input-group-sm > input[type="time"].input-group-addon, .input-group-sm > .input-group-btn > input[type="time"].btn, .input-group-sm input[type="time"], input[type="datetime-local"].input-sm, .input-group-sm > input[type="datetime-local"].form-control, .input-group-sm > input[type="datetime-local"].input-group-addon, .input-group-sm > .input-group-btn > input[type="datetime-local"].btn, .input-group-sm input[type="datetime-local"], input[type="month"].input-sm, .input-group-sm > input[type="month"].form-control, .input-group-sm > input[type="month"].input-group-addon, .input-group-sm > .input-group-btn > input[type="month"].btn, .input-group-sm input[type="month"] { line-height: 43px; }
  input[type="date"].input-lg, .input-group-lg > input[type="date"].form-control, .input-group-lg > input[type="date"].input-group-addon, .input-group-lg > .input-group-btn > input[type="date"].btn, .input-group-lg input[type="date"], input[type="time"].input-lg, .input-group-lg > input[type="time"].form-control, .input-group-lg > input[type="time"].input-group-addon, .input-group-lg > .input-group-btn > input[type="time"].btn, .input-group-lg input[type="time"], input[type="datetime-local"].input-lg, .input-group-lg > input[type="datetime-local"].form-control, .input-group-lg > input[type="datetime-local"].input-group-addon, .input-group-lg > .input-group-btn > input[type="datetime-local"].btn, .input-group-lg input[type="datetime-local"], input[type="month"].input-lg, .input-group-lg > input[type="month"].form-control, .input-group-lg > input[type="month"].input-group-addon, .input-group-lg > .input-group-btn > input[type="month"].btn, .input-group-lg input[type="month"] { line-height: 49px; } }

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

.radio, .checkbox { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; }

.radio label, .checkbox label { min-height: 22px; padding-left: 20px; 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"] { position: absolute; margin-left: -20px; margin-top: 4px \9; }

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

.radio-inline, .checkbox-inline { position: relative; 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], input[type="radio"].disabled, fieldset[disabled] input[type="radio"], input[type="checkbox"][disabled], input[type="checkbox"].disabled, fieldset[disabled] input[type="checkbox"] { cursor: not-allowed; }

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

.radio.disabled label, fieldset[disabled] .radio label, .checkbox.disabled label, fieldset[disabled] .checkbox label { cursor: not-allowed; }

.form-control-static { padding-top: 13px; padding-bottom: 13px; margin-bottom: 0; min-height: 38px; }

.form-control-static.input-lg, .input-group-lg > .form-control-static.form-control, .input-group-lg > .form-control-static.input-group-addon, .input-group-lg > .input-group-btn > .form-control-static.btn, .form-control-static.input-sm, .input-group-sm > .form-control-static.form-control, .input-group-sm > .form-control-static.input-group-addon, .input-group-sm > .input-group-btn > .form-control-static.btn { padding-left: 0; padding-right: 0; }

.input-sm, .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn { height: 43px; padding: 10px 20px; font-size: 14px; line-height: 1.5; border-radius: 3px; }

select.input-sm, .input-group-sm > select.form-control, .input-group-sm > select.input-group-addon, .input-group-sm > .input-group-btn > select.btn { height: 43px; line-height: 43px; }

textarea.input-sm, .input-group-sm > textarea.form-control, .input-group-sm > textarea.input-group-addon, .input-group-sm > .input-group-btn > textarea.btn, select[multiple].input-sm, .input-group-sm > select[multiple].form-control, .input-group-sm > select[multiple].input-group-addon, .input-group-sm > .input-group-btn > select[multiple].btn { height: auto; }

.form-group-sm .form-control { height: 43px; padding: 10px 20px; font-size: 14px; line-height: 1.5; border-radius: 3px; }

.form-group-sm select.form-control { height: 43px; line-height: 43px; }

.form-group-sm textarea.form-control, .form-group-sm select[multiple].form-control { height: auto; }

.form-group-sm .form-control-static { height: 43px; min-height: 36px; padding: 11px 20px; font-size: 14px; line-height: 1.5; }

.input-lg, .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn { height: 49px; padding: 10px 16px; font-size: 18px; line-height: 1.5; border-radius: 6px; }

select.input-lg, .input-group-lg > select.form-control, .input-group-lg > select.input-group-addon, .input-group-lg > .input-group-btn > select.btn { height: 49px; line-height: 49px; }

textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > textarea.input-group-addon, .input-group-lg > .input-group-btn > textarea.btn, select[multiple].input-lg, .input-group-lg > select[multiple].form-control, .input-group-lg > select[multiple].input-group-addon, .input-group-lg > .input-group-btn > select[multiple].btn { height: auto; }

.form-group-lg .form-control { height: 49px; padding: 10px 16px; font-size: 18px; line-height: 1.5; border-radius: 6px; }

.form-group-lg select.form-control { height: 49px; line-height: 49px; }

.form-group-lg textarea.form-control, .form-group-lg select[multiple].form-control { height: auto; }

.form-group-lg .form-control-static { height: 49px; min-height: 40px; padding: 11px 16px; font-size: 18px; line-height: 1.5; }

.has-feedback { position: relative; }

.has-feedback .form-control { padding-right: 60px; }

.form-control-feedback { position: absolute; top: 0; right: 0; z-index: 2; display: block; width: 48px; height: 48px; line-height: 48px; text-align: center; pointer-events: none; }

.input-lg + .form-control-feedback, .input-group-lg > .form-control + .form-control-feedback, .input-group-lg > .input-group-addon + .form-control-feedback, .input-group-lg > .input-group-btn > .btn + .form-control-feedback, .input-group-lg + .form-control-feedback, .form-group-lg .form-control + .form-control-feedback { width: 49px; height: 49px; line-height: 49px; }

.input-sm + .form-control-feedback, .input-group-sm > .form-control + .form-control-feedback, .input-group-sm > .input-group-addon + .form-control-feedback, .input-group-sm > .input-group-btn > .btn + .form-control-feedback, .input-group-sm + .form-control-feedback, .form-group-sm .form-control + .form-control-feedback { width: 43px; height: 43px; line-height: 43px; }

.has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox, .has-success .radio-inline, .has-success .checkbox-inline, .has-success.radio label, .has-success.checkbox label, .has-success.radio-inline label, .has-success.checkbox-inline label { color: #3c763d; }

.has-success .form-control { border-color: #3c763d; -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: #2b542c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; }

.has-success .input-group-addon { color: #3c763d; border-color: #3c763d; background-color: #dff0d8; }

.has-success .form-control-feedback { color: #3c763d; }

.has-warning .help-block, .has-warning .control-label, .has-warning .radio, .has-warning .checkbox, .has-warning .radio-inline, .has-warning .checkbox-inline, .has-warning.radio label, .has-warning.checkbox label, .has-warning.radio-inline label, .has-warning.checkbox-inline label { color: #8a6d3b; }

.has-warning .form-control { border-color: #8a6d3b; -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: #66512c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; }

.has-warning .input-group-addon { color: #8a6d3b; border-color: #8a6d3b; background-color: #fcf8e3; }

.has-warning .form-control-feedback { color: #8a6d3b; }

.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label { color: #a94442; }

.has-error .form-control { border-color: #a94442; -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: #843534; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; }

.has-error .input-group-addon { color: #a94442; border-color: #a94442; background-color: #f2dede; }

.has-error .form-control-feedback { color: #a94442; }

.has-feedback label ~ .form-control-feedback { top: 27px; }

.has-feedback label.sr-only ~ .form-control-feedback, .has-feedback label.rw-sr ~ .form-control-feedback { top: 0; }

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

@media (min-width: 768px) { .form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; }
  .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }
  .form-inline .form-control-static { display: inline-block; }
  .form-inline .input-group { display: inline-table; vertical-align: middle; }
  .form-inline .input-group .input-group-addon, .form-inline .input-group .input-group-btn, .form-inline .input-group .form-control { width: auto; }
  .form-inline .input-group > .form-control { width: 100%; }
  .form-inline .control-label { margin-bottom: 0; vertical-align: middle; }
  .form-inline .radio, .form-inline .checkbox { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; }
  .form-inline .radio label, .form-inline .checkbox label { padding-left: 0; }
  .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { position: relative; margin-left: 0; }
  .form-inline .has-feedback .form-control-feedback { top: 0; } }

.form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline { margin-top: 0; margin-bottom: 0; padding-top: 13px; }

.form-horizontal .radio, .form-horizontal .checkbox { min-height: 35px; }

.form-horizontal .form-group { margin-left: -15px; margin-right: -15px; }

.form-horizontal .form-group:before, .form-horizontal .form-group:after { content: " "; display: table; }

.form-horizontal .form-group:after { clear: both; }

@media (min-width: 768px) { .form-horizontal .control-label { text-align: right; margin-bottom: 0; padding-top: 13px; } }

.form-horizontal .has-feedback .form-control-feedback { right: 15px; }

@media (min-width: 768px) { .form-horizontal .form-group-lg .control-label { padding-top: 11px; font-size: 18px; } }

@media (min-width: 768px) { .form-horizontal .form-group-sm .control-label { padding-top: 11px; font-size: 14px; } }

.btn { display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 12px 15px; font-size: 16px; line-height: 1.375; border-radius: 6px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }

.btn:hover, .btn:focus, .btn.focus { color: #666; text-decoration: none; }

.btn:active, .btn.active { 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, .btn[disabled], fieldset[disabled] .btn { cursor: not-allowed; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; }

a.btn.disabled, fieldset[disabled] a.btn { pointer-events: none; }

.btn-default, .btn-primary:disabled { color: #666; background-color: #fff; border-color: #e0e3e9; }

.btn-default:focus, .btn-primary:focus:disabled, .btn-default.focus, .focus.btn-primary:disabled { color: #666; background-color: #e6e6e6; border-color: #95a0b4; }

.btn-default:hover, .btn-primary:hover:disabled { color: #666; background-color: #e6e6e6; border-color: #bcc3d0; }

.btn-default:active, .btn-primary:active:disabled, .btn-default.active, .active.btn-primary:disabled, .open > .btn-default.dropdown-toggle, .open > .dropdown-toggle.btn-primary:disabled { color: #666; background-color: #e6e6e6; border-color: #bcc3d0; }

.btn-default:active:hover, .btn-primary:active:hover:disabled, .btn-default:active:focus, .btn-primary:active:focus:disabled, .btn-default:active.focus, .btn-primary:active.focus:disabled, .btn-default.active:hover, .active.btn-primary:hover:disabled, .btn-default.active:focus, .active.btn-primary:focus:disabled, .btn-default.active.focus, .active.focus.btn-primary:disabled, .open > .btn-default.dropdown-toggle:hover, .open > .dropdown-toggle.btn-primary:hover:disabled, .open > .btn-default.dropdown-toggle:focus, .open > .dropdown-toggle.btn-primary:focus:disabled, .open > .btn-default.dropdown-toggle.focus, .open > .dropdown-toggle.focus.btn-primary:disabled { color: #666; background-color: #d4d4d4; border-color: #95a0b4; }

.btn-default:active, .btn-primary:active:disabled, .btn-default.active, .active.btn-primary:disabled, .open > .btn-default.dropdown-toggle, .open > .dropdown-toggle.btn-primary:disabled { background-image: none; }

.btn-default.disabled:hover, .disabled.btn-primary:hover:disabled, .btn-default.disabled:focus, .disabled.btn-primary:focus:disabled, .btn-default.disabled.focus, .disabled.focus.btn-primary:disabled, .btn-default[disabled]:hover, [disabled].btn-primary:hover:disabled, .btn-default[disabled]:focus, [disabled].btn-primary:focus:disabled, .btn-default[disabled].focus, [disabled].focus.btn-primary:disabled, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-primary:hover:disabled, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-primary:focus:disabled, fieldset[disabled] .btn-default.focus, fieldset[disabled] .focus.btn-primary:disabled { background-color: #fff; border-color: #e0e3e9; }

.btn-default .badge, .btn-primary:disabled .badge { color: #fff; background-color: #666; }

.btn-primary { color: #fff; background-color: #02ad55; border-color: #02ad55; }

.btn-primary:focus, .btn-primary.focus { color: #fff; background-color: #017b3c; border-color: #012f17; }

.btn-primary:hover { color: #fff; background-color: #017b3c; border-color: #017037; }

.btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle { color: #fff; background-color: #017b3c; border-color: #017037; }

.btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus, .open > .btn-primary.dropdown-toggle:hover, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle.focus { color: #fff; background-color: #01572b; border-color: #012f17; }

.btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle { background-image: none; }

.btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary.focus { background-color: #02ad55; border-color: #02ad55; }

.btn-primary .badge { color: #02ad55; background-color: #fff; }

.btn-success { color: #fff; background-color: #02ad55; border-color: #02ad55; }

.btn-success:focus, .btn-success.focus { color: #fff; background-color: #017b3c; border-color: #012f17; }

.btn-success:hover { color: #fff; background-color: #017b3c; border-color: #017037; }

.btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle { color: #fff; background-color: #017b3c; border-color: #017037; }

.btn-success:active:hover, .btn-success:active:focus, .btn-success:active.focus, .btn-success.active:hover, .btn-success.active:focus, .btn-success.active.focus, .open > .btn-success.dropdown-toggle:hover, .open > .btn-success.dropdown-toggle:focus, .open > .btn-success.dropdown-toggle.focus { color: #fff; background-color: #01572b; border-color: #012f17; }

.btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle { background-image: none; }

.btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success:hover, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success.focus { background-color: #02ad55; border-color: #02ad55; }

.btn-success .badge { color: #02ad55; background-color: #fff; }

.btn-info { color: #fff; background-color: #0077cd; border-color: #0077cd; }

.btn-info:focus, .btn-info.focus { color: #fff; background-color: #00599a; border-color: #002d4e; }

.btn-info:hover { color: #fff; background-color: #00599a; border-color: #005390; }

.btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle { color: #fff; background-color: #00599a; border-color: #005390; }

.btn-info:active:hover, .btn-info:active:focus, .btn-info:active.focus, .btn-info.active:hover, .btn-info.active:focus, .btn-info.active.focus, .open > .btn-info.dropdown-toggle:hover, .open > .btn-info.dropdown-toggle:focus, .open > .btn-info.dropdown-toggle.focus { color: #fff; background-color: #004576; border-color: #002d4e; }

.btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle { background-image: none; }

.btn-info.disabled:hover, .btn-info.disabled:focus, .btn-info.disabled.focus, .btn-info[disabled]:hover, .btn-info[disabled]:focus, .btn-info[disabled].focus, fieldset[disabled] .btn-info:hover, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info.focus { background-color: #0077cd; border-color: #0077cd; }

.btn-info .badge { color: #0077cd; background-color: #fff; }

.btn-warning { color: #fff; background-color: #fed83e; border-color: #fed83e; }

.btn-warning:focus, .btn-warning.focus { color: #fff; background-color: #fece0b; border-color: #bc9701; }

.btn-warning:hover { color: #fff; background-color: #fece0b; border-color: #fdcc01; }

.btn-warning:active, .btn-warning.active, .open > .btn-warning.dropdown-toggle { color: #fff; background-color: #fece0b; border-color: #fdcc01; }

.btn-warning:active:hover, .btn-warning:active:focus, .btn-warning:active.focus, .btn-warning.active:hover, .btn-warning.active:focus, .btn-warning.active.focus, .open > .btn-warning.dropdown-toggle:hover, .open > .btn-warning.dropdown-toggle:focus, .open > .btn-warning.dropdown-toggle.focus { color: #fff; background-color: #e4b701; border-color: #bc9701; }

.btn-warning:active, .btn-warning.active, .open > .btn-warning.dropdown-toggle { background-image: none; }

.btn-warning.disabled:hover, .btn-warning.disabled:focus, .btn-warning.disabled.focus, .btn-warning[disabled]:hover, .btn-warning[disabled]:focus, .btn-warning[disabled].focus, fieldset[disabled] .btn-warning:hover, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning.focus { background-color: #fed83e; border-color: #fed83e; }

.btn-warning .badge { color: #fed83e; background-color: #fff; }

.btn-danger { color: #fff; background-color: #ff443d; border-color: #ff443d; }

.btn-danger:focus, .btn-danger.focus { color: #fff; background-color: #ff130a; border-color: #bd0700; }

.btn-danger:hover { color: #fff; background-color: #ff130a; border-color: #ff0900; }

.btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle { color: #fff; background-color: #ff130a; border-color: #ff0900; }

.btn-danger:active:hover, .btn-danger:active:focus, .btn-danger:active.focus, .btn-danger.active:hover, .btn-danger.active:focus, .btn-danger.active.focus, .open > .btn-danger.dropdown-toggle:hover, .open > .btn-danger.dropdown-toggle:focus, .open > .btn-danger.dropdown-toggle.focus { color: #fff; background-color: #e50800; border-color: #bd0700; }

.btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle { background-image: none; }

.btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled.focus, .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled].focus, fieldset[disabled] .btn-danger:hover, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger.focus { background-color: #ff443d; border-color: #ff443d; }

.btn-danger .badge { color: #ff443d; background-color: #fff; }

.btn-link { color: #0077cd; font-weight: normal; border-radius: 0; }

.btn-link, .btn-link:active, .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: #23527c; 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: #777777; text-decoration: none; }

.btn-lg, .btn-group-lg > .btn { padding: 10px 16px; font-size: 18px; line-height: 1.5; border-radius: 6px; }

.btn-sm, .btn-group-sm > .btn { padding: 10px 20px; font-size: 14px; line-height: 1.5; border-radius: 6px; }

.btn-xs, .btn-group-xs > .btn { padding: 1px 5px; font-size: 14px; line-height: 1.5; border-radius: 6px; }

.btn-block { display: block; width: 100%; }

.btn-block + .btn-block { margin-top: 5px; }

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

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

.fade.in { opacity: 1; }

.collapse { display: none; }

.collapse.in { display: block; }

tr.collapse.in { display: table-row; }

tbody.collapse.in { display: table-row-group; }

.collapsing { position: relative; height: 0; overflow: hidden; -webkit-transition-property: height, visibility; transition-property: height, visibility; -webkit-transition-duration: 0.35s; transition-duration: 0.35s; -webkit-transition-timing-function: ease; transition-timing-function: ease; }

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

.dropup, .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: 16px; text-align: left; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 6px; -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.375; color: #333333; white-space: nowrap; }

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

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: #fff; text-decoration: none; outline: 0; background-color: #337ab7; }

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

.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-menu-right { left: auto; right: 0; }

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

.dropdown-header { display: block; padding: 3px 20px; font-size: 14px; line-height: 1.375; color: #777777; white-space: nowrap; }

.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; border-bottom: 4px dashed; border-bottom: 4px solid \9; content: ""; }

.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 2px; }

@media (min-width: 768px) { .navbar-right .dropdown-menu { right: 0; left: auto; }
  .navbar-right .dropdown-menu-left { left: 0; right: auto; } }

.btn-group, .btn-group-vertical { position: relative; display: inline-block; vertical-align: middle; }

.btn-group > .btn, .btn-group-vertical > .btn { position: relative; float: left; }

.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn:hover, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn.active { z-index: 2; }

.btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group { margin-left: -1px; }

.btn-toolbar { margin-left: -5px; }

.btn-toolbar:before, .btn-toolbar:after { content: " "; display: table; }

.btn-toolbar:after { clear: both; }

.btn-toolbar .btn, .btn-toolbar .btn-group, .btn-toolbar .input-group { float: left; }

.btn-toolbar > .btn, .btn-toolbar > .btn-group, .btn-toolbar > .input-group { margin-left: 5px; }

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

.btn-group > .btn:first-child { margin-left: 0; }

.btn-group > .btn: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 > .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 { border-radius: 0; }

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

.btn-group > .btn-group:last-child:not(:first-child) > .btn: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 { padding-left: 8px; padding-right: 8px; }

.btn-group > .btn-lg + .dropdown-toggle, .btn-group-lg.btn-group > .btn + .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 { margin-left: 0; }

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

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

.btn-group-vertical > .btn, .btn-group-vertical > .btn-group, .btn-group-vertical > .btn-group > .btn { display: block; float: none; width: 100%; max-width: 100%; }

.btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after { content: " "; display: table; }

.btn-group-vertical > .btn-group:after { clear: both; }

.btn-group-vertical > .btn-group > .btn { float: none; }

.btn-group-vertical > .btn + .btn, .btn-group-vertical > .btn + .btn-group, .btn-group-vertical > .btn-group + .btn, .btn-group-vertical > .btn-group + .btn-group { margin-top: -1px; margin-left: 0; }

.btn-group-vertical > .btn:not(:first-child):not(:last-child) { border-radius: 0; }

.btn-group-vertical > .btn:first-child:not(:last-child) { border-top-right-radius: 6px; border-top-left-radius: 6px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }

.btn-group-vertical > .btn:last-child:not(:first-child) { border-top-right-radius: 0; border-top-left-radius: 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; }

.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; }

.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }

.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn: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 > .btn-group { float: none; display: table-cell; width: 1%; }

.btn-group-justified > .btn-group .btn { width: 100%; }

.btn-group-justified > .btn-group .dropdown-menu { left: auto; }

[data-toggle="buttons"] > .btn input[type="radio"], [data-toggle="buttons"] > .btn input[type="checkbox"], [data-toggle="buttons"] > .btn-group > .btn input[type="radio"], [data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; }

.input-group { position: relative; display: table; border-collapse: separate; }

.input-group[class*="col-"] { float: none; padding-left: 0; padding-right: 0; }

.input-group .form-control { position: relative; z-index: 2; float: left; width: 100%; margin-bottom: 0; }

.input-group .form-control:focus { z-index: 3; }

.input-group-addon, .input-group-btn, .input-group .form-control { display: table-cell; }

.input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child), .input-group .form-control:not(:first-child):not(:last-child) { border-radius: 0; }

.input-group-addon, .input-group-btn { width: 1%; white-space: nowrap; vertical-align: middle; }

.input-group-addon { padding: 12px 15px; font-size: 16px; font-weight: normal; line-height: 1; color: #555555; text-align: center; background-color: #eeeeee; border: 1px solid #ccc; border-radius: 6px; }

.input-group-addon.input-sm, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .input-group-addon.btn { padding: 10px 20px; font-size: 14px; border-radius: 3px; }

.input-group-addon.input-lg, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .input-group-addon.btn { padding: 10px 16px; font-size: 18px; border-radius: 6px; }

.input-group-addon input[type="radio"], .input-group-addon input[type="checkbox"] { margin-top: 0; }

.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child > .btn-group:not(:last-child) > .btn { border-bottom-right-radius: 0; border-top-right-radius: 0; }

.input-group-addon:first-child { border-right: 0; }

.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:first-child > .btn-group:not(:first-child) > .btn { border-bottom-left-radius: 0; border-top-left-radius: 0; }

.input-group-addon:last-child { border-left: 0; }

.input-group-btn { position: relative; font-size: 0; white-space: nowrap; }

.input-group-btn > .btn { position: relative; }

.input-group-btn > .btn + .btn { margin-left: -1px; }

.input-group-btn > .btn:hover, .input-group-btn > .btn:focus, .input-group-btn > .btn:active { z-index: 2; }

.input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group { margin-right: -1px; }

.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group { z-index: 2; margin-left: -1px; }

.nav { margin-bottom: 0; padding-left: 0; list-style: none; }

.nav:before, .nav:after { content: " "; display: table; }

.nav:after { clear: both; }

.nav > li { position: relative; display: block; }

.nav > li > a { position: relative; display: block; padding: 10px 15px; }

.nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: none; }

.nav > li.disabled > a { color: #777777; }

.nav > li.disabled > a:hover, .nav > li.disabled > a:focus { color: #777777; text-decoration: none; background-color: transparent; cursor: not-allowed; }

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: none; border-color: #0077cd; }

.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 #e0e3e9; }

.nav-tabs > li { float: left; margin-bottom: -1px; }

.nav-tabs > li > a { margin-right: 2px; line-height: 1.375; border: 1px solid transparent; border-radius: 6px 6px 0 0; }

.nav-tabs > li > a:hover { border-color: #eeeeee #eeeeee #e0e3e9; }

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #555555; background-color: none; border: 1px solid #ddd; 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: #fff; background-color: #337ab7; }

.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: 6px; }

.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 #ddd; }

@media (min-width: 768px) { .nav-tabs-justified > li > a, .nav-tabs.nav-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 6px 6px 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: #fff; } }

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

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

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

.navbar { position: relative; min-height: 50px; margin-bottom: 22px; border: 1px solid transparent; }

.navbar:before, .navbar:after { content: " "; display: table; }

.navbar:after { clear: both; }

@media (min-width: 768px) { .navbar { border-radius: 6px; } }

.navbar-header:before, .navbar-header:after { content: " "; display: table; }

.navbar-header:after { clear: both; }

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

.navbar-collapse { 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: " "; display: table; }

.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: visible; }
  .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { padding-left: 0; padding-right: 0; } }

.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 340px; }

@media (max-device-width: 480px) and (orientation: landscape) { .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 200px; } }

.container > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-header, .container-fluid > .navbar-collapse { margin-right: -15px; margin-left: -15px; }

@media (min-width: 768px) { .container > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-header, .container-fluid > .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: 14px 15px; font-size: 18px; line-height: 22px; height: 50px; }

.navbar-brand:hover, .navbar-brand:focus { text-decoration: none; }

.navbar-brand > img { display: block; }

@media (min-width: 768px) { .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-left: -15px; } }

.navbar-toggle { position: relative; float: right; margin-right: 15px; padding: 9px 10px; margin-top: 8px; margin-bottom: 8px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 6px; }

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

.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: 7px -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: 14px; padding-bottom: 14px; } }

.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: 1px; margin-bottom: 1px; }

@media (min-width: 768px) { .navbar-form .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; }
  .navbar-form .form-control { display: inline-block; width: auto; vertical-align: middle; }
  .navbar-form .form-control-static { display: inline-block; }
  .navbar-form .input-group { display: inline-table; vertical-align: middle; }
  .navbar-form .input-group .input-group-addon, .navbar-form .input-group .input-group-btn, .navbar-form .input-group .form-control { width: auto; }
  .navbar-form .input-group > .form-control { width: 100%; }
  .navbar-form .control-label { margin-bottom: 0; vertical-align: middle; }
  .navbar-form .radio, .navbar-form .checkbox { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; }
  .navbar-form .radio label, .navbar-form .checkbox label { padding-left: 0; }
  .navbar-form .radio input[type="radio"], .navbar-form .checkbox input[type="checkbox"] { position: relative; margin-left: 0; }
  .navbar-form .has-feedback .form-control-feedback { top: 0; } }

@media (max-width: 767px) { .navbar-form .form-group { margin-bottom: 5px; }
  .navbar-form .form-group:last-child { margin-bottom: 0; } }

@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 { margin-bottom: 0; border-top-right-radius: 6px; border-top-left-radius: 6px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }

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

.navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn { margin-top: 3.5px; margin-bottom: 3.5px; }

.navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn { margin-top: 14px; margin-bottom: 14px; }

.navbar-text { margin-top: 14px; margin-bottom: 14px; }

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

@media (min-width: 768px) { .navbar-left { float: left !important; }
  .navbar-right { float: right !important; margin-right: -15px; }
  .navbar-right ~ .navbar-right { margin-right: 0; } }

.navbar-default { background-color: #fff; border-color: #eeeeee; }

.navbar-default .navbar-brand { color: #666; }

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #4d4d4d; background-color: transparent; }

.navbar-default .navbar-text { color: #666; }

.navbar-default .navbar-nav > li > a { color: #666; }

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #333; background-color: transparent; }

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #e53221; background-color: #f9f9f9; }

.navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus { color: #ccc; background-color: transparent; }

.navbar-default .navbar-toggle { border-color: #ddd; }

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #cbd7e4; }

.navbar-default .navbar-toggle .icon-bar { background-color: #999; }

.navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #eeeeee; }

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: #f9f9f9; color: #e53221; }

@media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #666; }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #333; 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: #e53221; background-color: #f9f9f9; }
  .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: #ccc; background-color: transparent; } }

.navbar-default .navbar-link { color: #666; }

.navbar-default .navbar-link:hover { color: #333; }

.navbar-default .btn-link { color: #666; }

.navbar-default .btn-link:hover, .navbar-default .btn-link:focus { color: #333; }

.navbar-default .btn-link[disabled]:hover, .navbar-default .btn-link[disabled]:focus, fieldset[disabled] .navbar-default .btn-link:hover, fieldset[disabled] .navbar-default .btn-link:focus { color: #ccc; }

.navbar-inverse { background-color: #222; border-color: #090909; }

.navbar-inverse .navbar-brand { color: #9d9d9d; }

.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus { color: #fff; background-color: transparent; }

.navbar-inverse .navbar-text { color: #999; }

.navbar-inverse .navbar-nav > li > a { color: #999; }

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #fff; background-color: transparent; }

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { color: #fff; background-color: #090909; }

.navbar-inverse .navbar-nav > .disabled > a, .navbar-inverse .navbar-nav > .disabled > a:hover, .navbar-inverse .navbar-nav > .disabled > a:focus { color: #444; background-color: transparent; }

.navbar-inverse .navbar-toggle { border-color: #333; }

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: #333; }

.navbar-inverse .navbar-toggle .icon-bar { background-color: #fff; }

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: #101010; }

.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus { background-color: #090909; color: #fff; }

@media (max-width: 767px) { .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { border-color: #090909; }
  .navbar-inverse .navbar-nav .open .dropdown-menu .divider { background-color: #090909; }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #999; }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { color: #fff; 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: #fff; background-color: #090909; }
  .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: #444; background-color: transparent; } }

.navbar-inverse .navbar-link { color: #999; }

.navbar-inverse .navbar-link:hover { color: #fff; }

.navbar-inverse .btn-link { color: #999; }

.navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus { color: #fff; }

.navbar-inverse .btn-link[disabled]:hover, .navbar-inverse .btn-link[disabled]:focus, fieldset[disabled] .navbar-inverse .btn-link:hover, fieldset[disabled] .navbar-inverse .btn-link:focus { color: #444; }

.breadcrumb { padding: 8px 15px; margin-bottom: 22px; list-style: none; background-color: #f5f5f5; border-radius: 6px; }

.breadcrumb > li { display: inline-block; }

.breadcrumb > li + li:before { content: "/ "; padding: 0 5px; color: #ccc; }

.breadcrumb > .active { color: #777777; }

.pagination { display: inline-block; padding-left: 0; margin: 22px 0; border-radius: 6px; }

.pagination > li { display: inline; }

.pagination > li > a, .pagination > li > span { position: relative; float: left; padding: 12px 15px; line-height: 1.375; text-decoration: none; color: #337ab7; background-color: #fff; border: 1px solid #ddd; margin-left: -1px; }

.pagination > li:first-child > a, .pagination > li:first-child > span { margin-left: 0; border-bottom-left-radius: 6px; border-top-left-radius: 6px; }

.pagination > li:last-child > a, .pagination > li:last-child > span { border-bottom-right-radius: 6px; border-top-right-radius: 6px; }

.pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus { z-index: 2; color: #23527c; background-color: #eeeeee; border-color: #ddd; }

.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { z-index: 3; color: #fff; background-color: #337ab7; border-color: #337ab7; cursor: default; }

.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus { color: #777777; background-color: #fff; border-color: #ddd; cursor: not-allowed; }

.pagination-lg > li > a, .pagination-lg > li > span { padding: 10px 16px; font-size: 18px; line-height: 1.5; }

.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span { border-bottom-left-radius: 6px; border-top-left-radius: 6px; }

.pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span { border-bottom-right-radius: 6px; border-top-right-radius: 6px; }

.pagination-sm > li > a, .pagination-sm > li > span { padding: 10px 20px; font-size: 14px; line-height: 1.5; }

.pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span { border-bottom-left-radius: 2px; border-top-left-radius: 2px; }

.pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span { border-bottom-right-radius: 2px; border-top-right-radius: 2px; }

.pager { padding-left: 0; margin: 22px 0; list-style: none; text-align: center; }

.pager:before, .pager:after { content: " "; display: table; }

.pager:after { clear: both; }

.pager li { display: inline; }

.pager li > a, .pager li > span { display: inline-block; padding: 5px 14px; background-color: #fff; border: 1px solid #ddd; border-radius: 15px; }

.pager li > a:hover, .pager li > a:focus { text-decoration: none; background-color: #eeeeee; }

.pager .next > a, .pager .next > span { float: right; }

.pager .previous > a, .pager .previous > span { float: left; }

.pager .disabled > a, .pager .disabled > a:hover, .pager .disabled > a:focus, .pager .disabled > span { color: #777777; background-color: #fff; cursor: not-allowed; }

.label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: bold; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; }

.label:empty { display: none; }

.btn .label { position: relative; top: -1px; }

a.label:hover, a.label:focus { color: #fff; text-decoration: none; cursor: pointer; }

.label-default { background-color: #999; }

.label-default[href]:hover, .label-default[href]:focus { background-color: gray; }

.label-primary { background-color: #02ad55; }

.label-primary[href]:hover, .label-primary[href]:focus { background-color: #017b3c; }

.label-success { background-color: #02ad55; }

.label-success[href]:hover, .label-success[href]:focus { background-color: #017b3c; }

.label-info { background-color: #0077cd; }

.label-info[href]:hover, .label-info[href]:focus { background-color: #00599a; }

.label-warning { background-color: #fed83e; }

.label-warning[href]:hover, .label-warning[href]:focus { background-color: #fece0b; }

.label-danger { background-color: #ff443d; }

.label-danger[href]:hover, .label-danger[href]:focus { background-color: #ff130a; }

.badge { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 14px; font-weight: bold; color: #fff; line-height: 1; vertical-align: middle; white-space: nowrap; text-align: center; background-color: #777777; border-radius: 10px; }

.badge:empty { display: none; }

.btn .badge { position: relative; top: -1px; }

.btn-xs .badge, .btn-group-xs > .btn .badge, .btn-group-xs > .btn .badge { top: 0; padding: 1px 5px; }

.list-group-item.active > .badge, .nav-pills > .active > a > .badge { color: #337ab7; background-color: #fff; }

.list-group-item > .badge { float: right; }

.list-group-item > .badge + .badge { margin-right: 5px; }

.nav-pills > li > a > .badge { margin-left: 3px; }

a.badge:hover, a.badge:focus { color: #fff; text-decoration: none; cursor: pointer; }

.jumbotron { padding-top: 30px; padding-bottom: 30px; margin-bottom: 30px; color: inherit; background-color: #eeeeee; }

.jumbotron h1, .jumbotron .h1, .jumbotron .modal-header .modal-title, .modal-header .jumbotron .modal-title { color: inherit; }

.jumbotron p { margin-bottom: 15px; font-size: 21px; font-weight: 200; }

.jumbotron > hr { border-top-color: #d5d5d5; }

.container .jumbotron, .container-fluid .jumbotron { border-radius: 6px; padding-left: 15px; padding-right: 15px; }

.jumbotron .container { max-width: 100%; }

@media screen and (min-width: 768px) { .jumbotron { padding-top: 48px; padding-bottom: 48px; }
  .container .jumbotron, .container-fluid .jumbotron { padding-left: 60px; padding-right: 60px; }
  .jumbotron h1, .jumbotron .h1, .jumbotron .modal-header .modal-title, .modal-header .jumbotron .modal-title { font-size: 63px; } }

.thumbnail { display: block; padding: 4px; margin-bottom: 22px; line-height: 1.375; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; }

.thumbnail > img, .thumbnail a > img { display: block; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; }

.thumbnail .caption { padding: 9px; color: #333333; }

a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { border-color: #0077cd; }

.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, .alert-dismissible { padding-right: 35px; }

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

.alert-success { background-color: #ccefdd; border-color: #ccefdd; color: #01572b; }

.alert-success hr { border-top-color: #b9e9d0; }

.alert-success .alert-link { color: #002512; }

.alert-info { background-color: #cce4f5; border-color: #cce4f5; color: #003c67; }

.alert-info hr { border-top-color: #b7d9f1; }

.alert-info .alert-link { color: #001e34; }

.alert-warning { background-color: #fff7d8; border-color: #fff7d8; color: #7f6c1f; }

.alert-warning hr { border-top-color: #fff2bf; }

.alert-warning .alert-link { color: #564915; }

.alert-danger { background-color: #ffdad8; border-color: #ffdad8; color: #80221f; }

.alert-danger hr { border-top-color: #ffc2bf; }

.alert-danger .alert-link { color: #571715; }

@-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; }
  to { background-position: 0 0; } }

@keyframes progress-bar-stripes { from { background-position: 40px 0; }
  to { background-position: 0 0; } }

.progress { overflow: hidden; height: 22px; margin-bottom: 22px; background-color: #f5f5f5; border-radius: 6px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }

.progress-bar { float: left; width: 0%; height: 100%; font-size: 14px; line-height: 22px; color: #fff; text-align: center; background-color: #02ad55; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; }

.progress-striped .progress-bar, .progress-bar-striped { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px; }

.progress.active .progress-bar, .progress-bar.active { -webkit-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; }

.progress-bar-success { background-color: #02ad55; }

.progress-striped .progress-bar-success { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); }

.progress-bar-info { background-color: #0077cd; }

.progress-striped .progress-bar-info { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); }

.progress-bar-warning { background-color: #fed83e; }

.progress-striped .progress-bar-warning { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); }

.progress-bar-danger { background-color: #ff443d; }

.progress-striped .progress-bar-danger { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); }

.media { margin-top: 15px; }

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

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

.media-body { width: 10000px; }

.media-object { display: block; }

.media-object.img-thumbnail { max-width: none; }

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

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

.media-left, .media-right, .media-body { display: table-cell; vertical-align: top; }

.media-middle { vertical-align: middle; }

.media-bottom { vertical-align: bottom; }

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

.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: #fff; border: 1px solid #ddd; }

.list-group-item:first-child { border-top-right-radius: 4px; border-top-left-radius: 4px; }

.list-group-item:last-child { margin-bottom: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; }

a.list-group-item, button.list-group-item { color: #555; }

a.list-group-item .list-group-item-heading, button.list-group-item .list-group-item-heading { color: #333; }

a.list-group-item:hover, a.list-group-item:focus, button.list-group-item:hover, button.list-group-item:focus { text-decoration: none; color: #555; background-color: #f5f5f5; }

button.list-group-item { width: 100%; text-align: left; }

.list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus { background-color: #eeeeee; color: #777777; cursor: not-allowed; }

.list-group-item.disabled .list-group-item-heading, .list-group-item.disabled:hover .list-group-item-heading, .list-group-item.disabled:focus .list-group-item-heading { color: inherit; }

.list-group-item.disabled .list-group-item-text, .list-group-item.disabled:hover .list-group-item-text, .list-group-item.disabled:focus .list-group-item-text { color: #777777; }

.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { z-index: 2; color: #fff; background-color: #337ab7; border-color: #337ab7; }

.list-group-item.active .list-group-item-heading, .list-group-item.active .list-group-item-heading > small, .list-group-item.active .list-group-item-heading > .small, .list-group-item.active:hover .list-group-item-heading, .list-group-item.active:hover .list-group-item-heading > small, .list-group-item.active:hover .list-group-item-heading > .small, .list-group-item.active:focus .list-group-item-heading, .list-group-item.active:focus .list-group-item-heading > small, .list-group-item.active:focus .list-group-item-heading > .small { color: inherit; }

.list-group-item.active .list-group-item-text, .list-group-item.active:hover .list-group-item-text, .list-group-item.active:focus .list-group-item-text { color: #c7ddef; }

.list-group-item-success { color: #3c763d; background-color: #dff0d8; }

a.list-group-item-success, button.list-group-item-success { color: #3c763d; }

a.list-group-item-success .list-group-item-heading, button.list-group-item-success .list-group-item-heading { color: inherit; }

a.list-group-item-success:hover, a.list-group-item-success:focus, button.list-group-item-success:hover, button.list-group-item-success:focus { color: #3c763d; background-color: #d0e9c6; }

a.list-group-item-success.active, a.list-group-item-success.active:hover, a.list-group-item-success.active:focus, button.list-group-item-success.active, button.list-group-item-success.active:hover, button.list-group-item-success.active:focus { color: #fff; background-color: #3c763d; border-color: #3c763d; }

.list-group-item-info { color: #31708f; background-color: #d9edf7; }

a.list-group-item-info, button.list-group-item-info { color: #31708f; }

a.list-group-item-info .list-group-item-heading, button.list-group-item-info .list-group-item-heading { color: inherit; }

a.list-group-item-info:hover, a.list-group-item-info:focus, button.list-group-item-info:hover, button.list-group-item-info:focus { color: #31708f; background-color: #c4e3f3; }

a.list-group-item-info.active, a.list-group-item-info.active:hover, a.list-group-item-info.active:focus, button.list-group-item-info.active, button.list-group-item-info.active:hover, button.list-group-item-info.active:focus { color: #fff; background-color: #31708f; border-color: #31708f; }

.list-group-item-warning { color: #8a6d3b; background-color: #fcf8e3; }

a.list-group-item-warning, button.list-group-item-warning { color: #8a6d3b; }

a.list-group-item-warning .list-group-item-heading, button.list-group-item-warning .list-group-item-heading { color: inherit; }

a.list-group-item-warning:hover, a.list-group-item-warning:focus, button.list-group-item-warning:hover, button.list-group-item-warning:focus { color: #8a6d3b; background-color: #faf2cc; }

a.list-group-item-warning.active, a.list-group-item-warning.active:hover, a.list-group-item-warning.active:focus, button.list-group-item-warning.active, button.list-group-item-warning.active:hover, button.list-group-item-warning.active:focus { color: #fff; background-color: #8a6d3b; border-color: #8a6d3b; }

.list-group-item-danger { color: #a94442; background-color: #f2dede; }

a.list-group-item-danger, button.list-group-item-danger { color: #a94442; }

a.list-group-item-danger .list-group-item-heading, button.list-group-item-danger .list-group-item-heading { color: inherit; }

a.list-group-item-danger:hover, a.list-group-item-danger:focus, button.list-group-item-danger:hover, button.list-group-item-danger:focus { color: #a94442; background-color: #ebcccc; }

a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-group-item-danger.active:focus, button.list-group-item-danger.active, button.list-group-item-danger.active:hover, button.list-group-item-danger.active:focus { color: #fff; background-color: #a94442; border-color: #a94442; }

.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: #fff; border: 1px solid transparent; border-radius: 4px; -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: " "; display: table; }

.panel-body:after { clear: both; }

.panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 3px; border-top-left-radius: 3px; }

.panel-heading > .dropdown .dropdown-toggle { color: inherit; }

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

.panel-title > a, .panel-title > small, .panel-title > .small, .panel-title > small > a, .panel-title > .small > a { color: inherit; }

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

.panel > .list-group, .panel > .panel-collapse > .list-group { margin-bottom: 0; }

.panel > .list-group .list-group-item, .panel > .panel-collapse > .list-group .list-group-item { border-width: 1px 0; border-radius: 0; }

.panel > .list-group:first-child .list-group-item:first-child, .panel > .panel-collapse > .list-group:first-child .list-group-item:first-child { border-top: 0; border-top-right-radius: 3px; border-top-left-radius: 3px; }

.panel > .list-group:last-child .list-group-item:last-child, .panel > .panel-collapse > .list-group:last-child .list-group-item:last-child { border-bottom: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; }

.panel > .panel-heading + .panel-collapse > .list-group .list-group-item:first-child { border-top-right-radius: 0; border-top-left-radius: 0; }

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

.list-group + .panel-footer { border-top-width: 0; }

.panel > .table, .panel > .table-responsive > .table, .panel > .panel-collapse > .table { margin-bottom: 0; }

.panel > .table caption, .panel > .table-responsive > .table caption, .panel > .panel-collapse > .table caption { padding-left: 15px; padding-right: 15px; }

.panel > .table:first-child, .panel > .table-responsive:first-child > .table:first-child { border-top-right-radius: 3px; border-top-left-radius: 3px; }

.panel > .table:first-child > thead:first-child > tr:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; }

.panel > .table:first-child > thead:first-child > tr:first-child td:first-child, .panel > .table:first-child > thead:first-child > tr:first-child th:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child td:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child { border-top-left-radius: 3px; }

.panel > .table:first-child > thead:first-child > tr:first-child td:last-child, .panel > .table:first-child > thead:first-child > tr:first-child th:last-child, .panel > .table:first-child > tbody:first-child > tr:first-child td:last-child, .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child { border-top-right-radius: 3px; }

.panel > .table:last-child, .panel > .table-responsive:last-child > .table:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; }

.panel > .table:last-child > tbody:last-child > tr:last-child, .panel > .table:last-child > tfoot:last-child > tr:last-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }

.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child, .panel > .table:last-child > tbody:last-child > tr:last-child th:first-child, .panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child, .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child { border-bottom-left-radius: 3px; }

.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child, .panel > .table:last-child > tbody:last-child > tr:last-child th:last-child, .panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child, .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child { border-bottom-right-radius: 3px; }

.panel > .panel-body + .table, .panel > .panel-body + .table-responsive, .panel > .table + .panel-body, .panel > .table-responsive + .panel-body { border-top: 1px solid #ddd; }

.panel > .table > tbody:first-child > tr:first-child th, .panel > .table > tbody:first-child > tr:first-child td { border-top: 0; }

.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:first-child > td, .panel > .table-bordered > thead > tr:first-child > th, .panel > .table-bordered > tbody > tr:first-child > td, .panel > .table-bordered > tbody > tr:first-child > th, .panel > .table-responsive > .table-bordered > thead > tr:first-child > td, .panel > .table-responsive > .table-bordered > thead > tr:first-child > th, .panel > .table-responsive > .table-bordered > tbody > tr:first-child > td, .panel > .table-responsive > .table-bordered > tbody > tr:first-child > th { border-bottom: 0; }

.panel > .table-bordered > tbody > tr:last-child > td, .panel > .table-bordered > tbody > tr:last-child > th, .panel > .table-bordered > tfoot > tr:last-child > td, .panel > .table-bordered > tfoot > tr:last-child > th, .panel > .table-responsive > .table-bordered > tbody > tr:last-child > td, .panel > .table-responsive > .table-bordered > tbody > tr:last-child > th, .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td, .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th { border-bottom: 0; }

.panel > .table-responsive { border: 0; margin-bottom: 0; }

.panel-group { margin-bottom: 22px; }

.panel-group .panel { margin-bottom: 0; border-radius: 4px; }

.panel-group .panel + .panel { margin-top: 5px; }

.panel-group .panel-heading { border-bottom: 0; }

.panel-group .panel-heading + .panel-collapse > .panel-body, .panel-group .panel-heading + .panel-collapse > .list-group { border-top: 1px solid #ddd; }

.panel-group .panel-footer { border-top: 0; }

.panel-group .panel-footer + .panel-collapse .panel-body { border-bottom: 1px solid #ddd; }

.panel-default { border-color: #ddd; }

.panel-default > .panel-heading { color: #333333; background-color: #f5f5f5; border-color: #ddd; }

.panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #ddd; }

.panel-default > .panel-heading .badge { color: #f5f5f5; background-color: #333333; }

.panel-default > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #ddd; }

.panel-primary { border-color: #337ab7; }

.panel-primary > .panel-heading { color: #fff; background-color: #337ab7; border-color: #337ab7; }

.panel-primary > .panel-heading + .panel-collapse > .panel-body { border-top-color: #337ab7; }

.panel-primary > .panel-heading .badge { color: #337ab7; background-color: #fff; }

.panel-primary > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #337ab7; }

.panel-success { border-color: #d6e9c6; }

.panel-success > .panel-heading { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }

.panel-success > .panel-heading + .panel-collapse > .panel-body { border-top-color: #d6e9c6; }

.panel-success > .panel-heading .badge { color: #dff0d8; background-color: #3c763d; }

.panel-success > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #d6e9c6; }

.panel-info { border-color: #bce8f1; }

.panel-info > .panel-heading { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }

.panel-info > .panel-heading + .panel-collapse > .panel-body { border-top-color: #bce8f1; }

.panel-info > .panel-heading .badge { color: #d9edf7; background-color: #31708f; }

.panel-info > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #bce8f1; }

.panel-warning { border-color: #faebcc; }

.panel-warning > .panel-heading { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }

.panel-warning > .panel-heading + .panel-collapse > .panel-body { border-top-color: #faebcc; }

.panel-warning > .panel-heading .badge { color: #fcf8e3; background-color: #8a6d3b; }

.panel-warning > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #faebcc; }

.panel-danger { border-color: #ebccd1; }

.panel-danger > .panel-heading { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }

.panel-danger > .panel-heading + .panel-collapse > .panel-body { border-top-color: #ebccd1; }

.panel-danger > .panel-heading .badge { color: #f2dede; background-color: #a94442; }

.panel-danger > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #ebccd1; }

.embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; }

.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; left: 0; bottom: 0; height: 100%; width: 100%; border: 0; }

.embed-responsive-16by9 { padding-bottom: 56.25%; }

.embed-responsive-4by3 { padding-bottom: 75%; }

.well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 6px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); }

.well blockquote { border-color: #ddd; border-color: rgba(0, 0, 0, 0.15); }

.well-lg { padding: 24px; border-radius: 6px; }

.well-sm { padding: 9px; border-radius: 2px; }

.close { float: right; font-size: 24px; font-weight: bold; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: 0.2; filter: alpha(opacity=20); }

.close:hover, .close:focus { color: #000; 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: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; -webkit-overflow-scrolling: touch; outline: 0; }

.modal.fade .modal-dialog { -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); -o-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); -o-transform: translate(0, 0); transform: translate(0, 0); }

.modal-open .modal { overflow-x: hidden; overflow-y: auto; }

.modal-dialog { position: relative; width: auto; margin: 10px; }

.modal-content { position: relative; background-color: #fff; border: 1px solid #fff; border: 1px solid #fff; 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: 0; }

.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; }

.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 #fff; }

.modal-header:before, .modal-header:after { content: " "; display: table; }

.modal-header:after { clear: both; }

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

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

.modal-body { position: relative; padding: 0 40px 30px; }

.modal-footer { padding: 0 40px 30px; text-align: right; border-top: 1px solid #fff; }

.modal-footer:before, .modal-footer:after { content: " "; display: table; }

.modal-footer:after { clear: both; }

.modal-footer .btn + .btn { margin-left: 5px; margin-bottom: 0; }

.modal-footer .btn-group .btn + .btn { margin-left: -1px; }

.modal-footer .btn-block + .btn-block { margin-left: 0; }

.modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; }

@media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto; }
  .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); }
  .modal-sm { width: 300px; } }

@media (min-width: 992px) { .modal-lg { width: 900px; } }

.tooltip { position: absolute; z-index: 1070; display: block; font-family: "Fira Sans", Arial, sans-serif; font-style: normal; font-weight: normal; letter-spacing: normal; line-break: auto; line-height: 1.375; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; white-space: normal; word-break: normal; word-spacing: normal; word-wrap: normal; font-size: 14px; 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: #fff; text-align: center; background-color: #000; border-radius: 6px; }

.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: #000; }

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

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

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

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

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

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

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

.popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; padding: 1px; font-family: "Fira Sans", Arial, sans-serif; font-style: normal; font-weight: normal; letter-spacing: normal; line-break: auto; line-height: 1.375; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; white-space: normal; word-break: normal; word-spacing: normal; word-wrap: normal; font-size: 16px; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }

.popover.top { margin-top: -10px; }

.popover.right { margin-left: 10px; }

.popover.bottom { margin-top: 10px; }

.popover.left { margin-left: -10px; }

.popover-title { margin: 0; padding: 8px 14px; font-size: 16px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0; }

.popover-content { padding: 9px 14px; }

.popover > .arrow, .popover > .arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; }

.popover > .arrow { border-width: 11px; }

.popover > .arrow:after { border-width: 10px; content: ""; }

.popover.top > .arrow { left: 50%; margin-left: -11px; border-bottom-width: 0; border-top-color: #999999; border-top-color: #e0e3e9; bottom: -11px; }

.popover.top > .arrow:after { content: " "; bottom: 1px; margin-left: -10px; border-bottom-width: 0; border-top-color: #fff; }

.popover.right > .arrow { top: 50%; left: -11px; margin-top: -11px; border-left-width: 0; border-right-color: #999999; border-right-color: #e0e3e9; }

.popover.right > .arrow:after { content: " "; left: 1px; bottom: -10px; border-left-width: 0; border-right-color: #fff; }

.popover.bottom > .arrow { left: 50%; margin-left: -11px; border-top-width: 0; border-bottom-color: #999999; border-bottom-color: #e0e3e9; top: -11px; }

.popover.bottom > .arrow:after { content: " "; top: 1px; margin-left: -10px; border-top-width: 0; border-bottom-color: #fff; }

.popover.left > .arrow { top: 50%; right: -11px; margin-top: -11px; border-right-width: 0; border-left-color: #999999; border-left-color: #e0e3e9; }

.popover.left > .arrow:after { content: " "; right: 1px; border-right-width: 0; border-left-color: #fff; bottom: -10px; }

.carousel { position: relative; }

.carousel-inner { position: relative; overflow: hidden; width: 100%; }

.carousel-inner > .item { display: none; position: relative; -webkit-transition: 0.6s ease-in-out left; -o-transition: 0.6s ease-in-out left; transition: 0.6s ease-in-out left; }

.carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; line-height: 1; }

@media all and (transform-3d), (-webkit-transform-3d) { .carousel-inner > .item { -webkit-transition: -webkit-transform 0.6s ease-in-out; -moz-transition: -moz-transform 0.6s ease-in-out; -o-transition: -o-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; }
  .carousel-inner > .item.next, .carousel-inner > .item.active.right { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); left: 0; }
  .carousel-inner > .item.prev, .carousel-inner > .item.active.left { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); left: 0; }
  .carousel-inner > .item.next.left, .carousel-inner > .item.prev.right, .carousel-inner > .item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 0; } }

.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev { display: block; }

.carousel-inner > .active { left: 0; }

.carousel-inner > .next, .carousel-inner > .prev { position: absolute; top: 0; width: 100%; }

.carousel-inner > .next { left: 100%; }

.carousel-inner > .prev { left: -100%; }

.carousel-inner > .next.left, .carousel-inner > .prev.right { left: 0; }

.carousel-inner > .active.left { left: -100%; }

.carousel-inner > .active.right { left: 100%; }

.carousel-control { position: absolute; top: 0; left: 0; bottom: 0; width: 15%; opacity: 0.5; filter: alpha(opacity=50); font-size: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); background-color: transparent; }

.carousel-control.left { background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); }

.carousel-control.right { left: auto; right: 0; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); }

.carousel-control:hover, .carousel-control:focus { outline: 0; color: #fff; text-decoration: none; opacity: 0.9; filter: alpha(opacity=90); }

.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { position: absolute; top: 50%; margin-top: -10px; z-index: 5; display: inline-block; }

.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left { left: 50%; margin-left: -10px; }

.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right { right: 50%; margin-right: -10px; }

.carousel-control .icon-prev, .carousel-control .icon-next { width: 20px; height: 20px; line-height: 1; font-family: serif; }

.carousel-control .icon-prev:before { content: '\2039'; }

.carousel-control .icon-next:before { content: '\203a'; }

.carousel-indicators { position: absolute; bottom: 10px; left: 50%; z-index: 15; width: 60%; margin-left: -30%; padding-left: 0; list-style: none; text-align: center; }

.carousel-indicators li { display: inline-block; width: 10px; height: 10px; margin: 1px; text-indent: -999px; border: 1px solid #fff; border-radius: 10px; cursor: pointer; background-color: #000 \9; background-color: transparent; }

.carousel-indicators .active { margin: 0; width: 12px; height: 12px; background-color: #fff; }

.carousel-caption { position: absolute; left: 15%; right: 15%; bottom: 20px; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }

.carousel-caption .btn { text-shadow: none; }

@media screen and (min-width: 768px) { .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next { width: 30px; height: 30px; margin-top: -10px; font-size: 30px; }
  .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev { margin-left: -10px; }
  .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next { margin-right: -10px; }
  .carousel-caption { left: 20%; right: 20%; padding-bottom: 30px; }
  .carousel-indicators { bottom: 20px; } }

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

.center-block { display: block; margin-left: auto; margin-right: auto; }

.pull-right { float: right !important; }

.pull-left { float: left !important; }

.hide { display: none !important; }

.show { display: block !important; }

.invisible { visibility: hidden; }

.text-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; }

.hidden { display: none !important; }

.affix { position: fixed; }

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

.visible-xs { display: none !important; }

.visible-sm { display: none !important; }

.visible-md { display: none !important; }

.visible-lg { display: none !important; }

.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; }

@media (max-width: 767px) { .visible-xs { display: block !important; }
  table.visible-xs { display: table !important; }
  tr.visible-xs { display: table-row !important; }
  th.visible-xs, td.visible-xs { display: table-cell !important; } }

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

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

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

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

@media (min-width: 768px) and (max-width: 991px) { .visible-sm-block { display: block !important; } }

@media (min-width: 768px) and (max-width: 991px) { .visible-sm-inline { display: inline !important; } }

@media (min-width: 768px) and (max-width: 991px) { .visible-sm-inline-block { display: inline-block !important; } }

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

@media (min-width: 992px) and (max-width: 1199px) { .visible-md-block { display: block !important; } }

@media (min-width: 992px) and (max-width: 1199px) { .visible-md-inline { display: inline !important; } }

@media (min-width: 992px) and (max-width: 1199px) { .visible-md-inline-block { display: inline-block !important; } }

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

@media (min-width: 1200px) { .visible-lg-block { display: block !important; } }

@media (min-width: 1200px) { .visible-lg-inline { display: inline !important; } }

@media (min-width: 1200px) { .visible-lg-inline-block { display: inline-block !important; } }

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

@media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } }

@media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } }

@media (min-width: 1200px) { .hidden-lg { display: none !important; } }

.visible-print { display: none !important; }

@media print { .visible-print { display: block !important; }
  table.visible-print { display: table !important; }
  tr.visible-print { display: table-row !important; }
  th.visible-print, td.visible-print { display: table-cell !important; } }

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

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

.visible-print-inline { display: none !important; }

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

.visible-print-inline-block { display: none !important; }

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

@media print { .hidden-print { display: none !important; } }

body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body #sb-site a[name] { content: ""; display: block; height: 76px; margin-top: -76px; }

/*doc --- title: Primary name: primary category: Colors --- Used for elements (i.e buttons, labels and ***) <div class="clearfix"> <div class="color-box brand-primary"> <span>$brand-primary</span> </div> <div class="color-box brand-success"> <span>$brand-success</span> </div> <div class="color-box brand-warning"> <span>$brand-warning</span> </div> <div class="color-box brand-danger"> <span>$brand-danger</span> </div> <div class="color-box color-1"> <span>$color-poptype-green</span> </div> <div class="color-box  color-2"> <span>$color-poptype-yellow</span> </div> <div class="color-box  color-3"> <span>$color-poptype-red</span> </div> <div class="color-box color-4"> <span>$color-poptype-blue</span> </div> <div class="color-box color-5"> <span>$color-poptype-magenta</span> </div> <div class="color-box color-6"> <span>$color-poptype-orange</span> </div> </div> */
/*doc --- title: Text name: text category: Colors --- Used for text, borders and list elements. <div class="clearfix"> <div class="color-box text-color"> <span>$text-color</span> </div> <div class="color-box text-color-dark"> <span>$text-color-dark</span> </div> <div class="color-box text-color-light"> <span>$text-color-light</span> </div> </div> */
/*doc --- title: UI Colors name: ui-colors category: Colors --- Used for borders, background and dividers <div class="clearfix"> <div class="color-box ui-color-default"> <span>$ui-color-default</span> </div> <div class="color-box ui-color-light"> <span>$ui-color-light</span> </div> <div class="color-box ui-color-lighter"> <span>$ui-color-lighter</span> </div> <div class="color-box ui-color-lightest"> <span>$ui-color-lightest</span> </div> </div> */
/*doc
---
title: Typography
name: typo
category: CSS
---
In general we should not use typography classes but instead use the correct semantic elements which in almost all
cases should have the correct styling.
*/
/*doc
---
title: Headings
name: headings
parent: typo
---
```html_example
<h1>H1 using the larger font size with golden  <small>This is a smaller text withing the header</small></h1>
<h2>H2 <small>$font-size-larger</small></h2>
<h3>H3 <small>$font-size-base</small></h3>
```
*/
/*doc --- title: Body copy name: body_copy parent: typo --- ```html_example <p class="lead"> <strong>.lead</strong> Bacon ipsum dolor amet brisket chicken shank, turducken venison shoulder beef ribs. Shoulder kielbasa cupim filet mignon. Ham pork chop andouille bacon turducken jowl fatback filet mignon meatloaf landjaeger. Pork belly boudin brisket tri-tip sirloin hamburger shankle tenderloin meatball venison picanha frankfurter. Kevin picanha andouille meatball, sirloin kielbasa ribeye corned beef pork belly bacon ground round. Pancetta swine flank prosciutto meatball. Swine ball tip chicken hamburger pork sirloin. </p> <p> Bacon ipsum dolor amet brisket chicken shank, turducken venison shoulder beef ribs. Shoulder kielbasa cupim filet mignon. Ham pork chop andouille bacon turducken jowl fatback filet mignon meatloaf landjaeger. Pork belly boudin brisket tri-tip sirloin hamburger shankle tenderloin meatball venison picanha frankfurter. Kevin picanha andouille meatball, sirloin kielbasa ribeye corned beef pork belly bacon ground round. Pancetta swine flank prosciutto meatball. Swine ball tip chicken hamburger pork sirloin. </p> ``` */
h1 { font-weight: 700; }

h1 small { display: block; font-size: 18px; margin-top: 10px; }

.lead { font-weight: normal; }

.table tbody > tr > td.vert-align { vertical-align: middle; }

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

@media screen and (min-width: 768px) { .text-left-sm { text-align: left; } }

@media screen and (min-width: 992px) { .text-left-md { text-align: left; } }

@media screen and (min-width: 1200px) { .text-left-lg { text-align: left; } }

/*doc --- title: Buttons name: Buttons category: CSS --- ```html_example_table <p><button class="btn btn-default">Normal</button> <button class="btn btn-default btn-sm">Small</button></p> <h3>Normal buttons</h3> <p><button class="btn btn-link">Link button</button> <button class="btn btn-link" disabled>Link button</button></p> <p><button class="btn btn-default">Default</button> <button class="btn btn-default" disabled>Default disabled</button></p> <p><button class="btn btn-primary">Primary</button> <button class="btn btn-primary" disabled>Primary disabled</button></p> <p><button class="btn btn-success">Success</button> <button class="btn btn-success" disabled>Success disabled</button></p> <p><button class="btn btn-danger">Danger</button> <button class="btn btn-danger" disabled>Danger disabled</button></p> <h3>Small buttons</h3> <p><button class="btn btn-sm btn-default">Small default</button> <button class="btn btn-sm btn-primary">Small primary</button> <button class="btn btn-sm btn-link">Small link button</button></p> <h3>Small buttons with icons</h3> <p><button class="btn btn-sm btn-default"><i class="fa fa-plus"></i></button> <button class="btn btn-sm btn-primary">Small primary <i class="fa fa-plus"></i></button></p> <h3>Social buttons</h3> <p> <button class="btn btn-default btn-facebook"><i class="fa fa-facebook"></i> Add new Facebook account</button> <button class="btn btn-default btn-facebook-active"><i class="fa fa-facebook"></i>Facebook Connected <i class="fa fa-remove"></i></button> </p> <p> <button class="btn btn-default btn-twitter"><i class="fa fa-twitter"></i> Connect to Twitter</button> <button class="btn btn-default btn-twitter-active btn-active"><i class="fa fa-twitter"></i> Twitter Connected <i class="fa fa-remove"></i></button> </p> <p> <button class="btn-linkedin btn btn-default"><i class="fa fa-linkedin"></i> Connect to Linkedin</button> <button class="btn-linkedin-active btn btn-default"><i class="fa fa-linkedin"></i> Linkedin Connected <i class="fa fa-remove"></i></button> </p> <h3>Stretched buttons</h3> <p><button class="btn btn-default btn-wide">Wide button</button></p> ``` */
.btn-default.btn-facebook-active, .btn-facebook-active.btn-primary:disabled, .btn-default.btn-facebook-active:active, .btn-default.btn-facebook-active:active:focus, .btn-default.btn-facebook-active:focus, .btn-default.btn-facebook-active:hover, .btn-default.btn-twitter-active, .btn-twitter-active.btn-primary:disabled, .btn-default.btn-twitter-active:active, .btn-default.btn-twitter-active:active:focus, .btn-default.btn-twitter-active:focus, .btn-default.btn-twitter-active:hover, .btn-default.btn-linkedin-active, .btn-linkedin-active.btn-primary:disabled, .btn-default.btn-linkedin-active:active, .btn-default.btn-linkedin-active:active:focus, .btn-default.btn-linkedin-active:focus, .btn-default.btn-linkedin-active:hover { color: #fff; }

.btn-default.btn-facebook-active i:first-child, .btn-facebook-active.btn-primary:disabled i:first-child, .btn-default.btn-twitter-active i:first-child, .btn-twitter-active.btn-primary:disabled i:first-child, .btn-default.btn-linkedin-active i:first-child, .btn-linkedin-active.btn-primary:disabled i:first-child { margin-right: 10px; }

.btn-default.btn-facebook-active i:last-child, .btn-facebook-active.btn-primary:disabled i:last-child, .btn-default.btn-twitter-active i:last-child, .btn-twitter-active.btn-primary:disabled i:last-child, .btn-default.btn-linkedin-active i:last-child, .btn-linkedin-active.btn-primary:disabled i:last-child { margin-left: 10px; }

.btn-default.btn-facebook-active:hover, .btn-facebook-active.btn-primary:hover:disabled, .btn-default.btn-twitter-active:hover, .btn-twitter-active.btn-primary:hover:disabled, .btn-default.btn-linkedin-active:hover, .btn-linkedin-active.btn-primary:hover:disabled, .btn-default.btn-facebook-active:focus, .btn-facebook-active.btn-primary:focus:disabled, .btn-default.btn-twitter-active:focus, .btn-twitter-active.btn-primary:focus:disabled, .btn-default.btn-linkedin-active:focus, .btn-linkedin-active.btn-primary:focus:disabled { color: #fff; }

.btn-default.btn-facebook, .btn-facebook.btn-primary:disabled, .btn-default.btn-facebook:active, .btn-default.btn-facebook:active:focus, .btn-default.btn-facebook:focus, .btn-default.btn-facebook:hover, .btn-default.btn-twitter, .btn-twitter.btn-primary:disabled, .btn-default.btn-twitter:active, .btn-default.btn-twitter:active:focus, .btn-default.btn-twitter:focus, .btn-default.btn-twitter:hover, .btn-default.btn-linkedin, .btn-linkedin.btn-primary:disabled, .btn-default.btn-linkedin:active, .btn-default.btn-linkedin:active:focus, .btn-default.btn-linkedin:focus, .btn-default.btn-linkedin:hover { background: #fff; }

.btn-default.btn-facebook i, .btn-facebook.btn-primary:disabled i, .btn-default.btn-facebook:active i, .btn-default.btn-facebook:active:focus i, .btn-default.btn-facebook:focus i, .btn-default.btn-facebook:hover i, .btn-default.btn-twitter i, .btn-twitter.btn-primary:disabled i, .btn-default.btn-twitter:active i, .btn-default.btn-twitter:active:focus i, .btn-default.btn-twitter:focus i, .btn-default.btn-twitter:hover i, .btn-default.btn-linkedin i, .btn-linkedin.btn-primary:disabled i, .btn-default.btn-linkedin:active i, .btn-default.btn-linkedin:active:focus i, .btn-default.btn-linkedin:focus i, .btn-default.btn-linkedin:hover i { margin-right: 10px; }

.btn-default.btn-facebook, .btn-facebook.btn-primary:disabled { color: #3b5998; border-color: #3b5998; }

.btn-default.btn-facebook:active, .btn-facebook.btn-primary:active:disabled, .btn-default.btn-facebook:active:focus, .btn-facebook.btn-primary:active:focus:disabled, .btn-default.btn-facebook:focus, .btn-facebook.btn-primary:focus:disabled, .btn-default.btn-facebook:hover, .btn-facebook.btn-primary:hover:disabled { color: #2d4373; border-color: #2d4373; }

.btn-default.btn-facebook-active, .btn-facebook-active.btn-primary:disabled { color: #fff; background-color: #3b5998; }

.btn-default.btn-facebook-active:active, .btn-facebook-active.btn-primary:active:disabled, .btn-default.btn-facebook-active:active:focus, .btn-facebook-active.btn-primary:active:focus:disabled, .btn-default.btn-facebook-active:focus, .btn-facebook-active.btn-primary:focus:disabled { color: #fff; background-color: #3b5998; }

.btn-default.btn-facebook-active:hover, .btn-facebook-active.btn-primary:hover:disabled { color: #fff; background-color: #2d4373; }

.btn-default.btn-twitter, .btn-twitter.btn-primary:disabled { color: #55acee; border-color: #55acee; }

.btn-default.btn-twitter:active, .btn-twitter.btn-primary:active:disabled, .btn-default.btn-twitter:active:focus, .btn-twitter.btn-primary:active:focus:disabled, .btn-default.btn-twitter:focus, .btn-twitter.btn-primary:focus:disabled, .btn-default.btn-twitter:hover, .btn-twitter.btn-primary:hover:disabled { color: #2795e9; border-color: #2795e9; }

.btn-default.btn-twitter-active, .btn-twitter-active.btn-primary:disabled { color: #fff; background-color: #55acee; }

.btn-default.btn-twitter-active:active, .btn-twitter-active.btn-primary:active:disabled, .btn-default.btn-twitter-active:active:focus, .btn-twitter-active.btn-primary:active:focus:disabled, .btn-default.btn-twitter-active:focus, .btn-twitter-active.btn-primary:focus:disabled { color: #fff; background-color: #55acee; }

.btn-default.btn-twitter-active:hover, .btn-twitter-active.btn-primary:hover:disabled { color: #fff; background-color: #2795e9; }

.btn-default.btn-linkedin, .btn-linkedin.btn-primary:disabled { color: #0077b5; border-color: #0077b5; }

.btn-default.btn-linkedin:active, .btn-linkedin.btn-primary:active:disabled, .btn-default.btn-linkedin:active:focus, .btn-linkedin.btn-primary:active:focus:disabled, .btn-default.btn-linkedin:focus, .btn-linkedin.btn-primary:focus:disabled, .btn-default.btn-linkedin:hover, .btn-linkedin.btn-primary:hover:disabled { color: #005582; border-color: #005582; }

.btn-default.btn-linkedin-active, .btn-linkedin-active.btn-primary:disabled { color: #fff; background-color: #0077b5; }

.btn-default.btn-linkedin-active:active, .btn-linkedin-active.btn-primary:active:disabled, .btn-default.btn-linkedin-active:active:focus, .btn-linkedin-active.btn-primary:active:focus:disabled, .btn-default.btn-linkedin-active:focus, .btn-linkedin-active.btn-primary:focus:disabled { color: #fff; background-color: #0077b5; }

.btn-default.btn-linkedin-active:hover, .btn-linkedin-active.btn-primary:hover:disabled { color: #fff; background-color: #005582; }

.btn { font-weight: 500; margin-left: 20px; padding-bottom: 8px; padding-top: 7px; }

.btn:first-child { margin-left: 0; }

.btn[disabled], .btn.disabled { cursor: default; }

.btn-default:hover, .btn-primary:hover:disabled { background: #fff; border-color: #e0e3e9; color: #333; }

.btn-default:active, .btn-primary:active:disabled, .btn-default:focus, .btn-primary:focus:disabled, .btn-default:active:focus, .btn-primary:active:focus:disabled { background: #fff; border-color: #b3b3b3; box-shadow: none; color: #666; outline: none; }

.btn-default:disabled:hover, .btn-primary:disabled:hover { color: #666; }

.btn-primary:hover { background: #017b3c; border-color: #017b3c; color: #fff; }

.btn-primary:active, .btn-primary:focus, .btn-primary:active:focus { background: #014823; border-color: #014823; box-shadow: none; color: #fff; }

.btn-wide { display: inline-block; text-align: left; width: 100%; }

.btn-sm, .btn-group-sm > .btn { font-size: 16px; font-weight: 400; margin-left: 10px; padding-bottom: 9px; padding-top: 7px; }

.btn-sm i, .btn-group-sm > .btn i { position: relative; top: 1px; }

.btn.no-margin { margin: 0; }

.btn.no-ui { border: 0; margin: 0; padding: 0; }

.btn-first { margin-left: 0; }

.btn-last { margin-right: 0; }

[disabled].btn-primary:disabled { background: #02ad55; color: #fff; }

[disabled].btn-primary:disabled:hover { background: #02ad55; }

/*doc
//---
//title: Code
//name: code
//category: CSS
//---
*/
/*doc --- title: Forms name: forms category: CSS --- ```html_example_table <form> <div class="form-group"> <label for="to">Default</label> <input type="email" class="form-control" id="to" placeholder="Enter email"> </div> <div class="form-group has-success"> <label for="to">Success</label> <input type="email" class="form-control" id="to" placeholder="Enter email"> <p class="help-block">Example block-level help text here.</p> </div> <div class="form-group has-success has-feedback"> <label for="to">Success</label> <input type="email" class="form-control" id="to" placeholder="Enter email"> <span class="fa fa-icon fa-check form-control-feedback"></span> <p class="help-block">Example block-level help text here.</p> </div> <div class="form-group has-warning"> <label for="to">Warning</label> <input type="email" class="form-control" id="to" placeholder="Enter email"> <p class="help-block">Example block-level help text here.</p> </div> <div class="form-group has-error"> <label for="to">Error</label> <input type="email" class="form-control" id="to" placeholder="Enter email"> <p class="help-block">Example block-level help text here.</p> </div> <div class="form-group has-error has-feedback"> <label for="to">Error</label> <input type="email" class="form-control" id="to" placeholder="Enter email"> <span class="fa fa-icon fa-close form-control-feedback"></span> <p class="help-block">Example block-level help text here.</p> </div> <div class="form-group"> <label for="to">addonBefore</label> <div class="input-group"> <div class="input-group-addon">poptype.co/</div> <input type="email" class="form-control" id="to" placeholder="your-name-here"> </div> <p class="help-block">Example block-level help text here.</p> </div> <div class="form-group"> <label for="to">Disabled input</label> <input type="email" class="form-control" id="to" placeholder=":disabled" disabled> <p class="help-block">Example block-level help text here.</p> </div> <div class="form-group"> <label for="message">Textarea</label> <textarea class="form-control" id="subject" placeholder="Enter message"></textarea> </div> <div class="form-group"> <div class="checkbox"> <label> <input type="checkbox" name="samecheck"> Check me out </label> <br> <label> <input type="checkbox" name="samecheck"> Check me out again </label> </div> </div> <div class="form-group"> <div class="radio"> <label> <input type="radio" name="sameradio"> Check me out </label> <br> <label> <input type="radio" name="sameradio"> Check me out again </label> </div> </div> <div class="form-group"> <select class="form-control"> <option>option 1</option> <option>option 2</option> <option>option 3</option> <option>option 4</option> </select> </div> <h3>Input button</h3> <div class="input-group"> <input class="form-control" type="text"> <span class="input-group-btn"> <div class="btn-group"> <button class="btn btn-default" type="button">Show</button> </div> </span> </div> <div class="form-group text-right form-actions"> <button type="reset" class="btn btn-default">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button> </div> <div class="form-group"> <label for="formControlsEmail" class="control-label">Locked field</label> <span class="input-group"> <input disabled type="text" id="formControlsEmail" class="fake-field-text form-control" value="locked-field@example.org"> <span class="input-group-addon fake-field-addon"><i name="lock" class="fa fa-lock"></i></span> </span> </div> </form> <form> <div class="form-group"> <label for="form-links">Form links example</label> <input type="text" class="form-control" id="form-links" placeholder="Organization name"> </div> <button type="submit" class="btn btn-primary pull-right">Submit</button> <div class="form-group form-links"> <a href="#" class="pull-left">Link one</a> <a href="#" class="pull-left">Link two</a> <a href="#" class="pull-right">Link three</a> </div> </form> ``` */
.form-group { margin-bottom: 30px; }

.form-group.has-error label { color: #ff443d; }

.form-group .help-block { font-size: 14px; margin-top: 15px; }

.form-actions { padding-top: 20px; }

.input-group-addon { border: 1px solid #98adbb; }

.form-control { background: #fff; border: 1px solid #98adbb; box-shadow: none; padding: 7px  15px 8px; }

.form-control::-webkit-input-placeholder { color: #999; font-style: italic; }

.form-control::-moz-placeholder { color: #999; font-style: italic; }

.form-control:-moz-placeholder { color: #999; font-style: italic; }

.form-control:-ms-input-placeholder { color: #999; font-style: italic; }

.form-control:hover { border-color: #aaa; }

.form-control:focus { border-color: #0077cd; box-shadow: 0px 0px 3px 0px rgba(33, 115, 210, 0.3); }

.form-control[disabled] { background-color: #F5F9FA; border-color: #98adbb; }

.has-error .form-control, .has-warning .form-control, .has-success .form-control { box-shadow: none; }

.has-error .form-control:focus, .has-warning .form-control:focus, .has-success .form-control:focus { border-color: #0077cd; box-shadow: 0px 0px 3px 0px rgba(33, 115, 210, 0.3); }

.has-feedback .form-control-feedback { line-height: 48px; }

.has-feedback label ~ .form-control-feedback { top: 36px; }

label { color: #666; font-weight: 600; margin-bottom: 15px; }

.checkbox label, .radio label { color: #666; font-size: 16px; margin-bottom: 0; text-transform: none; }

textarea { resize: vertical; }

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

.form-links a { padding: 13px 16px; }

.form-links a.pull-left:first-child { padding-left: 0; }

.input-group-btn .btn { background: #e0e3e9; border-radius: 6px; padding: 13px 15px 12px; }

.fake-field { border: 0; }

.fake-field-text { background: #cbd7e4; border: 0; color: #333; }

.fake-field-addon { background-color: #e0e3e9; border-color: #e0e3e9; }

.container-fluid { padding-left: 20px; padding-right: 20px; }

/*doc
//---
//title: Helpers
//name: helpers
//category: CSS
//---
*/
/*doc
//---
//title: Images
//name: images
//category: CSS
//---
*/
/*doc
---
title: Horizontal Rule
name: hr
category: CSS
---

```html_example
<p>
  this is some text-color
</p>
<hr>
<p>
  this is more text text
</p>
```

```html_example
<p>Here's another example</p>
<hr class="small">
<p>With smaller margin</p>
```
*/
hr { margin: 60px 0; }

hr.small { margin: 15px 0; }

/*doc
//---
//title: Responsives
//name: responsives
//category: CSS
//---
*/
.table > tbody > tr > td { border-top: 0; border-bottom: 1px solid #ddd; }

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

/*doc --- title: Alerts name: alerts category: Components --- Alerts should always starts with a word that tell the user more about the feedback in short. ```html_example <div class="alert alert-success alert-dismissable" role="alert"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <span class="label label-success">New</span> <strong>Wohooo!</strong> Thanks for signing up! </div> <div class="alert alert-info alert-dismissable" role="alert"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <span class="label label-info">Info</span> <strong>Morning!</strong> Looks like you are happy today! <a class="pull-right" href="#">Yes I am!</a> </div> <div class="alert alert-warning" role="alert"><span class="label label-warning">Schedule</span> <strong>Hey!</strong> You have two scheduled posts!<a class="pull-right" href="#">View scheduled posts</a></div> <div class="alert alert-danger" role="alert"><span class="label label-danger">Warning</span> <strong>Grrr!</strong> Don't drop coffee on my keyboard again!</div> ``` */
.alert { padding: 15px 20px; }

.alert .label { margin-right: 20px; }

.alert a { text-decoration: underline; }

.alert-dismissable, .alert-dismissible { padding-right: 30px; }

.alert-dismissable .close, .alert-dismissible .close { right: -12px; top: 0; }

/*doc --- title: Avatar icon name: avatar category: Components --- Icons for displaying an image of a user ```html_example_table <div class="avatar"> <div class="avatar-image"> <img src="https://res.cloudinary.com/mndx/image/upload/c_limit,h_45/tqrjlmxpvanmt4r0ympg" /> </div> </div> <div class="avatar"> <div class="avatar-name">A</div> </div> <div class="avatar avatar-large"> <div class="avatar-name">A</div> </div> <div class="avatar avatar-large"> <div class="avatar-name avatar-name-hidden">A</div> </div> <div class="avatar avatar-large"> <div class="avatar-image"> <img src="https://res.cloudinary.com/mndx/image/upload/c_limit,h_100/tqrjlmxpvanmt4r0ympg" /> </div> </div> ``` */
/*doc --- title: Primary name: primary category: Colors --- Used for elements (i.e buttons, labels and ***) <div class="clearfix"> <div class="color-box brand-primary"> <span>$brand-primary</span> </div> <div class="color-box brand-success"> <span>$brand-success</span> </div> <div class="color-box brand-warning"> <span>$brand-warning</span> </div> <div class="color-box brand-danger"> <span>$brand-danger</span> </div> <div class="color-box color-1"> <span>$color-poptype-green</span> </div> <div class="color-box  color-2"> <span>$color-poptype-yellow</span> </div> <div class="color-box  color-3"> <span>$color-poptype-red</span> </div> <div class="color-box color-4"> <span>$color-poptype-blue</span> </div> <div class="color-box color-5"> <span>$color-poptype-magenta</span> </div> <div class="color-box color-6"> <span>$color-poptype-orange</span> </div> </div> */
/*doc --- title: Text name: text category: Colors --- Used for text, borders and list elements. <div class="clearfix"> <div class="color-box text-color"> <span>$text-color</span> </div> <div class="color-box text-color-dark"> <span>$text-color-dark</span> </div> <div class="color-box text-color-light"> <span>$text-color-light</span> </div> </div> */
/*doc --- title: UI Colors name: ui-colors category: Colors --- Used for borders, background and dividers <div class="clearfix"> <div class="color-box ui-color-default"> <span>$ui-color-default</span> </div> <div class="color-box ui-color-light"> <span>$ui-color-light</span> </div> <div class="color-box ui-color-lighter"> <span>$ui-color-lighter</span> </div> <div class="color-box ui-color-lightest"> <span>$ui-color-lightest</span> </div> </div> */
.avatar-empty, .avatar-image img, .avatar-name, .avatar-name-hidden { border-radius: 50%; height: 45px; width: 45px; }

.avatar { display: inline-block; text-align: center; }

.avatar-name { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; background-color: #ff3e79; color: #fff; font-size: 22px; margin: 0 auto; text-align: center; text-transform: uppercase; }

.avatar-name-hidden { background-color: #cbd7e4; color: #cbd7e4; }

.avatar-small .avatar-name { height: 35px; width: 35px; }

.avatar-small img { height: 35px; width: 35px; }

.avatar-large .avatar-name { font-size: 60px; height: 100px; width: 100px; }

.avatar-large img { height: 100px; width: 100px; }

/*doc
//---
//title: Badges
//name: badges
//category: Components
//---
*/
/*doc
//---
//title: Breadcrumbs
//name: breadcrumbs
//category: Components
//---
*/
/*doc --- title: Button dropdowns name: button_dropdowns category: Components --- ```html_example_table <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" disabled class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Disabled <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-split btn-primary">Primary</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-split btn-primary">Action</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-split btn-default">Action</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group no-ui"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> <span class="fa fa-ellipsis-h" /> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> ``` */
.btn-group > .btn + .dropdown-toggle { padding-left: 16px; padding-right: 20px; }

.btn-group .btn-split { padding-right: 10px; }

.btn-group > .btn-primary.btn-split { border-right-color: #fff; }

.btn-group > .btn-primary + .dropdown-toggle { border-left-color: #fff; }

.btn-group.no-ui button { background-color: transparent; border: 0; color: #666; padding: 0 4px; }

.btn-group.no-ui .dropdown-menu { margin-right: -20px; padding: 0; right: 0; }

.btn-group.no-ui .dropdown-menu li { margin: 10px 0; }

.btn-group.open .dropdown-toggle { box-shadow: none; }

.btn-group.open > .btn-default.dropdown-toggle, .btn-group.open > .dropdown-toggle.btn-primary:disabled { background: #fff; border-color: #b3b3b3; color: #666; }

.btn-group.open > .btn-primary.dropdown-toggle { background: #014823; border-color: #014823; }

.btn-group.open > .btn-primary.btn-split + .dropdown-toggle { border-left-color: #fff; }

.dropdown-menu { -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05); border-radius: 6px; border: 1px solid #e0e3e9; color: #999; left: auto; margin-top: 15px; padding-bottom: 20px; padding-top: 20px; right: -5px; }

.dropdown-menu > li > a { color: #999; padding: 5px 25px; }

.dropdown-menu:before { border-color: transparent; border-bottom-color: #e0e3e9; border-style: solid; border-top-width: 0; border-width: 11px; content: ''; display: block; height: 0; margin-left: -11px; position: absolute; right: 18px; top: -22px; width: 0; }

.dropdown-menu:after { border-color: transparent; border-bottom-color: #fff; border-style: solid; border-width: 10px; border-top-width: 0; content: ''; display: block; height: 0; position: absolute; right: 19px; top: -10px; width: 0; }

/*doc
---
title: Message with button
name: ButtonMessage
category: Components
---

Icons for displaying an image of a user

```html_example_table

<div class="ButtonMessage">
  <div class="ButtonMessage__left">
    <h3 class="ButtonMessage__heading">Getting started is easy</h3>
    <p class="ButtonMessage__message">Create an account either with email or via Twitter.</p>
  </div>
  <div class="ButtonMessage__right">
    <a class="btn ButtonMessage__button" href="/">Try us right now</a>
  </div>
</div>
```

*/
.ButtonMessage { background: #f2fbf6; border-radius: 6px; display: block; font-family: "Fira Sans", Arial, sans-serif; overflow: auto; padding: 30px; text-align: left; width: 100%; }

@media screen and (min-width: 768px) { .ButtonMessage { margin: 0 auto; width: 100%; display: table; } }

.ButtonMessage__left, .ButtonMessage__right { display: block; margin-bottom: 10px; text-align: center; }

@media (min-width: 768px) { .ButtonMessage__left, .ButtonMessage__right { display: table-cell; vertical-align: middle; margin-bottom: 0; text-align: left; } }

.ButtonMessage__heading { font-size: 18px; margin: 0; margin-bottom: 10px; }

.ButtonMessage__message { display: inline-block; font-family: "Fira Sans", Arial, sans-serif; font-size: 16px; line-height: 20px; margin-bottom: 10px; vertical-align: top; }

.ButtonMessage__button { background: #02ad55; color: #fff; float: right; font-weight: 500; margin: 0; padding: 7px 15px 8px; width: 100%; white-space: nowrap; }

.ButtonMessage__button:hover { background-color: #017b3c; text-decoration: none; }

@media screen and (min-width: 992px) { .ButtonMessage__button { margin-left: 20px; width: auto; } }

/*doc --- title: Button groups name: button_groups category: Components --- ```html_example_table <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> <div class="btn-group-vertical btn-block" role="group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> ``` */
.input-group-btn:last-child > .btn-group { margin-left: 0; }

.input-group-btn:last-child > .btn-group .btn-default, .input-group-btn:last-child > .btn-group .btn-primary:disabled { border-color: #98adbb; }

.btn-group-vertical .btn { text-align: left; }

.date-picker { display: inline-block; position: relative; margin: inherit 0; }

.date-picker-calendar .rw-header { border-bottom: 1px solid #cbd7e4; margin: 10px 0; overflow: hidden; padding: 0 10px 10px; }

.date-picker-calendar .popover { display: block; }

.date-picker-calendar .rw-calendar { outline: none; }

.date-picker-calendar .rw-calendar-grid { margin: 10px; border: none; }

.date-picker-calendar .rw-calendar-grid th { font-size: 0.9em; font-weight: normal; padding-bottom: 10px; text-align: center; text-transform: uppercase; border: none; }

.date-picker-calendar .rw-calendar-grid td { height: 28px; width: 28px; padding: 0; border: none; }

.date-picker-calendar .rw-calendar-grid tr { border: none; }

.date-picker-calendar .rw-calendar-grid .rw-btn { height: 100%; width: 100%; border-radius: 0; }

.date-picker-calendar .rw-btn-view { border: none; color: #333; float: left; font-size: 15px; text-transform: uppercase; width: 60%; }

.date-picker-calendar .rw-btn-left, .date-picker-calendar .rw-btn-right { float: left; line-height: 20px; width: 20%; }

.date-picker-calendar .rw-btn-left[disabled], .date-picker-calendar .rw-btn-right[disabled] { color: #999; }

.date-picker-calendar .rw-btn { background: transparent; border: none; color: #333; display: inline-block; }

.date-picker-calendar .rw-btn.rw-off-range { color: #999; }

.date-picker-calendar .rw-state-selected { background: #02ad55; border-radius: 3px; color: #fff; }

.date-picker-calendar .popover { box-shadow: none; display: block; left: 0; min-width: 200px; right: auto; top: 40px; z-index: 1; }

.date-picker-calendar .popover .arrow { border-bottom-color: rgba(0, 0, 0, 0.25); left: 10%; right: auto; }

.date-picker-calendar .popover .popover-content { padding: 0; }

/*doc --- title: Content List name: content_list category: Components --- Custom list for editable content ```html_example <ul class="ContentList"> <li class="ContentList__header"> <div class="ContentList__column">Name</div> <div class="ContentList__column hidden-xs">Last edited</div> <div class="ContentList__column align-right">Actions</div> </li> <li class="ContentList__row"> <div class="ContentList__column"><span class="ContentList__checkbox"><input type="checkbox" /></span><span class="ContentList__avatar"><img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" alt="" /></span> Mike Rooseboom</div> <div class="ContentList__column hidden-xs"><span class="hidden-sm">Published at </span>Feb, 28 2015</div> <div class="ContentList__column align-right"><a class="ContentList__action" href="#">Edit</a><button class="btn btn-link ContentList__action">Publish</button></div> </li> <li class="ContentList__row"> <div class="ContentList__column"><span class="ContentList__checkbox"><input type="checkbox" /></span><span class="ContentList__avatar"><img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" alt="" /></span> Rashmi Yadav</div> <div class="ContentList__column hidden-xs"><span class="hidden-sm">Published at </span>Feb, 27 2015</div> <div class="ContentList__column align-right"><a class="ContentList__action" href="#">Edit</a><button class="btn btn-link ContentList__action">Publish</button></div> </li> <li class="ContentList__row active"> <div class="ContentList__column"><span class="ContentList__checkbox"><input type="checkbox" /></span><span class="ContentList__avatar"><img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" alt="" /></span> Zoee Silcock</div> <div class="ContentList__column hidden-xs"><span class="hidden-sm">Published at </span>Feb, 26 2015</div> <div class="ContentList__column align-right"><a class="ContentList__action" href="#">Edit</a><button class="btn btn-link ContentList__action">Publish</button></div> </li> </ul> <ul class="ContentList ContentList--compact"> <li class="ContentList__row"> <div class="ContentList__column"><i name="twitter" class="fa fa-twitter fa-fw SocialMediaSettings-channelIcon gutter-right"></i> Mike Rooseboom</div> <div class="ContentList__column align-right"><button class="btn btn-link ContentList__action">Tweet</button></div> </li> <li class="ContentList__row"> <div class="ContentList__column"><i name="twitter" class="fa fa-twitter fa-fw SocialMediaSettings-channelIcon gutter-right"></i> Rashmi Yadav</div> <div class="ContentList__column align-right"><button class="btn btn-link ContentList__action">Tweet</button></div> </li> <li class="ContentList__row"> <div class="ContentList__column"><i name="twitter" class="fa fa-twitter fa-fw SocialMediaSettings-channelIcon gutter-right"></i> Zoee Silcock</div> <div class="ContentList__column align-right"><button class="btn btn-link ContentList__action">Tweet</button></div> </li> </ul> ``` */
.ContentList { border-collapse: collapse; border-spacing: 0; display: table; list-style-type: none; margin-bottom: 40px; max-width: 100%; width: 100%; }

.ContentList:last-child { margin-bottom: 0; }

.ContentList__row, .ContentList__header { display: table-row; }

.ContentList__row.active, .active.ContentList__header { background: #f2f8fd; }

.ContentList__column { border-bottom: 1px solid #cbd7e4; display: table-cell; padding: 40px 10px; vertical-align: middle; }

.ContentList__column:first-child { display: table-cell; text-align: left; }

.ContentList__column:last-child { display: table-cell; }

.ContentList__header { color: #333; font-size: 16px; font-weight: 500; }

.ContentList__action { border: 0; display: inline-block; font-weight: 400; margin-left: 25px; padding: 0; vertical-align: initial; }

.ContentList__action:first-child { margin-left: 0; }

.ContentList__checkbox { display: inline-block; margin-right: 20px; }

.ContentList__avatar { display: inline-block; margin-right: 25px; position: relative; width: 35px; }

.ContentList__avatar img { border-radius: 50%; height: 35px; margin-top: -23px; position: absolute; width: 35px; }

.ContentList--compact { border: 1px solid #cbd7e4; border-bottom: 0; border-collapse: separate; border-radius: 6px; padding: 0; }

.ContentList--compact .ContentList__column { line-height: 50px; padding-top: 0; padding-bottom: 0; }

.btn-group .btn .date-picker-field { border: none; background-color: transparent; }

/*doc
//---
//title: Dropdowns
//name: dropdowns
//category: Components
//---
*/
/*doc
---
title: Footer
name: footer
category: Components
---

Poptype footer

```html_example

<footer class="PoptypeFooter">
  <div class="PoptypeFooter__links">
    <span class="PoptypeFooter__link PoptypeFooter__link--copyright">
      © 2016 Poptype
    </span>
    <a href="#" class="PoptypeFooter__link" >Our Stories</a>
    <a href="#" class="PoptypeFooter__link" >About</a>
    <a href="#" class="PoptypeFooter__link" >Terms</a>
    <a href="#" class="PoptypeFooter__link" >Privacy</a>
  </div>

  <div class="PoptypeFooter__social">
    <a target="_blank" href="https://twitter.com/poptype" class="PoptypeFooter__link PoptypeFooter__link--facebook" >Facebook</a>
    <a target="_blank" href="https://facebook.com/poptypeco" class="PoptypeFooter__link PoptypeFooter__link--twitter" >Twitter</a>
    <a target="_blank" href="https://instagram.com/poptypeco" class="PoptypeFooter__link PoptypeFooter__link--instagram" >Instagram</a>
  </div>
</footer>

```

*/
.PoptypeFooter { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-box-direction: normal; -moz-box-direction: normal; box-direction: normal; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; margin: 20px auto 10px; padding: 0 10px; }

@media screen and (min-width: 992px) { .PoptypeFooter { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; box-direction: normal; -webkit-flex-direction: row; -moz-flex-direction: row; flex-direction: row; -ms-flex-direction: row; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } }

@media screen and (min-width: 960px) { .PoptypeFooter { padding: 0 0 124px; } }

.PoptypeFooter a, .PoptypeFooter span { font-family: "Fira Sans", Arial, sans-serif; font-size: 16px; }

.PoptypeFooter__copyright { color: #999; margin: 10px auto auto; text-align: center; }

@media screen and (min-width: 768px) { .PoptypeFooter__copyright { margin: 0; margin-right: 10px; order: -1; } }

.PoptypeFooter__social { text-align: center; }

@media screen and (min-width: 992px) { .PoptypeFooter__social { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: end; -moz-box-pack: end; box-pack: end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end; -ms-flex-pack: end; } }

.PoptypeFooter__links { text-align: center; }

.PoptypeFooter__link { display: block; color: #666; margin: 10px; }

@media screen and (min-width: 992px) { .PoptypeFooter__link { display: inline; margin: auto 10px; } }

.PoptypeFooter__link--facebook { color: #3b5998; }

.PoptypeFooter__link--twitter { color: #55acee; }

.PoptypeFooter__link--instagram { color: #c13584; }

.PoptypeFooter__link--copyright { color: #999; }

/*doc
---
title: Icons
name: icons
category: Components
---

```html_example
<i class="inline-icon fa fa-check"></i>This icon has some padding-right
```
*/
.inline-icon { padding-right: 10px; }

/*doc
---
//title: Input groups
//name: input_groups
//category: Components
//---
*/
/*doc --- title: Jumbotron name: jumbotron category: Components --- The jumbotron is used for specific forms. Add .jumbotron-fixed for fixed width (640px). ```html_example <div class="jumbotron"> <div class="jumbotron-description"> <h1>Register a new account</h1> <p>You have to register to publish your stories for the world to see. Please take a moment to enter these details.</p> </div> <form accept-charset="UTF-8" action="/" method="post" role="form"> <div class="row"> <div class="col-sm-12 "> <div class="form-group email optional mndx_user_email"> <label class="email optional control-label" for="mndx_user_email">Email</label> <input class="string email optional form-control" type="email" name="mndx_user[email]" id="mndx_user_email" /> </div> </div> </div> <div class="row"> <div class="col-sm-6"> <div class="form-group password optional"> <label class="password optional control-label" for="mndx_user_password">New password</label> <input class="password optional form-control" type="password" name="mndx_user[password]" id="mndx_user_password" /> </div> </div> <div class="col-sm-6"> <div class="form-group password optional"> <label class="password optional control-label" for="mndx_user_password_confirmation">Confirm new password</label> <input class="password optional form-control" type="password" name="mndx_user[password_confirmation]" id="mndx_user_password_confirmation" /> </div> </div> </div> <input type="submit" name="commit" value="Register" class="btn btn-primary pull-right" /> <div class="form-group form-links"> <a class="pull-right" href="#">Sign in</a> </div> </form> </div> ``` */
.jumbotron { background-color: #fff; border: 1px solid #98adbb; border-radius: 6px; margin: 0 auto; max-width: 640px; padding: 30px; text-align: center; }

.jumbotron.jumbotron-fixed { width: 640px; }

@media screen and (min-width: 768px) { .jumbotron { margin: 0 auto; padding: 60px; } }

.jumbotron .jumbotron-description { margin-bottom: 20px; }

@media screen and (min-width: 768px) { .jumbotron .jumbotron-description { margin-bottom: 30px; } }

.jumbotron .jumbotron-description h1 { color: #333; font-size: 22px; font-weight: 600; margin-bottom: 30px; margin-top: 0; }

@media screen and (min-width: 768px) { .jumbotron .jumbotron-description h1 { margin-bottom: 20px; } }

.jumbotron .jumbotron-description p { color: #666; font-size: 18px; font-weight: normal; }

.jumbotron .jumbotron-link { margin-right: 20px; }

.jumbotron .jumbotron-link:last-child { margin-right: 0; }

.jumbotron form { margin-top: 0; }

.jumbotron form .form-group { text-align: left; }

.jumbotron-transparent { background: transparent; border: 0; box-shadow: none; }

.jumbotron-transparent .jumbotron-description h1, .jumbotron-transparent .jumbotron-description p { color: #fff; }

.jumbotron-transparent .control-label { color: #fff; }

.jumbotron-transparent .form-control { background: #fff; }

.jumbotron-transparent .form-links a { color: #fff; }

/*doc
---
title: Labels
name: labels
category: Components
---

```html_example_table
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

<span class="label label-primary label-large">Primary</span>
```
*/
.label { border-radius: 2px; font-size: 80%; font-weight: 500; padding: 2px 7px 3px; text-transform: uppercase; }

.label-large { border-radius: 6px; display: inline-block; font-size: 16px; padding: 12px 15px 14px; text-transform: none; }

/*doc
//---
//title: List group
//name: list_group
//category: Components
//---
*/
/*doc
//---
//title: Media object
//name: media_object
//category: Components
//---
*/
/*doc
//---
//title: Navbar
//name: navbar
//category: Components
//---
*/
/*doc --- title: Navs name: navs category: Components --- ```html_example_table <ul class="nav nav-tabs"> <li role="presentation" class="active"> <a href="#navs">Drafts</a> <span>2</span> </li> <li role="presentation"> <a href="#navs">Posted</a> <span>10</span> </li> <li role="presentation"> <a href="#navs">Archived</a> <span>0</span> </li> </ul> ``` */
.nav { width: 100%; }

.nav > li > a:hover, .nav > li > a:focus { background-color: none; }

.nav-tabs { border-bottom: 1px solid #e0e3e9; }

.nav-tabs > li { margin-right: 20px; }

.nav-tabs > li > span { color: #999; }

.nav-tabs > li > a { border: 0; color: #999; display: inline-block; padding-left: 0; padding-right: 0; }

.nav-tabs > li > a:hover { color: #333; }

.nav-tabs > li.active > a { font-weight: 700; }

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border: 0; border-bottom: 1px solid #ff3e79; color: #ff3e79; }

/*doc
//---
//title: Page header
//name: page_header
//category: Components
//---
*/
.page-header { -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; border: 0; margin: 30px 0; }

.page-header-title { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; }

.page-header-actions { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; text-align: right; }

/*doc
//---
//title: Pagination
//name: pagination
//category: Components
//---
*/
/*doc
//---
//title: Panels
//name: panels
//category: Components
//---
*/
.popover { -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05); border-color: #e0e3e9; }

.popover .arrow { color: #e0e3e9; }

.popover.bottom { margin-top: 15px; }

/*doc --- title: Poptip name: poptip category: Components --- Alerts should always starts with a word that tell the user more about the feedback in short. ```html_example <div class="poptip"> <strong>POPTIP</strong>: This is a pretty dope tip! </div> ``` */
.poptip::before, .poptip::after { border-left: 10px solid transparent; border-right: 10px solid transparent; content: " "; display: block; position: absolute; right: 17px; }

.poptip { background: #e0e3e9; border: 1px solid #98adbb; border-radius: 6px; color: #333; margin: 30px 10px; padding: 14px 20px 16px; position: relative; }

.poptip strong { font-weight: 500; }

@media screen and (min-width: 992px) { .poptip { margin: 30px 0; } }

.poptip::before { border-top: 10px solid #98adbb; bottom: -10px; }

.poptip::after { border-top: 10px solid #e0e3e9; bottom: -9px; }

/*doc --- title: Progress bars name: progress_bar category: Components --- The progress bar is used for specific progress indicators. ```html_example <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div> ``` */
/*doc
//---
//title: Responsive embed
//name: responsive_embed
//category: Components
//---
*/
/*doc --- title: Scoreboard name: scoreboard category: Components --- Component to display numbers ```html_example <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="scoreboard-box"> <div class="scoreboard-box-number">12004</div> <div class="scoreboard-box-label">title</div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="scoreboard-box"> <div class="scoreboard-box-number">1009</div> <div class="scoreboard-box-label">title</div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="scoreboard-box"> <div class="scoreboard-box-number">230</div> <div class="scoreboard-box-label">title that breaks</div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="scoreboard-box scoreboard-box-border"> <div class="scoreboard-box-number">12004</div> <div class="scoreboard-box-label">title</div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="scoreboard-box scoreboard-box-border"> <div class="scoreboard-box-number">1009</div> <div class="scoreboard-box-label">title</div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="scoreboard-box scoreboard-box-border"> <div class="scoreboard-box-number">230</div> <div class="scoreboard-box-label">title that breaks</div> </div> </div> </div> </div> ``` */
.scoreboard { margin-bottom: 30px; margin-top: 30px; }

.scoreboard-box { margin: 15px 0; padding-bottom: 30px; padding-top: 30px; text-align: center; }

@media screen and (min-width: 768px) { .scoreboard-box:first-child { margin-top: 0; }
  .scoreboard-box:last-child { margin-bottom: 0; } }

.scoreboard-box-border { border: 1px solid #98adbb; border-radius: 6px; }

.scoreboard-box-number { color: #333; font-size: 60px; font-weight: bold; line-height: 66px; }

/*doc
//---
//title: Sections
//name: sections
//category: Components
//---
*/
/*doc --- title: Switch name: switch category: Components --- ```html_example_table <div class="Switch"> <div class="Switch__circle" ></div> </div> <div class="Switch Switch--active"> <div class="Switch__circle" ></div> </div> ``` */
.Switch { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; background: #e0e3e9; border-radius: 24px; cursor: pointer; height: 24px; padding: 3px; width: 48px; }

.Switch--active { background: #02ad55; }

.Switch--active .Switch__circle { -webkit-transform: translateX(24px); -moz-transform: translateX(24px); -ms-transform: translateX(24px); -o-transform: translateX(24px); transform: translateX(24px); }

.Switch__circle { -webkit-transform: 0; -moz-transform: 0; -ms-transform: 0; -o-transform: 0; transform: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; background: #fff; border-radius: 18px; height: 18px; width: 18px; }

/*doc
//---
//title: Thumbnails
//name: thumbnails
//category: Components
//---
*/
/*doc --- title: Wells name: wells category: Components --- Use the well as a simple effect on an element to give it an inset effect. ```html_example <div class="well"> <p> Hello my name is Well </p> </div> ``` ```jsx_example <Well> <p> Ut massa lacus, posuere in facilisis a, blandit ac tortor. Praesent euismod posuere sodales. Nunc maximus eros vitae massa vehicula pharetra. Praesent id nunc ac odio tristique faucibus*. </p> </Well> ``` */
.well { background: #fff; }

.well *:last-child { margin: 0; }

/*doc
---
title: Modal
name: modal
category: JavaScript

---
```html_example
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <i class="fa fa-thumbs-up header-icon"></i>
        <h1 class="modal-title">Modal header that is getting crazy long and you’ll never expect what happenes next.</h1>
      </div>
      <div class="modal-body">
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          <button class="btn btn-default btn-facebook btn-wide"><i class="fa fa-facebook"></i> My Facebook button</button>
        </p>
        <p class="footnote">
          * This is a footnote in a modal. It explains in a small text, less focused about the next step you're going to take and it can be pretty serious.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"
          data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary"
          data-dismiss="modal">Primary Action</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myAvatarModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <div class="header-icon avatar-large">
          <div class="avatar-name">
            A
          </div>
        </div>
        <h1 class="modal-title">Avatar Modal Name.</h1>
      </div>
      <div class="modal-body">
        <p>
          This is a message in a modal.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"
          data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary"
          data-dismiss="modal">Primary Action</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myAvatarModal">
  Avatar Modal
</button>

<div class="modal fade" id="myImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <div class="header-icon">
          <img src="https://res.cloudinary.com/mndx/image/upload/c_limit,w_600/tqrjlmxpvanmt4r0ympg" />
        </div>
        <h1 class="modal-title">Icon Modal</h1>
      </div>
      <div class="modal-body">
        <p>
          This is a message in a modal.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"
          data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary"
          data-dismiss="modal">Primary Action</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myImageModal">
  Icon Modal
</button>

<div class="modal fade" id="myFormModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h1 class="modal-title">Form Modal</h1>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="control-label">Input</label>
          <input class="form-control form-control" label="Message" type="text"></textarea>
        </div>
        <div class="form-group">
          <label class="control-label">Message</label>
          <textarea class="form-control form-control" rows="4" label="Message" type="textarea"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"
          data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary"
          data-dismiss="modal">Primary Action</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myFormModal">
  Form Modal
</button>


```
*/
.modal-backdrop { background: rgba(0, 0, 0, 0.3); border: 0; bottom: 0; position: fixed; }

.modal-dialog { height: 100%; margin: 0; overflow: hidden; }

@media screen and (min-width: 768px) { .modal-dialog { height: auto; margin: 10px auto; max-width: 520px; } }

.modal-dialog .footnote { color: #999; font-size: 12px; }

.modal-content { border-radius: 0; border: 0; box-shadow: none; height: 100%; overflow: scroll; padding: 40px 50px 50px; position: relative; }

@media screen and (min-width: 768px) { .modal-content { border-radius: 6px; height: auto; overflow: hidden; } }

.modal-content .close { position: absolute; right: 15px; top: 15px; }

.modal-header { padding: 0; text-align: center; }

.modal-header .modal-title { font-size: 28px; font-weight: 700; margin: 0 0 20px; text-align: center; }

.modal-header a { text-decoration: underline; }

.modal-header .header-icon { color: #02ad55; font-size: 60px; margin: 0 0 20px; }

.modal-header .header-icon img { max-width: 210px; }

.modal-body { padding: 0 0 40px; }

.modal-body h2, .modal-body p { margin-bottom: 20px; text-align: center; }

.modal-body h2:last-child, .modal-body p:last-child { margin-bottom: 0; }

.modal-body .form-group:last-child { margin-bottom: 0; }

.modal-footer { padding: 0; text-align: center; }

.modal-footer .btn { margin-bottom: 20px; }

@media screen and (min-width: 768px) { .modal-footer .btn { margin-bottom: 0; } }

.modal-footer .btn:first-child { margin-left: 0; }

.modal-footer .btn + .btn { margin-bottom: 20px; margin-left: 20px; }

@media screen and (min-width: 768px) { .modal-footer .btn + .btn { margin-bottom: 0; } }

@media screen and (min-width: 768px) { .modal { text-align: center; }
  .modal::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
  .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } }