@charset "UTF-8";
html {
  font-size: 62.5%;
}

body {
  font-size: 1.4rem;
}

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}

html, body, * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

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

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

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

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

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

#map_canvas img, .google-maps img {
  max-width: none;
}

button, input, select, textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}

button, input {
  line-height: normal;
}

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

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

label, select, button, input[type=button], input[type=reset], input[type=submit], input[type=radio], input[type=checkbox] {
  cursor: pointer;
}

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

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

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

input[type=text]::-ms-clear, input[type=email]::-ms-clear, input[type=url]::-ms-clear, input[type=tel]::-ms-clear, input[type=number]::-ms-clear, input[type=time]::-ms-clear {
  display: none;
}

input[type=password]::-ms-reveal {
  display: none;
}

* {
  border-collapse: collapse;
}

a {
  text-decoration: none;
}

@media print {
  * {
    text-shadow: none !important;
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  a, a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]: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;
  }
}
.metro .box-sizing-border {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

.metro .box-sizing-content {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
}

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

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

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

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

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

.metro .text-bold {
  font-weight: bold;
}

.metro .text-normal {
  font-weight: normal;
}

.metro .text-italic {
  font-style: italic;
}

.metro .no-border {
  border: 0 !important;
}

.metro .border {
  border: 1px #eaeaea solid;
}

.metro .border-left {
  border-left: 1px #eaeaea solid;
}

.metro .border-right {
  border-right: 1px #eaeaea solid;
}

.metro .border-top {
  border-top: 1px #eaeaea solid;
}

.metro .border-bottom {
  border-bottom: 1px #eaeaea solid;
}

.metro .collapse-separate {
  border-collapse: separate;
}

.metro .collapse-collapse {
  border-collapse: collapse;
}

.metro .pos-abs {
  position: absolute;
}

.metro .pos-rel {
  position: relative;
}

.metro .pos-fix {
  position: fixed;
}

.metro .place-left {
  float: left;
}

.metro .place-right {
  float: right;
}

.metro .place-top-left {
  position: absolute;
  top: 0;
  left: 0;
}

.metro .place-top-right {
  position: absolute;
  top: 0;
  right: 0;
}

.metro .place-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}

.metro .place-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}

.metro .on-left {
  margin-right: 5px;
}

.metro .on-right {
  margin-left: 5px;
}

.metro .on-left-more {
  margin-right: 10px;
}

.metro .on-right-more {
  margin-left: 10px;
}

.metro .padding5 {
  padding: 5px;
}

.metro .padding10 {
  padding: 10px;
}

.metro .padding15 {
  padding: 15px;
}

.metro .padding20 {
  padding: 20px;
}

.metro .margin5 {
  margin: 5px;
}

.metro .margin10 {
  margin: 10px;
}

.metro .margin15 {
  margin: 15px;
}

.metro .margin20 {
  margin: 20px;
}

.metro .nlm {
  margin-left: 0 !important;
}

.metro .nrm {
  margin-right: 0 !important;
}

.metro .ntm {
  margin-top: 0 !important;
}

.metro .nbm {
  margin-bottom: 0 !important;
}

.metro .nlp {
  padding-left: 0 !important;
}

.metro .nrp {
  padding-right: 0 !important;
}

.metro .ntp {
  padding-top: 0 !important;
}

.metro .nbp {
  padding-bottom: 0 !important;
}

.metro .no-margin {
  margin: 0 !important;
}

.metro .no-padding {
  padding: 0 !important;
}

.metro .no-float {
  float: none !important;
}

.metro .block {
  display: block !important;
  float: none !important;
}

.metro .inline-block {
  display: inline-block !important;
}

.metro .hide, .metro .no-display {
  display: none !important;
}

.metro .no-visible {
  visibility: hidden !important;
}

.metro .visible {
  visibility: visible !important;
}

.metro .scroll-y, .metro .scroll-vertical {
  overflow-y: scroll;
}

.metro .scroll-x, .metro .scroll-horizontal {
  overflow-x: scroll;
}

.metro .no-overflow {
  overflow: hidden;
}

.metro .overflow {
  overflow: scroll;
}

.metro .one-column {
  -moz-columns: 1;
  -webkit-columns: 1;
  -o-columns: 1;
  -ms-columns: 1;
  columns: 1;
  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  -o-column-gap: 20px;
  -ms-column-gap: 20px;
  column-gap: 20px;
}

.metro .two-columns {
  -moz-columns: 2;
  -webkit-columns: 2;
  -o-columns: 2;
  -ms-columns: 2;
  columns: 2;
  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  -o-column-gap: 20px;
  -ms-column-gap: 20px;
  column-gap: 20px;
}

.metro .three-columns {
  -moz-columns: 3;
  -webkit-columns: 3;
  -o-columns: 3;
  -ms-columns: 3;
  columns: 3;
  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  -o-column-gap: 20px;
  -ms-column-gap: 20px;
  column-gap: 20px;
}

.metro .four-columns {
  -moz-columns: 4;
  -webkit-columns: 4;
  -o-columns: 4;
  -ms-columns: 4;
  columns: 4;
  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  -o-column-gap: 20px;
  -ms-column-gap: 20px;
  column-gap: 20px;
}

.metro .five-columns {
  -moz-columns: 5;
  -webkit-columns: 5;
  -o-columns: 5;
  -ms-columns: 5;
  columns: 5;
  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  -o-column-gap: 20px;
  -ms-column-gap: 20px;
  column-gap: 20px;
}

.metro .square5 {
  width: 5px;
  height: 5px;
}

.metro .square10 {
  width: 10px;
  height: 10px;
}

.metro .square15 {
  width: 15px;
  height: 15px;
}

.metro .square20 {
  width: 20px;
  height: 20px;
}

.metro .shadow {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.2);
}

.metro .text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.metro .opacity {
  opacity: 0.9;
}

.metro .half-opacity {
  opacity: 0.5;
}

.metro .hi-opacity {
  opacity: 0.2;
}

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

.metro .clearfix:after {
  clear: both;
}

.metro #element .selected {
  border: 4px #4390df solid;
}

.metro #element .selected:after {
  position: absolute;
  display: block;
  border-top: 28px solid #4390df;
  border-left: 28px solid transparent;
  right: 0;
  content: "";
  top: 0;
  z-index: 101;
}

.metro #element .selected:before {
  position: absolute;
  display: block;
  content: "\e08a";
  color: #fff;
  right: 0;
  font-family: iconFont;
  font-size: 9pt;
  font-weight: normal;
  z-index: 102;
  top: 0;
}

.metro .rotate45 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.metro .rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.metro .rotate135 {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.metro .rotate180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.metro .rotate225 {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}

.metro .rotate270 {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

.metro .rotate360 {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

.metro .rotateX45 {
  -webkit-transform: rotateX(45deg);
  -moz-transform: rotateX(45deg);
  -ms-transform: rotateX(45deg);
  -o-transform: rotateX(45deg);
  transform: rotateX(45deg);
}

.metro .rotateX90 {
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  -o-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.metro .rotateX135 {
  -webkit-transform: rotateX(135deg);
  -moz-transform: rotateX(135deg);
  -ms-transform: rotateX(135deg);
  -o-transform: rotateX(135deg);
  transform: rotateX(135deg);
}

.metro .rotateX180 {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

.metro .rotateX225 {
  -webkit-transform: rotateX(225deg);
  -moz-transform: rotateX(225deg);
  -ms-transform: rotateX(225deg);
  -o-transform: rotateX(225deg);
  transform: rotateX(225deg);
}

.metro .rotateX270 {
  -webkit-transform: rotateX(270deg);
  -moz-transform: rotateX(270deg);
  -ms-transform: rotateX(270deg);
  -o-transform: rotateX(270deg);
  transform: rotateX(270deg);
}

.metro .rotateX360 {
  -webkit-transform: rotateX(360deg);
  -moz-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  -o-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

.metro .rotateY45 {
  -webkit-transform: rotateY(45deg);
  -moz-transform: rotateY(45deg);
  -ms-transform: rotateY(45deg);
  -o-transform: rotateY(45deg);
  transform: rotateY(45deg);
}

.metro .rotateY90 {
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.metro .rotateY135 {
  -webkit-transform: rotateY(135deg);
  -moz-transform: rotateY(135deg);
  -ms-transform: rotateY(135deg);
  -o-transform: rotateY(135deg);
  transform: rotateY(135deg);
}

.metro .rotateY180 {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.metro .rotateY225 {
  -webkit-transform: rotateY(225deg);
  -moz-transform: rotateY(225deg);
  -ms-transform: rotateY(225deg);
  -o-transform: rotateY(225deg);
  transform: rotateY(225deg);
}

.metro .rotateY270 {
  -webkit-transform: rotateY(270deg);
  -moz-transform: rotateY(270deg);
  -ms-transform: rotateY(270deg);
  -o-transform: rotateY(270deg);
  transform: rotateY(270deg);
}

.metro .rotateY360 {
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  transform: rotateY(360deg);
}

@font-face {
  font-family: "PT Serif Caption";
  font-style: normal;
  font-weight: 400;
  src: local("Cambria"), local("PT Serif Caption"), local("PTSerif-Caption"), url(https://themes.googleusercontent.com/static/fonts/ptserifcaption/v4/7xkFOeTxxO1GMC1suOUYWWhBabBbEjGd1iRmpyoZukE.woff) format("woff");
}
@font-face {
  font-family: "Open Sans Light";
  font-style: normal;
  font-weight: 300;
  src: local("Segoe UI Light"), local("Open Sans Light"), local("OpenSans-Light"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff) format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Segoe UI"), local("Open Sans"), local("OpenSans"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/K88pR3goAWT7BTt32Z01mz8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");
}
@font-face {
  font-family: "Open Sans Bold";
  font-style: normal;
  font-weight: 700;
  src: local("Segoe UI Bold"), local("Open Sans Bold"), local("OpenSans-Bold"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzJ1r3JsPcQLi8jytr04NNhU.woff) format("woff");
}
.metro .text-rest-state {
  color: #000;
}

.metro .text-rest2-state {
  color: rgba(0, 0, 0, 0.6);
}

.metro .text-hover-state {
  color: rgba(0, 0, 0, 0.8);
}

.metro .text-pressed-state {
  color: rgba(0, 0, 0, 0.4);
}

.metro #font .light {
  font-weight: 300;
}

.metro #font .normal {
  font-weight: normal;
  font-style: normal;
}

.metro #font .bold {
  font-weight: bold;
}

.metro #font .italic {
  font-style: italic;
}

.metro #font .segoe {
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
}

.metro #font .segoe-bold {
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
}

.metro #font .segoe-light {
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
}

.metro #font .cambria {
  font-family: "Cambria_", "PT Serif Caption", Verdana, Arial, Helvetica, sans-serif;
}

.metro #font .mono {
  font-family: "Courier New", monospace;
}

.metro #font .serif {
  font-family: Georgia, "Times New Roman", Times, serif;
}

.metro #font .sans {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.metro .header, .metro .subheader {
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
}

.metro .header {
  font-size: 4.8rem;
  line-height: 4.8rem;
}

.metro .subheader {
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;
}

.metro .subheader-secondary {
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.6);
  font-size: 2.2rem;
  line-height: 2.2rem;
}

.metro .item-title {
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: 0.02em;
}

.metro .item-title-secondary {
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.6);
  font-size: 1.4rem;
  line-height: 1.4rem;
}

.metro .navigation {
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  color: rgba(0, 0, 0, 0.6);
  font-size: 1.2rem;
  line-height: 1.2rem;
  letter-spacing: 0.02em;
}

.metro .body-text {
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #000;
  font-size: 11pt;
  line-height: 15pt;
  letter-spacing: 0.02em;
}

.metro .code-text {
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #000;
  font-size: 11pt;
  line-height: 15pt;
  letter-spacing: 0.02em;
  font-family: "Courier New", monospace;
}

.metro .tertiary-text {
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  color: #000;
  font-size: 1.3rem;
  line-height: 1.5rem;
  font-weight: normal !important;
}

.metro .tertiary-text-secondary {
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  color: #000;
  font-size: 1.3rem;
  line-height: 1.5rem;
  font-weight: normal !important;
  color: rgba(0, 0, 0, 0.6);
}

.metro .readable-text {
  font-family: "Cambria_", "PT Serif Caption", Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 2rem;
}

.metro .menu-title {
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;
  font-size: 4rem;
}

.metro .menu-item {
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.6);
  line-height: 2.2rem;
  font-size: 2.2rem;
}

.metro .menu-item-secondary {
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: 0.02em;
  font-weight: normal;
  font-style: normal;
  line-height: 1.4rem;
}

.metro h1, .metro h2, .metro h3, .metro h4, .metro h5, .metro h6 {
  padding: 0;
  margin: 10px 0;
}

.metro h1 {
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
  font-size: 4.8rem;
  line-height: 4.8rem;
}

.metro h2 {
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;
}

.metro h3 {
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.6);
  font-size: 2.2rem;
  line-height: 2.2rem;
  font-weight: bold;
}

.metro h4 {
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: 0.02em;
}

.metro h5 {
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.6);
  font-size: 1.4rem;
  line-height: 1.4rem;
}

.metro h6 {
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #000;
  font-size: 11pt;
  line-height: 15pt;
  letter-spacing: 0.02em;
  font-weight: bold;
  font-size: 9pt;
}

.metro h1 small {
  font-size: 19.25pt;
}

.metro h2 small {
  font-size: 13.75pt;
}

.metro h3 small {
  font-size: 11pt;
}

.metro h4 small {
  font-size: 11pt;
}

.metro a, .metro .link {
  color: #2e92cf;
}

.metro a:hover, .metro .link:hover {
  color: rgba(45, 173, 237, 0.8);
}

.metro a:focus, .metro .link:focus, .metro a:active, .metro .link:active {
  color: rgba(45, 173, 237, 0.6);
}

.metro div, .metro span, .metro p {
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
}

.metro p {
  margin: 0 0 7pt;
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #000;
  font-size: 11pt;
  line-height: 15pt;
  letter-spacing: 0.02em;
}

.metro strong {
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
}

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

.metro .text-info {
  color: #1ba1e2 !important;
}

.metro .text-alert {
  color: #e51400 !important;
}

.metro .text-warning {
  color: #fa6800 !important;
}

.metro .text-success {
  color: #60a917 !important;
}

.metro abbr {
  text-decoration: none;
  border-bottom: 1px #999 dotted;
  cursor: help;
}

.metro address {
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  margin-bottom: 7pt;
}

.metro blockquote {
  margin: 0;
  padding: 0;
  border-left: 4px #999 solid;
  padding-left: 10px;
}

.metro blockquote small {
  color: #999;
}

.metro blockquote small:before {
  content: "— ";
}

.metro blockquote.place-right {
  border: 0;
  border-right: 4px #999 solid;
  padding-right: 10px;
  text-align: right;
}

.metro blockquote.place-right small:before {
  content: "";
}

.metro blockquote.place-right small:after {
  content: "  —";
}

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

.metro .unstyled li ul, .metro .unstyled li ol {
  list-style: none;
  padding-left: 25px;
}

.metro .inline {
  list-style: none;
}

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

.metro ul, .metro ol {
  margin-left: 5px;
  padding-left: 15px;
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #000;
  font-size: 11pt;
  line-height: 15pt;
  letter-spacing: 0.02em;
}

.metro ul li, .metro ol li {
  line-height: 20px;
}

.metro ul li ul, .metro ol li ul, .metro ul li ol, .metro ol li ol {
  padding-left: 25px;
}

.metro ol.styled {
  counter-reset: li;
  margin-left: 0;
  padding-left: 0;
  font-family: "Cambria_", "PT Serif Caption", Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 2rem;
}

.metro ol.styled > li {
  position: relative;
  margin: 0 0 6px 2em;
  padding: 4px 12px;
  list-style: none;
}

.metro ol.styled > li:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  top: -2px;
  left: -2em;
  box-sizing: border-box;
  width: 2em;
  margin-right: 8px;
  padding: 4px;
  color: #fff;
  background: #666;
  font-weight: bold;
  font-family: "Helvetica Neue", Arial, sans-serif;
  text-align: center;
}

.metro ol.styled.rounded > li:before {
  border-radius: 100%;
}

.metro dl dt, .metro dl dd {
  line-height: 20px;
}

.metro dl dt {
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
}

.metro dl dd {
  margin-left: 15px;
}

.metro dl.horizontal dt {
  float: left;
  width: 160px;
  overflow: hidden;
  clear: left;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metro dl.horizontal dd {
  margin-left: 180px;
}

.metro .prettyprint * {
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #000;
  font-size: 11pt;
  line-height: 15pt;
  letter-spacing: 0.02em;
  font-family: "Courier New", monospace;
  font-size: 0.9em !important;
  line-height: 10pt;
}

.metro .container {
  margin: 0 auto;
}

.metro .page {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

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

.metro .page:after {
  clear: both;
}

.metro .page .page-header .page-header-content {
  min-height: auto;
}

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

.metro .page .page-header .page-header-content:after {
  clear: both;
}

.metro .page .page-header .page-header-content .branding {
  display: inline-block;
  width: auto;
  padding: 10px 0;
  margin-right: 20px;
}

.metro .page .page-header .page-header-content .branding .brand-title {
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;
  display: block;
}

.metro .page .page-header .page-header-content .branding .brand-slogan {
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.6);
  font-size: 1.4rem;
  line-height: 1.4rem;
  font-weight: normal;
  font-style: normal;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  display: block;
}

.metro .page .page-header .page-header-content .branding .brand-title, .metro .page .page-header .page-header-content .branding .brand-slogan {
  margin: 0;
}

.metro .page .page-header .page-header-content .branding a + .brand-title, .metro .page .page-header .page-header-content .branding a + .brand-slogan {
  text-decoration: none !important;
}

.metro .page .page-region .page-region-content {
  min-height: 500px;
}

.metro .page .page-region .page-region-content:before, .metro .page .page-region .page-region-content:after {
  display: table;
  content: "";
}

.metro .page .page-region .page-region-content:after {
  clear: both;
}

.metro .page .page-footer .page-footer-content {
  height: 100px;
}

.metro .page .page-footer .page-footer-content:before, .metro .page .page-footer .page-footer-content:after {
  display: table;
  content: "";
}

.metro .page .page-footer .page-footer-content:after {
  clear: both;
}

.metro .page.secondary .page-region-content, .metro .page.secondary .page-header-content {
  padding-left: 80px;
}

.metro .app-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 100px;
  background-color: #1d1d1d;
  z-index: 1060;
}

.metro .charms {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  min-width: 200px;
  width: auto;
  z-index: 1060;
}

.metro .charms.place-left {
  left: 0;
  right: auto;
}

.metro .message-dialog {
  position: fixed;
  left: 0;
  right: 0;
  height: auto;
  min-height: 100px;
  top: 30%;
  padding: 10px 10px 0;
  z-index: 1050;
}

.metro .error-bar, .metro .warning-bar, .metro .info-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 20px;
  color: #fff;
  min-height: 100px;
  z-index: 1050;
}

.metro .error-bar {
  background-color: #9a1616 !important;
}

.metro .warning-bar {
  background-color: #bf5a15 !important;
}

.metro .info-bar {
  background-color: #4390df !important;
}

.metro .span1, .metro .size1 {
  width: 60px !important;
}

.metro .span2, .metro .size2 {
  width: 140px !important;
}

.metro .span3, .metro .size3 {
  width: 220px !important;
}

.metro .span4, .metro .size4 {
  width: 300px !important;
}

.metro .span5, .metro .size5 {
  width: 380px !important;
}

.metro .span6, .metro .size6 {
  width: 460px !important;
}

.metro .span7, .metro .size7 {
  width: 540px !important;
}

.metro .span8, .metro .size8 {
  width: 620px !important;
}

.metro .span9, .metro .size9 {
  width: 700px !important;
}

.metro .span10, .metro .size10 {
  width: 780px !important;
}

.metro .span11, .metro .size11 {
  width: 860px !important;
}

.metro .span12, .metro .size12 {
  width: 940px !important;
}

.metro .offset1 {
  margin-left: 80px !important;
}

.metro .offset1:not(:first-child) {
  margin-left: 100px !important;
}

.metro .offset2 {
  margin-left: 160px !important;
}

.metro .offset2:not(:first-child) {
  margin-left: 180px !important;
}

.metro .offset3 {
  margin-left: 240px !important;
}

.metro .offset3:not(:first-child) {
  margin-left: 260px !important;
}

.metro .offset4 {
  margin-left: 320px !important;
}

.metro .offset4:not(:first-child) {
  margin-left: 340px !important;
}

.metro .offset5 {
  margin-left: 400px !important;
}

.metro .offset5:not(:first-child) {
  margin-left: 420px !important;
}

.metro .offset6 {
  margin-left: 480px !important;
}

.metro .offset6:not(:first-child) {
  margin-left: 500px !important;
}

.metro .offset7 {
  margin-left: 560px !important;
}

.metro .offset7:not(:first-child) {
  margin-left: 580px !important;
}

.metro .offset8 {
  margin-left: 640px !important;
}

.metro .offset8:not(:first-child) {
  margin-left: 660px !important;
}

.metro .offset9 {
  margin-left: 720px !important;
}

.metro .offset9:not(:first-child) {
  margin-left: 740px !important;
}

.metro .offset10 {
  margin-left: 800px !important;
}

.metro .offset10:not(:first-child) {
  margin-left: 820px !important;
}

.metro .offset11 {
  margin-left: 880px !important;
}

.metro .offset11:not(:first-child) {
  margin-left: 900px !important;
}

.metro .offset12 {
  margin-left: 960px !important;
}

.metro .offset12:not(:first-child) {
  margin-left: 980px !important;
}

.metro .grid {
  margin-bottom: 20px;
}

.metro .grid .row {
  display: block;
  margin-top: 20px;
}

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

.metro .grid .row:after {
  clear: both;
}

.metro .grid .row [class*=span] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}

.metro .grid .row [class*=span]:first-child {
  margin-left: 0;
}

.metro .grid.fluid {
  width: 100%;
}

.metro .grid.fluid .row .span1 {
  width: 6.382978% !important;
}

.metro .grid.fluid .row .span2 {
  width: 14.893615% !important;
}

.metro .grid.fluid .row .span3 {
  width: 23.404252% !important;
}

.metro .grid.fluid .row .span4 {
  width: 31.914889% !important;
}

.metro .grid.fluid .row .span5 {
  width: 40.425526% !important;
}

.metro .grid.fluid .row .span6 {
  width: 48.936163% !important;
}

.metro .grid.fluid .row .span7 {
  width: 57.4468% !important;
}

.metro .grid.fluid .row .span8 {
  width: 65.957437% !important;
}

.metro .grid.fluid .row .span9 {
  width: 74.468074% !important;
}

.metro .grid.fluid .row .span10 {
  width: 82.978711% !important;
}

.metro .grid.fluid .row .span11 {
  width: 91.489348% !important;
}

.metro .grid.fluid .row .span12 {
  width: 99.999985% !important;
}

.metro .grid.fluid .row [class*=span] {
  margin-left: 2.127659%;
}

.metro .grid.fluid .row [class*=span]:first-child {
  margin-left: 0;
}

.metro .grid.fluid .row .offset1 {
  margin-left: 8.510637% !important;
}

.metro .grid.fluid .row .offset1:not(:first-child) {
  margin-left: 10.638296% !important;
}

.metro .grid.fluid .row .offset2 {
  margin-left: 17.021274% !important;
}

.metro .grid.fluid .row .offset2:not(:first-child) {
  margin-left: 19.148933% !important;
}

.metro .grid.fluid .row .offset3 {
  margin-left: 25.531911% !important;
}

.metro .grid.fluid .row .offset3:not(:first-child) {
  margin-left: 27.65957% !important;
}

.metro .grid.fluid .row .offset4 {
  margin-left: 34.042548% !important;
}

.metro .grid.fluid .row .offset4:not(:first-child) {
  margin-left: 36.170207% !important;
}

.metro .grid.fluid .row .offset5 {
  margin-left: 42.553185% !important;
}

.metro .grid.fluid .row .offset5:not(:first-child) {
  margin-left: 44.680844% !important;
}

.metro .grid.fluid .row .offset6 {
  margin-left: 51.063822% !important;
}

.metro .grid.fluid .row .offset6:not(:first-child) {
  margin-left: 53.191481% !important;
}

.metro .grid.fluid .row .offset7 {
  margin-left: 59.574459% !important;
}

.metro .grid.fluid .row .offset7:not(:first-child) {
  margin-left: 61.702118% !important;
}

.metro .grid.fluid .row .offset8 {
  margin-left: 68.085096% !important;
}

.metro .grid.fluid .row .offset8:not(:first-child) {
  margin-left: 70.212755% !important;
}

.metro .grid.fluid .row .offset9 {
  margin-left: 76.595733% !important;
}

.metro .grid.fluid .row .offset9:not(:first-child) {
  margin-left: 78.723392% !important;
}

.metro .grid.fluid .row .offset10 {
  margin-left: 85.10637% !important;
}

.metro .grid.fluid .row .offset10:not(:first-child) {
  margin-left: 87.234029% !important;
}

.metro .grid.fluid .row .offset11 {
  margin-left: 93.617007% !important;
}

.metro .grid.fluid .row .offset11:not(:first-child) {
  margin-left: 95.744666% !important;
}

.metro .grid.fluid .row .offset12 {
  margin-left: 102.127644% !important;
}

.metro .grid.fluid .row .offset12:not(:first-child) {
  margin-left: 104.255303% !important;
}

.metro table {
  max-width: 100%;
  background-color: #fff;
  border-collapse: collapse;
  border-spacing: 0;
}

.metro .table {
  width: 100%;
  margin-bottom: 14pt;
}

.metro .table th, .metro .table td {
  padding: 8px;
  font-size: 14px;
  line-height: 14pt;
  vertical-align: top;
  border-bottom: 1px #eaeaea solid;
}

.metro .table th[class*=span], .metro .table td[class*=span] {
  display: table-cell !important;
  float: none !important;
  margin: 0;
}

.metro .table thead th {
  vertical-align: bottom;
}

.metro .table tbody tr:last-child td {
  border-bottom: 0;
}

.metro .table tbody + tbody {
  border-top: 2px solid #eaeaea;
}

.metro .table .table {
  background-color: #bfbfbf;
}

.metro .table.condensed th, .metro .table.condensed td {
  padding: 4px 5px;
}

.metro .table.striped tbody tr:nth-child(odd) {
  background: #eee;
}

.metro .table.bordered {
  border: 1px #eaeaea solid;
  border-left: 0;
}

.metro .table.bordered td, .metro .table.bordered th {
  border-left: 1px #eaeaea solid;
  border-bottom: 1px #eaeaea solid;
}

.metro .table.no-border td, .metro .table.no-border th {
  border: 0;
}

.metro .table.border {
  border: 1px #eaeaea solid !important;
}

.metro .table.hovered tbody tr:hover {
  background-color: rgba(28, 183, 236, 0.1);
}

.metro .table tr.success {
  background-color: #60a917 !important;
}

.metro .table tr.error {
  background-color: #e51400 !important;
}

.metro .table tr.warning {
  background-color: #fa6800 !important;
}

.metro .table tr.info {
  background-color: #4390df !important;
}

.metro .table tr.info td, .metro .table tr.warning td, .metro .table tr.error td, .metro .table tr.success td, .metro .table tr.info td *, .metro .table tr.warning td *, .metro .table tr.error td *, .metro .table tr.success td * {
  color: #fff !important;
}

.metro .table tr.selected {
  background-color: rgba(28, 183, 236, 0.1);
}

.metro .button {
  padding: 4px 12px;
  text-align: center;
  vertical-align: middle !important;
  background-color: #d9d9d9;
  border: 1px transparent solid;
  color: #222;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  outline: 0;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
}

.metro .button.default {
  background-color: #008287;
  color: #fff;
}

.metro .button:focus {
  outline: 0;
  border: 1px #353535 dotted;
}

.metro .button:disabled, .metro .button.disabled {
  background-color: #eaeaea !important;
  color: #bebebe !important;
  cursor: not-allowed !important;
}

.metro .button * {
  color: inherit;
}

.metro .button *:hover {
  color: inherit;
}

.metro a.button:hover {
  color: inherit;
}

.metro a.button * {
  color: inherit;
}

.metro a.button *:hover {
  color: inherit;
}

.metro .button.primary {
  background-color: #16499a !important;
  color: #fff !important;
}

.metro .button.info {
  background-color: #4390df !important;
  color: #fff !important;
}

.metro .button.success {
  background-color: #60a917 !important;
  color: #fff !important;
}

.metro .button.warning {
  background-color: #fa6800 !important;
  color: #fff !important;
}

.metro .button.danger {
  background-color: #9a1616 !important;
  color: #fff !important;
}

.metro .button.inverse {
  background-color: #1d1d1d !important;
  color: #fff !important;
}

.metro .button.link {
  background-color: transparent !important;
  color: #2e92cf !important;
}

.metro .button.link:hover {
  text-decoration: underline;
}

.metro .button.link:disabled, .metro .button.link.disabled {
  background-color: transparent !important;
  color: #bebebe !important;
  cursor: not-allowed !important;
}

.metro .button.link [class*=icon-] {
  text-decoration: none !important;
}

.metro button {
  padding: 4px 12px;
  text-align: center;
  vertical-align: middle !important;
  background-color: #d9d9d9;
  border: 1px transparent solid;
  color: #222;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  outline: 0;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
}

.metro button.default {
  background-color: #008287;
  color: #fff;
}

.metro button:focus {
  outline: 0;
  border: 1px #353535 dotted;
}

.metro button:disabled, .metro button.disabled {
  background-color: #eaeaea !important;
  color: #bebebe !important;
  cursor: not-allowed !important;
}

.metro button * {
  color: inherit;
}

.metro button *:hover {
  color: inherit;
}

.metro button.primary {
  background-color: #16499a !important;
  color: #fff !important;
}

.metro button.info {
  background-color: #4390df !important;
  color: #fff !important;
}

.metro button.success {
  background-color: #60a917 !important;
  color: #fff !important;
}

.metro button.warning {
  background-color: #fa6800 !important;
  color: #fff !important;
}

.metro button.danger {
  background-color: #9a1616 !important;
  color: #fff !important;
}

.metro button.inverse {
  background-color: #1d1d1d !important;
  color: #fff !important;
}

.metro button.link {
  background-color: transparent !important;
  color: #2e92cf !important;
}

.metro button.link:hover {
  text-decoration: underline;
}

.metro button.link:disabled, .metro button.link.disabled {
  background-color: transparent !important;
  color: #bebebe !important;
  cursor: not-allowed !important;
}

.metro button.link [class*=icon-] {
  text-decoration: none !important;
}

.metro button:active {
  background-color: #1d1d1d !important;
  color: #fff !important;
  border-color: transparent;
}

.metro button.large {
  padding: 11px 19px;
  font-size: 17.5px;
}

.metro button.small {
  padding: 2px 10px;
  font-size: 11.9px;
}

.metro button.mini {
  padding: 0 6px;
  font-size: 10.5px;
}

.metro .command-button {
  padding: 4px 12px;
  text-align: center;
  vertical-align: middle !important;
  background-color: #d9d9d9;
  border: 1px transparent solid;
  color: #222;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  outline: 0;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
  text-align: left;
  font-size: 14pt;
  width: auto;
}

.metro .command-button.default {
  background-color: #008287;
  color: #fff;
}

.metro .command-button:focus {
  outline: 0;
  border: 1px #353535 dotted;
}

.metro .command-button:disabled, .metro .command-button.disabled {
  background-color: #eaeaea !important;
  color: #bebebe !important;
  cursor: not-allowed !important;
}

.metro .command-button * {
  color: inherit;
}

.metro .command-button *:hover {
  color: inherit;
}

.metro .command-button.primary {
  background-color: #16499a !important;
  color: #fff !important;
}

.metro .command-button.info {
  background-color: #4390df !important;
  color: #fff !important;
}

.metro .command-button.success {
  background-color: #60a917 !important;
  color: #fff !important;
}

.metro .command-button.warning {
  background-color: #fa6800 !important;
  color: #fff !important;
}

.metro .command-button.danger {
  background-color: #9a1616 !important;
  color: #fff !important;
}

.metro .command-button.inverse {
  background-color: #1d1d1d !important;
  color: #fff !important;
}

.metro .command-button.link {
  background-color: transparent !important;
  color: #2e92cf !important;
}

.metro .command-button.link:hover {
  text-decoration: underline;
}

.metro .command-button.link:disabled, .metro .command-button.link.disabled {
  background-color: transparent !important;
  color: #bebebe !important;
  cursor: not-allowed !important;
}

.metro .command-button.link [class*=icon-] {
  text-decoration: none !important;
}

.metro .command-button:active {
  background-color: #1d1d1d !important;
  color: #fff !important;
  border-color: transparent;
}

.metro .command-button.large {
  padding: 11px 19px;
  font-size: 17.5px;
}

.metro .command-button.small {
  padding: 2px 10px;
  font-size: 11.9px;
}

.metro .command-button.mini {
  padding: 0 6px;
  font-size: 10.5px;
}

.metro .command-button small {
  display: block;
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  color: #000;
  font-size: 1.3rem;
  line-height: 1.5rem;
  font-weight: normal !important;
  color: rgba(0, 0, 0, 0.6);
  color: inherit;
}

.metro .command-button [class*=icon-] {
  font-size: 1.7em;
  margin-top: 0;
}

.metro .command-button [class*=icon-].on-left {
  float: left;
}

.metro .command-button [class*=icon-].on-right {
  float: right;
}

.metro .command-button [class*=icon-].on-left + small {
  margin-left: 40px;
}

.metro .command-button [class*=icon-].on-right + small {
  margin-right: 40px;
}

.metro .toolbar {
  width: auto;
  margin-bottom: 10px;
}

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

.metro .toolbar:after {
  clear: both;
}

.metro .toolbar.transparent button, .metro .toolbar .transparent button, .metro .toolbar.transparent .button, .metro .toolbar .transparent .button {
  background-color: transparent;
}

.metro .toolbar.transparent button:hover, .metro .toolbar .transparent button:hover, .metro .toolbar.transparent .button:hover, .metro .toolbar .transparent .button:hover {
  background-color: #eee;
  border: 1px #fff solid;
}

.metro .toolbar button, .metro .toolbar .button {
  color: inherit;
  padding: 4px 8px;
  display: block;
  float: left;
  font-size: 12pt;
  line-height: 12pt;
  margin-right: 2px;
}

.metro .toolbar button:last-child, .metro .toolbar .button:last-child {
  margin-right: 0;
}

.metro .toolbar.no-spaces button, .metro .toolbar .toolbar-group.no-spaces button, .metro .toolbar.no-spaces .button, .metro .toolbar .toolbar-group.no-spaces .button {
  margin-right: 0;
}

.metro .toolbar.no-spaces button:active, .metro .toolbar .toolbar-group.no-spaces button:active, .metro .toolbar.no-spaces .button:active, .metro .toolbar .toolbar-group.no-spaces .button:active {
  background-color: #1d1d1d;
  color: #fff;
  top: auto;
  left: auto;
}

.metro .toolbar .divider {
  display: block;
  float: left;
  height: 12px;
  width: 1px;
  margin: 8px 8px;
  background-color: #999;
  vertical-align: middle !important;
}

.metro .toolbar .toolbar-group {
  padding: 0;
  margin: 0;
  display: inline-block;
  margin-right: 10px;
  color: inherit;
}

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

.metro .toolbar .toolbar-group:after {
  clear: both;
}

.metro .button-dropdown {
  position: relative;
  display: inline-block;
}

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

.metro button.dropdown-toggle, .metro .button.dropdown-toggle {
  padding-right: 16px;
  border: 0;
}

.metro button.dropdown-toggle:before, .metro .button.dropdown-toggle:before {
  position: absolute;
  font-family: iconFont;
  font-size: 14px;
  right: 1px;
  z-index: 2;
}

.metro .image-button {
  padding: 4px 12px;
  text-align: center;
  vertical-align: middle !important;
  background-color: #d9d9d9;
  border: 1px transparent solid;
  color: #222;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  outline: 0;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
  position: relative;
  border: 0;
  padding-right: 45px;
}

.metro .image-button.default {
  background-color: #008287;
  color: #fff;
}

.metro .image-button:focus {
  outline: 0;
  border: 1px #353535 dotted;
}

.metro .image-button:disabled, .metro .image-button.disabled {
  background-color: #eaeaea !important;
  color: #bebebe !important;
  cursor: not-allowed !important;
}

.metro .image-button * {
  color: inherit;
}

.metro .image-button *:hover {
  color: inherit;
}

.metro .image-button.primary {
  background-color: #16499a !important;
  color: #fff !important;
}

.metro .image-button.info {
  background-color: #4390df !important;
  color: #fff !important;
}

.metro .image-button.success {
  background-color: #60a917 !important;
  color: #fff !important;
}

.metro .image-button.warning {
  background-color: #fa6800 !important;
  color: #fff !important;
}

.metro .image-button.danger {
  background-color: #9a1616 !important;
  color: #fff !important;
}

.metro .image-button.inverse {
  background-color: #1d1d1d !important;
  color: #fff !important;
}

.metro .image-button.link {
  background-color: transparent !important;
  color: #2e92cf !important;
}

.metro .image-button.link:hover {
  text-decoration: underline;
}

.metro .image-button.link:disabled, .metro .image-button.link.disabled {
  background-color: transparent !important;
  color: #bebebe !important;
  cursor: not-allowed !important;
}

.metro .image-button.link [class*=icon-] {
  text-decoration: none !important;
}

.metro .image-button:active {
  background-color: #1d1d1d !important;
  color: #fff !important;
  border-color: transparent;
}

.metro .image-button.large {
  padding: 11px 19px;
  font-size: 17.5px;
}

.metro .image-button.small {
  padding: 2px 10px;
  font-size: 11.9px;
}

.metro .image-button.mini {
  padding: 0 6px;
  font-size: 10.5px;
}

.metro .image-button img, .metro .image-button:active img, .metro .image-button [class*=icon-] {
  display: block;
  position: absolute;
  float: right;
  right: 0;
  top: 0;
  padding: 5px;
  height: 100%;
  margin-left: 0;
  box-sizing: border-box;
  border: 1px transparent solid;
  z-index: 2;
  text-align: center;
}

.metro .image-button [class*=icon-] {
  vertical-align: middle !important;
  font-size: 12pt;
  line-height: 12pt;
  top: 0;
  right: 0;
}

.metro .image-button.image-left {
  padding-right: 12px;
  padding-left: 45px;
}

.metro .image-button.image-left img, .metro .image-button.image-left:active img, .metro .image-button.image-left [class*=icon-] {
  right: auto;
  left: 0;
}

.metro .image-button:focus {
  border: 0;
}

.metro .shortcut {
  padding: 4px 12px;
  vertical-align: middle !important;
  background-color: #d9d9d9;
  border: 1px transparent solid;
  color: #222;
  border-radius: 0;
  cursor: pointer;
  outline: 0;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
  height: 92px;
  width: 92px;
  text-align: center;
  font-size: 12pt;
  border: 0;
  border-bottom: 2px solid transparent;
  display: inline-block;
  position: relative;
}

.metro .shortcut.default {
  background-color: #008287;
  color: #fff;
}

.metro .shortcut:focus {
  outline: 0;
  border: 1px #353535 dotted;
}

.metro .shortcut:disabled, .metro .shortcut.disabled {
  background-color: #eaeaea !important;
  color: #bebebe !important;
  cursor: not-allowed !important;
}

.metro .shortcut * {
  color: inherit;
}

.metro .shortcut *:hover {
  color: inherit;
}

.metro .shortcut.primary {
  background-color: #16499a !important;
  color: #fff !important;
}

.metro .shortcut.info {
  background-color: #4390df !important;
  color: #fff !important;
}

.metro .shortcut.success {
  background-color: #60a917 !important;
  color: #fff !important;
}

.metro .shortcut.warning {
  background-color: #fa6800 !important;
  color: #fff !important;
}

.metro .shortcut.danger {
  background-color: #9a1616 !important;
  color: #fff !important;
}

.metro .shortcut.inverse {
  background-color: #1d1d1d !important;
  color: #fff !important;
}

.metro .shortcut.link {
  background-color: transparent !important;
  color: #2e92cf !important;
}

.metro .shortcut.link:hover {
  text-decoration: underline;
}

.metro .shortcut.link:disabled, .metro .shortcut.link.disabled {
  background-color: transparent !important;
  color: #bebebe !important;
  cursor: not-allowed !important;
}

.metro .shortcut.link [class*=icon-] {
  text-decoration: none !important;
}

.metro .shortcut:active {
  background-color: #1d1d1d !important;
  color: #fff !important;
  border-color: transparent;
}

.metro .shortcut.large {
  padding: 11px 19px;
  font-size: 17.5px;
}

.metro .shortcut.small {
  padding: 2px 10px;
  font-size: 11.9px;
}

.metro .shortcut.mini {
  padding: 0 6px;
  font-size: 10.5px;
}

.metro .shortcut [class*=icon-] {
  display: block;
  margin: 10px;
  font-size: 1.5em;
}

.metro .shortcut small {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 4px;
  min-height: 10px;
  min-width: 10px;
  text-align: center;
  vertical-align: middle;
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
}

.metro .shortcut:hover {
  border-color: #e51400;
}

.metro .shortcut.link {
  border: 1px #2e92cf solid;
  text-decoration: none !important;
}

.metro .shortcut.link:hover {
  border-bottom-width: 2px;
}

.metro a.shortcut {
  padding: 12px 0;
}

.metro a.shortcut:hover {
  color: inherit;
}

.metro .button-set:before, .metro .button-set:after {
  display: table;
  content: "";
}

.metro .button-set:after {
  clear: both;
}

.metro .button-set .button, .metro .button-set button {
  display: block;
  float: left;
  margin-right: 2px;
}

.metro .button-set .button.active, .metro .button-set button.active {
  background-color: #555;
  color: #fff;
}

.metro .button-set.no-spaces button, .metro .button-set.no-spaces .button {
  margin-right: 0 !important;
}

.metro .button-set.no-spaces button:active, .metro .button-set.no-spaces .button:active {
  background-color: #1d1d1d;
  color: #fff;
  top: auto;
  left: auto;
}

.metro .button-set.transparent .button, .metro .button-set.transparent button {
  background-color: transparent;
}

.metro .button-set.transparent .button.active, .metro .button-set.transparent button.active {
  background-color: #555;
  color: #fff;
}

.metro .button:active {
  background-color: #1d1d1d !important;
  color: #fff !important;
  border-color: transparent;
}

.metro .button.large, .metro button.large {
  padding: 11px 19px;
  font-size: 17.5px;
}

.metro .button.small, .metro button.small {
  padding: 2px 10px;
  font-size: 11.9px;
}

.metro .button.mini, .metro button.mini {
  padding: 0 6px;
  font-size: 10.5px;
}

.metro .breadcrumbs {
  margin: 0.2em;
}

.metro .breadcrumbs ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  width: 100%;
}

.metro .breadcrumbs ul li {
  float: left;
  margin: 0 0.2em 0 1em;
}

.metro .breadcrumbs ul li:first-child {
  margin-left: 0 !important;
}

.metro .breadcrumbs ul li:first-child a:before {
  content: normal;
}

.metro .breadcrumbs ul li:last-child {
  background: 0;
}

.metro .breadcrumbs ul li:last-child a {
  color: #1d1d1d;
}

.metro .breadcrumbs ul li:last-child:after, .metro .breadcrumbs ul li:last-child:before {
  content: normal;
}

.metro .breadcrumbs ul a {
  background: #d9d9d9;
  padding: 0.3em 1em;
  float: left;
  text-decoration: none;
  color: #2e92cf;
  position: relative;
}

.metro .breadcrumbs ul a:hover {
  background: #1ba1e2;
  color: #fff;
}

.metro .breadcrumbs ul a:hover:before {
  border-color: #1ba1e2 #1ba1e2 #1ba1e2 transparent;
}

.metro .breadcrumbs ul a:hover:after {
  border-left-color: #1ba1e2;
}

.metro .breadcrumbs ul a:before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-width: 1.5em 0 1.5em 1em;
  border-style: solid;
  border-color: #ddd #ddd #ddd transparent;
  left: -1em;
  margin-left: 1px;
}

.metro .breadcrumbs ul a:after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid #ddd;
  right: -1em;
  margin-right: 1px;
}

.metro .breadcrumbs ul .active, .metro .breadcrumbs ul .active:hover {
  background: 0;
}

.metro .breadcrumbs ul .active a, .metro .breadcrumbs ul .active:hover a {
  color: #1d1d1d;
}

.metro .breadcrumbs ul .active:hover a {
  color: #fff;
}

.metro .breadcrumbs ul .active:after, .metro .breadcrumbs ul .active:before {
  content: normal;
}

.metro .breadcrumbs.small li {
  margin: 0 0.2em 0 0.8em;
}

.metro .breadcrumbs.small a {
  padding: 0.2em 1em;
  font-size: 11.9px;
}

.metro .breadcrumbs.mini li {
  margin: 0 0.2em 0 0.6em;
}

.metro .breadcrumbs.mini a {
  padding: 0.1em 1em;
  font-size: 10.5px;
}

.metro form {
  margin: 0 0 14pt;
}

.metro fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.metro legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 14pt;
  font-size: 16.5pt;
  line-height: 28pt;
  color: #333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

.metro legend small {
  font-size: 10.5pt;
  color: #999;
}

.metro label {
  display: block;
  margin: 5px 0;
}

.metro .input-control.checkbox, .metro .input-control.radio, .metro .input-control.switch, .metro .input-control.text, .metro .input-control.password, .metro .input-control.select, .metro .input-control.textarea {
  display: inline-block;
  cursor: pointer;
  position: relative;
  margin-bottom: 7pt;
}

.metro .input-control.checkbox input[type=checkbox], .metro .input-control.radio input[type=checkbox], .metro .input-control.checkbox input[type=radio], .metro .input-control.radio input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.metro .input-control.checkbox input[type=checkbox]:focus ~ .check, .metro .input-control.radio input[type=checkbox]:focus ~ .check, .metro .input-control.checkbox input[type=radio]:focus ~ .check, .metro .input-control.radio input[type=radio]:focus ~ .check {
  outline: 1px #999 dotted !important;
}

.metro .input-control.checkbox .caption, .metro .input-control.radio .caption {
  margin: 0 5px;
}

.metro .input-control.checkbox .check, .metro .input-control.radio .check {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px #d9d9d9 solid;
  padding: 0;
  margin: 0 5px 0 0;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.metro .input-control.checkbox.text-left .check, .metro .input-control.radio.text-left .check {
  margin: 0 0 0 5px;
}

.metro .input-control.checkbox:hover .check, .metro .input-control.radio:hover .check {
  border-color: #919191;
}

.metro .input-control.checkbox .check:active, .metro .input-control.radio .check:active {
  border-color: #1e1e1e;
}

.metro .input-control.checkbox .check:focus, .metro .input-control.radio .check:focus {
  border-color: #919191;
}

.metro .input-control.checkbox .check:after, .metro .input-control.radio .check:after {
  position: absolute;
  font-family: iconFont;
  font-size: 9pt;
  line-height: 9pt;
}

.metro .input-control.checkbox input[type=checkbox]:checked ~ .check:after, .metro .input-control.radio input[type=checkbox]:checked ~ .check:after, .metro .input-control.checkbox input[type=radio]:checked ~ .check:after, .metro .input-control.radio input[type=radio]:checked ~ .check:after {
  content: "\e08a";
  margin: 2px;
  top: 0;
  color: #1d1d1d;
}

.metro .input-control.checkbox input[type=checkbox]:disabled ~ .check, .metro .input-control.radio input[type=checkbox]:disabled ~ .check, .metro .input-control.checkbox input[type=radio]:disabled ~ .check, .metro .input-control.radio input[type=radio]:disabled ~ .check {
  border-color: #d9d9d9;
  background-color: #e6e6e6;
}

.metro .input-control.checkbox input[type=checkbox]:disabled ~ .check:after, .metro .input-control.radio input[type=checkbox]:disabled ~ .check:after, .metro .input-control.checkbox input[type=radio]:disabled ~ .check:after, .metro .input-control.radio input[type=radio]:disabled ~ .check:after {
  color: #8a8a8a;
}

.metro .input-control.checkbox input[data-show=intermediate] ~ .check:after, .metro .input-control.radio input[data-show=intermediate] ~ .check:after, .metro .input-control.checkbox input[data-show=intermediate]:checked ~ .check:after, .metro .input-control.radio input[data-show=intermediate]:checked ~ .check:after {
  display: block;
  content: "" !important;
  width: 10px;
  height: 10px;
  background-color: #1d1d1d;
  margin: 3px;
}

.metro .input-control.checkbox input[data-show=intermediate]:disabled ~ .check:after, .metro .input-control.radio input[data-show=intermediate]:disabled ~ .check:after {
  background-color: #8a8a8a;
}

.metro .input-control.radio .check {
  border-radius: 50%;
}

.metro .input-control.radio.default-style input[type=radio]:checked ~ .check:after {
  display: block;
  content: "" !important;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #1d1d1d;
  margin: 3px;
}

.metro .input-control.radio.default-style input[type=radio]:checked:disabled ~ .check:after {
  background-color: #8a8a8a;
}

.metro .input-control.switch input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.metro .input-control.switch .caption {
  margin: 0 5px;
}

.metro .input-control.switch .check {
  position: relative;
  width: 45px;
  height: 18px;
  outline: 2px #a6a6a6 solid;
  border: 1px #fff solid;
  cursor: pointer;
  background: #a6a6a6;
  z-index: 1;
  display: inline-block;
  vertical-align: middle;
}

.metro .input-control.switch .check:after {
  position: absolute;
  left: -1px;
  top: -1px;
  display: block;
  content: "";
  width: 9px;
  height: 16px;
  outline: 2px #333 solid;
  border: 1px #333 solid;
  cursor: pointer;
  background: #333;
  z-index: 2;
}

.metro .input-control.switch input[type=checkbox]:focus ~ .check, .metro .input-control.switch input[type=radio]:focus ~ .check {
  outline: 1px #999 dotted !important;
}

.metro .input-control.switch input[type=checkbox]:checked ~ .check {
  background: #008287;
}

.metro .input-control.switch input[type=checkbox]:checked ~ .check:after {
  left: auto;
  right: -1px;
}

.metro .input-control.switch input[type=checkbox]:disabled ~ .check {
  background-color: #e6e6e6;
  border-color: #fff;
}

.metro .input-control.switch input[type=checkbox]:disabled ~ .check:after {
  background-color: #8a8a8a;
  outline-color: #8a8a8a;
  border-color: #8a8a8a;
}

.metro .input-control.text, .metro .input-control.password, .metro .input-control.file, .metro .input-control.email, .metro .input-control.tel {
  display: inline-block;
  cursor: pointer;
  position: relative;
  background-color: #fff;
  outline: 0;
  height: 34px;
  width: 100%;
}

.metro .input-control.text .btn-clear, .metro .input-control.password .btn-clear, .metro .input-control.file .btn-clear, .metro .input-control.email .btn-clear, .metro .input-control.tel .btn-clear, .metro .input-control.text .btn-reveal, .metro .input-control.password .btn-reveal, .metro .input-control.file .btn-reveal, .metro .input-control.email .btn-reveal, .metro .input-control.tel .btn-reveal, .metro .input-control.text .btn-date, .metro .input-control.password .btn-date, .metro .input-control.file .btn-date, .metro .input-control.email .btn-date, .metro .input-control.tel .btn-date, .metro .input-control.text .btn-file, .metro .input-control.password .btn-file, .metro .input-control.file .btn-file, .metro .input-control.email .btn-file, .metro .input-control.tel .btn-file, .metro .input-control.text .btn-search, .metro .input-control.password .btn-search, .metro .input-control.file .btn-search, .metro .input-control.email .btn-search, .metro .input-control.tel .btn-search {
  background-color: #f0f0f0;
  position: absolute;
  top: 5px;
  z-index: 2;
  border: 0;
  right: 4px;
  width: 24px;
  height: 24px;
  min-height: 1px;
  min-width: 1px;
  padding: 0;
  margin: 0;
  display: none;
}

.metro .input-control.text .btn-clear:after, .metro .input-control.password .btn-clear:after, .metro .input-control.file .btn-clear:after, .metro .input-control.email .btn-clear:after, .metro .input-control.tel .btn-clear:after, .metro .input-control.text .btn-reveal:after, .metro .input-control.password .btn-reveal:after, .metro .input-control.file .btn-reveal:after, .metro .input-control.email .btn-reveal:after, .metro .input-control.tel .btn-reveal:after, .metro .input-control.text .btn-date:after, .metro .input-control.password .btn-date:after, .metro .input-control.file .btn-date:after, .metro .input-control.email .btn-date:after, .metro .input-control.tel .btn-date:after, .metro .input-control.text .btn-file:after, .metro .input-control.password .btn-file:after, .metro .input-control.file .btn-file:after, .metro .input-control.email .btn-file:after, .metro .input-control.tel .btn-file:after, .metro .input-control.text .btn-search:after, .metro .input-control.password .btn-search:after, .metro .input-control.file .btn-search:after, .metro .input-control.email .btn-search:after, .metro .input-control.tel .btn-search:after {
  font-family: iconFont;
  font-size: 10pt;
}

.metro .input-control.text .btn-clear:not(:disabled):active, .metro .input-control.password .btn-clear:not(:disabled):active, .metro .input-control.file .btn-clear:not(:disabled):active, .metro .input-control.email .btn-clear:not(:disabled):active, .metro .input-control.tel .btn-clear:not(:disabled):active, .metro .input-control.text .btn-reveal:not(:disabled):active, .metro .input-control.password .btn-reveal:not(:disabled):active, .metro .input-control.file .btn-reveal:not(:disabled):active, .metro .input-control.email .btn-reveal:not(:disabled):active, .metro .input-control.tel .btn-reveal:not(:disabled):active, .metro .input-control.text .btn-date:not(:disabled):active, .metro .input-control.password .btn-date:not(:disabled):active, .metro .input-control.file .btn-date:not(:disabled):active, .metro .input-control.email .btn-date:not(:disabled):active, .metro .input-control.tel .btn-date:not(:disabled):active, .metro .input-control.text .btn-file:not(:disabled):active, .metro .input-control.password .btn-file:not(:disabled):active, .metro .input-control.file .btn-file:not(:disabled):active, .metro .input-control.email .btn-file:not(:disabled):active, .metro .input-control.tel .btn-file:not(:disabled):active, .metro .input-control.text .btn-search:not(:disabled):active, .metro .input-control.password .btn-search:not(:disabled):active, .metro .input-control.file .btn-search:not(:disabled):active, .metro .input-control.email .btn-search:not(:disabled):active, .metro .input-control.tel .btn-search:not(:disabled):active {
  background-color: #1d1d1d;
  color: #fff;
}

.metro .input-control.text .btn-clear:active, .metro .input-control.password .btn-clear:active, .metro .input-control.file .btn-clear:active, .metro .input-control.email .btn-clear:active, .metro .input-control.tel .btn-clear:active, .metro .input-control.text .btn-reveal:active, .metro .input-control.password .btn-reveal:active, .metro .input-control.file .btn-reveal:active, .metro .input-control.email .btn-reveal:active, .metro .input-control.tel .btn-reveal:active, .metro .input-control.text .btn-date:active, .metro .input-control.password .btn-date:active, .metro .input-control.file .btn-date:active, .metro .input-control.email .btn-date:active, .metro .input-control.tel .btn-date:active, .metro .input-control.text .btn-file:active, .metro .input-control.password .btn-file:active, .metro .input-control.file .btn-file:active, .metro .input-control.email .btn-file:active, .metro .input-control.tel .btn-file:active, .metro .input-control.text .btn-search:active, .metro .input-control.password .btn-search:active, .metro .input-control.file .btn-search:active, .metro .input-control.email .btn-search:active, .metro .input-control.tel .btn-search:active {
  left: auto;
}

.metro .input-control.text .btn-clear:focus, .metro .input-control.password .btn-clear:focus, .metro .input-control.file .btn-clear:focus, .metro .input-control.email .btn-clear:focus, .metro .input-control.tel .btn-clear:focus, .metro .input-control.text .btn-reveal:focus, .metro .input-control.password .btn-reveal:focus, .metro .input-control.file .btn-reveal:focus, .metro .input-control.email .btn-reveal:focus, .metro .input-control.tel .btn-reveal:focus, .metro .input-control.text .btn-date:focus, .metro .input-control.password .btn-date:focus, .metro .input-control.file .btn-date:focus, .metro .input-control.email .btn-date:focus, .metro .input-control.tel .btn-date:focus, .metro .input-control.text .btn-file:focus, .metro .input-control.password .btn-file:focus, .metro .input-control.file .btn-file:focus, .metro .input-control.email .btn-file:focus, .metro .input-control.tel .btn-file:focus, .metro .input-control.text .btn-search:focus, .metro .input-control.password .btn-search:focus, .metro .input-control.file .btn-search:focus, .metro .input-control.email .btn-search:focus, .metro .input-control.tel .btn-search:focus {
  outline: 1px #ccc dotted;
}

.metro .input-control.text input:focus ~ .btn-clear, .metro .input-control.password input:focus ~ .btn-clear, .metro .input-control.file input:focus ~ .btn-clear, .metro .input-control.email input:focus ~ .btn-clear, .metro .input-control.tel input:focus ~ .btn-clear, .metro .input-control.text input:focus ~ .btn-reveal, .metro .input-control.password input:focus ~ .btn-reveal, .metro .input-control.file input:focus ~ .btn-reveal, .metro .input-control.email input:focus ~ .btn-reveal, .metro .input-control.tel input:focus ~ .btn-reveal {
  display: block;
}

.metro .input-control.text input:not(:focus) ~ .btn-clear:active, .metro .input-control.password input:not(:focus) ~ .btn-clear:active, .metro .input-control.file input:not(:focus) ~ .btn-clear:active, .metro .input-control.email input:not(:focus) ~ .btn-clear:active, .metro .input-control.tel input:not(:focus) ~ .btn-clear:active, .metro .input-control.text input:not(:focus) ~ .btn-reveal:active, .metro .input-control.password input:not(:focus) ~ .btn-reveal:active, .metro .input-control.file input:not(:focus) ~ .btn-reveal:active, .metro .input-control.email input:not(:focus) ~ .btn-reveal:active, .metro .input-control.tel input:not(:focus) ~ .btn-reveal:active {
  display: block;
}

.metro .input-control.text .btn-clear:after, .metro .input-control.password .btn-clear:after, .metro .input-control.file .btn-clear:after, .metro .input-control.email .btn-clear:after, .metro .input-control.tel .btn-clear:after {
  content: "\e089";
}

.metro .input-control.text .btn-reveal:after, .metro .input-control.password .btn-reveal:after, .metro .input-control.file .btn-reveal:after, .metro .input-control.email .btn-reveal:after, .metro .input-control.tel .btn-reveal:after {
  content: "\e000";
}

.metro .input-control.text .btn-search:after, .metro .input-control.password .btn-search:after, .metro .input-control.file .btn-search:after, .metro .input-control.email .btn-search:after, .metro .input-control.tel .btn-search:after {
  content: "\e041";
}

.metro .input-control.text .btn-date:after, .metro .input-control.password .btn-date:after, .metro .input-control.file .btn-date:after, .metro .input-control.email .btn-date:after, .metro .input-control.tel .btn-date:after {
  content: "\e020";
}

.metro .input-control.text .btn-file:after, .metro .input-control.password .btn-file:after, .metro .input-control.file .btn-file:after, .metro .input-control.email .btn-file:after, .metro .input-control.tel .btn-file:after {
  content: "\e012";
}

.metro .input-control.text .btn-search, .metro .input-control.password .btn-search, .metro .input-control.file .btn-search, .metro .input-control.email .btn-search, .metro .input-control.tel .btn-search {
  display: block;
}

.metro .input-control.text .btn-date, .metro .input-control.password .btn-date, .metro .input-control.file .btn-date, .metro .input-control.email .btn-date, .metro .input-control.tel .btn-date {
  display: block;
}

.metro .input-control.text .btn-file, .metro .input-control.password .btn-file, .metro .input-control.file .btn-file, .metro .input-control.email .btn-file, .metro .input-control.tel .btn-file {
  display: block;
}

.metro .input-control.text [class*=btn-], .metro .input-control.password [class*=btn-], .metro .input-control.file [class*=btn-], .metro .input-control.email [class*=btn-], .metro .input-control.tel [class*=btn-] {
  background-color: transparent;
}

.metro .input-control.text input::-ms-reveal, .metro .input-control.password input::-ms-reveal, .metro .input-control.file input::-ms-reveal, .metro .input-control.email input::-ms-reveal, .metro .input-control.tel input::-ms-reveal, .metro .input-control.text input::-ms-clear, .metro .input-control.password input::-ms-clear, .metro .input-control.file input::-ms-clear, .metro .input-control.email input::-ms-clear, .metro .input-control.tel input::-ms-clear {
  display: none;
}

.metro .input-control.text input, .metro .input-control.password input, .metro .input-control.file input, .metro .input-control.email input, .metro .input-control.tel input {
  border: 1px #d9d9d9 solid;
  width: 100%;
  height: 100%;
  padding: 5px;
  z-index: 1;
  -webkit-appearance: none;
}

.metro .input-control.text input:focus, .metro .input-control.password input:focus, .metro .input-control.file input:focus, .metro .input-control.email input:focus, .metro .input-control.tel input:focus {
  outline: 0;
  border-color: #919191;
}

.metro .input-control.text input:disabled, .metro .input-control.password input:disabled, .metro .input-control.file input:disabled, .metro .input-control.email input:disabled, .metro .input-control.tel input:disabled {
  padding-right: 5px;
}

.metro .input-control.text input:disabled ~ .btn-clear, .metro .input-control.password input:disabled ~ .btn-clear, .metro .input-control.file input:disabled ~ .btn-clear, .metro .input-control.email input:disabled ~ .btn-clear, .metro .input-control.tel input:disabled ~ .btn-clear, .metro .input-control.text input:disabled ~ .btn-reveal, .metro .input-control.password input:disabled ~ .btn-reveal, .metro .input-control.file input:disabled ~ .btn-reveal, .metro .input-control.email input:disabled ~ .btn-reveal, .metro .input-control.tel input:disabled ~ .btn-reveal {
  display: none;
}

.metro .input-control.text input::-moz-placeholder, .metro .input-control.password input::-moz-placeholder, .metro .input-control.file input::-moz-placeholder, .metro .input-control.email input::-moz-placeholder, .metro .input-control.tel input::-moz-placeholder {
  color: #999;
}

.metro .input-control.text input::-webkit-input-placeholder, .metro .input-control.password input::-webkit-input-placeholder, .metro .input-control.file input::-webkit-input-placeholder, .metro .input-control.email input::-webkit-input-placeholder, .metro .input-control.tel input::-webkit-input-placeholder {
  color: #999;
}

.metro .input-control.select, .metro .input-control.textarea {
  display: inline-block;
  cursor: pointer;
  position: relative;
  width: 100%;
}

.metro .input-control.select select, .metro .input-control.textarea select, .metro .input-control.select textarea, .metro .input-control.textarea textarea {
  border: 1px #d9d9d9 solid;
  width: 100%;
  padding: 5px;
}

.metro .input-control.select select:focus, .metro .input-control.textarea select:focus, .metro .input-control.select textarea:focus, .metro .input-control.textarea textarea:focus {
  outline: 0;
  border-color: #919191;
}

.metro .input-control.select select:disabled, .metro .input-control.textarea select:disabled, .metro .input-control.select textarea:disabled, .metro .input-control.textarea textarea:disabled {
  padding-right: 5px;
}

.metro .input-control.select textarea, .metro .input-control.textarea textarea {
  min-height: 100px;
}

.metro .input-control.text.warning-state input, .metro .input-control.password.warning-state input, .metro .input-control.select.warning-state input, .metro .input-control.textarea.warning-state input, .metro .input-control.file.warning-state input, .metro .input-control.email.warning-state input, .metro .input-control.tel.warning-state input, .metro .input-control.text.warning-state select, .metro .input-control.password.warning-state select, .metro .input-control.select.warning-state select, .metro .input-control.textarea.warning-state select, .metro .input-control.file.warning-state select, .metro .input-control.email.warning-state select, .metro .input-control.tel.warning-state select, .metro .input-control.text.warning-state textarea, .metro .input-control.password.warning-state textarea, .metro .input-control.select.warning-state textarea, .metro .input-control.textarea.warning-state textarea, .metro .input-control.file.warning-state textarea, .metro .input-control.email.warning-state textarea, .metro .input-control.tel.warning-state textarea {
  border-color: #fa6800;
}

.metro .input-control.text.error-state input, .metro .input-control.password.error-state input, .metro .input-control.select.error-state input, .metro .input-control.textarea.error-state input, .metro .input-control.file.error-state input, .metro .input-control.email.error-state input, .metro .input-control.tel.error-state input, .metro .input-control.text.error-state select, .metro .input-control.password.error-state select, .metro .input-control.select.error-state select, .metro .input-control.textarea.error-state select, .metro .input-control.file.error-state select, .metro .input-control.email.error-state select, .metro .input-control.tel.error-state select, .metro .input-control.text.error-state textarea, .metro .input-control.password.error-state textarea, .metro .input-control.select.error-state textarea, .metro .input-control.textarea.error-state textarea, .metro .input-control.file.error-state textarea, .metro .input-control.email.error-state textarea, .metro .input-control.tel.error-state textarea {
  border-color: #e51400;
}

.metro .input-control.text.info-state input, .metro .input-control.password.info-state input, .metro .input-control.select.info-state input, .metro .input-control.textarea.info-state input, .metro .input-control.file.info-state input, .metro .input-control.email.info-state input, .metro .input-control.tel.info-state input, .metro .input-control.text.info-state select, .metro .input-control.password.info-state select, .metro .input-control.select.info-state select, .metro .input-control.textarea.info-state select, .metro .input-control.file.info-state select, .metro .input-control.email.info-state select, .metro .input-control.tel.info-state select, .metro .input-control.text.info-state textarea, .metro .input-control.password.info-state textarea, .metro .input-control.select.info-state textarea, .metro .input-control.textarea.info-state textarea, .metro .input-control.file.info-state textarea, .metro .input-control.email.info-state textarea, .metro .input-control.tel.info-state textarea {
  border-color: #4390df;
}

.metro .input-control.text.success-state input, .metro .input-control.password.success-state input, .metro .input-control.select.success-state input, .metro .input-control.textarea.success-state input, .metro .input-control.file.success-state input, .metro .input-control.email.success-state input, .metro .input-control.tel.success-state input, .metro .input-control.text.success-state select, .metro .input-control.password.success-state select, .metro .input-control.select.success-state select, .metro .input-control.textarea.success-state select, .metro .input-control.file.success-state select, .metro .input-control.email.success-state select, .metro .input-control.tel.success-state select, .metro .input-control.text.success-state textarea, .metro .input-control.password.success-state textarea, .metro .input-control.select.success-state textarea, .metro .input-control.textarea.success-state textarea, .metro .input-control.file.success-state textarea, .metro .input-control.email.success-state textarea, .metro .input-control.tel.success-state textarea {
  border-color: #60a917;
}

.metro .input-control.text input[data-state=warning], .metro .input-control.password input[data-state=warning], .metro .input-control.select input[data-state=warning], .metro .input-control.textarea input[data-state=warning], .metro .input-control.file input[data-state=warning], .metro .input-control.email input[data-state=warning], .metro .input-control.tel input[data-state=warning] {
  border-color: #fa6800;
}

.metro .input-control.text input[data-state=error], .metro .input-control.password input[data-state=error], .metro .input-control.select input[data-state=error], .metro .input-control.textarea input[data-state=error], .metro .input-control.file input[data-state=error], .metro .input-control.email input[data-state=error], .metro .input-control.tel input[data-state=error] {
  border-color: #e51400;
}

.metro .input-control.text input[data-state=info], .metro .input-control.password input[data-state=info], .metro .input-control.select input[data-state=info], .metro .input-control.textarea input[data-state=info], .metro .input-control.file input[data-state=info], .metro .input-control.email input[data-state=info], .metro .input-control.tel input[data-state=info] {
  border-color: #4390df;
}

.metro .input-control.text input[data-state=success], .metro .input-control.password input[data-state=success], .metro .input-control.select input[data-state=success], .metro .input-control.textarea input[data-state=success], .metro .input-control.file input[data-state=success], .metro .input-control.email input[data-state=success], .metro .input-control.tel input[data-state=success] {
  border-color: #60a917;
}

.metro .input-control.text[class*=span], .metro .input-control.password[class*=span], .metro .input-control.select[class*=span], .metro .input-control.textarea[class*=span], .metro .input-control.file[class*=span], .metro .input-control.email[class*=span], .metro .input-control.tel[class*=span] {
  margin-left: 0;
}

.metro .input-control.file {
  overflow: hidden;
}

.metro .input-control.file input[type=file] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  bottom: 0;
  right: 0;
}

.metro input[type=button], .metro input[type=submit], .metro input[type=reset] {
  padding: 4px 12px;
  text-align: center;
  vertical-align: middle !important;
  background-color: #d9d9d9;
  border: 1px transparent solid;
  color: #222;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  outline: 0;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
}

.metro input[type=button].default, .metro input[type=submit].default, .metro input[type=reset].default {
  background-color: #008287;
  color: #fff;
}

.metro input[type=button]:focus, .metro input[type=submit]:focus, .metro input[type=reset]:focus {
  outline: 0;
  border: 1px #353535 dotted;
}

.metro input[type=button]:disabled, .metro input[type=submit]:disabled, .metro input[type=reset]:disabled, .metro input[type=button].disabled, .metro input[type=submit].disabled, .metro input[type=reset].disabled {
  background-color: #eaeaea !important;
  color: #bebebe !important;
  cursor: not-allowed !important;
}

.metro input[type=button] *, .metro input[type=submit] *, .metro input[type=reset] * {
  color: inherit;
}

.metro input[type=button] *:hover, .metro input[type=submit] *:hover, .metro input[type=reset] *:hover {
  color: inherit;
}

.metro input[type=button].primary, .metro input[type=submit].primary, .metro input[type=reset].primary {
  background-color: #16499a !important;
  color: #fff !important;
}

.metro input[type=button].info, .metro input[type=submit].info, .metro input[type=reset].info {
  background-color: #4390df !important;
  color: #fff !important;
}

.metro input[type=button].success, .metro input[type=submit].success, .metro input[type=reset].success {
  background-color: #60a917 !important;
  color: #fff !important;
}

.metro input[type=button].warning, .metro input[type=submit].warning, .metro input[type=reset].warning {
  background-color: #fa6800 !important;
  color: #fff !important;
}

.metro input[type=button].danger, .metro input[type=submit].danger, .metro input[type=reset].danger {
  background-color: #9a1616 !important;
  color: #fff !important;
}

.metro input[type=button].inverse, .metro input[type=submit].inverse, .metro input[type=reset].inverse {
  background-color: #1d1d1d !important;
  color: #fff !important;
}

.metro input[type=button].link, .metro input[type=submit].link, .metro input[type=reset].link {
  background-color: transparent !important;
  color: #2e92cf !important;
}

.metro input[type=button].link:hover, .metro input[type=submit].link:hover, .metro input[type=reset].link:hover {
  text-decoration: underline;
}

.metro input[type=button].link:disabled, .metro input[type=submit].link:disabled, .metro input[type=reset].link:disabled, .metro input[type=button].link.disabled, .metro input[type=submit].link.disabled, .metro input[type=reset].link.disabled {
  background-color: transparent !important;
  color: #bebebe !important;
  cursor: not-allowed !important;
}

.metro input[type=button].link [class*=icon-], .metro input[type=submit].link [class*=icon-], .metro input[type=reset].link [class*=icon-] {
  text-decoration: none !important;
}

.metro input[type=button]:active, .metro input[type=submit]:active, .metro input[type=reset]:active {
  background-color: #1d1d1d !important;
  color: #fff !important;
  border-color: transparent;
}

.metro input[type=button].large, .metro input[type=submit].large, .metro input[type=reset].large {
  padding: 11px 19px;
  font-size: 17.5px;
}

.metro input[type=button].small, .metro input[type=submit].small, .metro input[type=reset].small {
  padding: 2px 10px;
  font-size: 11.9px;
}

.metro input[type=button].mini, .metro input[type=submit].mini, .metro input[type=reset].mini {
  padding: 0 6px;
  font-size: 10.5px;
}

.metro img {
  max-width: 100%;
}

.metro img.rounded, .metro img.cycle, .metro img.polaroid {
  background-color: #fff;
  border: 1px #eaeaea solid;
}

.metro img.rounded {
  border-radius: 10px;
}

.metro img.cycle {
  border-radius: 50%;
}

.metro img.polaroid {
  padding: 10px;
}

.metro .image-container {
  position: relative;
  padding: 0;
  background-color: #333;
  width: 240px;
  overflow: hidden;
}

.metro .image-container.full-size {
  width: 100%;
}

.metro .image-container img {
  margin: 0;
  width: 100%;
  height: auto;
}

.metro .image-container > .overlay, .metro .image-container > .overlay-fluid {
  position: absolute;
  width: 100%;
  height: 55px;
  overflow: hidden;
  background-color: #1e1e1e;
  padding: 5px 10px;
  opacity: 0.8;
  bottom: 0;
  font-size: 8pt;
  color: #fff;
}

.metro .image-container > .overlay-fluid {
  bottom: -55px;
  font-size: 8pt;
  color: #fff;
}

.metro .image-container:hover .overlay-fluid {
  -webkit-transform: translate(0, -55px);
  -ms-transform: translate(0, -55px);
  -o-transform: translate(0, -55px);
  -moz-transform: translate(0, -55px);
  transform: translate(0, -55px);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.metro .image-container.selected {
  border: 4px #4390df solid;
}

.metro .image-container.selected:after {
  position: absolute;
  display: block;
  border-top: 28px solid #4390df;
  border-left: 28px solid transparent;
  right: 0;
  content: "";
  top: 0;
  z-index: 101;
}

.metro .image-container.selected:before {
  position: absolute;
  display: block;
  content: "\e08a";
  color: #fff;
  right: 0;
  font-family: iconFont;
  font-size: 9pt;
  font-weight: normal;
  z-index: 102;
  top: 0;
}

.metro #menu .init {
  margin: 0;
  padding: 0;
  list-style: none;
}

.metro #menu .item-vertical {
  display: block;
  margin: 10px 0;
  padding: 0;
  vertical-align: baseline;
  position: relative;
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
}

.metro #menu .item-horizontal {
  display: inline-block;
  margin: 0 15px;
  padding: 0;
  vertical-align: baseline;
  position: relative;
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
}

.metro .vertical-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.metro .vertical-menu li {
  display: block;
  margin: 10px 0;
  padding: 0;
  vertical-align: baseline;
  position: relative;
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
}

.metro .vertical-menu li a {
  display: block;
  text-decoration: none;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.6);
  line-height: 2.2rem;
  font-size: 2.2rem;
  color: inherit;
}

.metro .vertical-menu li.title {
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;
  font-size: 4rem;
  margin-bottom: 20px;
}

.metro .vertical-menu.compact a {
  font-weight: normal;
  font-size: 10.5pt;
  line-height: 12pt;
  color: inherit;
}

.metro .vertical-menu.compact li.title {
  margin-bottom: 10px;
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: 0.02em;
}

.metro .vertical-menu ul.secondary {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: 15px;
}

.metro .vertical-menu ul.secondary li a {
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: 0.02em;
  font-weight: normal;
  font-style: normal;
  line-height: 1.4rem;
  color: inherit;
}

.metro .horizontal-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  padding: 0;
}

.metro .horizontal-menu li {
  display: inline-block;
  margin: 0 15px;
  padding: 0;
  vertical-align: baseline;
  position: relative;
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
}

.metro .horizontal-menu li a {
  display: inline-block;
  text-decoration: none;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.6);
  line-height: 2.2rem;
  font-size: 2.2rem;
  color: inherit;
  padding: 5px;
}

.metro .horizontal-menu li a:hover {
  background: inherit;
}

.metro .horizontal-menu.compact li {
  margin-left: 5px;
}

.metro .horizontal-menu.compact a {
  font-weight: normal;
  font-size: 10.5pt;
  color: inherit;
}

.metro .horizontal-menu.compact .dropdown-toggle:after {
  bottom: 2px;
}

.metro .horizontal-menu li:first-child {
  margin-left: 0;
}

.metro .horizontal-menu li:hover > .dropdown-menu[data-show=hover] {
  display: block;
}

.metro .side-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  background: #fff;
  min-width: 200px;
  width: auto;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.metro .side-menu li {
  display: block;
  margin: 10px 0;
  padding: 0;
  vertical-align: baseline;
  position: relative;
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
}

.metro .side-menu li a {
  display: block;
  text-decoration: none;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.6);
  line-height: 2.2rem;
  font-size: 2.2rem;
  color: inherit;
}

.metro .side-menu li.title {
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;
  font-size: 4rem;
  margin-bottom: 20px;
}

.metro .side-menu.compact a {
  font-weight: normal;
  font-size: 10.5pt;
  line-height: 12pt;
  color: inherit;
}

.metro .side-menu.compact li.title {
  margin-bottom: 10px;
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: 0.02em;
}

.metro .side-menu ul.secondary {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: 15px;
}

.metro .side-menu ul.secondary li a {
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: 0.02em;
  font-weight: normal;
  font-style: normal;
  line-height: 1.4rem;
  color: inherit;
}

.metro .side-menu li {
  margin: 5px 0 0;
  width: 100%;
}

.metro .side-menu li:last-child {
  margin-bottom: 5px;
}

.metro .side-menu a {
  padding: 8px 20px !important;
  color: inherit;
  font-size: 15px !important;
  line-height: 14px !important;
}

.metro .side-menu li:hover {
  background: #1ba1e2;
  color: #fff;
}

.metro .side-menu .divider {
  padding: 0;
  height: 1px;
  margin: 9px 1px;
  overflow: hidden;
  background-color: #e5e5e5;
}

.metro .side-menu .divider:hover {
  background: #e5e5e5;
}

.metro .side-menu .dropdown-menu {
  left: 100%;
  top: -10%;
}

.metro .side-menu.left .dropdown-menu {
  left: -100%;
}

.metro .side-menu > li:hover > .dropdown-menu[data-show=hover] {
  display: block;
}

.metro .side-menu > li > a.dropdown-toggle:after {
  font-family: iconFont;
  font-size: 0.8em;
  content: "\e156";
  left: 85%;
  top: 0.75em;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.metro .side-menu.text-right li {
  text-align: right;
}

.metro .dropdown-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  display: none;
  z-index: 1000;
  background: #fff;
  min-width: 220px;
  width: auto;
  border: 1px solid #dcddde;
}

.metro .dropdown-menu li {
  display: block;
  margin: 10px 0;
  padding: 0;
  vertical-align: baseline;
  position: relative;
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
}

.metro .dropdown-menu li a {
  display: block;
  text-decoration: none;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.6);
  line-height: 2.2rem;
  font-size: 2.2rem;
  color: inherit;
}

.metro .dropdown-menu li.title {
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;
  font-size: 4rem;
  margin-bottom: 20px;
}

.metro .dropdown-menu.compact a {
  font-weight: normal;
  font-size: 10.5pt;
  line-height: 12pt;
  color: inherit;
}

.metro .dropdown-menu.compact li.title {
  margin-bottom: 10px;
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: 0.02em;
}

.metro .dropdown-menu ul.secondary {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: 15px;
}

.metro .dropdown-menu ul.secondary li a {
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: 0.02em;
  font-weight: normal;
  font-style: normal;
  line-height: 1.4rem;
  color: inherit;
}

.metro .dropdown-menu.shadow {
  box-shadow: 3px 3px 0 rgba(236, 236, 236, 0.7);
}

.metro .dropdown-menu li {
  margin: 5px 0 0;
  width: 100%;
  border: 1px transparent solid;
}

.metro .dropdown-menu li:last-child {
  margin-bottom: 5px;
}

.metro .dropdown-menu li.disabled, .metro .dropdown-menu li.disabled:hover {
  cursor: default !important;
  background: transparent !important;
  color: #eee;
}

.metro .dropdown-menu li.disabled a, .metro .dropdown-menu li.disabled:hover a {
  color: inherit;
  cursor: inherit;
  background: inherit;
}

.metro .dropdown-menu a {
  padding: 8px 32px !important;
  color: inherit;
  font-size: 15px !important;
  line-height: 14px !important;
  cursor: pointer;
}

.metro .dropdown-menu li:hover {
  background: #edf4fc;
  border-color: #a8d2fd;
}

.metro .dropdown-menu li.checked a:before, .metro .dropdown-menu li.checked-partial a:before {
  position: absolute;
  left: 10px;
  content: "\e0a6";
  font-family: iconFont;
}

.metro .dropdown-menu li.checked-partial a:before {
  content: "\e0a8";
}

.metro .dropdown-menu.place-right {
  right: -15px;
  left: auto;
}

.metro .dropdown-menu .divider {
  padding: 0;
  height: 1px;
  margin: 9px 1px;
  overflow: hidden;
  background-color: #e5e5e5;
  border-width: 0;
}

.metro .dropdown-menu .divider:hover {
  background: #e5e5e5;
}

.metro .dropdown-menu.open {
  display: block !important;
}

.metro .dropdown-menu .dropdown-menu {
  left: 100%;
  top: -10%;
}

.metro .dropdown-menu > li:hover > .dropdown-menu[data-show=hover] {
  display: block;
}

.metro .dropdown-menu > li > a.dropdown-toggle:after {
  font-family: iconFont;
  font-size: 0.7em;
  content: "\e1b3";
  left: 85%;
  top: 0.85em;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.metro .dropdown-menu.drop-left {
  left: -100%;
}

.metro .dropdown-menu.drop-up {
  top: auto;
  bottom: 0;
}

.metro .dropdown-menu .menu-title {
  background-color: #f6f7f8;
  font-size: 12px;
  font-weight: bold;
  line-height: 14px;
  padding: 4px 8px;
  border: 0;
  border-bottom: 1px #dcddde solid;
  border-top: 1px #dcddde solid;
  color: #646464;
}

.metro .dropdown-menu .menu-title:first-child {
  margin: 0;
  border-top-width: 0;
}

.metro .dropdown-menu .menu-title:first-child:hover {
  border-top-width: 0;
}

.metro .dropdown-menu .menu-title:hover {
  background-color: #f6f7f8;
  cursor: default;
  border: 0;
  border-bottom: 1px #dcddde solid;
  border-top: 1px #dcddde solid;
}

.metro .dropdown-menu.inverse {
  border: 2px #3b3b3b solid;
}

.metro .dropdown-menu.inverse li {
  border: 0;
}

.metro .dropdown-menu.inverse li a {
  padding: 9px 32px !important;
}

.metro .dropdown-menu.inverse li:hover {
  border: 0;
  background-color: #e5e5e5;
}

.metro .dropdown-menu.inverse .menu-title:hover {
  background-color: #f6f7f8;
}

.metro .dropdown-menu.inverse .divider {
  margin-left: 0;
  margin-right: 0;
}

.metro .dropdown-menu.dark {
  background-color: #333;
  border: 2px #333 solid;
  color: #fff;
}

.metro .dropdown-menu.dark.opacity {
  background-color: rgba(61, 61, 61, 0.9);
}

.metro .dropdown-menu.dark li {
  border: 0;
  color: inherit;
}

.metro .dropdown-menu.dark li a {
  padding: 9px 32px !important;
  color: inherit;
}

.metro .dropdown-menu.dark li.disabled, .metro .dropdown-menu.dark li.disabled:hover {
  cursor: default !important;
  background: transparent !important;
  color: #555;
}

.metro .dropdown-menu.dark li.disabled a, .metro .dropdown-menu.dark li.disabled:hover a {
  color: inherit;
  cursor: inherit;
  background: inherit;
}

.metro .dropdown-menu.dark li:hover {
  border: 0;
  background-color: #201a1a;
  color: #fff;
}

.metro .dropdown-menu.dark .menu-title {
  background-color: #3b3b3b;
}

.metro .dropdown-menu.dark .menu-title:hover {
  background-color: #3b3b3b;
}

.metro .dropdown-menu.dark .divider {
  margin-left: 0;
  margin-right: 0;
  background-color: #555;
}

.metro .dropdown-menu.dark .divider:hover {
  background: #555;
}

.metro .dropdown-toggle:after {
  position: absolute;
  margin-left: 0.45em;
  bottom: 0;
  content: "›";
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.metro .dropdown-toggle.no-marker:after {
  content: "";
}

.metro .contextmenu {
  z-index: 1000;
  position: absolute;
  background-color: #fff;
  border: 2.5px solid #2a2a2a;
  padding: 2px;
}

.metro .contextmenu .item:active {
  background-color: #000;
  color: #fff;
}

.metro .contextmenu .item:hover {
  background-color: #dedede;
}

.metro .contextmenu .item {
  background-color: #fff;
  width: auto;
  padding: 12px;
  margin: -2px;
}

.metro .navigation-bar, .metro .navbar {
  width: 100%;
  display: block;
  background-color: #1ba1e2;
  color: #fff;
}

.metro .navigation-bar .navigation-bar-content, .metro .navbar .navigation-bar-content, .metro .navigation-bar .navbar-content, .metro .navbar .navbar-content {
  background-color: inherit;
  color: inherit;
  display: block;
}

.metro .navigation-bar .navigation-bar-content .element, .metro .navbar .navigation-bar-content .element, .metro .navigation-bar .navbar-content .element, .metro .navbar .navbar-content .element, .metro .navigation-bar .navigation-bar-content .element-divider, .metro .navbar .navigation-bar-content .element-divider, .metro .navigation-bar .navbar-content .element-divider, .metro .navbar .navbar-content .element-divider {
  display: block;
  float: left;
  background-color: inherit;
  position: relative;
  height: 45px;
}

.metro .navigation-bar .navigation-bar-content .element.place-right, .metro .navbar .navigation-bar-content .element.place-right, .metro .navigation-bar .navbar-content .element.place-right, .metro .navbar .navbar-content .element.place-right, .metro .navigation-bar .navigation-bar-content .element-divider.place-right, .metro .navbar .navigation-bar-content .element-divider.place-right, .metro .navigation-bar .navbar-content .element-divider.place-right, .metro .navbar .navbar-content .element-divider.place-right {
  float: right;
}

.metro .navigation-bar .navigation-bar-content .element, .metro .navbar .navigation-bar-content .element, .metro .navigation-bar .navbar-content .element, .metro .navbar .navbar-content .element {
  padding: 15px;
  line-height: 15px;
  color: inherit;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.metro .navigation-bar .navigation-bar-content .element:hover, .metro .navbar .navigation-bar-content .element:hover, .metro .navigation-bar .navbar-content .element:hover, .metro .navbar .navbar-content .element:hover {
  background-color: #00aafd;
}

.metro .navigation-bar .navigation-bar-content .element > a.dropdown-toggle, .metro .navbar .navigation-bar-content .element > a.dropdown-toggle, .metro .navigation-bar .navbar-content .element > a.dropdown-toggle, .metro .navbar .navbar-content .element > a.dropdown-toggle {
  color: inherit;
  position: relative;
}

.metro .navigation-bar .navigation-bar-content .element > a.dropdown-toggle:after, .metro .navbar .navigation-bar-content .element > a.dropdown-toggle:after, .metro .navigation-bar .navbar-content .element > a.dropdown-toggle:after, .metro .navbar .navbar-content .element > a.dropdown-toggle:after {
  position: absolute;
  left: 100%;
}

.metro .navigation-bar .navigation-bar-content .element > .dropdown-menu, .metro .navbar .navigation-bar-content .element > .dropdown-menu, .metro .navigation-bar .navbar-content .element > .dropdown-menu, .metro .navbar .navbar-content .element > .dropdown-menu {
  top: 100%;
  left: 0;
}

.metro .navigation-bar .navigation-bar-content .element > .dropdown-menu.place-right, .metro .navbar .navigation-bar-content .element > .dropdown-menu.place-right, .metro .navigation-bar .navbar-content .element > .dropdown-menu.place-right, .metro .navbar .navbar-content .element > .dropdown-menu.place-right {
  right: 0;
  left: auto;
}

.metro .navigation-bar .navigation-bar-content .element-divider, .metro .navbar .navigation-bar-content .element-divider, .metro .navigation-bar .navbar-content .element-divider, .metro .navbar .navbar-content .element-divider {
  padding: 15px 0;
  line-height: 15px;
  width: 1px !important;
  border-left: 1px #ccc solid;
  opacity: 0.3;
  position: relative;
}

.metro .navigation-bar .navigation-bar-content .element-divider:before, .metro .navbar .navigation-bar-content .element-divider:before, .metro .navigation-bar .navbar-content .element-divider:before, .metro .navbar .navbar-content .element-divider:before {
  content: "|";
  visibility: hidden;
}

.metro .navigation-bar-content .brand, .metro .navbar-content .brand {
  font-size: 18px;
}

.metro .navigation-bar-content form, .metro .navbar-content form {
  margin: 0;
  padding-bottom: 0 !important;
  position: relative;
}

.metro .navigation-bar-content .element .input-control.text, .metro .navbar-content .element .input-control.text, .metro .navigation-bar-content .element .input-control.password, .metro .navbar-content .element .input-control.password {
  width: auto;
  height: auto;
  position: relative;
  margin: 0;
  top: -6px;
}

.metro .navigation-bar-content .element .input-control.text [class*=btn-], .metro .navbar-content .element .input-control.text [class*=btn-], .metro .navigation-bar-content .element .input-control.password [class*=btn-], .metro .navbar-content .element .input-control.password [class*=btn-] {
  top: 2px;
  right: 2px;
}

.metro .navigation-bar-content .element .input-control.text input[type=text], .metro .navbar-content .element .input-control.text input[type=text], .metro .navigation-bar-content .element .input-control.password input[type=text], .metro .navbar-content .element .input-control.password input[type=text] {
  font-size: 12px;
}

.metro .navigation-bar-content .input-control.checkbox, .metro .navbar-content .input-control.checkbox, .metro .navigation-bar-content .input-control.radio, .metro .navbar-content .input-control.radio {
  position: relative;
  margin: 0;
  top: -6px;
}

.metro .navigation-bar-content .button, .metro .navbar-content .button, .metro .navigation-bar-content .image-button, .metro .navbar-content .image-button {
  background-color: transparent;
}

.metro .navigation-bar-content .button, .metro .navbar-content .button {
  margin-top: -14px;
  background-color: inherit;
}

.metro .navigation-bar-content .image-button, .metro .navbar-content .image-button {
  padding-right: 40px;
  padding-left: 5px;
  background-color: inherit;
}

.metro .navigation-bar-content .image-button:active, .metro .navbar-content .image-button:active {
  left: auto;
  right: auto;
  top: auto;
}

.metro .navigation-bar-content .image-button img, .metro .navbar-content .image-button img {
  width: 40px;
  height: 40px;
  margin-top: 2.5px;
}

.metro .navigation-bar-content .image-button.image-left, .metro .navbar-content .image-button.image-left {
  padding-right: 5px;
  padding-left: 40px;
}

.metro .navigation-bar-content [class*=icon-], .metro .navbar-content [class*=icon-] {
  font-size: 16px !important;
}

.metro .input-element, .metro .element-input {
  padding-bottom: 0 !important;
}

.metro .input-element:hover, .metro .element-input:hover {
  background-color: inherit !important;
}

.metro .navigation-bar .element-menu, .metro .navbar .element-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  color: inherit;
}

.metro .navigation-bar .element-menu > li, .metro .navbar .element-menu > li {
  display: block;
  float: left;
  position: relative;
  color: inherit;
}

.metro .navigation-bar .element-menu > li > a, .metro .navbar .element-menu > li > a {
  display: block;
  float: left;
  width: 100%;
  padding: 15px;
  line-height: 15px;
  color: inherit;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.metro .navigation-bar .element-menu > li > a.dropdown-toggle, .metro .navbar .element-menu > li > a.dropdown-toggle {
  color: inherit;
  position: relative;
}

.metro .navigation-bar .element-menu > li > a.dropdown-toggle:after, .metro .navbar .element-menu > li > a.dropdown-toggle:after {
  position: absolute;
  left: 100%;
  margin-left: -20px;
  top: 50%;
  margin-top: -16px;
}

.metro .navigation-bar .element-menu > li > .dropdown-menu, .metro .navbar .element-menu > li > .dropdown-menu {
  top: 100%;
  left: 0;
}

.metro .navigation-bar .element-menu > li > .dropdown-menu.place-right, .metro .navbar .element-menu > li > .dropdown-menu.place-right {
  right: 0;
  left: auto;
}

.metro .navigation-bar .element-menu > li > .dropdown-menu .dropdown-menu, .metro .navbar .element-menu > li > .dropdown-menu .dropdown-menu {
  border: 0 !important;
}

.metro .navigation-bar .pull-menu, .metro .navbar .pull-menu {
  display: none;
  float: right !important;
  color: #fff;
  cursor: pointer;
  font: 1.8em sans-serif;
  position: absolute;
  top: 0;
  right: 0;
  height: 45px;
  width: 40px;
  line-height: 20px;
  margin: 0;
}

.metro .navigation-bar .pull-menu:before, .metro .navbar .pull-menu:before {
  content: "≡";
  position: absolute;
  font-size: 20pt;
  top: 10px;
  left: 10px;
}

.metro .navigation-bar .pull-menu input[type=checkbox], .metro .navbar .pull-menu input[type=checkbox] {
  width: 0;
  height: 0;
  opacity: 0;
}

.metro .navigation-bar-content:before, .metro .navbar-content:before, .metro .navigation-bar-content:after, .metro .navbar-content:after {
  display: table;
  content: "";
}

.metro .navigation-bar-content:after, .metro .navbar-content:after {
  clear: both;
}

.metro .navigation-bar.fixed-top, .metro .navbar.fixed-top, .metro .navigation-bar.fixed-bottom, .metro .navbar.fixed-bottom {
  position: fixed;
  z-index: 10000;
  left: 0;
}

.metro .navigation-bar.fixed-top, .metro .navbar.fixed-top {
  top: 0;
  bottom: auto;
}

.metro .navigation-bar.fixed-bottom, .metro .navbar.fixed-bottom {
  bottom: 0;
  top: auto;
}

.metro .navigation-bar.dark {
  background-color: #333;
}

.metro .navigation-bar.dark .element-menu > li > a {
  color: #fff;
}

.metro .navigation-bar.dark .element:hover, .metro .navigation-bar.dark .element-menu > li:hover {
  background-color: #201a1a;
}

.metro .navigation-bar.light {
  background-color: #eee;
  color: #555;
}

.metro .navigation-bar.light .element:hover, .metro .navigation-bar.light .element-menu > li:hover {
  background-color: #999;
  color: #fff;
}

.metro .navigation-bar.light .pull-menu {
  color: #1d1d1d;
}

.metro .navigation-bar.white {
  background-color: #fff;
  color: #555;
}

.metro .navigation-bar.white .element:hover, .metro .navigation-bar.white .element-menu > li:hover {
  background-color: #00aff0;
  color: #fff;
}

.metro .navigation-bar.white .pull-menu {
  color: #1d1d1d;
}

.metro #tile .small-size {
  width: 80px;
  height: 80px;
  margin: 0 5px 5px 0;
}

.metro #tile .meduim-size {
  width: 120px;
  height: 120px;
  margin: 0 10px 10px 0;
}

.metro #tile .large-size {
  width: 150px;
  height: 150px;
  margin: 0 15px 15px 0;
}

.metro .tile-area {
  position: relative;
  padding: 120px 80px 0 80px;
  overflow: hidden;
}

.metro .tile-area .tile-area-title {
  position: fixed;
  top: 20px;
  left: 80px;
}

.metro .tile-area .user-id {
  position: fixed;
  right: 40px;
  top: 40px;
  display: inline-block;
  padding: 8px;
  background-color: transparent;
  width: auto;
  color: #fff;
  cursor: default;
}

.metro .tile-area .user-id .user-id-image {
  width: 40px;
  height: 40px;
  float: right;
  margin-left: 10px;
  color: inherit;
  background-color: #464646;
  text-align: center;
  vertical-align: middle;
}

.metro .tile-area .user-id .user-id-image img, .metro .tile-area .user-id .user-id-image [class*=icon-] {
  color: inherit;
  font-size: 16pt;
  line-height: 16pt;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

.metro .tile-area .user-id .user-id-image [class*=icon-] {
  padding: 10px;
}

.metro .tile-area .user-id .user-id-name {
  float: right;
  text-align: right;
  margin: 0;
  padding: 0;
}

.metro .tile-area .user-id .user-id-name .first-name, .metro .tile-area .user-id .user-id-name .last-name {
  display: block;
  color: inherit;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  line-height: 12pt;
}

.metro .tile-area .user-id .user-id-name .first-name {
  font-size: 20pt;
  line-height: 20pt;
}

.metro .tile-area .user-id .user-id-name .last-name {
  font-size: 12pt;
}

.metro .tile-area .user-id:hover {
  background-color: #404040;
}

.metro .tile-area-dark {
  min-width: 100%;
  height: 100%;
  background-color: #1d1d1d !important;
}

.metro .tile-area-dark .tile {
  outline-color: #373737 !important;
}

.metro .tile-area-dark:before, .metro .tile-area-dark:after {
  display: table;
  content: "";
}

.metro .tile-area-dark:after {
  clear: both;
}

.metro .tile-area-darkBrown {
  min-width: 100%;
  height: 100%;
  background-color: #63362f !important;
}

.metro .tile-area-darkBrown .tile {
  outline-color: #86493f !important;
}

.metro .tile-area-darkBrown:before, .metro .tile-area-darkBrown:after {
  display: table;
  content: "";
}

.metro .tile-area-darkBrown:after {
  clear: both;
}

.metro .tile-area-darkCrimson {
  min-width: 100%;
  height: 100%;
  background-color: #640024 !important;
}

.metro .tile-area-darkCrimson .tile {
  outline-color: #970036 !important;
}

.metro .tile-area-darkCrimson:before, .metro .tile-area-darkCrimson:after {
  display: table;
  content: "";
}

.metro .tile-area-darkCrimson:after {
  clear: both;
}

.metro .tile-area-darkViolet {
  min-width: 100%;
  height: 100%;
  background-color: #57169a !important;
}

.metro .tile-area-darkViolet .tile {
  outline-color: #701cc7 !important;
}

.metro .tile-area-darkViolet:before, .metro .tile-area-darkViolet:after {
  display: table;
  content: "";
}

.metro .tile-area-darkViolet:after {
  clear: both;
}

.metro .tile-area-darkMagenta {
  min-width: 100%;
  height: 100%;
  background-color: #81003c !important;
}

.metro .tile-area-darkMagenta .tile {
  outline-color: #b40054 !important;
}

.metro .tile-area-darkMagenta:before, .metro .tile-area-darkMagenta:after {
  display: table;
  content: "";
}

.metro .tile-area-darkMagenta:after {
  clear: both;
}

.metro .tile-area-darkCyan {
  min-width: 100%;
  height: 100%;
  background-color: #1b6eae !important;
}

.metro .tile-area-darkCyan .tile {
  outline-color: #228ada !important;
}

.metro .tile-area-darkCyan:before, .metro .tile-area-darkCyan:after {
  display: table;
  content: "";
}

.metro .tile-area-darkCyan:after {
  clear: both;
}

.metro .tile-area-darkCobalt {
  min-width: 100%;
  height: 100%;
  background-color: #00356a !important;
}

.metro .tile-area-darkCobalt .tile {
  outline-color: #004e9d !important;
}

.metro .tile-area-darkCobalt:before, .metro .tile-area-darkCobalt:after {
  display: table;
  content: "";
}

.metro .tile-area-darkCobalt:after {
  clear: both;
}

.metro .tile-area-darkTeal {
  min-width: 100%;
  height: 100%;
  background-color: #004050 !important;
}

.metro .tile-area-darkTeal .tile {
  outline-color: #006983 !important;
}

.metro .tile-area-darkTeal:before, .metro .tile-area-darkTeal:after {
  display: table;
  content: "";
}

.metro .tile-area-darkTeal:after {
  clear: both;
}

.metro .tile-area-darkEmerald {
  min-width: 100%;
  height: 100%;
  background-color: #003e00 !important;
}

.metro .tile-area-darkEmerald .tile {
  outline-color: #007100 !important;
}

.metro .tile-area-darkEmerald:before, .metro .tile-area-darkEmerald:after {
  display: table;
  content: "";
}

.metro .tile-area-darkEmerald:after {
  clear: both;
}

.metro .tile-area-darkGreen {
  min-width: 100%;
  height: 100%;
  background-color: #128023 !important;
}

.metro .tile-area-darkGreen .tile {
  outline-color: #18ad2f !important;
}

.metro .tile-area-darkGreen:before, .metro .tile-area-darkGreen:after {
  display: table;
  content: "";
}

.metro .tile-area-darkGreen:after {
  clear: both;
}

.metro .tile-area-darkOrange {
  min-width: 100%;
  height: 100%;
  background-color: #bf5a15 !important;
}

.metro .tile-area-darkOrange .tile {
  outline-color: #e77120 !important;
}

.metro .tile-area-darkOrange:before, .metro .tile-area-darkOrange:after {
  display: table;
  content: "";
}

.metro .tile-area-darkOrange:after {
  clear: both;
}

.metro .tile-area-darkRed {
  min-width: 100%;
  height: 100%;
  background-color: #9a1616 !important;
}

.metro .tile-area-darkRed .tile {
  outline-color: #c71c1c !important;
}

.metro .tile-area-darkRed:before, .metro .tile-area-darkRed:after {
  display: table;
  content: "";
}

.metro .tile-area-darkRed:after {
  clear: both;
}

.metro .tile-area-darkPink {
  min-width: 100%;
  height: 100%;
  background-color: #9a165a !important;
}

.metro .tile-area-darkPink .tile {
  outline-color: #c71c74 !important;
}

.metro .tile-area-darkPink:before, .metro .tile-area-darkPink:after {
  display: table;
  content: "";
}

.metro .tile-area-darkPink:after {
  clear: both;
}

.metro .tile-area-darkIndigo {
  min-width: 100%;
  height: 100%;
  background-color: #4b0096 !important;
}

.metro .tile-area-darkIndigo .tile {
  outline-color: #6400c9 !important;
}

.metro .tile-area-darkIndigo:before, .metro .tile-area-darkIndigo:after {
  display: table;
  content: "";
}

.metro .tile-area-darkIndigo:after {
  clear: both;
}

.metro .tile-area-darkBlue {
  min-width: 100%;
  height: 100%;
  background-color: #16499a !important;
}

.metro .tile-area-darkBlue .tile {
  outline-color: #1c5ec7 !important;
}

.metro .tile-area-darkBlue:before, .metro .tile-area-darkBlue:after {
  display: table;
  content: "";
}

.metro .tile-area-darkBlue:after {
  clear: both;
}

.metro .tile-area-lightBlue {
  min-width: 100%;
  height: 100%;
  background-color: #4390df !important;
}

.metro .tile-area-lightBlue .tile {
  outline-color: #6faae6 !important;
}

.metro .tile-area-lightBlue:before, .metro .tile-area-lightBlue:after {
  display: table;
  content: "";
}

.metro .tile-area-lightBlue:after {
  clear: both;
}

.metro .tile-area-lightTeal {
  min-width: 100%;
  height: 100%;
  background-color: #45fffd !important;
}

.metro .tile-area-lightTeal .tile {
  outline-color: #78fffd !important;
}

.metro .tile-area-lightTeal:before, .metro .tile-area-lightTeal:after {
  display: table;
  content: "";
}

.metro .tile-area-lightTeal:after {
  clear: both;
}

.metro .tile-area-lightOlive {
  min-width: 100%;
  height: 100%;
  background-color: #78aa1c !important;
}

.metro .tile-area-lightOlive .tile {
  outline-color: #97d623 !important;
}

.metro .tile-area-lightOlive:before, .metro .tile-area-lightOlive:after {
  display: table;
  content: "";
}

.metro .tile-area-lightOlive:after {
  clear: both;
}

.metro .tile-area-lightOrange {
  min-width: 100%;
  height: 100%;
  background-color: #c29008 !important;
}

.metro .tile-area-lightOrange .tile {
  outline-color: #f3b40a !important;
}

.metro .tile-area-lightOrange:before, .metro .tile-area-lightOrange:after {
  display: table;
  content: "";
}

.metro .tile-area-lightOrange:after {
  clear: both;
}

.metro .tile-area-lightPink {
  min-width: 100%;
  height: 100%;
  background-color: #f472d0 !important;
}

.metro .tile-area-lightPink .tile {
  outline-color: #f8a1e0 !important;
}

.metro .tile-area-lightPink:before, .metro .tile-area-lightPink:after {
  display: table;
  content: "";
}

.metro .tile-area-lightPink:after {
  clear: both;
}

.metro .tile-area-grayed {
  min-width: 100%;
  height: 100%;
  background-color: #585858 !important;
}

.metro .tile-area-grayed .tile {
  outline-color: #727272 !important;
}

.metro .tile-area-grayed:before, .metro .tile-area-grayed:after {
  display: table;
  content: "";
}

.metro .tile-area-grayed:after {
  clear: both;
}

.metro .tile-group {
  margin-right: 46px;
  width: 130px;
  float: left;
  display: block;
  padding-top: 40px;
  position: relative;
}

.metro .tile-group.two, .metro .tile-group.double {
  width: 260px;
}

.metro .tile-group.three, .metro .tile-group.triple {
  width: 390px;
}

.metro .tile-group.four, .metro .tile-group.quadro {
  width: 520px;
}

.metro .tile-group.five {
  width: 650px;
}

.metro .tile-group.six {
  width: 780px;
}

.metro .tile-group.seven {
  width: 910px;
}

.metro .tile-group:first-child {
  margin-left: 80px;
}

.metro .tile-group {
  color: #fff;
}

.metro .tile-group .tile-group-title {
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 20px;
  position: absolute;
  top: 10px;
  left: 0;
  color: inherit;
}

.metro .tile {
  position: relative;
  overflow: hidden;
  display: block;
  float: left;
  margin: 0 10px 10px 0;
  padding: 0;
  cursor: pointer;
  background-color: #eee;
  box-shadow: inset 0 0 1px #ffc;
}

.metro .tile:hover {
  outline: #999 solid 3px;
}

.metro .tile:active {
  outline: 0;
}

.metro .tile.no-outline {
  outline-color: transparent;
}

.metro .tile {
  width: 120px;
  height: 120px;
  margin: 0 10px 10px 0;
}

.metro .tile.half {
  width: 55px;
  height: 55px;
}

.metro .tile.double {
  width: 250px;
}

.metro .tile.double-vertical {
  height: 250px;
}

.metro .tile.triple {
  width: 380px;
}

.metro .tile.triple-vertical {
  height: 380px;
}

.metro .tile.quadro {
  width: 510px;
}

.metro .tile.quadro-vertical {
  height: 510px;
}

.metro .tile.selected {
  border: 4px #4390df solid;
}

.metro .tile.selected:after {
  position: absolute;
  display: block;
  border-top: 28px solid #4390df;
  border-left: 28px solid transparent;
  right: 0;
  content: "";
  top: 0;
  z-index: 101;
}

.metro .tile.selected:before {
  position: absolute;
  display: block;
  content: "\e08a";
  color: #fff;
  right: 0;
  font-family: iconFont;
  font-size: 9pt;
  font-weight: normal;
  z-index: 102;
  top: 0;
}

.metro .tile .tile-content {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

.metro .tile .tile-content.padded {
  padding: 10px;
}

.metro .tile .tile-content.image {
  width: 100%;
  min-height: 100%;
  max-height: 100%;
}

.metro .tile .tile-content.icon [class*=icon-], .metro .tile .tile-content.icon img {
  line-height: 56px;
  height: 56px;
  width: 56px;
  position: relative;
  font-size: 48px;
  color: #fff;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -28px;
  margin-left: -28px;
}

.metro .tile .tile-content.image-set img {
  margin: 0;
  padding: 0;
  width: 25% !important;
  height: 50%;
  float: left;
  border: 1px #1e1e1e solid;
}

.metro .tile .tile-content.image-set img:first-child {
  width: 50% !important;
  float: left;
  height: 100%;
}

.metro .tile .tile-content {
  display: none;
}

.metro .tile .tile-content:first-child {
  display: block;
}

.metro .tile .brand, .metro .tile .tile-status {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 29px;
  margin: 0;
}

.metro .tile .brand:before, .metro .tile .tile-status:before, .metro .tile .brand:after, .metro .tile .tile-status:after {
  display: table;
  content: "";
}

.metro .tile .brand:after, .metro .tile .tile-status:after {
  clear: both;
}

.metro .tile .brand.opacity, .metro .tile .tile-status.opacity {
  opacity: 0.7;
}

.metro .tile .brand .name, .metro .tile .tile-status .name, .metro .tile .brand .label, .metro .tile .tile-status .label, .metro .tile .brand .text, .metro .tile .tile-status .text {
  display: block;
  font-size: 10pt;
  margin: 5px 20px 2px 5px;
  background: transparent;
  color: #fff;
}

.metro .tile .brand .text, .metro .tile .tile-status .text {
  margin: 4px 5px;
  font-size: 8pt;
  line-height: 10pt;
}

.metro .tile .brand .badge, .metro .tile .tile-status .badge {
  position: absolute;
  bottom: 0;
  right: 10px;
  width: 29px;
  height: 29px;
  text-align: center;
  color: #fff;
  padding: 5px;
  margin: 0;
  vertical-align: middle !important;
  display: block;
  font-size: 10pt;
}

.metro .tile .brand .badge.activity, .metro .tile .tile-status .badge.activity {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGMSURBVDhPvZMtTwNBEIbv2mtScaICcQJRgSgJCQIEhqSiAlEHAlFRwU/ov0AgUEgUsrIkiJIgMOAQJFSQQAIJJBWIu95Hj2eGvXIpB3W8yWTn452Z3dld25pDmqZuFEWdcrm8jr6JK7Bt+wb9Ft85+vsXswBxHHdIfmFNi4TYG7InXAp6ss52kCTJIc6e6KzSVbrdYzrYDaSFXZU4uEQ8x3FW1ZpMJge5Tn3IdQ3kID5iw4zHTqIsUEP3TWCA7WhgDjRZg/eUFRCR3Fl3KYJjyfALIUU46jHcsSlQl8FdmQJnhrcQJFbJ6QZB0LDDMNyS4XBFo1Kp9Gw4/wi247GLHmvNuBaC47Y5gtzIQB1mBmMGdDSdTpfV+QdM8vfcsqkap6ClgQIQa+a4bXViPGRO5ILjuBqYAwk7yIfhXcNz9CljDFkkST6P4JGjnHA7d+gBxAY3tIve1Khljbi1beKvakHQp0uhfTrMjvOL9H3fX9FE8OM7yxAhdem4QWHZkSufSoTYaaVSkY9kYFmfXgyTciI3uacAAAAASUVORK5CYII%3D") 50% no-repeat;
}

.metro .tile .brand .badge.alert, .metro .tile .tile-status .badge.alert {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFeSURBVDhPpZMtT8RAEIbb7YoTJ04gkQgQuBNIEpB4LD8AwQ9AkCCQhGAvQSAuKHCIE0gEP+DEISAhQYK4pE0/eWa65a7lSvh4k8nsvDv77sxs67UhSZLNNE0LZ3uO/gLj/J+hAkVRWI1+geqMCuR5fkKZoyiKViX+DuQu094wy7KhEmEYrkAk0qt4Nk5R77GszQCuE8fxIXxY8ZJjgiBY8n3/UcTwlsQDNifGmF29AcBtITyGOyan47gXXFfW2g/q+yi+VeptJhVgR1KRHp4HZI+bzknQlhYcvpQZuHRF8xmnCDyLL8MZEI9o4YkW3h1VB+o73DJp3to08l7xsw9Lng5i1EiSSV/Pcbdwzfk8MLcNqjIyye1STnHD5joln7lYcGWtXaP8gYsFfeJyHvR9waExt3wKsV74L3Brn/geu3OUDqiL1T7nNoEK8mLi9RUoZYqlsv4pqtf459/oeR8seozS7mDHCwAAAABJRU5ErkJggg%3D%3D") 50% no-repeat;
}

.metro .tile .brand .badge.available, .metro .tile .tile-status .badge.available {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAKvSURBVHjahJA/bJR1HMY/31977x33r2LuClc1LYM9TSAUr5gqtkVJjAkSFxYHE3VgaWRw0cUwOagxMZLApoXFBIwuHVSoQYkVMBXUpqSkMW9jaS25plh7/3rv+3scTIwixs/8PHn+2Bk/SVtN2mqxacYOKw13KfNiXtlneihmDONXqs0VVs/VXP1UqJvnc8qBeZoWYWf9JHXVqWkj2EX55G76X86R4W40aDHNzMdzLBwJLLEWm6fTI+o0knvZ+dkgO/cDfGczTNpl5gjxePrpY0SPMKwKT1A5nCe7Y4ofDgQEv/Ghn2AqunZabUmR9Fb8gQoaUVIVFTSiokaV0qDu0T694Y+rGbWktnQ5+nHiuP+IjrFjR4cqevj9wBK8beO87t6jiyzbKJAiIEWSreQxjAm7QGyeAwzRzb39i/7WFbdV2bGs0nxvs7zjxtlOgRwZPP6v7R5PmhQPUOKEneFLd4UECfqs51WXU/opDL6wb/mdDfJkEfrXgUKk2UKbiM/5BoD76d7reujOANwgJH9H8p14PDnSzBGySZsSReecDIAIDxj/jxH/LcQtW7UJ0E8f69RwuP+0Ohwb1CnTS0CCW6zK3Wb9a4AnNcgWktRoYHdpYhgtWvypfRSARVv5yVXd2smGWuzTHo7qeRZZpk7zH00cRos2ITd5yT/HQY0gPKGW3u0YPvZ06HB77tO2hx5jN5HFTNk11lgHRIs2VW5Tp8kRf5g3eYUUSa5y/eKsfn7NTvlPaCjqelwDF3bx4ADAeXeJc1xijpCYmDJ9jKrCIe0H4IaF81/56VGDJTvtPwV1IFmhTO/4AOWDSQIAWmwiRIokADEx08xeXGD5hUjxQp0GnQCdOAKS1RnNP7tO7VDOMmO9bB8qUQRghVVCW7raUOPEvH45W7IidRoA/DEAmmk0pL+n6f4AAAAASUVORK5CYII%3D") 50% no-repeat;
}

.metro .tile .brand .badge.unavailable, .metro .tile .tile-status .badge.unavailable {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAKASURBVHjalJK9axxXFMV/772ZzOysVqvRDgtaSSwpJYFwY3ATEpIm5KNLawgp3Ljz/5E2bu20CYQUBoMNNnaRMkUKqYiQtIgdCQ0TaVc7M29n3nspzC7GMYYcuMWFe7jnHI4YjUY453DOYYyh0+l8opT63vO8L8MwbAshqKqq0lo/c849rqrquXMOIcSbGY1GWGsxxny0urr6MI7jH5RSAFhrAZBSLvc8z3+dTqf3lFL/SCnxAIwxwdra2tP19fXPAC4vL8myjKIoAIiiiF6vR7/fJ0mS75RSH19dXX0hpbwWx8fHrKys/JwkyV1rLYeHh5yenuKc420lzjm2trbY3d3F8zzyPH8ynU6/ERcXF3fiOP7D930ODg44OjoiDMOl7AWstZRlyXA4ZH9/H2MM4/H4K+l53n3f98myjJOTE4Ig+A95kUMURZydnXF+fo5SiiiKHkjf9z9f+AaWst+HRfKL2yiKbssgCNrOOWaz2Xs/vwulFLPZjLquCcPwDcM5x//B2/dyPp9XC3/WWoQQHyQbY2i32/i+T1VVTtZ1/QogSZJlGz/02VpLkiQAlGX5l2ya5mHTNPT7fba3tynLctnAd8llWTIYDNjY2MBaS1EUP0qt9YvJZPI7wM7ODsPhEK01WmuapqFpGrTWVFXFYDBgb28PIQTX19ev67r+TYzHY7TW3W63+zKO41sAaZqSZRk3NzcAtNtter0em5ubAEwmk7/zPP9USjkWaZoyn89xziWdTudRt9v9etGFuq4B8H1/aSXP89dFUdx1zp065xBpmlLXNUIIjDG0Wq1vPc+7H4bhnVarhRCCsiwpiuJPY8xPRVH8EgQBxhistfw7ABpxTL93U9x/AAAAAElFTkSuQmCC") 50% no-repeat;
}

.metro .tile .brand .badge.away, .metro .tile .tile-status .badge.away {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAJ2SURBVHjajJI7iFVnFIW//d9zz52ZO2fG14gzJBgbp5JYKPh+NqKxsxWMRZoBCxu1sAuBKFaClj5KDUQhRXybCIqICjqNYjFDhtExN45e7/uc8y+L/yJGp3A1+2fDWv/ea23zlQvIp0gpRgfrWbZRNrhP0cAOopEyGGSvWmQz15zq59SeuC5LsAis0MJ85SLKG8jXY3pXnKb8/X6iBAB8KLhuzZtQf/gbrWc/WTGetSgnAg9qlCiv/pNk1RYAqz3A6jeg/SyoxMtReRNKNsLAhj24gWW0726H+B3+9Rmyd3fPp5KyXMpf/SqNL5KelEIdH5Ke9Ejj8+SnjyrLWkolZbX7f/jZk5h/e3WN7197j0I/NnMMN3MYoiXgBv6/g+rQmUJDR/Ajv4BP0eylnU5u/pgK/Vj9Ee6/411y8gm5a4b1Qfwt9uYUrnoTXBGLvzvoFCXbDLDaVcjfd38WX0JBRCnUroRW/M1qRzRSxgPt55+NPRc8FJJgbtaB4rBz+phRxtcj//hylr5s4YDScvDVT0KfCw7yGpRGIYohfS2H3v4NoL6tYL3BbWwOsoHawY3y1tDJpp46p8pp5U2UrEcLD0BnCtT4bBIXyJ0J/Pwf0eAu8ELtiROO5uQtazy9LMAvPoKGDoU00n/CSr4K2RTkFfyCMRj+OWg2Ht9RNv27+X/PId8cVN+62/SvWAngqtehdq17yjmURlHfZjRvdxi98fyFr/21GWfT5ivnkQehRfSOnqV35S4KpW4w7ZB/1NNNMYf6wzukk3ulbBI1iIJkBBZX1Bn/gby621wyRrx0DcXhQGzPYOnEY/nmKbVeXLTicNcn+DAArZ4503S5ZjkAAAAASUVORK5CYII%3D") 50% no-repeat;
}

.metro .tile .brand .badge.busy, .metro .tile .tile-status .badge.busy {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAKNSURBVHjajJI9a1RBGIWfGeLdmPXuKkR0Q0RTmFsFUxgQNcaPRonpbAW1sAlY2IhFfoCIVSDaaVImFhYWmkTxAwJBVgttNqTYQFAjAWPi7t3svXeOxeC3hQdeZpiZ887DmTFuchIlCUoSTLOJ6erqV7F4QYXCaTo68hgDHz82WFmZsbXauKrVWYUhBjCNBsZNTaF6HdVqAT09tzlw4BJhyD8Vx1Au36dSuWyC4LPJMlpwDur1HH19jzh48DiAefUK8+QJVCrgHHR3o2PHUH8/HD16jkKhi7m5UwTBF9zdu6RzcxOJpFRSduOG1N4u5XJ+3LlTam2Vtm+XGxlR2mgokZTOzz90o6PgpqcPpRsbP83GSKWSFEXS/v2+okjq7JRA7vp1pZLSZlPJ5OQZqx07hrVtG+b1a+zNm7B7N4ShR/8u56CtDfbswYyNYZ8+hS1bMPv2XbUKw5MGMNPTsLEBhQJIfwco+SZJAo8f+7XOzj5LR0cegIUFb/715j/lnKerVKDZhFLJWlnrN9OU/1aW/Zha8+FDA4Dublhfh+8N/yVr4etXiCIIAvj0SZa1tRcAOnECtm6FWg2M+dtsDGxu8uMsYJaX31q7unpbcYyOHEFXrsDyMtTrv5NY683VKu7iRTQ4CBKqVm/h7twhnZ9/kEhK41ju2jWpWJTa2qRdu3zl81I+r2x4WNnamv8H5fKLZHQU48bHURwXdfjwM3p6egHs7CzMzPi0swyiCA0MoKEhj76wsOiePx/AmPfGTUwgQFI7UXSP3t5BcjmPvrnp37+19Wf65fJLlpbOK02XqNdpAaClBYJgVe/enWV9fciE4TB79x6iVPLGlRVMtfpGcTymxcUpUyr5nIBvAwDWIWcndiwtQAAAAABJRU5ErkJggg%3D%3D") 50% no-repeat;
}

.metro .tile .brand .badge.newMessage, .metro .tile .tile-status .badge.newMessage {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAC/SURBVDhP1ZE9DgIhFIQhobDYg1haWniMbSw9j0exsfMAeg9L7Sy2kPATnCFI2LgYtjJOMjx4vPkoED+X5OK934cQ+thpFOYvSqmdMMascVDOuQMcGn1GptNaL4W1dgBkMwOSw8jeBJszIKMwexFAN0A+wnQG0Lh4wv0EJIb5AO4fRX8MoDFAlZAyPJSztOSSfiYLAYeyxTcdURcIrqSUJ7iLA4UmAdQbgnqvhakqgEoQXQtTXwEtIuCa9n8pIV67VJf6AmhGmgAAAABJRU5ErkJggg%3D%3D") 50% no-repeat;
}

.metro .tile .brand .badge.paused, .metro .tile .tile-status .badge.paused {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAArSURBVDhPY/j9+7fDnz9//mPBCQxQgE8NE1QN2WDUgFEDQGDUgIE3gIEBAArtNKc4HT7sAAAAAElFTkSuQmCC") 50% no-repeat;
}

.metro .tile .brand .badge.playing, .metro .tile .tile-status .badge.playing {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEXSURBVDhPY4CBnz9/pvz+/dsFyiUaMEFpBiYmJhkgtf3v37/t////Z4GIEgZwA0CAkZGRBai5AmjIYSCtABXGC1AMQAIWf/78OQ/EEVA+ToDLAJBrBIDUcqBrZgNdwwMRxQQ4DYABoOYUoCGngYFsABVCAQQNgAINYCAf//XrVwGUDwfEGgDyEgfQkH5guGwGukoEKky8AUhA5sePH6DwAQOSDAC6YgIzM7MpJyfnHagQcQYAnfwGiD2BmguBhvyBCoMBMQbsYWFh0WVlZd0B5aMAnAYAbfzz79+/SqBmV6CtL6DCGACXAQ+ABliysbF1QPk4AYYBQI0rgH7VBWo+AxXCC+AGADV+AVKJQL9GAp0MYhMBGBgA8v5j1f90TA8AAAAASUVORK5CYII%3D") 50% no-repeat;
}

.metro .tile .brand .badge.error, .metro .tile .tile-status .badge.error {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFiSURBVDhPjVM7TsNQELRjy8ISBQeIREtBEYnQUXCINFTkCCBxgNwAJI5AaejSpaCAEqRINBTcIQ1SbD9/mHmfZP3iSIw0ytt9O7O7thMGHpqmGVZVNQnD8AwcMde27RL8rOt6nqbpjy7sA4RTpdQKv20fcbcuy/IOZrGVbIHLpz7RHr52TJCYukuMeU+6WDBjdxej4UyLubMbm0KdBDyTzHWEyY01UEVRnA4Q8IEdaZVAFEW3yD/g+IzzFc6VuTFAHAPXO7vLKQi5q+suuOD+X15yx4ToEXON1QB3B6ZkC3Qd+q8Kaxzbo0TMCTLPefPAfPS8nTeOtnk1YEfMsf11pIm+y/P8BLusmaCZrevsLE1QO3F51FzopJyCQil2pAnFoLLxI7X6z8SxkVjgeMn4H/jGQz3Ht/BrY2MC85nrsI/sjNpDKzMTSODzHPELQ9EY1H9ndFqCHxC/JEnyrgs1guAPTvwreuY0IiIAAAAASUVORK5CYII%3D") 50% no-repeat;
}

.metro .tile .brand .badge.attention, .metro .tile .tile-status .badge.attention {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEbSURBVDhPtZI9bsJAEIVZ7ANQ5gApEomChjoNBUUOkSJFivSUQE3JEThCCo4BkotcIVKKNEi2vP7hveVZrMFgKPJJo915szOzf51/Jc/zhbV2Jfc+kiR5QrLNsqzEMJJ8O0hcM1kWlWUZKtQOOo69ZGdpmn4ofB12QsI3k1BoRtP8F7Gell0GnT6rrpJ4HOfzUiU1ww7o9HepAGI2juNHyeegw7Ja3FRA9iW5jv9slSl0WqD2rEYjF7Hy68E7gCPNORpjpk44sg2CYAg969JTxVoywYIXmlyfAS77jRPDZ8PZN5j3KfiEYeh2yG07wQN5P4g/d9H9Hf5ZMkHM/QO5NbCzh6IoJgbVI/iNBdrALnY8An9X+w9rpLPbA/sADga+JgSiAAAAAElFTkSuQmCC") 50% no-repeat;
}

.metro .tile.parts > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.metro .tile.parts > ul > li {
  display: block;
  float: left;
  height: 60px;
  width: 60px;
  margin: 0;
}

.metro .tile.parts > .part {
  display: block;
  float: left;
  height: 60px;
  width: 60px;
  margin: 0;
}

.metro .tile.half .tile-content.icon [class*=icon-], .metro .tile.half .tile-content.icon img {
  line-height: 37.3333333333px;
  height: 37.3333333333px;
  width: 37.3333333333px;
  position: relative;
  font-size: 32px;
  color: #fff;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -18.6666666667px;
  margin-left: -18.6666666667px;
}

.metro .tile {
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
}

.metro .tile * {
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
}

.metro .tile.scale {
  -webkit-transform: scale(0.98);
  -moz-transform: scale(0.98);
  -ms-transform: scale(0.98);
  -o-transform: scale(0.98);
  transform: scale(0.98);
}

.metro [draggable] {
  cursor: default;
}

.metro .tile .tile-content.email {
  color: #fff;
  padding: 10px;
}

.metro .tile .tile-content.email .email-image {
  width: 64px;
  height: 64px;
  float: left;
}

.metro .tile .tile-content.email .email-image img {
  width: 100%;
  height: 100%;
}

.metro .tile .tile-content.email .email-data {
  display: block;
  color: inherit;
  margin-left: 70px;
  width: auto;
  overflow: hidden;
}

.metro .tile .tile-content.email .email-data .email-data-title, .metro .tile .tile-content.email .email-data .email-data-subtitle, .metro .tile .tile-content.email .email-data .email-data-text {
  color: inherit;
  display: block;
}

.metro .tile .tile-content.email .email-data .email-data-title {
  font-size: 14pt;
}

.metro .tile .tile-content.email .email-data .email-data-subtitle {
  font-size: 11pt;
}

.metro .tile .tile-content.email .email-data .email-data-text {
  font-size: 10pt;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.metro .carousel {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: #eee;
}

.metro .carousel .slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  padding: 0;
}

.metro .carousel .slide div.subslide {
  z-index: 2;
  position: absolute;
  top: 10px;
  left: 10px;
}

.metro .carousel .slide img.cover {
  width: 100%;
  min-height: 100%;
  z-index: 1;
  position: absolute;
  top: 0 !important;
  left: 0 !important;
}

.metro .carousel .slide:first-child {
  display: block;
}

.metro .carousel .controls {
  display: block;
  position: absolute;
  top: 50%;
  left: 15px;
  min-width: 40px;
  min-height: 40px;
  width: auto;
  height: auto;
  margin-top: -20px;
  font-size: 48pt;
  font-weight: 100;
  line-height: 30px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  opacity: 0.75;
  z-index: 100;
}

.metro .carousel .controls.right {
  left: auto;
  right: 15px;
}

.metro .carousel .controls:hover {
  opacity: 1;
}

.metro .carousel .markers {
  z-index: 100;
  margin: 0;
  padding: 0;
  display: block;
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.metro .carousel .markers > ul {
  padding-left: 0;
  list-style: none;
}

.metro .carousel .markers > ul li ul, .metro .carousel .markers > ul li ol {
  list-style: none;
  padding-left: 25px;
}

.metro .carousel .markers li {
  display: block;
  float: left;
  margin-right: 5px;
}

.metro .carousel .markers li a {
  background-color: #fff;
  display: block;
  float: left;
  border: 1px #fff solid;
}

.metro .carousel .markers li.active a {
  background-color: #f0a30a;
}

.metro .carousel .markers.default > ul > li > a {
  width: 32px;
  height: 6px;
}

.metro .carousel .markers.cycle > ul > li > a {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.metro .carousel .markers.square > ul > li > a {
  width: 24px;
  height: 24px;
}

.metro .rating {
  color: #2784a7;
  cursor: pointer;
  display: block;
  width: auto;
  margin: 0 10px 10px 0;
  height: 24px;
}

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

.metro .rating:after {
  clear: both;
}

.metro .rating ul {
  list-style: none;
  color: inherit;
  display: block;
  margin: 0;
  padding: 0;
  margin-bottom: 5px;
}

.metro .rating ul:before, .metro .rating ul:after {
  display: table;
  content: "";
}

.metro .rating ul:after {
  clear: both;
}

.metro .rating ul li {
  display: block;
  float: left;
  position: relative;
  font-family: iconFont;
  font-size: 24px;
  line-height: 24px;
  color: inherit;
}

.metro .rating ul li:before {
  content: "\e07c";
}

.metro .rating ul li.rated:before {
  content: "\e07e";
}

.metro .rating ul li.rated.half:before {
  content: "\e07d";
}

.metro .rating ul li.half:before {
  content: "\e07d";
}

.metro .rating .score-hint {
  display: block;
  font-size: 12px;
  color: #1d1d1d;
}

.metro .rating.active ul:hover > li:before {
  content: "\e07e";
}

.metro .rating.active ul li:hover ~ li:before {
  content: "\e07c" !important;
}

.metro .rating.active ul li:hover:before {
  content: "\e07e" !important;
}

.metro .rating.small li {
  font-size: 16px;
  line-height: 16px;
}

.metro .rating.small .score-hint {
  margin-top: -5px;
  font-size: 10px;
}

.metro .rating.large li {
  font-size: 36px;
}

.metro .rating.large .score-hint {
  margin-top: 10px;
  font-size: 16px;
}

.metro .pagination {
  width: auto;
  margin-bottom: 10px;
}

.metro .pagination > ul {
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.metro .pagination > ul li ul, .metro .pagination > ul li ol {
  list-style: none;
  padding-left: 25px;
}

.metro .pagination > ul:before, .metro .pagination > ul:after {
  display: table;
  content: "";
}

.metro .pagination > ul:after {
  clear: both;
}

.metro .pagination > ul li {
  display: block;
  float: left;
  margin-right: 1px;
  position: relative;
}

.metro .pagination > ul li a {
  padding: 4px 12px;
  text-align: center;
  vertical-align: middle !important;
  background-color: #d9d9d9;
  border: 1px transparent solid;
  color: #222;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  outline: 0;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
  color: inherit;
  display: block;
  float: left;
  margin-right: 1px;
}

.metro .pagination > ul li a.default {
  background-color: #008287;
  color: #fff;
}

.metro .pagination > ul li a:focus {
  outline: 0;
  border: 1px #353535 dotted;
}

.metro .pagination > ul li a:disabled, .metro .pagination > ul li a.disabled {
  background-color: #eaeaea !important;
  color: #bebebe !important;
  cursor: not-allowed !important;
}

.metro .pagination > ul li a * {
  color: inherit;
}

.metro .pagination > ul li a *:hover {
  color: inherit;
}

.metro .pagination > ul li a.primary {
  background-color: #16499a !important;
  color: #fff !important;
}

.metro .pagination > ul li a.info {
  background-color: #4390df !important;
  color: #fff !important;
}

.metro .pagination > ul li a.success {
  background-color: #60a917 !important;
  color: #fff !important;
}

.metro .pagination > ul li a.warning {
  background-color: #fa6800 !important;
  color: #fff !important;
}

.metro .pagination > ul li a.danger {
  background-color: #9a1616 !important;
  color: #fff !important;
}

.metro .pagination > ul li a.inverse {
  background-color: #1d1d1d !important;
  color: #fff !important;
}

.metro .pagination > ul li a.link {
  background-color: transparent !important;
  color: #2e92cf !important;
}

.metro .pagination > ul li a.link:hover {
  text-decoration: underline;
}

.metro .pagination > ul li a.link:disabled, .metro .pagination > ul li a.link.disabled {
  background-color: transparent !important;
  color: #bebebe !important;
  cursor: not-allowed !important;
}

.metro .pagination > ul li a.link [class*=icon-] {
  text-decoration: none !important;
}

.metro .pagination > ul li a:active {
  background-color: #1d1d1d !important;
  color: #fff !important;
  border-color: transparent;
}

.metro .pagination > ul li a.large {
  padding: 11px 19px;
  font-size: 17.5px;
}

.metro .pagination > ul li a.small {
  padding: 2px 10px;
  font-size: 11.9px;
}

.metro .pagination > ul li a.mini {
  padding: 0 6px;
  font-size: 10.5px;
}

.metro .pagination > ul li.active a {
  background-color: #4390df;
  color: #fff;
}

.metro .pagination > ul li.disabled a, .metro .pagination > ul li.spaces a {
  background-color: #f2f2f2;
  color: #1e1e1e;
  cursor: not-allowed;
}

.metro .pagination > ul li.disabled a:active, .metro .pagination > ul li.spaces a:active {
  top: 0;
  left: 0;
}

.metro .pagination > ul li.disabled a {
  color: #1e1e1e;
}

.metro .pagination > ul li.spaces a {
  background-color: #fff;
  cursor: default;
}

.metro .pagination.small ul li a {
  padding: 2px 10px;
  font-size: 11.9px;
}

.metro .pagination.mini ul li a {
  padding: 0 6px;
  font-size: 10.5px;
}

.metro .countdown, .metro .times {
  width: auto;
  margin: 0 auto;
  font: 20px/1.5 "Open Sans Condensed", sans-serif;
  text-align: center;
  letter-spacing: -3px;
}

.metro .countdown .digit-wrapper, .metro .times .digit-wrapper {
  display: inline-block;
  height: 1.6em;
  overflow: hidden;
  position: relative;
  width: 1.05em;
}

.metro .countdown .digit-wrapper .digit, .metro .times .digit-wrapper .digit {
  position: absolute;
  display: block;
  width: 1em;
  text-align: center;
  vertical-align: middle;
  letter-spacing: -1px;
}

.metro .countdown .digit-wrapper .digit.stop, .metro .times .digit-wrapper .digit.stop {
  background-color: #e51400;
}

.metro .countdown .divider, .metro .times .divider {
  display: inline-block;
  width: 16px;
  height: 1.5em;
  position: relative;
  font-weight: bold;
}

.metro .countdown .divider:before, .metro .times .divider:before {
  width: 100%;
  height: 1.5em;
  position: absolute;
  content: ":";
  color: inherit;
  font-size: inherit;
  vertical-align: middle;
  text-align: center;
  left: -20%;
  top: -15%;
}

.metro .countdown.inverse .digit, .metro .times.inverse .digit {
  color: #333 !important;
  background-color: #eee !important;
}

.metro .tab-control .tabs {
  padding-left: 0;
  list-style: none;
  margin: 0 !important;
  z-index: 2;
}

.metro .tab-control .tabs li ul, .metro .tab-control .tabs li ol {
  list-style: none;
  padding-left: 25px;
}

.metro .tab-control .tabs:before, .metro .tab-control .tabs:after {
  display: table;
  content: "";
}

.metro .tab-control .tabs:after {
  clear: both;
}

.metro .tab-control .tabs > li {
  background-color: #fff;
  display: block;
  float: left;
  margin-left: 5px;
  position: relative;
}

.metro .tab-control .tabs > li > a {
  border: 1px #eee solid;
  display: block;
  float: left;
  padding: 5px 10px;
  z-index: 10;
  top: 0;
  left: 0;
  color: inherit;
  background-color: #eee;
}

.metro .tab-control .tabs > li.active a {
  border-bottom-color: #fff;
  background-color: #fff;
  border-top: 2px #e51400 solid;
}

.metro .tab-control .tabs > li.active:hover a {
  background-color: #fff;
  color: #1d1d1d;
}

.metro .tab-control .tabs > li:hover a {
  background-color: #d5d5d5;
  color: #fff;
}

.metro .tab-control .tabs > li.place-right {
  float: right;
  margin-right: 5px;
  margin-left: auto;
}

.metro .tab-control .tabs.no-spaces > li {
  margin-left: 0;
}

.metro .tab-control .frames {
  z-index: 1;
  border: 1px #eee solid;
  margin-top: -1px;
}

.metro .tab-control .frames .frame {
  display: none;
}

.metro .tab-control .frames .frame:first-child {
  display: block;
}

.metro .tab-control .frame {
  padding: 20px;
}

.metro .progress-bar {
  display: block;
  position: relative;
  height: 10px;
  width: 100%;
  margin-bottom: 10px;
  background-color: #eee;
}

.metro .progress-bar:before, .metro .progress-bar:after {
  display: table;
  content: "";
}

.metro .progress-bar:after {
  clear: both;
}

.metro .progress-bar .bar {
  position: relative;
  display: block;
  float: left;
  width: 0;
  background-color: #1ba1e2;
  height: 100%;
}

.metro .progress-bar.small {
  height: 5px;
}

.metro .progress-bar.large {
  height: 15px;
}

.metro .sidebar {
  margin: 0;
  padding: 0;
  background-color: #3d3d3d;
  width: 100%;
  height: 100%;
}

.metro .sidebar > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.metro .sidebar > ul li {
  display: block;
  border: 0;
  border-bottom: 1px #5c5c5c solid;
  position: relative;
}

.metro .sidebar > ul li.title {
  padding: 20px 20px 10px 20px;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.6);
  font-size: 2.2rem;
  line-height: 2.2rem;
  color: #fff;
}

.metro .sidebar > ul li a {
  display: block;
  position: relative;
  padding: 10px 20px;
  text-decoration: none;
  color: #eee;
  background-color: #3d3d3d;
}

.metro .sidebar > ul li a:hover {
  background-color: #262626;
  color: #fff;
}

.metro .sidebar > ul li a.dropdown-toggle:after {
  right: 10px;
  bottom: 5px;
}

.metro .sidebar > ul li a [class*=icon-] {
  margin-right: 15px;
}

.metro .sidebar > ul li.stick {
  position: relative;
}

.metro .sidebar > ul li.stick:before {
  content: "";
  position: absolute;
  width: 7px;
  height: 40px;
  left: -7px;
  text-indent: -9999px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color: inherit;
}

.metro .sidebar > ul li.disabled a {
  background-color: #8a8a8a;
  cursor: default;
  color: #555;
}

.metro .sidebar > ul li.active a {
  background-color: #9a1616;
  color: #fff;
}

.metro .sidebar > ul ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  display: none;
  z-index: 1000;
  background: #fff;
  min-width: 220px;
  width: auto;
  border: 1px solid #dcddde;
  box-shadow: none;
  position: relative !important;
  background-color: #e5e5e5;
  min-width: 100%;
}

.metro .sidebar > ul ul li {
  display: block;
  margin: 10px 0;
  padding: 0;
  vertical-align: baseline;
  position: relative;
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
}

.metro .sidebar > ul ul li a {
  display: block;
  text-decoration: none;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.6);
  line-height: 2.2rem;
  font-size: 2.2rem;
  color: inherit;
}

.metro .sidebar > ul ul li.title {
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000;
  letter-spacing: 0em;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;
  font-size: 4rem;
  margin-bottom: 20px;
}

.metro .sidebar > ul ul.compact a {
  font-weight: normal;
  font-size: 10.5pt;
  line-height: 12pt;
  color: inherit;
}

.metro .sidebar > ul ul.compact li.title {
  margin-bottom: 10px;
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: 0.02em;
}

.metro .sidebar > ul ul ul.secondary {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: 15px;
}

.metro .sidebar > ul ul ul.secondary li a {
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: 0.02em;
  font-weight: normal;
  font-style: normal;
  line-height: 1.4rem;
  color: inherit;
}

.metro .sidebar > ul ul.shadow {
  box-shadow: 3px 3px 0 rgba(236, 236, 236, 0.7);
}

.metro .sidebar > ul ul li {
  margin: 5px 0 0;
  width: 100%;
  border: 1px transparent solid;
}

.metro .sidebar > ul ul li:last-child {
  margin-bottom: 5px;
}

.metro .sidebar > ul ul li.disabled, .metro .sidebar > ul ul li.disabled:hover {
  cursor: default !important;
  background: transparent !important;
  color: #eee;
}

.metro .sidebar > ul ul li.disabled a, .metro .sidebar > ul ul li.disabled:hover a {
  color: inherit;
  cursor: inherit;
  background: inherit;
}

.metro .sidebar > ul ul a {
  padding: 8px 32px !important;
  color: inherit;
  font-size: 15px !important;
  line-height: 14px !important;
  cursor: pointer;
}

.metro .sidebar > ul ul li:hover {
  background: #edf4fc;
  border-color: #a8d2fd;
}

.metro .sidebar > ul ul li.checked a:before, .metro .sidebar > ul ul li.checked-partial a:before {
  position: absolute;
  left: 10px;
  content: "\e0a6";
  font-family: iconFont;
}

.metro .sidebar > ul ul li.checked-partial a:before {
  content: "\e0a8";
}

.metro .sidebar > ul ul.place-right {
  right: -15px;
  left: auto;
}

.metro .sidebar > ul ul .divider {
  padding: 0;
  height: 1px;
  margin: 9px 1px;
  overflow: hidden;
  background-color: #e5e5e5;
  border-width: 0;
}

.metro .sidebar > ul ul .divider:hover {
  background: #e5e5e5;
}

.metro .sidebar > ul ul.open {
  display: block !important;
}

.metro .sidebar > ul ul .dropdown-menu {
  left: 100%;
  top: -10%;
}

.metro .sidebar > ul ul > li:hover > .dropdown-menu[data-show=hover] {
  display: block;
}

.metro .sidebar > ul ul > li > a.dropdown-toggle:after {
  font-family: iconFont;
  font-size: 0.7em;
  content: "\e1b3";
  left: 85%;
  top: 0.85em;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.metro .sidebar > ul ul.drop-left {
  left: -100%;
}

.metro .sidebar > ul ul.drop-up {
  top: auto;
  bottom: 0;
}

.metro .sidebar > ul ul .menu-title {
  background-color: #f6f7f8;
  font-size: 12px;
  font-weight: bold;
  line-height: 14px;
  padding: 4px 8px;
  border: 0;
  border-bottom: 1px #dcddde solid;
  border-top: 1px #dcddde solid;
  color: #646464;
}

.metro .sidebar > ul ul .menu-title:first-child {
  margin: 0;
  border-top-width: 0;
}

.metro .sidebar > ul ul .menu-title:first-child:hover {
  border-top-width: 0;
}

.metro .sidebar > ul ul .menu-title:hover {
  background-color: #f6f7f8;
  cursor: default;
  border: 0;
  border-bottom: 1px #dcddde solid;
  border-top: 1px #dcddde solid;
}

.metro .sidebar > ul ul.inverse {
  border: 2px #3b3b3b solid;
}

.metro .sidebar > ul ul.inverse li {
  border: 0;
}

.metro .sidebar > ul ul.inverse li a {
  padding: 9px 32px !important;
}

.metro .sidebar > ul ul.inverse li:hover {
  border: 0;
  background-color: #e5e5e5;
}

.metro .sidebar > ul ul.inverse .menu-title:hover {
  background-color: #f6f7f8;
}

.metro .sidebar > ul ul.inverse .divider {
  margin-left: 0;
  margin-right: 0;
}

.metro .sidebar > ul ul.dark {
  background-color: #333;
  border: 2px #333 solid;
  color: #fff;
}

.metro .sidebar > ul ul.dark.opacity {
  background-color: rgba(61, 61, 61, 0.9);
}

.metro .sidebar > ul ul.dark li {
  border: 0;
  color: inherit;
}

.metro .sidebar > ul ul.dark li a {
  padding: 9px 32px !important;
  color: inherit;
}

.metro .sidebar > ul ul.dark li.disabled, .metro .sidebar > ul ul.dark li.disabled:hover {
  cursor: default !important;
  background: transparent !important;
  color: #555;
}

.metro .sidebar > ul ul.dark li.disabled a, .metro .sidebar > ul ul.dark li.disabled:hover a {
  color: inherit;
  cursor: inherit;
  background: inherit;
}

.metro .sidebar > ul ul.dark li:hover {
  border: 0;
  background-color: #201a1a;
  color: #fff;
}

.metro .sidebar > ul ul.dark .menu-title {
  background-color: #3b3b3b;
}

.metro .sidebar > ul ul.dark .menu-title:hover {
  background-color: #3b3b3b;
}

.metro .sidebar > ul ul.dark .divider {
  margin-left: 0;
  margin-right: 0;
  background-color: #555;
}

.metro .sidebar > ul ul.dark .divider:hover {
  background: #555;
}

.metro .sidebar > ul ul li {
  border: 0;
}

.metro .sidebar > ul ul li a {
  background-color: #e5e5e5;
}

.metro .sidebar > ul ul li.divider {
  background-color: #c2c2c2;
}

.metro .sidebar > ul ul li.divider:hover {
  background-color: #c2c2c2;
}

.metro .sidebar > ul ul li.disabled a {
  color: #999;
}

.metro .sidebar > ul ul li.disabled a:hover {
  color: #999;
}

.metro .sidebar > ul ul.open {
  display: block;
}

.metro .sidebar.light {
  background-color: #fff;
  border: 1px #eaeaea solid;
}

.metro .sidebar.light li {
  border-bottom-color: #eee;
}

.metro .sidebar.light li.title {
  color: #1d1d1d;
}

.metro .sidebar.light li a {
  color: #1d1d1d;
  background-color: #fff;
}

.metro .sidebar.light li a:hover {
  background-color: #00aff0;
}

.metro .sidebar.light li ul {
  background-color: #fff;
  border: 1px transparent solid;
}

.metro .sidebar.light li .divider {
  background-color: #eee;
}

.metro .sidebar.light li .divider:hover {
  background-color: #eee;
}

.metro .sidebar.light li.disabled a {
  background-color: #fff;
  cursor: default;
  color: #999;
}

.metro .sidebar.light li.active a {
  background-color: #1ba1e2;
  color: #fff;
}

.metro .accordion > .accordion-frame {
  border: 1px #eaeaea solid;
  margin-bottom: 2px;
}

.metro .accordion > .accordion-frame > .heading {
  display: block;
  text-decoration: none;
  background-color: #eee;
  padding: 10px 20px;
  width: 100%;
  position: relative;
  color: #1d1d1d;
}

.metro .accordion > .accordion-frame > .heading [class*=icon-] {
  margin-right: 10px;
}

.metro .accordion > .accordion-frame > .content {
  padding: 10px;
}

.metro .accordion > .accordion-frame > .content {
  display: none;
}

.metro .accordion.with-marker .heading:before {
  position: absolute;
  display: block;
  left: 5px;
  top: 12px;
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-top: 7px solid transparent;
  border-bottom: 7px solid black;
}

.metro .accordion.with-marker .heading.collapsed:before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin-left: -4px;
}

.metro .calendar {
  width: 250px;
  border: 1px #eee solid;
  font-size: 10pt;
}

.metro .calendar table {
  width: 100%;
  border-collapse: collapse;
}

.metro .calendar td, .metro .calendar th {
  padding: 0;
  width: 14.28%;
}

.metro .calendar td {
  border: 1px solid;
  border-color: #e6f5fc;
}

.metro .calendar td:first-child {
  border-left: 0;
}

.metro .calendar td:last-child {
  border-right: 0;
}

.metro .calendar tr:last-child td {
  border-bottom: 0;
}

.metro .calendar .day-of-week {
  padding: 5px;
  cursor: default;
}

.metro .calendar a {
  display: block;
  padding: 5px;
}

.metro .calendar a:hover {
  background-color: #eee;
  color: #1d1d1d;
}

.metro .calendar .calendar-header {
  background-color: #1ba1e2;
  color: #fff;
}

.metro .calendar .calendar-header td, .metro .calendar .calendar-header th {
  border: 0 !important;
}

.metro .calendar .calendar-header td a, .metro .calendar .calendar-header th a {
  color: #fff;
}

.metro .calendar .calendar-header td a:hover, .metro .calendar .calendar-header th a:hover {
  background-color: #1ba1e2;
  color: #fff;
}

.metro .calendar .calendar-actions td, .metro .calendar .calendar-actions th {
  padding: 10px;
}

.metro .calendar .today a {
  background-color: #a0e857;
  color: #1d1d1d;
}

.metro .calendar .today a:hover {
  background-color: #128023;
  color: #fff;
}

.metro .calendar .day a {
  display: block;
  position: relative;
  border: 2px transparent solid;
}

.metro .calendar .day a.selected {
  border: 4px #4390df solid;
  border-width: 1px;
}

.metro .calendar .day a.selected:after {
  position: absolute;
  display: block;
  border-top: 28px solid #4390df;
  border-left: 28px solid transparent;
  right: 0;
  content: "";
  top: 0;
  z-index: 101;
}

.metro .calendar .day a.selected:before {
  position: absolute;
  display: block;
  content: "\e08a";
  color: #fff;
  right: 0;
  font-family: iconFont;
  font-size: 9pt;
  font-weight: normal;
  z-index: 102;
  top: 0;
}

.metro .calendar .day a.selected:after {
  border-top-width: 12px;
  border-left-width: 12px;
}

.metro .calendar .day a.selected:before {
  font-size: 4pt;
}

.metro .calendar .month a, .metro .calendar .year a {
  padding-top: 20px;
  padding-bottom: 20px;
}

.metro .calendar .other-day {
  display: block;
  text-align: center;
  color: #999;
}

.metro .calendar-dropdown {
  border: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.2);
}

.metro .slider {
  height: 12px;
  width: auto;
  position: relative;
  background-color: #c6c6c6;
  margin-bottom: 10px;
}

.metro .slider .marker {
  height: 12px;
  width: 12px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  z-index: 2;
}

.metro .slider .marker:focus, .metro .slider .marker:active, .metro .slider .markerhover {
  outline: 2px #e51400 solid;
}

.metro .slider .complete {
  height: 100%;
  width: auto;
  background-color: #00828b;
  z-index: 1;
  transition: background 0.3s ease;
}

.metro .slider > .hint {
  background-color: #fff;
  position: absolute;
  z-index: 3;
  border: 1px #ccc solid;
  padding: 2px 4px;
  top: -40px;
  min-width: 30px;
  text-align: center;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.2);
  display: none;
}

.metro .slider.permanent-hint > .hint {
  display: block;
}

.metro .slider.hint-bottom .hint {
  top: 100%;
  margin-top: 5px;
}

.metro .slider.vertical {
  height: 100px;
  width: 12px;
}

.metro .slider.vertical .marker {
  left: 0 !important;
}

.metro .slider.vertical .complete {
  position: absolute;
  height: auto;
  width: 100% !important;
  bottom: 0;
  left: 0;
}

.metro .slider.vertical .hint {
  left: 100%;
  margin-left: 5px;
  margin-top: 0;
}

.metro .slider.vertical.hint-left .hint {
  left: -40px;
}

.metro .slider:hover .complete {
  background-color: #219297;
}

.metro .slider:active .complete, .metro .slider:active + .marker:active .complete {
  background-color: #219297;
}

.metro .slider.place-left {
  margin-right: 20px;
}

.metro .slider.place-right {
  margin-left: 20px;
}

.metro.window-overlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0);
  z-index: 1049;
}

.metro .window {
  border: 8px #6badf6 solid;
  position: relative;
  background-color: #fff;
  min-height: 200px;
  min-width: 200px;
  border-top: 0;
}

.metro .window .caption {
  position: absolute;
  top: 0;
  height: 32px;
  width: 100%;
  background-color: #6badf6;
  cursor: default;
  z-index: 2;
  border-top: 8px #6badf6 solid;
}

.metro .window .caption .icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  margin-top: 0;
  margin-left: 0;
  margin-right: 5px;
  position: relative;
  float: left;
}

.metro .window .caption .title {
  font-size: 14px;
  margin-top: -2px;
  margin-left: 4px;
  position: relative;
  float: left;
}

.metro .window .caption .super-title {
  position: absolute;
  top: 6px;
  left: 0;
  display: block;
  width: 100%;
  text-align: center;
  z-index: 0;
}

.metro .window .content {
  position: relative;
  padding: 32px 0;
  width: auto;
  height: auto;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
}

.metro .window .caption .btn-close, .metro .window .caption .btn-min, .metro .window .caption .btn-max {
  background-color: #c75050;
  color: #fff;
  position: absolute;
  top: -8px;
  right: 0;
  width: 48px;
  height: 24px;
  min-height: 24px;
  text-align: center;
  vertical-align: middle;
  font-family: "Cambria_", "PT Serif Caption", Verdana, Arial, Helvetica, sans-serif;
  font-size: 16pt;
  font-weight: normal;
  padding: 0 0 10px 0;
  z-index: 3;
  outline: 0;
}

.metro .window .caption .btn-close:hover, .metro .window .caption .btn-min:hover, .metro .window .caption .btn-max:hover {
  background-color: #e04343;
}

.metro .window .caption .btn-close:active, .metro .window .caption .btn-min:active, .metro .window .caption .btn-max:active {
  background-color: #b01919 !important;
  top: -8px;
  right: 0;
  left: auto;
}

.metro .window .caption .btn-close:after, .metro .window .caption .btn-min:after, .metro .window .caption .btn-max:after {
  content: "×";
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -0.3em;
}

.metro .window .caption .btn-min, .metro .window .caption .btn-max {
  background-color: transparent;
  color: #000;
  right: 75px;
  width: 24px;
  padding-bottom: 10px;
  font-weight: bold;
}

.metro .window .caption .btn-min:hover, .metro .window .caption .btn-max:hover {
  background-color: #1b6eae;
  color: #fff;
}

.metro .window .caption .btn-min:hover:after, .metro .window .caption .btn-max:hover:after {
  border-color: #fff;
}

.metro .window .caption .btn-min:active, .metro .window .caption .btn-max:active {
  background-color: #1e7cc4 !important;
  color: #fff;
  top: -8px;
  right: 75px;
  left: auto;
}

.metro .window .caption .btn-min:after, .metro .window .caption .btn-max:after {
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  border: 0 #000 solid;
  border-bottom-width: 2px;
  content: " ";
  bottom: 6px;
  left: 50%;
  margin-left: -6px;
  top: auto;
}

.metro .window .caption .btn-max {
  right: 50px;
}

.metro .window .caption .btn-max:active {
  right: 50px;
}

.metro .window .caption .btn-max:after {
  height: 6px;
  border: 1px #000 solid;
  border-top-width: 2px;
}

.metro .window.inactive {
  border-color: #ebebeb;
}

.metro .window.inactive .caption {
  background-color: #ebebeb;
  border-top: 8px #ebebeb solid;
}

.metro .window.inactive .content {
  border-color: #ebebeb;
}

.metro .window.inactive .btn-close {
  background-color: #bcbcbc;
}

.metro .window.flat {
  background-color: #fff;
  border: 1px #e9e9e9 solid;
}

.metro .window.flat .caption {
  height: 32px;
  background-color: #fff;
  padding: 7px 5px;
  border-bottom: 1px #e9e9e9 solid;
  border-top: 0;
}

.metro .window.flat .caption .btn-close, .metro .window.flat .caption .btn-min, .metro .window.flat .caption .btn-max {
  background-color: #fff;
  color: #777;
  width: 24px;
  top: 4px;
  right: 4px;
}

.metro .window.flat .caption .btn-close:hover, .metro .window.flat .caption .btn-min:hover, .metro .window.flat .caption .btn-max:hover {
  background-color: #cde6f7;
  color: #2a8dd4;
}

.metro .window.flat .caption .btn-close:hover:after, .metro .window.flat .caption .btn-min:hover:after, .metro .window.flat .caption .btn-max:hover:after {
  border-color: #2a8dd4;
}

.metro .window.flat .caption .btn-close:active, .metro .window.flat .caption .btn-min:active, .metro .window.flat .caption .btn-max:active {
  background-color: #92c0e0 !important;
  color: #fff !important;
}

.metro .window.flat .caption .btn-close:after, .metro .window.flat .caption .btn-min:after, .metro .window.flat .caption .btn-max:after {
  border-color: #777;
  width: 10px !important;
  height: 6px !important;
}

.metro .window.flat .caption .btn-max {
  right: 29px;
}

.metro .window.flat .caption .btn-min {
  right: 54px;
}

.metro .window.flat .caption .btn-close:after {
  margin-top: 2px;
}

.metro .window.flat .content {
  padding-top: 38px;
}

.metro .listview .list {
  border: 4px transparent solid;
  width: 300px;
  height: auto;
  position: relative;
  display: block;
  cursor: pointer;
  color: inherit;
  margin: 0 0 10px 0;
}

.metro .listview .list .list-content {
  padding: 10px;
  position: relative;
  display: block;
  color: inherit;
}

.metro .listview .list .list-content:before, .metro .listview .list .list-content:after {
  display: table;
  content: "";
}

.metro .listview .list .list-content:after {
  clear: both;
}

.metro .listview .list:hover {
  outline: 3px #ccc solid;
}

.metro .listview .list:active {
  outline: 3px #3e3e3e solid;
}

.metro .listview .list {
  border: 1px #eaeaea solid;
}

.metro .listview .list .list-content .icon {
  display: block;
  width: 56px;
  height: 56px;
  font-size: 40px;
  float: left;
  margin-right: 10px;
}

.metro .listview .list .list-content [class*=icon-].icon {
  padding: 8px;
}

.metro .listview .list .list-content .data {
  display: block;
  padding: 0;
  margin: 0;
  margin-left: 66px;
  min-width: 200px;
  position: relative;
}

.metro .listview .list .list-content .list-title, .metro .listview .list .list-content .list-remark {
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.metro .listview .list .list-content .list-title {
  font-size: 14px;
  line-height: 16px;
}

.metro .listview .list .list-content .list-remark {
  font-size: 11px;
  line-height: 12px;
}

.metro .listview .list .list-content [class*=span] {
  float: none;
}

.metro .listview .list .list-content .rating {
  color: inherit;
}

.metro .listview .list .list-content .progress-bar {
  margin: 5px 0;
}

.metro .listview.small .list-content .icon {
  display: block;
  width: 32px;
  height: 32px;
  line-height: 14px;
  font-size: 28px;
  float: left;
  margin-right: 10px;
}

.metro .listview.small .list-content [class*=icon-].icon {
  padding: 8px 0;
}

.metro .listview.small .list-content [class*=icon-].border {
  font-size: 22px;
  padding: 8px 4px;
}

.metro .listview.small .list-content .data {
  margin-left: 40px;
}

.metro .listview .list.selected {
  border: 4px #4390df solid;
}

.metro .listview .list.selected:after {
  position: absolute;
  display: block;
  border-top: 28px solid #4390df;
  border-left: 28px solid transparent;
  right: 0;
  content: "";
  top: 0;
  z-index: 101;
}

.metro .listview .list.selected:before {
  position: absolute;
  display: block;
  content: "\e08a";
  color: #fff;
  right: 0;
  font-family: iconFont;
  font-size: 9pt;
  font-weight: normal;
  z-index: 102;
  top: 0;
}

.metro .listview-outlook {
  position: relative;
  display: block;
}

.metro .listview-outlook .list {
  border: 4px transparent solid;
  width: 300px;
  height: auto;
  position: relative;
  display: block;
  cursor: pointer;
  color: inherit;
  margin: 0 0 10px 0;
}

.metro .listview-outlook .list .list-content {
  padding: 10px;
  position: relative;
  display: block;
  color: inherit;
}

.metro .listview-outlook .list .list-content:before, .metro .listview-outlook .list .list-content:after {
  display: table;
  content: "";
}

.metro .listview-outlook .list .list-content:after {
  clear: both;
}

.metro .listview-outlook .list:hover {
  outline: 3px #ccc solid;
}

.metro .listview-outlook .list:active {
  outline: 3px #3e3e3e solid;
}

.metro .listview-outlook .list {
  border: 1px #eaeaea solid;
}

.metro .listview-outlook .list .list-content .icon {
  display: block;
  width: 56px;
  height: 56px;
  font-size: 40px;
  float: left;
  margin-right: 10px;
}

.metro .listview-outlook .list .list-content [class*=icon-].icon {
  padding: 8px;
}

.metro .listview-outlook .list .list-content .data {
  display: block;
  padding: 0;
  margin: 0;
  margin-left: 66px;
  min-width: 200px;
  position: relative;
}

.metro .listview-outlook .list .list-content .list-title, .metro .listview-outlook .list .list-content .list-remark {
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.metro .listview-outlook .list .list-content .list-title {
  font-size: 14px;
  line-height: 16px;
}

.metro .listview-outlook .list .list-content .list-remark {
  font-size: 11px;
  line-height: 12px;
}

.metro .listview-outlook .list .list-content [class*=span] {
  float: none;
}

.metro .listview-outlook .list .list-content .rating {
  color: inherit;
}

.metro .listview-outlook .list .list-content .progress-bar {
  margin: 5px 0;
}

.metro .listview-outlook.small .list-content .icon {
  display: block;
  width: 32px;
  height: 32px;
  line-height: 14px;
  font-size: 28px;
  float: left;
  margin-right: 10px;
}

.metro .listview-outlook.small .list-content [class*=icon-].icon {
  padding: 8px 0;
}

.metro .listview-outlook.small .list-content [class*=icon-].border {
  font-size: 22px;
  padding: 8px 4px;
}

.metro .listview-outlook.small .list-content .data {
  margin-left: 40px;
}

.metro .listview-outlook .list.selected {
  border: 4px #4390df solid;
}

.metro .listview-outlook .list.selected:after {
  position: absolute;
  display: block;
  border-top: 28px solid #4390df;
  border-left: 28px solid transparent;
  right: 0;
  content: "";
  top: 0;
  z-index: 101;
}

.metro .listview-outlook .list.selected:before {
  position: absolute;
  display: block;
  content: "\e08a";
  color: #fff;
  right: 0;
  font-family: iconFont;
  font-size: 9pt;
  font-weight: normal;
  z-index: 102;
  top: 0;
}

.metro .listview-outlook .list {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px #e1e1e1 solid;
  padding: 2px 0;
  color: #555;
  margin-bottom: 0;
}

.metro .listview-outlook .list .list-content {
  margin: 2px 0;
  padding: 2px 20px;
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: inherit;
  border-left: 3px transparent solid;
}

.metro .listview-outlook .list .list-content .list-title, .metro .listview-outlook .list .list-content .list-subtitle, .metro .listview-outlook .list .list-content .list-remark {
  width: 100%;
  display: block;
  color: inherit;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.metro .listview-outlook .list .list-content .list-title {
  font-size: 16px;
  line-height: 20px;
}

.metro .listview-outlook .list .list-content .list-subtitle, .metro .listview-outlook .list .list-content .list-remark {
  font-size: 11px;
  font-weight: normal;
  line-height: 15px;
  color: #1d1d1d;
}

.metro .listview-outlook .list .list-content .list-subtitle {
  font-weight: bold;
  color: #0067cb;
}

.metro .listview-outlook .list.marked .list-content {
  border-left: 3px #0067b0 solid !important;
}

.metro .listview-outlook .list:active, .metro .listview-outlook .list:focus, .metro .listview-outlook .list.active {
  background-color: #cde6f7 !important;
  outline: 1px #999 dotted;
  color: #555 !important;
}

.metro .listview-outlook .list:hover {
  background-color: #e6f2fa;
  outline: 0;
}

.metro .listview-outlook .list:hover .list-content {
  border-left: 3px #b1d6f0 solid;
}

.metro .listview-outlook .list-group {
  display: block;
  position: relative;
}

.metro .listview-outlook .list-group .group-title {
  display: block;
  margin-bottom: 2px;
  background-color: #f0f0f0;
  padding: 4px 20px;
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #333;
  padding-left: 24px;
}

.metro .listview-outlook .list-group .group-title:before {
  position: absolute;
  display: block;
  left: 10px;
  top: 1px;
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-top: 7px solid transparent;
  border-bottom: 7px solid black;
}

.metro .listview-outlook .list-group .group-content {
  display: block;
}

.metro .listview-outlook .list-group.collapsed .group-title:before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin-left: -4px;
}

.metro .listview-outlook .list-group .group-title:hover:before {
  border-bottom-color: #0067cb;
}

.metro .listview-outlook .list-content .list-icon {
  float: left;
  width: 48px;
  max-height: 48px;
  margin-right: 10px;
  margin-top: 5px;
}

.metro .notice {
  display: block;
  min-width: 200px;
  height: auto;
  position: relative;
  background-color: #4390df;
  padding: 20px;
}

.metro .notice * {
  color: inherit;
}

.metro .notice:before {
  content: "";
  width: 10px;
  height: 10px;
  display: block;
  position: absolute;
  background-color: inherit;
  left: -5px;
  top: 50%;
  margin-top: -5px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.metro .notice.marker-on-top:before {
  top: 0;
  left: 50%;
  margin-left: -5px;
}

.metro .notice.marker-on-right:before {
  top: 50%;
  margin-top: -5px;
  left: 100%;
  margin-left: -5px;
}

.metro .notice.marker-on-bottom:before {
  top: 100%;
  margin-left: -5px;
  left: 50%;
  margin-top: -5px;
}

.metro .treeview {
  background-color: #fdfdfd;
  color: #555;
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.metro .treeview ul {
  color: #555;
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.metro .treeview ul li a {
  padding: 0 0 0 15px;
}

.metro .treeview a {
  font-size: 12px;
  color: inherit;
  display: block;
}

.metro .treeview .node > a {
  margin-bottom: 5px;
  padding: 0 0 0 15px;
  font-size: 12px;
  position: relative;
  color: #000;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.metro .treeview .node:not(:first-child) {
  margin-top: 0;
}

.metro .treeview .node-toggle {
  display: inline-block;
  position: relative;
  float: left;
  margin-right: 3px;
  width: 10px;
  height: 10px;
}

.metro .treeview .node-toggle:before {
  position: absolute;
  display: block;
  left: 2px;
  top: 0;
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-top: 7px solid transparent;
  border-bottom: 7px #1d1d1d solid;
}

.metro .treeview .node-toggle:hover:before {
  border-bottom-color: #0050ef;
}

.metro .treeview li.collapsed .node-toggle:before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin-left: -4px;
}

.metro .treeview li a:hover {
  background-color: #e6f2fa;
}

.metro .treeview .active {
  background-color: #e1e1e1;
  font-weight: bold;
  color: #1d1d1d;
}

.metro .treeview a .value {
  color: #0067cb;
}

.metro .fluent-menu {
  font-size: 14px;
}

.metro .fluent-menu .tabs-holder {
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
  display: block;
  z-index: 2;
}

.metro .fluent-menu .tabs-holder:before, .metro .fluent-menu .tabs-holder:after {
  display: table;
  content: "";
}

.metro .fluent-menu .tabs-holder:after {
  clear: both;
}

.metro .fluent-menu .tabs-holder li {
  display: block;
  float: left;
  margin-right: 5px;
  background-color: #fff;
}

.metro .fluent-menu .tabs-holder li a {
  display: block;
  float: left;
  padding: 4px 15px;
  text-transform: uppercase;
  font-size: 0.8em;
  color: #444;
}

.metro .fluent-menu .tabs-holder li a:hover {
  color: #0072c6;
}

.metro .fluent-menu .tabs-holder li:first-child {
  margin-left: 0;
}

.metro .fluent-menu .tabs-holder li.active {
  border: 1px #d4d4d4 solid;
  border-bottom-color: #fff;
}

.metro .fluent-menu .tabs-holder li.active a {
  color: #0072c6;
}

.metro .fluent-menu .tabs-holder li.special {
  border: 1px #0072c6 solid;
  background-color: #0072c6;
}

.metro .fluent-menu .tabs-holder li.special a {
  color: #fff;
}

.metro .fluent-menu .tabs-holder li.special a:hover {
  color: #fff;
}

.metro .fluent-menu .tabs-content {
  z-index: 1;
  position: relative;
  margin-top: -1px;
  border: 1px #d4d4d4 solid;
  background-color: #fff;
  height: 120px;
}

.metro .fluent-menu .tabs-content .tab-panel {
  display: block;
  height: 100%;
  padding: 5px 0 2px;
}

.metro .fluent-menu .tabs-content .tab-panel .tab-panel-group {
  height: 100%;
  position: relative;
  display: block;
  float: left;
  padding: 0 5px;
  border-right: 1px #d4d4d4 solid;
}

.metro .fluent-menu .tabs-content .tab-panel .tab-panel-group:last-child {
  margin-right: 0;
}

.metro .fluent-menu .tabs-content .tab-panel .tab-group-caption {
  font-size: 10px;
  margin: 2px 0;
  text-align: center;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  white-space: nowrap;
}

.metro .fluent-menu .tabs-content .tab-panel .tab-content-segment {
  display: block;
  float: left;
  position: relative;
}

.metro .fluent-menu .fluent-button {
  background-color: #fff;
  padding: 5px 5px;
  font-size: 14px;
  line-height: 14px;
  display: block;
  cursor: default;
}

.metro .fluent-menu .fluent-button:hover {
  background-color: #cde6f7;
}

.metro .fluent-menu .fluent-button img {
  display: block;
  float: left;
  margin-right: 5px;
  width: 16px;
  height: 16px;
}

.metro .fluent-menu .fluent-button [class*=icon-] {
  color: #444;
}

.metro .fluent-menu .fluent-button .button-label {
  display: inline-block;
  color: inherit;
  font: inherit;
}

.metro .fluent-menu .fluent-button:active {
  top: 0;
  left: 0;
  background-color: #75bae9 !important;
}

.metro .fluent-menu .fluent-big-button {
  background-color: #fff;
  padding: 5px 5px;
  font-size: 14px;
  line-height: 14px;
  display: block;
  cursor: default;
  padding: 7px 5px;
  text-align: center;
  white-space: normal;
  line-height: 12px;
  float: left;
  position: relative;
}

.metro .fluent-menu .fluent-big-button:hover {
  background-color: #cde6f7;
}

.metro .fluent-menu .fluent-big-button img {
  display: block;
  float: left;
  margin-right: 5px;
  width: 16px;
  height: 16px;
}

.metro .fluent-menu .fluent-big-button [class*=icon-] {
  color: #444;
}

.metro .fluent-menu .fluent-big-button .button-label {
  display: inline-block;
  color: inherit;
  font: inherit;
}

.metro .fluent-menu .fluent-big-button:active {
  top: 0;
  left: 0;
  background-color: #75bae9 !important;
}

.metro .fluent-menu .fluent-big-button img, .metro .fluent-menu .fluent-big-button [class*=icon-] {
  display: block;
  width: 40px;
  height: 40px;
  font-size: 40px;
  float: none;
  text-align: center;
  margin: 5px auto 5px;
}

.metro .fluent-menu .fluent-big-button br {
  line-height: 4px;
  height: 4px;
  font-size: 4px;
}

.metro .fluent-menu .fluent-tool-button {
  background-color: #fff;
  padding: 5px 5px;
  font-size: 14px;
  line-height: 14px;
  display: block;
  cursor: default;
  padding: 4px;
}

.metro .fluent-menu .fluent-tool-button:hover {
  background-color: #cde6f7;
}

.metro .fluent-menu .fluent-tool-button img {
  display: block;
  float: left;
  margin-right: 5px;
  width: 16px;
  height: 16px;
}

.metro .fluent-menu .fluent-tool-button [class*=icon-] {
  color: #444;
}

.metro .fluent-menu .fluent-tool-button .button-label {
  display: inline-block;
  color: inherit;
  font: inherit;
}

.metro .fluent-menu .fluent-tool-button:active {
  top: 0;
  left: 0;
  background-color: #75bae9 !important;
}

.metro .fluent-menu .fluent-tool-button img, .metro .fluent-menu .fluent-tool-button [class*=icon-] {
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  float: none;
  text-align: center;
}

.metro .fluent-menu .fluent-tool-button img {
  margin-right: 0;
}

.metro .fluent-menu .dropdown-toggle:before, .metro .fluent-menu .dropdown-toggle:after {
  content: "";
}

.metro .fluent-menu .dropdown-toggle .button-label {
  padding-right: 5px;
}

.metro .fluent-menu .dropdown-toggle .button-label:before, .metro .fluent-menu .dropdown-toggle .button-label:after {
  content: "";
}

.metro .fluent-menu .dropdown-toggle .button-label:after {
  content: "\e1ad";
  font-family: iconFont;
  position: absolute;
  right: 0;
  bottom: 3px;
  font-size: 0.8em;
}

.metro .fluent-menu .dropdown-menu {
  position: absolute;
  top: 100%;
  z-index: 100;
}

.metro .fluent-menu .dropdown-menu a {
  font-size: 10pt !important;
}

.metro .fluent-menu .dropdown-menu a:hover {
  background-color: #cde6f7;
  color: #444;
}

.metro p [data-hint] {
  border-bottom: 1px #373737 dotted;
  white-space: nowrap;
}

.metro .hint {
  position: fixed;
  color: #1d1d1d;
  padding: 10px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  width: auto;
  max-width: 220px;
  margin-top: 10px;
  z-index: 1030;
  display: none;
  border: 1px solid;
  border-color: #6a6a6a;
}

.metro .hint .hint-title, .metro .hint .hint-text {
  color: inherit;
  text-align: left;
}

.metro .hint .hint-title {
  font-size: 1.2em;
  font-weight: bold;
}

.metro .hint:before, .metro .hint:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}

.metro .hint:before {
  z-index: 2;
}

.metro .hint:after {
  z-index: 1;
  border-color: inherit;
}

.metro .hint.bottom:before, .metro .hint.bottom:after {
  top: 1px;
  left: 5px;
  margin: -10px 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #fffcc0;
}

.metro .hint.bottom:after {
  top: 0;
  border-bottom: 10px solid;
}

.metro .hint.top:before, .metro .hint.top:after {
  top: 100%;
  margin-top: -1px;
  left: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #fffcc0;
}

.metro .hint.top:after {
  margin-top: 1px;
  border-top: 10px solid;
}

.metro .hint.left:before, .metro .hint.left:after {
  top: 5px;
  left: 100%;
  margin-left: -1px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid #fffcc0;
}

.metro .hint.left:after {
  margin-left: 0;
  border-left: 10px solid;
}

.metro .hint.right:before, .metro .hint.right:after {
  top: 5px;
  left: -9px;
  margin: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 10px solid #fffcc0;
}

.metro .hint.right:after {
  left: -10px;
  border-right: 10px solid;
}

.metro .balloon {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 1px #555 solid;
  background-color: #fff;
  position: relative;
  margin-bottom: 30px;
}

.metro .balloon:before, .metro .balloon:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}

.metro .balloon:before {
  z-index: 2;
}

.metro .balloon:after {
  z-index: 1;
}

.metro .balloon.bottom:before, .metro .balloon.bottom:after {
  top: 1px;
  left: 20px;
  margin: -20px 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #fff;
}

.metro .balloon.bottom:after {
  top: 0;
  border-bottom: 20px solid #555;
}

.metro .balloon.top:before, .metro .balloon.top:after {
  top: 100%;
  margin-top: -1px;
  left: 20px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid #fff;
}

.metro .balloon.top:after {
  margin-top: 1px;
  border-top: 20px solid #555;
}

.metro .balloon.left:before, .metro .balloon.left:after {
  top: 10px;
  left: 100%;
  margin-left: -1px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid #fff;
}

.metro .balloon.left:after {
  margin-left: 0;
  border-left: 21px solid #555;
}

.metro .balloon.right:before, .metro .balloon.right:after {
  top: 10px;
  left: -19px;
  margin: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 20px solid #fff;
}

.metro .balloon.right:after {
  left: -20px;
  border-right: 20px solid #555;
}

.metro .stepper {
  list-style: none;
  border-top: 1px #1d1d1d dotted;
  position: relative;
  padding: 0;
  margin: 60px 0;
}

.metro .stepper li {
  float: left;
  width: 32px;
  height: 32px;
  border-radius: 100%;
  margin-left: 20%;
  margin-top: -16px;
  background-color: #e51400;
  border: 2px #9a1616 solid;
  position: relative;
}

.metro .stepper li:first-child {
  margin-left: 0;
}

.metro .stepper li:last-child {
  left: 10px;
}

.metro .stepper li:hover {
  background-color: #ff2d19;
}

.metro .stepper li.complete {
  background-color: #60a917;
  border: 2px #128023 solid;
}

.metro .stepper li.complete:hover {
  background-color: #7ad61d;
}

.metro .streamer {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

.metro .streamer .meter {
  height: 25px;
  width: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
}

.metro .streamer .meter li {
  display: block;
  float: left;
  width: 213px;
  padding: 2px 3px;
  background: url("/images/meter-210.png") top left repeat-x;
}

.metro .streamer .meter li em {
  font-size: 10px;
  font-style: normal;
}

.metro .streamer .streams {
  width: 142px;
  padding-top: 25px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background-color: #fff;
}

.metro .streamer .streams .streams-title {
  position: absolute;
  top: 0;
}

.metro .streamer .streams .stream {
  position: relative;
  display: block;
  width: 100%;
  height: 75px;
  margin: 0 2px 2px 0;
  padding: 5px;
  color: #fff;
  cursor: pointer;
}

.metro .streamer .streams .stream .stream-title {
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 12px;
}

.metro .streamer .streams .stream .stream-number {
  position: absolute;
  left: 5px;
  bottom: 5px;
  font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 11px;
}

.metro .streamer .events {
  padding-left: 143px;
  overflow: hidden;
  height: 100%;
  min-height: 100%;
  overflow-x: scroll;
}

.metro .streamer .events .double {
  width: 424px;
}

.metro .streamer .events .triple {
  width: 637px;
}

.metro .streamer .events .quadro {
  width: 850px;
}

.metro .streamer .events .events-area {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.metro .streamer .events .events-area:before, .metro .streamer .events .events-area:after {
  display: table;
  content: "";
}

.metro .streamer .events .events-area:after {
  clear: both;
}

.metro .streamer .events .events-grid {
  height: 100%;
  min-height: 100%;
}

.metro .streamer .events .events-grid:before, .metro .streamer .events .events-grid:after {
  display: table;
  content: "";
}

.metro .streamer .events .events-grid:after {
  clear: both;
}

.metro .streamer .events .event-group {
  height: 460px;
  min-width: 211px;
  margin: 0 2px 2px 0;
  float: left;
}

.metro .streamer .events .event-super {
  height: 100%;
  min-height: 100%;
  border: 1px #eaeaea solid;
}

.metro .streamer .events .event-stream {
  height: 75px;
}

.metro .streamer .events .event-stream .event {
  min-width: 211px;
  height: 75px;
  float: left;
  display: block;
  margin: 0 2px 2px 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px #eaeaea solid;
}

.metro .streamer .events .event-stream .event:last-child {
  margin-right: 0;
}

.metro .streamer .events .event-stream .event.event-disable {
  opacity: 0.2;
}

.metro .streamer .events .event-stream .event .event-content {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  display: none;
}

.metro .streamer .events .event-stream .event .event-content:first-child {
  display: block;
}

.metro .streamer .events .event-stream .event .event-content-logo {
  display: block;
  float: left;
  margin-right: 5px;
  padding: 3px;
}

.metro .streamer .events .event-stream .event .event-content-logo .icon {
  position: relative;
  width: 39px;
  height: 39px;
  margin-bottom: 1px;
}

.metro .streamer .events .event-stream .event .event-content-logo .icon img {
  width: 100%;
  height: 100%;
}

.metro .streamer .events .event-stream .event .event-content-logo .time {
  position: relative;
  width: 39px;
  padding: 8px 4px;
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #fff;
  line-height: 12px;
}

.metro .streamer .events .event-stream .event .event-content-data {
  display: block;
  padding: 0;
  margin: 0;
  position: relative;
  margin-left: 50px;
}

.metro .streamer .events .event-stream .event .event-content-data .title {
  position: relative;
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 14px;
  margin: 3px 0 0;
  padding: 0;
}

.metro .streamer .events .event-stream .event .event-content-data .subtitle {
  position: relative;
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 10px;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
}

.metro .streamer .events .event-stream .event .event-content-data .remark {
  position: absolute;
  display: block;
  top: 36px;
  margin-right: 4px;
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 11px;
  color: #999;
}

.metro .streamer .events .event-stream .event:hover {
  border-color: #999;
}

.metro .streamer .events .event-stream .event.selected {
  border: 4px #4390df solid;
  border-width: 1px;
}

.metro .streamer .events .event-stream .event.selected:after {
  position: absolute;
  display: block;
  border-top: 28px solid #4390df;
  border-left: 28px solid transparent;
  right: 0;
  content: "";
  top: 0;
  z-index: 101;
}

.metro .streamer .events .event-stream .event.selected:before {
  position: absolute;
  display: block;
  content: "\e08a";
  color: #fff;
  right: 0;
  font-family: iconFont;
  font-size: 9pt;
  font-weight: normal;
  z-index: 102;
  top: 0;
}

.metro .streamer .events .event-stream .event.selected:before {
  right: 3px;
}

.metro .scrollbar-button {
  background-color: #fff;
  border: 1px #ababab solid;
}

.metro .scrollbar {
  position: relative;
  overflow: hidden;
}

.metro .scrollbar-container {
  position: relative;
  overflow: hidden;
}

.metro .scrollbar-v, .metro .scrollbar-h {
  position: absolute;
  background: #f3f3f3;
}

.metro .scrollbar-v {
  width: 15px;
  height: 100%;
  right: 0;
  top: 0;
}

.metro .scrollbar-h {
  height: 15px;
  width: 100%;
  left: 0;
  bottom: 0;
}

.metro .scrollbar-v-up, .metro .scrollbar-v-down, .metro .scrollbar-h-up, .metro .scrollbar-h-down, .metro .scrollbar-line-v-btn, .metro .scrollbar-line-h-btn {
  cursor: pointer;
  position: absolute;
  background-color: #fff;
  border: 1px #ababab solid;
}

.metro .scrollbar-line-v-btn:hover, .metro .scrollbar-line-h-btn:hover {
  background-color: #f0f0f0;
}

.metro .scrollbar-v-up, .metro .scrollbar-h-up {
  width: 15px;
  height: 15px;
  left: 0;
  top: 0;
}

.metro .scrollbar-v-down, .metro .scrollbar-h-down {
  width: 15px;
  height: 15px;
  left: 0;
  bottom: 0;
}

.metro .scrollbar-h-down {
  left: auto;
  right: 0;
}

.metro .scrollbar-line-v, .metro .scrollbar-line-h {
  position: absolute;
  z-index: 3;
}

.metro .scrollbar-line-v {
  width: 100%;
  left: 0;
  top: 15px;
}

.metro .scrollbar-line-h {
  height: 15px;
  left: 15px;
  top: 0;
}

.metro .scrollbar-line-v-btn {
  width: 100%;
  left: 0 !important;
  top: 0;
}

.metro .scrollbar-line-h-btn {
  height: 100%;
  left: 0;
  top: 0 !important;
}

.metro .scrollbar-both {
  position: absolute;
  width: 15px;
  height: 15px;
  right: 0;
  bottom: 0;
}

.metro .scrollbar-line-h, .metro .scrollbar-line-v, .metro .scrollbar-both {
  background-color: #f3f3f3;
}

.metro .scrollbar-v-up:before, .metro .scrollbar-v-down:before, .metro .scrollbar-h-up:before, .metro .scrollbar-h-down:before {
  position: absolute;
  content: "";
  font-family: iconFont;
  font-size: 14px;
  margin-top: -1px;
}

.metro .scrollbar-v-up:before {
  content: "\e1ae";
}

.metro .scrollbar-v-down:before {
  content: "\e1ad";
}

.metro .scrollbar-h-up:before {
  content: "\e1ac";
  margin-left: -1px;
}

.metro .scrollbar-h-down:before {
  content: "\e1af";
  margin-top: -1px;
  margin-right: -1px;
}

.metro.notify-container {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1060;
}

.metro.notify-container .notify {
  background-color: #fff;
  display: block;
  position: relative;
  min-width: 220px;
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  color: #1d1d1d;
  padding: 10px;
  margin: 2px 2px 2px 0;
}

.metro.notify-container .notify .caption {
  font-size: 18px;
  line-height: 20px;
  margin-bottom: 5px;
}

.metro.notify-container .notify .content {
  font-size: 14px;
  line-height: 16px;
}

.metro .notify-wrapper {
  position: relative;
  background-color: #1d1d1d;
  width: auto;
  height: auto;
  min-width: 250px;
  color: #fff;
}

@font-face {
  font-family: "iconFont";
  src: url("../fonts/iconFont.eot");
  src: url("../fonts/iconFont.eot") format("embedded-opentype"), url("../fonts/iconFont.woff") format("woff"), url("../fonts/iconFont.ttf") format("truetype"), url("../fonts/iconFont.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
.metro [data-icon]:before {
  font-family: "iconFont";
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.metro [class*=icon-] {
  font-family: "iconFont";
  speak: none;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  text-decoration: inherit;
  line-height: 1;
  display: inline-block;
  vertical-align: -8%;
  -webkit-font-smoothing: antialiased;
  font-size: inherit;
}

.metro [class*=icon-].smaller {
  font-size: 0.7em;
  vertical-align: 6%;
}

.metro [class*=icon-].large {
  font-size: 1.2em;
  vertical-align: -10%;
}

.metro .icon-newspaper:before {
  content: "\e001";
}

.metro .icon-pencil:before {
  content: "\e002";
}

.metro .icon-droplet:before {
  content: "\e003";
}

.metro .icon-pictures:before {
  content: "\e004";
}

.metro .icon-camera:before {
  content: "\e005";
}

.metro .icon-music:before {
  content: "\e006";
}

.metro .icon-film:before {
  content: "\e007";
}

.metro .icon-camera-2:before {
  content: "\e008";
}

.metro .icon-spades:before {
  content: "\e009";
}

.metro .icon-clubs:before {
  content: "\e00a";
}

.metro .icon-diamonds:before {
  content: "\e00b";
}

.metro .icon-broadcast:before {
  content: "\e00c";
}

.metro .icon-mic:before {
  content: "\e00d";
}

.metro .icon-book:before {
  content: "\e00e";
}

.metro .icon-file:before {
  content: "\e00f";
}

.metro .icon-new:before {
  content: "\e010";
}

.metro .icon-copy:before {
  content: "\e011";
}

.metro .icon-folder:before {
  content: "\e012";
}

.metro .icon-folder-2:before {
  content: "\e013";
}

.metro .icon-tag:before {
  content: "\e014";
}

.metro .icon-cart:before {
  content: "\e015";
}

.metro .icon-basket:before {
  content: "\e016";
}

.metro .icon-calculate:before {
  content: "\e017";
}

.metro .icon-support:before {
  content: "\e018";
}

.metro .icon-phone:before {
  content: "\e019";
}

.metro .icon-mail:before {
  content: "\e01a";
}

.metro .icon-location:before {
  content: "\e01b";
}

.metro .icon-compass:before {
  content: "\e01c";
}

.metro .icon-history:before {
  content: "\e01d";
}

.metro .icon-clock:before {
  content: "\e01e";
}

.metro .icon-bell:before {
  content: "\e01f";
}

.metro .icon-calendar:before {
  content: "\e020";
}

.metro .icon-printer:before {
  content: "\e021";
}

.metro .icon-mouse:before {
  content: "\e022";
}

.metro .icon-screen:before {
  content: "\e023";
}

.metro .icon-laptop:before {
  content: "\e024";
}

.metro .icon-mobile:before {
  content: "\e025";
}

.metro .icon-cabinet:before {
  content: "\e026";
}

.metro .icon-drawer:before {
  content: "\e027";
}

.metro .icon-drawer-2:before {
  content: "\e028";
}

.metro .icon-box:before {
  content: "\e029";
}

.metro .icon-box-add:before {
  content: "\e02a";
}

.metro .icon-box-remove:before {
  content: "\e02b";
}

.metro .icon-download:before {
  content: "\e02c";
}

.metro .icon-upload:before {
  content: "\e02d";
}

.metro .icon-database:before {
  content: "\e02e";
}

.metro .icon-flip:before {
  content: "\e02f";
}

.metro .icon-flip-2:before {
  content: "\e030";
}

.metro .icon-undo:before {
  content: "\e031";
}

.metro .icon-redo:before {
  content: "\e032";
}

.metro .icon-forward:before {
  content: "\e033";
}

.metro .icon-reply:before {
  content: "\e034";
}

.metro .icon-reply-2:before {
  content: "\e035";
}

.metro .icon-comments:before {
  content: "\e036";
}

.metro .icon-comments-2:before {
  content: "\e037";
}

.metro .icon-comments-3:before {
  content: "\e038";
}

.metro .icon-comments-4:before {
  content: "\e039";
}

.metro .icon-comments-5:before {
  content: "\e03a";
}

.metro .icon-user:before {
  content: "\e03b";
}

.metro .icon-user-2:before {
  content: "\e03c";
}

.metro .icon-user-3:before {
  content: "\e03d";
}

.metro .icon-busy:before {
  content: "\e03e";
}

.metro .icon-loading:before {
  content: "\e03f";
}

.metro .icon-loading-2:before {
  content: "\e040";
}

.metro .icon-search:before {
  content: "\e041";
}

.metro .icon-zoom-in:before {
  content: "\e042";
}

.metro .icon-zoom-out:before {
  content: "\e043";
}

.metro .icon-key:before {
  content: "\e044";
}

.metro .icon-key-2:before {
  content: "\e045";
}

.metro .icon-locked:before {
  content: "\e046";
}

.metro .icon-unlocked:before {
  content: "\e047";
}

.metro .icon-wrench:before {
  content: "\e048";
}

.metro .icon-equalizer:before {
  content: "\e049";
}

.metro .icon-cog:before {
  content: "\e04a";
}

.metro .icon-pie:before {
  content: "\e04b";
}

.metro .icon-bars:before {
  content: "\e04c";
}

.metro .icon-stats-up:before {
  content: "\e04d";
}

.metro .icon-gift:before {
  content: "\e04e";
}

.metro .icon-trophy:before {
  content: "\e04f";
}

.metro .icon-diamond:before {
  content: "\e050";
}

.metro .icon-coffee:before {
  content: "\e051";
}

.metro .icon-rocket:before {
  content: "\e052";
}

.metro .icon-meter-slow:before {
  content: "\e053";
}

.metro .icon-meter-medium:before {
  content: "\e054";
}

.metro .icon-meter-fast:before {
  content: "\e055";
}

.metro .icon-dashboard:before {
  content: "\e056";
}

.metro .icon-fire:before {
  content: "\e057";
}

.metro .icon-lab:before {
  content: "\e058";
}

.metro .icon-remove:before {
  content: "\e059";
}

.metro .icon-briefcase:before {
  content: "\e05a";
}

.metro .icon-briefcase-2:before {
  content: "\e05b";
}

.metro .icon-cars:before {
  content: "\e05c";
}

.metro .icon-bus:before {
  content: "\e05d";
}

.metro .icon-cube:before {
  content: "\e05e";
}

.metro .icon-cube-2:before {
  content: "\e05f";
}

.metro .icon-puzzle:before {
  content: "\e060";
}

.metro .icon-glasses:before {
  content: "\e061";
}

.metro .icon-glasses-2:before {
  content: "\e062";
}

.metro .icon-accessibility:before {
  content: "\e063";
}

.metro .icon-accessibility-2:before {
  content: "\e064";
}

.metro .icon-target:before {
  content: "\e065";
}

.metro .icon-target-2:before {
  content: "\e066";
}

.metro .icon-lightning:before {
  content: "\e067";
}

.metro .icon-power:before {
  content: "\e068";
}

.metro .icon-power-2:before {
  content: "\e069";
}

.metro .icon-clipboard:before {
  content: "\e06a";
}

.metro .icon-clipboard-2:before {
  content: "\e06b";
}

.metro .icon-playlist:before {
  content: "\e06c";
}

.metro .icon-grid-view:before {
  content: "\e06d";
}

.metro .icon-tree-view:before {
  content: "\e06e";
}

.metro .icon-cloud:before {
  content: "\e06f";
}

.metro .icon-cloud-2:before {
  content: "\e070";
}

.metro .icon-download-2:before {
  content: "\e071";
}

.metro .icon-upload-2:before {
  content: "\e072";
}

.metro .icon-upload-3:before {
  content: "\e073";
}

.metro .icon-link:before {
  content: "\e074";
}

.metro .icon-link-2:before {
  content: "\e075";
}

.metro .icon-flag:before {
  content: "\e076";
}

.metro .icon-flag-2:before {
  content: "\e077";
}

.metro .icon-attachment:before {
  content: "\e078";
}

.metro .icon-eye:before {
  content: "\e079";
}

.metro .icon-bookmark:before {
  content: "\e07a";
}

.metro .icon-bookmark-2:before {
  content: "\e07b";
}

.metro .icon-star:before {
  content: "\e07c";
}

.metro .icon-star-2:before {
  content: "\e07d";
}

.metro .icon-star-3:before {
  content: "\e07e";
}

.metro .icon-heart:before {
  content: "\e07f";
}

.metro .icon-heart-2:before {
  content: "\e080";
}

.metro .icon-thumbs-up:before {
  content: "\e081";
}

.metro .icon-thumbs-down:before {
  content: "\e082";
}

.metro .icon-plus:before {
  content: "\e083";
}

.metro .icon-minus:before {
  content: "\e084";
}

.metro .icon-help:before {
  content: "\e085";
}

.metro .icon-help-2:before {
  content: "\e086";
}

.metro .icon-blocked:before {
  content: "\e087";
}

.metro .icon-cancel:before {
  content: "\e088";
}

.metro .icon-cancel-2:before {
  content: "\e089";
}

.metro .icon-checkmark:before {
  content: "\e08a";
}

.metro .icon-minus-2:before {
  content: "\e08b";
}

.metro .icon-plus-2:before {
  content: "\e08c";
}

.metro .icon-enter:before {
  content: "\e08d";
}

.metro .icon-exit:before {
  content: "\e08e";
}

.metro .icon-loop:before {
  content: "\e08f";
}

.metro .icon-arrow-up-left:before {
  content: "\e090";
}

.metro .icon-arrow-up:before {
  content: "\e091";
}

.metro .icon-arrow-up-right:before {
  content: "\e092";
}

.metro .icon-arrow-right:before {
  content: "\e093";
}

.metro .icon-arrow-down-right:before {
  content: "\e094";
}

.metro .icon-arrow-down:before {
  content: "\e095";
}

.metro .icon-arrow-down-left:before {
  content: "\e096";
}

.metro .icon-arrow-left:before {
  content: "\e097";
}

.metro .icon-arrow-up-2:before {
  content: "\e098";
}

.metro .icon-arrow-right-2:before {
  content: "\e099";
}

.metro .icon-arrow-down-2:before {
  content: "\e09a";
}

.metro .icon-arrow-left-2:before {
  content: "\e09b";
}

.metro .icon-arrow-up-3:before {
  content: "\e09c";
}

.metro .icon-arrow-right-3:before {
  content: "\e09d";
}

.metro .icon-arrow-down-3:before {
  content: "\e09e";
}

.metro .icon-arrow-left-3:before {
  content: "\e09f";
}

.metro .icon-menu:before {
  content: "\e0a0";
}

.metro .icon-enter-2:before {
  content: "\e0a1";
}

.metro .icon-backspace:before {
  content: "\e0a2";
}

.metro .icon-backspace-2:before {
  content: "\e0a3";
}

.metro .icon-tab:before {
  content: "\e0a4";
}

.metro .icon-tab-2:before {
  content: "\e0a5";
}

.metro .icon-checkbox:before {
  content: "\e0a6";
}

.metro .icon-checkbox-unchecked:before {
  content: "\e0a7";
}

.metro .icon-checkbox-partial:before {
  content: "\e0a8";
}

.metro .icon-radio-checked:before {
  content: "\e0a9";
}

.metro .icon-radio-unchecked:before {
  content: "\e0aa";
}

.metro .icon-font:before {
  content: "\e0ab";
}

.metro .icon-paragraph-left:before {
  content: "\e0ac";
}

.metro .icon-paragraph-center:before {
  content: "\e0ad";
}

.metro .icon-paragraph-right:before {
  content: "\e0ae";
}

.metro .icon-paragraph-justify:before {
  content: "\e0af";
}

.metro .icon-left-to-right:before {
  content: "\e0b0";
}

.metro .icon-right-to-left:before {
  content: "\e0b1";
}

.metro .icon-share:before {
  content: "\e0b2";
}

.metro .icon-new-tab:before {
  content: "\e0b3";
}

.metro .icon-new-tab-2:before {
  content: "\e0b4";
}

.metro .icon-embed:before {
  content: "\e0b5";
}

.metro .icon-code:before {
  content: "\e0b6";
}

.metro .icon-bluetooth:before {
  content: "\e0b7";
}

.metro .icon-share-2:before {
  content: "\e0b8";
}

.metro .icon-share-3:before {
  content: "\e0b9";
}

.metro .icon-mail-2:before {
  content: "\e0ba";
}

.metro .icon-google:before {
  content: "\e0bb";
}

.metro .icon-google-plus:before {
  content: "\e0bc";
}

.metro .icon-google-drive:before {
  content: "\e0bd";
}

.metro .icon-facebook:before {
  content: "\e0be";
}

.metro .icon-instagram:before {
  content: "\e0bf";
}

.metro .icon-twitter:before {
  content: "\e0c0";
}

.metro .icon-feed:before {
  content: "\e0c1";
}

.metro .icon-youtube:before {
  content: "\e0c2";
}

.metro .icon-vimeo:before {
  content: "\e0c3";
}

.metro .icon-flickr:before {
  content: "\e0c4";
}

.metro .icon-picassa:before {
  content: "\e0c5";
}

.metro .icon-dribbble:before {
  content: "\e0c6";
}

.metro .icon-deviantart:before {
  content: "\e0c7";
}

.metro .icon-github:before {
  content: "\e0c8";
}

.metro .icon-github-2:before {
  content: "\e0c9";
}

.metro .icon-github-3:before {
  content: "\e0ca";
}

.metro .icon-github-4:before {
  content: "\e0cb";
}

.metro .icon-github-5:before {
  content: "\e0cc";
}

.metro .icon-git:before {
  content: "\e0cd";
}

.metro .icon-github-6:before {
  content: "\e0ce";
}

.metro .icon-wordpress:before {
  content: "\e0cf";
}

.metro .icon-joomla:before {
  content: "\e0d0";
}

.metro .icon-blogger:before {
  content: "\e0d1";
}

.metro .icon-tumblr:before {
  content: "\e0d2";
}

.metro .icon-yahoo:before {
  content: "\e0d3";
}

.metro .icon-amazon:before {
  content: "\e0d4";
}

.metro .icon-tux:before {
  content: "\e0d5";
}

.metro .icon-apple:before {
  content: "\e0d6";
}

.metro .icon-finder:before {
  content: "\e0d7";
}

.metro .icon-android:before {
  content: "\e0d8";
}

.metro .icon-windows:before {
  content: "\e0d9";
}

.metro .icon-soundcloud:before {
  content: "\e0da";
}

.metro .icon-skype:before {
  content: "\e0db";
}

.metro .icon-reddit:before {
  content: "\e0dc";
}

.metro .icon-linkedin:before {
  content: "\e0dd";
}

.metro .icon-lastfm:before {
  content: "\e0de";
}

.metro .icon-delicious:before {
  content: "\e0df";
}

.metro .icon-stumbleupon:before {
  content: "\e0e0";
}

.metro .icon-pinterest:before {
  content: "\e0e1";
}

.metro .icon-xing:before {
  content: "\e0e2";
}

.metro .icon-flattr:before {
  content: "\e0e3";
}

.metro .icon-foursquare:before {
  content: "\e0e4";
}

.metro .icon-paypal:before {
  content: "\e0e5";
}

.metro .icon-yelp:before {
  content: "\e0e6";
}

.metro .icon-libreoffice:before {
  content: "\e0e7";
}

.metro .icon-file-pdf:before {
  content: "\e0e8";
}

.metro .icon-file-openoffice:before {
  content: "\e0e9";
}

.metro .icon-file-word:before {
  content: "\e0ea";
}

.metro .icon-file-excel:before {
  content: "\e0eb";
}

.metro .icon-file-powerpoint:before {
  content: "\e0ec";
}

.metro .icon-file-zip:before {
  content: "\e0ed";
}

.metro .icon-file-xml:before {
  content: "\e0ee";
}

.metro .icon-file-css:before {
  content: "\e0ef";
}

.metro .icon-html5:before {
  content: "\e0f0";
}

.metro .icon-html5-2:before {
  content: "\e0f1";
}

.metro .icon-css3:before {
  content: "\e0f2";
}

.metro .icon-chrome:before {
  content: "\e0f3";
}

.metro .icon-firefox:before {
  content: "\e0f4";
}

.metro .icon-IE:before {
  content: "\e0f5";
}

.metro .icon-opera:before {
  content: "\e0f6";
}

.metro .icon-safari:before {
  content: "\e0f7";
}

.metro .icon-IcoMoon:before {
  content: "\e0f8";
}

.metro .icon-sunrise:before {
  content: "\e0f9";
}

.metro .icon-sun:before {
  content: "\e0fa";
}

.metro .icon-moon:before {
  content: "\e0fb";
}

.metro .icon-sun-2:before {
  content: "\e0fc";
}

.metro .icon-windy:before {
  content: "\e0fd";
}

.metro .icon-wind:before {
  content: "\e0fe";
}

.metro .icon-snowflake:before {
  content: "\e0ff";
}

.metro .icon-cloudy:before {
  content: "\e100";
}

.metro .icon-cloud-3:before {
  content: "\e101";
}

.metro .icon-weather:before {
  content: "\e102";
}

.metro .icon-weather-2:before {
  content: "\e103";
}

.metro .icon-weather-3:before {
  content: "\e104";
}

.metro .icon-lines:before {
  content: "\e105";
}

.metro .icon-cloud-4:before {
  content: "\e106";
}

.metro .icon-lightning-2:before {
  content: "\e107";
}

.metro .icon-lightning-3:before {
  content: "\e108";
}

.metro .icon-rainy:before {
  content: "\e109";
}

.metro .icon-rainy-2:before {
  content: "\e10a";
}

.metro .icon-windy-2:before {
  content: "\e10b";
}

.metro .icon-windy-3:before {
  content: "\e10c";
}

.metro .icon-snowy:before {
  content: "\e10d";
}

.metro .icon-snowy-2:before {
  content: "\e10e";
}

.metro .icon-snowy-3:before {
  content: "\e10f";
}

.metro .icon-weather-4:before {
  content: "\e110";
}

.metro .icon-cloudy-2:before {
  content: "\e111";
}

.metro .icon-cloud-5:before {
  content: "\e112";
}

.metro .icon-lightning-4:before {
  content: "\e113";
}

.metro .icon-sun-3:before {
  content: "\e114";
}

.metro .icon-moon-2:before {
  content: "\e115";
}

.metro .icon-cloudy-3:before {
  content: "\e116";
}

.metro .icon-cloud-6:before {
  content: "\e117";
}

.metro .icon-cloud-7:before {
  content: "\e118";
}

.metro .icon-lightning-5:before {
  content: "\e119";
}

.metro .icon-rainy-3:before {
  content: "\e11a";
}

.metro .icon-rainy-4:before {
  content: "\e11b";
}

.metro .icon-windy-4:before {
  content: "\e11c";
}

.metro .icon-windy-5:before {
  content: "\e11d";
}

.metro .icon-snowy-4:before {
  content: "\e11e";
}

.metro .icon-snowy-5:before {
  content: "\e11f";
}

.metro .icon-weather-5:before {
  content: "\e120";
}

.metro .icon-cloudy-4:before {
  content: "\e121";
}

.metro .icon-lightning-6:before {
  content: "\e122";
}

.metro .icon-thermometer:before {
  content: "\e123";
}

.metro .icon-compass-2:before {
  content: "\e124";
}

.metro .icon-none:before {
  content: "\e125";
}

.metro .icon-Celsius:before {
  content: "\e126";
}

.metro .icon-Fahrenheit:before {
  content: "\e127";
}

.metro .icon-forrst:before {
  content: "\e128";
}

.metro .icon-headphones:before {
  content: "\e129";
}

.metro .icon-bug:before {
  content: "\e12a";
}

.metro .icon-cart-2:before {
  content: "\e12b";
}

.metro .icon-earth:before {
  content: "\e12c";
}

.metro .icon-battery:before {
  content: "\e12d";
}

.metro .icon-list:before {
  content: "\e12e";
}

.metro .icon-grid:before {
  content: "\e12f";
}

.metro .icon-alarm:before {
  content: "\e130";
}

.metro .icon-location-2:before {
  content: "\e131";
}

.metro .icon-pointer:before {
  content: "\e132";
}

.metro .icon-diary:before {
  content: "\e133";
}

.metro .icon-eye-2:before {
  content: "\e134";
}

.metro .icon-console:before {
  content: "\e135";
}

.metro .icon-location-3:before {
  content: "\e136";
}

.metro .icon-move:before {
  content: "\e137";
}

.metro .icon-gift-2:before {
  content: "\e138";
}

.metro .icon-monitor:before {
  content: "\e139";
}

.metro .icon-mobile-2:before {
  content: "\e13a";
}

.metro .icon-switch:before {
  content: "\e13b";
}

.metro .icon-star-4:before {
  content: "\e13c";
}

.metro .icon-address-book:before {
  content: "\e13d";
}

.metro .icon-shit:before {
  content: "\e13e";
}

.metro .icon-cone:before {
  content: "\e13f";
}

.metro .icon-credit-card:before {
  content: "\e140";
}

.metro .icon-type:before {
  content: "\e141";
}

.metro .icon-volume:before {
  content: "\e142";
}

.metro .icon-volume-2:before {
  content: "\e143";
}

.metro .icon-locked-2:before {
  content: "\e144";
}

.metro .icon-warning:before {
  content: "\e145";
}

.metro .icon-info:before {
  content: "\e146";
}

.metro .icon-filter:before {
  content: "\e147";
}

.metro .icon-bookmark-3:before {
  content: "\e148";
}

.metro .icon-bookmark-4:before {
  content: "\e149";
}

.metro .icon-stats:before {
  content: "\e14a";
}

.metro .icon-compass-3:before {
  content: "\e14b";
}

.metro .icon-keyboard:before {
  content: "\e14c";
}

.metro .icon-award-fill:before {
  content: "\e14d";
}

.metro .icon-award-stroke:before {
  content: "\e14e";
}

.metro .icon-beaker-alt:before {
  content: "\e14f";
}

.metro .icon-beaker:before {
  content: "\e150";
}

.metro .icon-move-vertical:before {
  content: "\e151";
}

.metro .icon-move-horizontal:before {
  content: "\e152";
}

.metro .icon-steering-wheel:before {
  content: "\e153";
}

.metro .icon-volume-3:before {
  content: "\e154";
}

.metro .icon-volume-mute:before {
  content: "\e155";
}

.metro .icon-play:before {
  content: "\e156";
}

.metro .icon-pause:before {
  content: "\e157";
}

.metro .icon-stop:before {
  content: "\e158";
}

.metro .icon-eject:before {
  content: "\e159";
}

.metro .icon-first:before {
  content: "\e15a";
}

.metro .icon-last:before {
  content: "\e15b";
}

.metro .icon-play-alt:before {
  content: "\e15c";
}

.metro .icon-battery-charging:before {
  content: "\e160";
}

.metro .icon-left-quote:before {
  content: "\e161";
}

.metro .icon-right-quote:before {
  content: "\e162";
}

.metro .icon-left-quote-alt:before {
  content: "\e163";
}

.metro .icon-right-quote-alt:before {
  content: "\e164";
}

.metro .icon-smiley:before {
  content: "\e165";
}

.metro .icon-umbrella:before {
  content: "\e166";
}

.metro .icon-info-2:before {
  content: "\e167";
}

.metro .icon-chart-alt:before {
  content: "\e168";
}

.metro .icon-at:before {
  content: "\e169";
}

.metro .icon-hash:before {
  content: "\e16a";
}

.metro .icon-pilcrow:before {
  content: "\e16b";
}

.metro .icon-fullscreen-alt:before {
  content: "\e16c";
}

.metro .icon-fullscreen-exit-alt:before {
  content: "\e16d";
}

.metro .icon-layers-alt:before {
  content: "\e16e";
}

.metro .icon-layers:before {
  content: "\e16f";
}

.metro .icon-floppy:before {
  content: "\e170";
}

.metro .icon-rainbow:before {
  content: "\e000";
}

.metro .icon-air:before {
  content: "\e171";
}

.metro .icon-home:before {
  content: "\e172";
}

.metro .icon-spin:before {
  content: "\e173";
}

.metro .icon-auction:before {
  content: "\e174";
}

.metro .icon-dollar:before {
  content: "\e175";
}

.metro .icon-dollar-2:before {
  content: "\e176";
}

.metro .icon-coins:before {
  content: "\e177";
}

.metro .icon-file-2:before {
  content: "\e186";
}

.metro .icon-file-3:before {
  content: "\e187";
}

.metro .icon-file-4:before {
  content: "\e188";
}

.metro .icon-files:before {
  content: "\e189";
}

.metro .icon-phone-2:before {
  content: "\e18a";
}

.metro .icon-tablet:before {
  content: "\e18b";
}

.metro .icon-monitor-2:before {
  content: "\e18c";
}

.metro .icon-window:before {
  content: "\e18d";
}

.metro .icon-tv:before {
  content: "\e18e";
}

.metro .icon-camera-3:before {
  content: "\e18f";
}

.metro .icon-image:before {
  content: "\e190";
}

.metro .icon-open:before {
  content: "\e191";
}

.metro .icon-sale:before {
  content: "\e192";
}

.metro .icon-direction:before {
  content: "\e193";
}

.metro .icon-medal:before {
  content: "\e194";
}

.metro .icon-medal-2:before {
  content: "\e195";
}

.metro .icon-satellite:before {
  content: "\e196";
}

.metro .icon-discout:before {
  content: "\e197";
}

.metro .icon-barcode:before {
  content: "\e198";
}

.metro .icon-ticket:before {
  content: "\e199";
}

.metro .icon-shipping:before {
  content: "\e19a";
}

.metro .icon-globe:before {
  content: "\e19b";
}

.metro .icon-anchor:before {
  content: "\e19c";
}

.metro .icon-pop-out:before {
  content: "\e19d";
}

.metro .icon-pop-in:before {
  content: "\e19e";
}

.metro .icon-resize:before {
  content: "\e178";
}

.metro .icon-battery-2:before {
  content: "\e179";
}

.metro .icon-battery-3:before {
  content: "\e17a";
}

.metro .icon-battery-4:before {
  content: "\e17b";
}

.metro .icon-battery-5:before {
  content: "\e17c";
}

.metro .icon-tools:before {
  content: "\e17d";
}

.metro .icon-alarm-2:before {
  content: "\e17e";
}

.metro .icon-alarm-cancel:before {
  content: "\e17f";
}

.metro .icon-alarm-clock:before {
  content: "\e180";
}

.metro .icon-chronometer:before {
  content: "\e181";
}

.metro .icon-ruler:before {
  content: "\e182";
}

.metro .icon-lamp:before {
  content: "\e183";
}

.metro .icon-lamp-2:before {
  content: "\e184";
}

.metro .icon-scissors:before {
  content: "\e185";
}

.metro .icon-volume-4:before {
  content: "\e19f";
}

.metro .icon-volume-5:before {
  content: "\e1a0";
}

.metro .icon-volume-6:before {
  content: "\e1a1";
}

.metro .icon-battery-full:before {
  content: "\e15f";
}

.metro .icon-battery-empty:before {
  content: "\e15d";
}

.metro .icon-battery-half:before {
  content: "\e15e";
}

.metro .icon-zip:before {
  content: "\e1a2";
}

.metro .icon-zip-2:before {
  content: "\e1a3";
}

.metro .icon-play-2:before {
  content: "\e1a4";
}

.metro .icon-pause-2:before {
  content: "\e1a5";
}

.metro .icon-record:before {
  content: "\e1a6";
}

.metro .icon-stop-2:before {
  content: "\e1a7";
}

.metro .icon-next:before {
  content: "\e1a8";
}

.metro .icon-previous:before {
  content: "\e1a9";
}

.metro .icon-first-2:before {
  content: "\e1aa";
}

.metro .icon-last-2:before {
  content: "\e1ab";
}

.metro .icon-arrow-left-4:before {
  content: "\e1ac";
}

.metro .icon-arrow-down-4:before {
  content: "\e1ad";
}

.metro .icon-arrow-up-4:before {
  content: "\e1ae";
}

.metro .icon-arrow-right-4:before {
  content: "\e1af";
}

.metro .icon-arrow-left-5:before {
  content: "\e1b0";
}

.metro .icon-arrow-down-5:before {
  content: "\e1b1";
}

.metro .icon-arrow-up-5:before {
  content: "\e1b2";
}

.metro .icon-arrow-right-5:before {
  content: "\e1b3";
}

.metro .icon-cc:before {
  content: "\e1b4";
}

.metro .icon-cc-by:before {
  content: "\e1b5";
}

.metro .icon-cc-nc:before {
  content: "\e1b6";
}

.metro .icon-cc-nc-eu:before {
  content: "\e1b7";
}

.metro .icon-cc-nc-jp:before {
  content: "\e1b8";
}

.metro .icon-cc-sa:before {
  content: "\e1b9";
}

.metro .icon-cc-nd:before {
  content: "\e1ba";
}

.metro .icon-cc-pd:before {
  content: "\e1bb";
}

.metro .icon-cc-zero:before {
  content: "\e1bc";
}

.metro .icon-cc-share:before {
  content: "\e1bd";
}

.metro .icon-cc-share-2:before {
  content: "\e1be";
}

.metro .icon-cycle:before {
  content: "\e1bf";
}

.metro .icon-stop-3:before {
  content: "\e1c0";
}

.metro .icon-stats-2:before {
  content: "\e1c1";
}

.metro .icon-stats-3:before {
  content: "\e1c2";
}

.metro .example {
  padding: 20px 40px 20px 60px;
  border: 1px #ccc solid;
  position: relative;
  margin: 0 0 10px 0;
  background-color: #fdfdfd !important;
  min-height: 100px;
}

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

.metro .example:after {
  clear: both;
}

.metro .example:before {
  position: absolute;
  content: "example";
  left: -21px;
  top: 30px;
  color: #999 !important;
  margin: 5px 10px;
  font-family: "Segoe UI Semibold_", "Open Sans Bold", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.6);
  font-size: 1.4rem;
  line-height: 1.4rem;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.metro code, .metro .code {
  font-family: "Segoe UI_", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #000;
  font-size: 11pt;
  line-height: 15pt;
  letter-spacing: 0.02em;
  font-family: "Courier New", monospace;
  display: inline-block;
  padding: 3px 5px;
  margin: 0;
  background-color: #eee;
  color: #e51400;
  border: 1px #d4d4d4 solid;
  font-size: 90%;
  line-height: 90%;
}

.metro .label {
  display: inline-block;
  padding: 3px 5px;
  margin: 0;
  font-size: 90%;
  font-weight: normal !important;
  line-height: 90%;
  background: #eee;
  color: #555;
  font-weight: bold;
}

.metro .label.alert, .metro .label.error {
  background-color: #e51400;
  color: #fff;
}

.metro .label.important, .metro .label.warning {
  background-color: #fa6800;
  color: #fff;
}

.metro .label.success {
  background-color: #128023;
  color: #fff;
}

.metro .label.info {
  background-color: #1ba1e2;
  color: #fff;
}

.metro hr {
  height: 1px;
  margin: 20px 0;
  border: 0;
  color: #eee;
  background-color: #eee;
}

.metro .bg-black {
  background-color: #000 !important;
}

.metro .bg-white {
  background-color: #fff !important;
}

.metro .bg-lime {
  background-color: #a4c400 !important;
}

.metro .bg-green {
  background-color: #60a917 !important;
}

.metro .bg-emerald {
  background-color: #008a00 !important;
}

.metro .bg-teal {
  background-color: #00aba9 !important;
}

.metro .bg-cyan {
  background-color: #1ba1e2 !important;
}

.metro .bg-cobalt {
  background-color: #0050ef !important;
}

.metro .bg-indigo {
  background-color: #6a00ff !important;
}

.metro .bg-violet {
  background-color: #a0f !important;
}

.metro .bg-pink {
  background-color: #dc4fad !important;
}

.metro .bg-magenta {
  background-color: #d80073 !important;
}

.metro .bg-crimson {
  background-color: #a20025 !important;
}

.metro .bg-red {
  background-color: #e51400 !important;
}

.metro .bg-orange {
  background-color: #fa6800 !important;
}

.metro .bg-amber {
  background-color: #f0a30a !important;
}

.metro .bg-yellow {
  background-color: #e3c800 !important;
}

.metro .bg-brown {
  background-color: #825a2c !important;
}

.metro .bg-olive {
  background-color: #6d8764 !important;
}

.metro .bg-steel {
  background-color: #647687 !important;
}

.metro .bg-mauve {
  background-color: #76608a !important;
}

.metro .bg-taupe {
  background-color: #87794e !important;
}

.metro .bg-gray {
  background-color: #555 !important;
}

.metro .bg-dark {
  background-color: #333 !important;
}

.metro .bg-darker {
  background-color: #222 !important;
}

.metro .bg-transparent {
  background-color: transparent !important;
}

.metro .bg-darkBrown {
  background-color: #63362f !important;
}

.metro .bg-darkCrimson {
  background-color: #640024 !important;
}

.metro .bg-darkMagenta {
  background-color: #81003c !important;
}

.metro .bg-darkIndigo {
  background-color: #4b0096 !important;
}

.metro .bg-darkCyan {
  background-color: #1b6eae !important;
}

.metro .bg-darkCobalt {
  background-color: #00356a !important;
}

.metro .bg-darkTeal {
  background-color: #004050 !important;
}

.metro .bg-darkEmerald {
  background-color: #003e00 !important;
}

.metro .bg-darkGreen {
  background-color: #128023 !important;
}

.metro .bg-darkOrange {
  background-color: #bf5a15 !important;
}

.metro .bg-darkRed {
  background-color: #9a1616 !important;
}

.metro .bg-darkPink {
  background-color: #9a165a !important;
}

.metro .bg-darkViolet {
  background-color: #57169a !important;
}

.metro .bg-darkBlue {
  background-color: #16499a !important;
}

.metro .bg-lightBlue {
  background-color: #4390df !important;
}

.metro .bg-lightRed {
  background-color: #ff2d19 !important;
}

.metro .bg-lightGreen {
  background-color: #7ad61d !important;
}

.metro .bg-lighterBlue {
  background-color: #0cf !important;
}

.metro .bg-lightTeal {
  background-color: #45fffd !important;
}

.metro .bg-lightOlive {
  background-color: #78aa1c !important;
}

.metro .bg-lightOrange {
  background-color: #c29008 !important;
}

.metro .bg-lightPink {
  background-color: #f472d0 !important;
}

.metro .bg-grayDark {
  background-color: #333 !important;
}

.metro .bg-grayDarker {
  background-color: #222 !important;
}

.metro .bg-grayLight {
  background-color: #999 !important;
}

.metro .bg-grayLighter {
  background-color: #eee !important;
}

.metro .bg-blue {
  background-color: #00aff0 !important;
}

.metro .fg-black {
  color: #000 !important;
}

.metro .fg-white {
  color: #fff !important;
}

.metro .fg-lime {
  color: #a4c400 !important;
}

.metro .fg-green {
  color: #60a917 !important;
}

.metro .fg-emerald {
  color: #008a00 !important;
}

.metro .fg-teal {
  color: #00aba9 !important;
}

.metro .fg-cyan {
  color: #1ba1e2 !important;
}

.metro .fg-cobalt {
  color: #0050ef !important;
}

.metro .fg-indigo {
  color: #6a00ff !important;
}

.metro .fg-violet {
  color: #a0f !important;
}

.metro .fg-pink {
  color: #dc4fad !important;
}

.metro .fg-magenta {
  color: #d80073 !important;
}

.metro .fg-crimson {
  color: #a20025 !important;
}

.metro .fg-red {
  color: #e51400 !important;
}

.metro .fg-orange {
  color: #fa6800 !important;
}

.metro .fg-amber {
  color: #f0a30a !important;
}

.metro .fg-yellow {
  color: #e3c800 !important;
}

.metro .fg-brown {
  color: #825a2c !important;
}

.metro .fg-olive {
  color: #6d8764 !important;
}

.metro .fg-steel {
  color: #647687 !important;
}

.metro .fg-mauve {
  color: #76608a !important;
}

.metro .fg-taupe {
  color: #87794e !important;
}

.metro .fg-gray {
  color: #555 !important;
}

.metro .fg-dark {
  color: #333 !important;
}

.metro .fg-darker {
  color: #222 !important;
}

.metro .fg-transparent {
  color: transparent !important;
}

.metro .fg-darkBrown {
  color: #63362f !important;
}

.metro .fg-darkCrimson {
  color: #640024 !important;
}

.metro .fg-darkMagenta {
  color: #81003c !important;
}

.metro .fg-darkIndigo {
  color: #4b0096 !important;
}

.metro .fg-darkCyan {
  color: #1b6eae !important;
}

.metro .fg-darkCobalt {
  color: #00356a !important;
}

.metro .fg-darkTeal {
  color: #004050 !important;
}

.metro .fg-darkEmerald {
  color: #003e00 !important;
}

.metro .fg-darkGreen {
  color: #128023 !important;
}

.metro .fg-darkOrange {
  color: #bf5a15 !important;
}

.metro .fg-darkRed {
  color: #9a1616 !important;
}

.metro .fg-darkPink {
  color: #9a165a !important;
}

.metro .fg-darkViolet {
  color: #57169a !important;
}

.metro .fg-darkBlue {
  color: #16499a !important;
}

.metro .fg-lightBlue {
  color: #4390df !important;
}

.metro .fg-lighterBlue {
  color: #0cf !important;
}

.metro .fg-lightTeal {
  color: #45fffd !important;
}

.metro .fg-lightOlive {
  color: #78aa1c !important;
}

.metro .fg-lightOrange {
  color: #c29008 !important;
}

.metro .fg-lightPink {
  color: #f472d0 !important;
}

.metro .fg-lightRed {
  color: #ff2d19 !important;
}

.metro .fg-lightGreen {
  color: #7ad61d !important;
}

.metro .fg-grayDark {
  color: #333 !important;
}

.metro .fg-grayDarker {
  color: #222 !important;
}

.metro .fg-grayLight {
  color: #999 !important;
}

.metro .fg-grayLighter {
  color: #eee !important;
}

.metro .fg-blue {
  color: #00aff0 !important;
}

.metro .ol-black {
  outline-color: #000 !important;
}

.metro .ol-white {
  outline-color: #fff !important;
}

.metro .ol-lime {
  outline-color: #a4c400 !important;
}

.metro .ol-green {
  outline-color: #60a917 !important;
}

.metro .ol-emerald {
  outline-color: #008a00 !important;
}

.metro .ol-teal {
  outline-color: #00aba9 !important;
}

.metro .ol-cyan {
  outline-color: #1ba1e2 !important;
}

.metro .ol-cobalt {
  outline-color: #0050ef !important;
}

.metro .ol-indigo {
  outline-color: #6a00ff !important;
}

.metro .ol-violet {
  outline-color: #a0f !important;
}

.metro .ol-pink {
  outline-color: #dc4fad !important;
}

.metro .ol-magenta {
  outline-color: #d80073 !important;
}

.metro .ol-crimson {
  outline-color: #a20025 !important;
}

.metro .ol-red {
  outline-color: #e51400 !important;
}

.metro .ol-orange {
  outline-color: #fa6800 !important;
}

.metro .ol-amber {
  outline-color: #f0a30a !important;
}

.metro .ol-yellow {
  outline-color: #e3c800 !important;
}

.metro .ol-brown {
  outline-color: #825a2c !important;
}

.metro .ol-olive {
  outline-color: #6d8764 !important;
}

.metro .ol-steel {
  outline-color: #647687 !important;
}

.metro .ol-mauve {
  outline-color: #76608a !important;
}

.metro .ol-taupe {
  outline-color: #87794e !important;
}

.metro .ol-gray {
  outline-color: #555 !important;
}

.metro .ol-dark {
  outline-color: #333 !important;
}

.metro .ol-darker {
  outline-color: #222 !important;
}

.metro .ol-transparent {
  outline-color: transparent !important;
}

.metro .ol-darkBrown {
  outline-color: #63362f !important;
}

.metro .ol-darkCrimson {
  outline-color: #640024 !important;
}

.metro .ol-darkMagenta {
  outline-color: #81003c !important;
}

.metro .ol-darkIndigo {
  outline-color: #4b0096 !important;
}

.metro .ol-darkCyan {
  outline-color: #1b6eae !important;
}

.metro .ol-darkCobalt {
  outline-color: #00356a !important;
}

.metro .ol-darkTeal {
  outline-color: #004050 !important;
}

.metro .ol-darkEmerald {
  outline-color: #003e00 !important;
}

.metro .ol-darkGreen {
  outline-color: #128023 !important;
}

.metro .ol-darkOrange {
  outline-color: #bf5a15 !important;
}

.metro .ol-darkRed {
  outline-color: #9a1616 !important;
}

.metro .ol-darkPink {
  outline-color: #9a165a !important;
}

.metro .ol-darkViolet {
  outline-color: #57169a !important;
}

.metro .ol-darkBlue {
  outline-color: #16499a !important;
}

.metro .ol-lightBlue {
  outline-color: #4390df !important;
}

.metro .ol-lighterBlue {
  outline-color: #0cf !important;
}

.metro .ol-lightTeal {
  outline-color: #45fffd !important;
}

.metro .ol-lightOlive {
  outline-color: #78aa1c !important;
}

.metro .ol-lightOrange {
  outline-color: #c29008 !important;
}

.metro .ol-lightPink {
  outline-color: #f472d0 !important;
}

.metro .ol-lightRed {
  outline-color: #ff2d19 !important;
}

.metro .ol-lightGreen {
  outline-color: #7ad61d !important;
}

.metro .ol-grayDark {
  outline-color: #333 !important;
}

.metro .ol-grayDarker {
  outline-color: #222 !important;
}

.metro .ol-grayLight {
  outline-color: #999 !important;
}

.metro .ol-grayLighter {
  outline-color: #eee !important;
}

.metro .ol-blue {
  outline-color: #00aff0 !important;
}

.metro .bd-black {
  border-color: #000 !important;
}

.metro .bd-white {
  border-color: #fff !important;
}

.metro .bd-lime {
  border-color: #a4c400 !important;
}

.metro .bd-green {
  border-color: #60a917 !important;
}

.metro .bd-emerald {
  border-color: #008a00 !important;
}

.metro .bd-teal {
  border-color: #00aba9 !important;
}

.metro .bd-cyan {
  border-color: #1ba1e2 !important;
}

.metro .bd-cobalt {
  border-color: #0050ef !important;
}

.metro .bd-indigo {
  border-color: #6a00ff !important;
}

.metro .bd-violet {
  border-color: #a0f !important;
}

.metro .bd-pink {
  border-color: #dc4fad !important;
}

.metro .bd-magenta {
  border-color: #d80073 !important;
}

.metro .bd-crimson {
  border-color: #a20025 !important;
}

.metro .bd-red {
  border-color: #e51400 !important;
}

.metro .bd-orange {
  border-color: #fa6800 !important;
}

.metro .bd-amber {
  border-color: #f0a30a !important;
}

.metro .bd-yellow {
  border-color: #e3c800 !important;
}

.metro .bd-brown {
  border-color: #825a2c !important;
}

.metro .bd-olive {
  border-color: #6d8764 !important;
}

.metro .bd-steel {
  border-color: #647687 !important;
}

.metro .bd-mauve {
  border-color: #76608a !important;
}

.metro .bd-taupe {
  border-color: #87794e !important;
}

.metro .bd-gray {
  border-color: #555 !important;
}

.metro .bd-dark {
  border-color: #333 !important;
}

.metro .bd-darker {
  border-color: #222 !important;
}

.metro .bd-transparent {
  border-color: transparent !important;
}

.metro .bd-darkBrown {
  border-color: #63362f !important;
}

.metro .bd-darkCrimson {
  border-color: #640024 !important;
}

.metro .bd-darkMagenta {
  border-color: #81003c !important;
}

.metro .bd-darkIndigo {
  border-color: #4b0096 !important;
}

.metro .bd-darkCyan {
  border-color: #1b6eae !important;
}

.metro .bd-darkCobalt {
  border-color: #00356a !important;
}

.metro .bd-darkTeal {
  border-color: #004050 !important;
}

.metro .bd-darkEmerald {
  border-color: #003e00 !important;
}

.metro .bd-darkGreen {
  border-color: #128023 !important;
}

.metro .bd-darkOrange {
  border-color: #bf5a15 !important;
}

.metro .bd-darkRed {
  border-color: #9a1616 !important;
}

.metro .bd-darkPink {
  border-color: #9a165a !important;
}

.metro .bd-darkViolet {
  border-color: #57169a !important;
}

.metro .bd-darkBlue {
  border-color: #16499a !important;
}

.metro .bd-lightBlue {
  border-color: #4390df !important;
}

.metro .bd-lightTeal {
  border-color: #45fffd !important;
}

.metro .bd-lightOlive {
  border-color: #78aa1c !important;
}

.metro .bd-lightOrange {
  border-color: #c29008 !important;
}

.metro .bd-lightPink {
  border-color: #f472d0 !important;
}

.metro .bd-lightRed {
  border-color: #ff2d19 !important;
}

.metro .bd-lightGreen {
  border-color: #7ad61d !important;
}

.metro .bd-grayDark {
  border-color: #333 !important;
}

.metro .bd-grayDarker {
  border-color: #222 !important;
}

.metro .bd-grayLight {
  border-color: #999 !important;
}

.metro .bd-grayLighter {
  border-color: #eee !important;
}

.metro .bd-blue {
  border-color: #00aff0 !important;
}

.metro .bg-hover-black:hover {
  background-color: #000 !important;
}

.metro .bg-hover-white:hover {
  background-color: #fff !important;
}

.metro .bg-hover-lime:hover {
  background-color: #a4c400 !important;
}

.metro .bg-hover-green:hover {
  background-color: #60a917 !important;
}

.metro .bg-hover-emerald:hover {
  background-color: #008a00 !important;
}

.metro .bg-hover-teal:hover {
  background-color: #00aba9 !important;
}

.metro .bg-hover-cyan:hover {
  background-color: #1ba1e2 !important;
}

.metro .bg-hover-cobalt:hover {
  background-color: #0050ef !important;
}

.metro .bg-hover-indigo:hover {
  background-color: #6a00ff !important;
}

.metro .bg-hover-violet:hover {
  background-color: #a0f !important;
}

.metro .bg-hover-pink:hover {
  background-color: #dc4fad !important;
}

.metro .bg-hover-magenta:hover {
  background-color: #d80073 !important;
}

.metro .bg-hover-crimson:hover {
  background-color: #a20025 !important;
}

.metro .bg-hover-red:hover {
  background-color: #e51400 !important;
}

.metro .bg-hover-orange:hover {
  background-color: #fa6800 !important;
}

.metro .bg-hover-amber:hover {
  background-color: #f0a30a !important;
}

.metro .bg-hover-yellow:hover {
  background-color: #e3c800 !important;
}

.metro .bg-hover-brown:hover {
  background-color: #825a2c !important;
}

.metro .bg-hover-olive:hover {
  background-color: #6d8764 !important;
}

.metro .bg-hover-steel:hover {
  background-color: #647687 !important;
}

.metro .bg-hover-mauve:hover {
  background-color: #76608a !important;
}

.metro .bg-hover-taupe:hover {
  background-color: #87794e !important;
}

.metro .bg-hover-gray:hover {
  background-color: #555 !important;
}

.metro .bg-hover-dark:hover {
  background-color: #333 !important;
}

.metro .bg-hover-darker:hover {
  background-color: #222 !important;
}

.metro .bg-hover-transparent:hover {
  background-color: transparent !important;
}

.metro .bg-hover-darkBrown:hover {
  background-color: #63362f !important;
}

.metro .bg-hover-darkCrimson:hover {
  background-color: #640024 !important;
}

.metro .bg-hover-darkMagenta:hover {
  background-color: #81003c !important;
}

.metro .bg-hover-darkIndigo:hover {
  background-color: #4b0096 !important;
}

.metro .bg-hover-darkCyan:hover {
  background-color: #1b6eae !important;
}

.metro .bg-hover-darkCobalt:hover {
  background-color: #00356a !important;
}

.metro .bg-hover-darkTeal:hover {
  background-color: #004050 !important;
}

.metro .bg-hover-darkEmerald:hover {
  background-color: #003e00 !important;
}

.metro .bg-hover-darkGreen:hover {
  background-color: #128023 !important;
}

.metro .bg-hover-darkOrange:hover {
  background-color: #bf5a15 !important;
}

.metro .bg-hover-darkRed:hover {
  background-color: #9a1616 !important;
}

.metro .bg-hover-darkPink:hover {
  background-color: #9a165a !important;
}

.metro .bg-hover-darkViolet:hover {
  background-color: #57169a !important;
}

.metro .bg-hover-darkBlue:hover {
  background-color: #16499a !important;
}

.metro .bg-hover-lightBlue:hover {
  background-color: #4390df !important;
}

.metro .bg-hover-lightTeal:hover {
  background-color: #45fffd !important;
}

.metro .bg-hover-lightOlive:hover {
  background-color: #78aa1c !important;
}

.metro .bg-hover-lightOrange:hover {
  background-color: #c29008 !important;
}

.metro .bg-hover-lightPink:hover {
  background-color: #f472d0 !important;
}

.metro .bg-hover-lightRed:hover {
  background-color: #ff2d19 !important;
}

.metro .bg-hover-lightGreen:hover {
  background-color: #7ad61d !important;
}

.metro .bg-hover-grayDark:hover {
  background-color: #333 !important;
}

.metro .bg-hover-grayDarker:hover {
  background-color: #222 !important;
}

.metro .bg-hover-grayLight:hover {
  background-color: #999 !important;
}

.metro .bg-hover-grayLighter:hover {
  background-color: #eee !important;
}

.metro .bg-hover-blue:hover {
  background-color: #00aff0 !important;
}

.metro .fg-hover-black:hover {
  color: #000 !important;
}

.metro .fg-hover-white:hover {
  color: #fff !important;
}

.metro .fg-hover-lime:hover {
  color: #a4c400 !important;
}

.metro .fg-hover-green:hover {
  color: #60a917 !important;
}

.metro .fg-hover-emerald:hover {
  color: #008a00 !important;
}

.metro .fg-hover-teal:hover {
  color: #00aba9 !important;
}

.metro .fg-hover-cyan:hover {
  color: #1ba1e2 !important;
}

.metro .fg-hover-cobalt:hover {
  color: #0050ef !important;
}

.metro .fg-hover-indigo:hover {
  color: #6a00ff !important;
}

.metro .fg-hover-violet:hover {
  color: #a0f !important;
}

.metro .fg-hover-pink:hover {
  color: #dc4fad !important;
}

.metro .fg-hover-magenta:hover {
  color: #d80073 !important;
}

.metro .fg-hover-crimson:hover {
  color: #a20025 !important;
}

.metro .fg-hover-red:hover {
  color: #e51400 !important;
}

.metro .fg-hover-orange:hover {
  color: #fa6800 !important;
}

.metro .fg-hover-amber:hover {
  color: #f0a30a !important;
}

.metro .fg-hover-yellow:hover {
  color: #e3c800 !important;
}

.metro .fg-hover-brown:hover {
  color: #825a2c !important;
}

.metro .fg-hover-olive:hover {
  color: #6d8764 !important;
}

.metro .fg-hover-steel:hover {
  color: #647687 !important;
}

.metro .fg-hover-mauve:hover {
  color: #76608a !important;
}

.metro .fg-hover-taupe:hover {
  color: #87794e !important;
}

.metro .fg-hover-gray:hover {
  color: #555 !important;
}

.metro .fg-hover-dark:hover {
  color: #333 !important;
}

.metro .fg-hover-darker:hover {
  color: #222 !important;
}

.metro .fg-hover-transparent:hover {
  color: transparent !important;
}

.metro .fg-hover-darkBrown:hover {
  color: #63362f !important;
}

.metro .fg-hover-darkCrimson:hover {
  color: #640024 !important;
}

.metro .fg-hover-darkMagenta:hover {
  color: #81003c !important;
}

.metro .fg-hover-darkIndigo:hover {
  color: #4b0096 !important;
}

.metro .fg-hover-darkCyan:hover {
  color: #1b6eae !important;
}

.metro .fg-hover-darkCobalt:hover {
  color: #00356a !important;
}

.metro .fg-hover-darkTeal:hover {
  color: #004050 !important;
}

.metro .fg-hover-darkEmerald:hover {
  color: #003e00 !important;
}

.metro .fg-hover-darkGreen:hover {
  color: #128023 !important;
}

.metro .fg-hover-darkOrange:hover {
  color: #bf5a15 !important;
}

.metro .fg-hover-darkRed:hover {
  color: #9a1616 !important;
}

.metro .fg-hover-darkPink:hover {
  color: #9a165a !important;
}

.metro .fg-hover-darkViolet:hover {
  color: #57169a !important;
}

.metro .fg-hover-darkBlue:hover {
  color: #16499a !important;
}

.metro .fg-hover-lightBlue:hover {
  color: #4390df !important;
}

.metro .fg-hover-lightTeal:hover {
  color: #45fffd !important;
}

.metro .fg-hover-lightOlive:hover {
  color: #78aa1c !important;
}

.metro .fg-hover-lightOrange:hover {
  color: #c29008 !important;
}

.metro .fg-hover-lightPink:hover {
  color: #f472d0 !important;
}

.metro .fg-hover-lightRed:hover {
  color: #ff2d19 !important;
}

.metro .fg-hover-lightGreen:hover {
  color: #7ad61d !important;
}

.metro .fg-hover-grayDark:hover {
  color: #333 !important;
}

.metro .fg-hover-grayDarker:hover {
  color: #222 !important;
}

.metro .fg-hover-grayLight:hover {
  color: #999 !important;
}

.metro .fg-hover-grayLighter:hover {
  color: #eee !important;
}

.metro .fg-hover-blue:hover {
  color: #00aff0 !important;
}

.metro .bg-active-black:active {
  background-color: #000 !important;
}

.metro .bg-active-white:active {
  background-color: #fff !important;
}

.metro .bg-active-lime:active {
  background-color: #a4c400 !important;
}

.metro .bg-active-green:active {
  background-color: #60a917 !important;
}

.metro .bg-active-emerald:active {
  background-color: #008a00 !important;
}

.metro .bg-active-teal:active {
  background-color: #00aba9 !important;
}

.metro .bg-active-cyan:active {
  background-color: #1ba1e2 !important;
}

.metro .bg-active-cobalt:active {
  background-color: #0050ef !important;
}

.metro .bg-active-indigo:active {
  background-color: #6a00ff !important;
}

.metro .bg-active-violet:active {
  background-color: #a0f !important;
}

.metro .bg-active-pink:active {
  background-color: #dc4fad !important;
}

.metro .bg-active-magenta:active {
  background-color: #d80073 !important;
}

.metro .bg-active-crimson:active {
  background-color: #a20025 !important;
}

.metro .bg-active-red:active {
  background-color: #e51400 !important;
}

.metro .bg-active-orange:active {
  background-color: #fa6800 !important;
}

.metro .bg-active-amber:active {
  background-color: #f0a30a !important;
}

.metro .bg-active-yellow:active {
  background-color: #e3c800 !important;
}

.metro .bg-active-brown:active {
  background-color: #825a2c !important;
}

.metro .bg-active-olive:active {
  background-color: #6d8764 !important;
}

.metro .bg-active-steel:active {
  background-color: #647687 !important;
}

.metro .bg-active-mauve:active {
  background-color: #76608a !important;
}

.metro .bg-active-taupe:active {
  background-color: #87794e !important;
}

.metro .bg-active-gray:active {
  background-color: #555 !important;
}

.metro .bg-active-dark:active {
  background-color: #333 !important;
}

.metro .bg-active-darker:active {
  background-color: #222 !important;
}

.metro .bg-active-transparent:active {
  background-color: transparent !important;
}

.metro .bg-active-darkBrown:active {
  background-color: #63362f !important;
}

.metro .bg-active-darkCrimson:active {
  background-color: #640024 !important;
}

.metro .bg-active-darkMagenta:active {
  background-color: #81003c !important;
}

.metro .bg-active-darkIndigo:active {
  background-color: #4b0096 !important;
}

.metro .bg-active-darkCyan:active {
  background-color: #1b6eae !important;
}

.metro .bg-active-darkCobalt:active {
  background-color: #00356a !important;
}

.metro .bg-active-darkTeal:active {
  background-color: #004050 !important;
}

.metro .bg-active-darkEmerald:active {
  background-color: #003e00 !important;
}

.metro .bg-active-darkGreen:active {
  background-color: #128023 !important;
}

.metro .bg-active-darkOrange:active {
  background-color: #bf5a15 !important;
}

.metro .bg-active-darkRed:active {
  background-color: #9a1616 !important;
}

.metro .bg-active-darkPink:active {
  background-color: #9a165a !important;
}

.metro .bg-active-darkViolet:active {
  background-color: #57169a !important;
}

.metro .bg-active-darkBlue:active {
  background-color: #16499a !important;
}

.metro .bg-active-lightBlue:active {
  background-color: #4390df !important;
}

.metro .bg-active-lightTeal:active {
  background-color: #45fffd !important;
}

.metro .bg-active-lightOlive:active {
  background-color: #78aa1c !important;
}

.metro .bg-active-lightOrange:active {
  background-color: #c29008 !important;
}

.metro .bg-active-lightPink:active {
  background-color: #f472d0 !important;
}

.metro .bg-active-lightRed:active {
  background-color: #ff2d19 !important;
}

.metro .bg-active-lightGreen:active {
  background-color: #7ad61d !important;
}

.metro .bg-active-grayDark:active {
  background-color: #333 !important;
}

.metro .bg-active-grayDarker:active {
  background-color: #222 !important;
}

.metro .bg-active-grayLight:active {
  background-color: #999 !important;
}

.metro .bg-active-grayLighter:active {
  background-color: #eee !important;
}

.metro .bg-active-blue:active {
  background-color: #00aff0 !important;
}

.metro .fg-active-black:active {
  color: #000 !important;
}

.metro .fg-active-white:active {
  color: #fff !important;
}

.metro .fg-active-lime:active {
  color: #a4c400 !important;
}

.metro .fg-active-green:active {
  color: #60a917 !important;
}

.metro .fg-active-emerald:active {
  color: #008a00 !important;
}

.metro .fg-active-teal:active {
  color: #00aba9 !important;
}

.metro .fg-active-cyan:active {
  color: #1ba1e2 !important;
}

.metro .fg-active-cobalt:active {
  color: #0050ef !important;
}

.metro .fg-active-indigo:active {
  color: #6a00ff !important;
}

.metro .fg-active-violet:active {
  color: #a0f !important;
}

.metro .fg-active-pink:active {
  color: #dc4fad !important;
}

.metro .fg-active-magenta:active {
  color: #d80073 !important;
}

.metro .fg-active-crimson:active {
  color: #a20025 !important;
}

.metro .fg-active-red:active {
  color: #e51400 !important;
}

.metro .fg-active-orange:active {
  color: #fa6800 !important;
}

.metro .fg-active-amber:active {
  color: #f0a30a !important;
}

.metro .fg-active-yellow:active {
  color: #e3c800 !important;
}

.metro .fg-active-brown:active {
  color: #825a2c !important;
}

.metro .fg-active-olive:active {
  color: #6d8764 !important;
}

.metro .fg-active-steel:active {
  color: #647687 !important;
}

.metro .fg-active-mauve:active {
  color: #76608a !important;
}

.metro .fg-active-taupe:active {
  color: #87794e !important;
}

.metro .fg-active-gray:active {
  color: #555 !important;
}

.metro .fg-active-dark:active {
  color: #333 !important;
}

.metro .fg-active-darker:active {
  color: #222 !important;
}

.metro .fg-active-transparent:active {
  color: transparent !important;
}

.metro .fg-active-darkBrown:active {
  color: #63362f !important;
}

.metro .fg-active-darkCrimson:active {
  color: #640024 !important;
}

.metro .fg-active-darkMagenta:active {
  color: #81003c !important;
}

.metro .fg-active-darkIndigo:active {
  color: #4b0096 !important;
}

.metro .fg-active-darkCyan:active {
  color: #1b6eae !important;
}

.metro .fg-active-darkCobalt:active {
  color: #00356a !important;
}

.metro .fg-active-darkTeal:active {
  color: #004050 !important;
}

.metro .fg-active-darkEmerald:active {
  color: #003e00 !important;
}

.metro .fg-active-darkGreen:active {
  color: #128023 !important;
}

.metro .fg-active-darkOrange:active {
  color: #bf5a15 !important;
}

.metro .fg-active-darkRed:active {
  color: #9a1616 !important;
}

.metro .fg-active-darkPink:active {
  color: #9a165a !important;
}

.metro .fg-active-darkViolet:active {
  color: #57169a !important;
}

.metro .fg-active-darkBlue:active {
  color: #16499a !important;
}

.metro .fg-active-lightBlue:active {
  color: #4390df !important;
}

.metro .fg-active-lightTeal:active {
  color: #45fffd !important;
}

.metro .fg-active-lightOlive:active {
  color: #78aa1c !important;
}

.metro .fg-active-lightOrange:active {
  color: #c29008 !important;
}

.metro .fg-active-lightPink:active {
  color: #f472d0 !important;
}

.metro .fg-active-lightRed:active {
  color: #ff2d19 !important;
}

.metro .fg-active-lightGreen:active {
  color: #7ad61d !important;
}

.metro .fg-active-grayDark:active {
  color: #333 !important;
}

.metro .fg-active-grayDarker:active {
  color: #222 !important;
}

.metro .fg-active-grayLight:active {
  color: #999 !important;
}

.metro .fg-active-grayLighter:active {
  color: #eee !important;
}

.metro .fg-active-blue:active {
  color: #00aff0 !important;
}

.metro .bg-focus-black:focus {
  background-color: #000 !important;
}

.metro .bg-focus-white:focus {
  background-color: #fff !important;
}

.metro .bg-focus-lime:focus {
  background-color: #a4c400 !important;
}

.metro .bg-focus-green:focus {
  background-color: #60a917 !important;
}

.metro .bg-focus-emerald:focus {
  background-color: #008a00 !important;
}

.metro .bg-focus-teal:focus {
  background-color: #00aba9 !important;
}

.metro .bg-focus-cyan:focus {
  background-color: #1ba1e2 !important;
}

.metro .bg-focus-cobalt:focus {
  background-color: #0050ef !important;
}

.metro .bg-focus-indigo:focus {
  background-color: #6a00ff !important;
}

.metro .bg-focus-violet:focus {
  background-color: #a0f !important;
}

.metro .bg-focus-pink:focus {
  background-color: #dc4fad !important;
}

.metro .bg-focus-magenta:focus {
  background-color: #d80073 !important;
}

.metro .bg-focus-crimson:focus {
  background-color: #a20025 !important;
}

.metro .bg-focus-red:focus {
  background-color: #e51400 !important;
}

.metro .bg-focus-orange:focus {
  background-color: #fa6800 !important;
}

.metro .bg-focus-amber:focus {
  background-color: #f0a30a !important;
}

.metro .bg-focus-yellow:focus {
  background-color: #e3c800 !important;
}

.metro .bg-focus-brown:focus {
  background-color: #825a2c !important;
}

.metro .bg-focus-olive:focus {
  background-color: #6d8764 !important;
}

.metro .bg-focus-steel:focus {
  background-color: #647687 !important;
}

.metro .bg-focus-mauve:focus {
  background-color: #76608a !important;
}

.metro .bg-focus-taupe:focus {
  background-color: #87794e !important;
}

.metro .bg-focus-gray:focus {
  background-color: #555 !important;
}

.metro .bg-focus-dark:focus {
  background-color: #333 !important;
}

.metro .bg-focus-darker:focus {
  background-color: #222 !important;
}

.metro .bg-focus-transparent:focus {
  background-color: transparent !important;
}

.metro .bg-focus-darkBrown:focus {
  background-color: #63362f !important;
}

.metro .bg-focus-darkCrimson:focus {
  background-color: #640024 !important;
}

.metro .bg-focus-darkMagenta:focus {
  background-color: #81003c !important;
}

.metro .bg-focus-darkIndigo:focus {
  background-color: #4b0096 !important;
}

.metro .bg-focus-darkCyan:focus {
  background-color: #1b6eae !important;
}

.metro .bg-focus-darkCobalt:focus {
  background-color: #00356a !important;
}

.metro .bg-focus-darkTeal:focus {
  background-color: #004050 !important;
}

.metro .bg-focus-darkEmerald:focus {
  background-color: #003e00 !important;
}

.metro .bg-focus-darkGreen:focus {
  background-color: #128023 !important;
}

.metro .bg-focus-darkOrange:focus {
  background-color: #bf5a15 !important;
}

.metro .bg-focus-darkRed:focus {
  background-color: #9a1616 !important;
}

.metro .bg-focus-darkPink:focus {
  background-color: #9a165a !important;
}

.metro .bg-focus-darkViolet:focus {
  background-color: #57169a !important;
}

.metro .bg-focus-darkBlue:focus {
  background-color: #16499a !important;
}

.metro .bg-focus-lightBlue:focus {
  background-color: #4390df !important;
}

.metro .bg-focus-lightTeal:focus {
  background-color: #45fffd !important;
}

.metro .bg-focus-lightOlive:focus {
  background-color: #78aa1c !important;
}

.metro .bg-focus-lightOrange:focus {
  background-color: #c29008 !important;
}

.metro .bg-focus-lightPink:focus {
  background-color: #f472d0 !important;
}

.metro .bg-focus-lightRed:focus {
  background-color: #ff2d19 !important;
}

.metro .bg-focus-lightGreen:focus {
  background-color: #7ad61d !important;
}

.metro .bg-focus-grayDark:focus {
  background-color: #333 !important;
}

.metro .bg-focus-grayDarker:focus {
  background-color: #222 !important;
}

.metro .bg-focus-grayLight:focus {
  background-color: #999 !important;
}

.metro .bg-focus-grayLighter:focus {
  background-color: #eee !important;
}

.metro .bg-focus-blue:focus {
  background-color: #00aff0 !important;
}

.metro .fg-focus-black:focus {
  color: #000 !important;
}

.metro .fg-focus-white:focus {
  color: #fff !important;
}

.metro .fg-focus-lime:focus {
  color: #a4c400 !important;
}

.metro .fg-focus-green:focus {
  color: #60a917 !important;
}

.metro .fg-focus-emerald:focus {
  color: #008a00 !important;
}

.metro .fg-focus-teal:focus {
  color: #00aba9 !important;
}

.metro .fg-focus-cyan:focus {
  color: #1ba1e2 !important;
}

.metro .fg-focus-cobalt:focus {
  color: #0050ef !important;
}

.metro .fg-focus-indigo:focus {
  color: #6a00ff !important;
}

.metro .fg-focus-violet:focus {
  color: #a0f !important;
}

.metro .fg-focus-pink:focus {
  color: #dc4fad !important;
}

.metro .fg-focus-magenta:focus {
  color: #d80073 !important;
}

.metro .fg-focus-crimson:focus {
  color: #a20025 !important;
}

.metro .fg-focus-red:focus {
  color: #e51400 !important;
}

.metro .fg-focus-orange:focus {
  color: #fa6800 !important;
}

.metro .fg-focus-amber:focus {
  color: #f0a30a !important;
}

.metro .fg-focus-yellow:focus {
  color: #e3c800 !important;
}

.metro .fg-focus-brown:focus {
  color: #825a2c !important;
}

.metro .fg-focus-olive:focus {
  color: #6d8764 !important;
}

.metro .fg-focus-steel:focus {
  color: #647687 !important;
}

.metro .fg-focus-mauve:focus {
  color: #76608a !important;
}

.metro .fg-focus-taupe:focus {
  color: #87794e !important;
}

.metro .fg-focus-gray:focus {
  color: #555 !important;
}

.metro .fg-focus-dark:focus {
  color: #333 !important;
}

.metro .fg-focus-darker:focus {
  color: #222 !important;
}

.metro .fg-focus-transparent:focus {
  color: transparent !important;
}

.metro .fg-focus-darkBrown:focus {
  color: #63362f !important;
}

.metro .fg-focus-darkCrimson:focus {
  color: #640024 !important;
}

.metro .fg-focus-darkMagenta:focus {
  color: #81003c !important;
}

.metro .fg-focus-darkIndigo:focus {
  color: #4b0096 !important;
}

.metro .fg-focus-darkCyan:focus {
  color: #1b6eae !important;
}

.metro .fg-focus-darkCobalt:focus {
  color: #00356a !important;
}

.metro .fg-focus-darkTeal:focus {
  color: #004050 !important;
}

.metro .fg-focus-darkEmerald:focus {
  color: #003e00 !important;
}

.metro .fg-focus-darkGreen:focus {
  color: #128023 !important;
}

.metro .fg-focus-darkOrange:focus {
  color: #bf5a15 !important;
}

.metro .fg-focus-darkRed:focus {
  color: #9a1616 !important;
}

.metro .fg-focus-darkPink:focus {
  color: #9a165a !important;
}

.metro .fg-focus-darkViolet:focus {
  color: #57169a !important;
}

.metro .fg-focus-darkBlue:focus {
  color: #16499a !important;
}

.metro .fg-focus-lightBlue:focus {
  color: #4390df !important;
}

.metro .fg-focus-lightTeal:focus {
  color: #45fffd !important;
}

.metro .fg-focus-lightOlive:focus {
  color: #78aa1c !important;
}

.metro .fg-focus-lightOrange:focus {
  color: #c29008 !important;
}

.metro .fg-focus-lightPink:focus {
  color: #f472d0 !important;
}

.metro .fg-focus-lightRed:focus {
  color: #ff2d19 !important;
}

.metro .fg-focus-lightGreen:focus {
  color: #7ad61d !important;
}

.metro .fg-focus-grayDark:focus {
  color: #333 !important;
}

.metro .fg-focus-grayDarker:focus {
  color: #222 !important;
}

.metro .fg-focus-grayLight:focus {
  color: #999 !important;
}

.metro .fg-focus-grayLighter:focus {
  color: #eee !important;
}

.metro .fg-focus-blue:focus {
  color: #00aff0 !important;
}

.metro .ribbed-black {
  background-color: #000 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-white {
  background-color: #fff !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-lime {
  background-color: #a4c400 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-green {
  background-color: #60a917 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-emerald {
  background-color: #008a00 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-teal {
  background-color: #00aba9 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-cyan {
  background-color: #1ba1e2 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-cobalt {
  background-color: #0050ef !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-indigo {
  background-color: #6a00ff !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-violet {
  background-color: #a0f !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-pink {
  background-color: #dc4fad !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-magenta {
  background-color: #d80073 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-crimson {
  background-color: #a20025 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-red {
  background-color: #e51400 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-orange {
  background-color: #fa6800 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-amber {
  background-color: #f0a30a !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-yellow {
  background-color: #e3c800 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-brown {
  background-color: #825a2c !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-olive {
  background-color: #6d8764 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-steel {
  background-color: #647687 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-mauve {
  background-color: #76608a !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-taupe {
  background-color: #87794e !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-dark {
  background-color: #1d1d1d !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-darkBrown {
  background-color: #63362f !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-darkCrimson {
  background-color: #640024 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-darkMagenta {
  background-color: #81003c !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-darkIndigo {
  background-color: #4b0096 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-darkCyan {
  background-color: #1b6eae !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-darkCobalt {
  background-color: #00356a !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-darkTeal {
  background-color: #004050 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-darkEmerald {
  background-color: #003e00 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-darkGreen {
  background-color: #128023 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-darkOrange {
  background-color: #bf5a15 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-darkRed {
  background-color: #9a1616 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-darkPink {
  background-color: #9a165a !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-darkViolet {
  background-color: #57169a !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-darkBlue {
  background-color: #16499a !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-lightTeal {
  background-color: #45fffd !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-lightOlive {
  background-color: #78aa1c !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-lightOrange {
  background-color: #c29008 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-lightPink {
  background-color: #f472d0 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-lightRed {
  background-color: #ff2d19 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-lightGreen {
  background-color: #7ad61d !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-grayed {
  background-color: #585858 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-grayDarker {
  background-color: #222 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-gray {
  background-color: #555 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-grayLight {
  background-color: #999 !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-grayLighter {
  background-color: #eee !important;
  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: -moz-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: -ms-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;
}

.metro .ribbed-blue {
  background-color: #00aff0 !important;
  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: -moz-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: -ms-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;
}

#responsive-utils .hide-element {
  display: none !important;
  visibility: hidden !important;
}

#responsive-utils .show-element {
  display: block !important;
  visibility: visible !important;
}

#responsive-utils .full-size {
  float: none !important;
  display: block !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#responsive-utils .half-size {
  width: 50% !important;
}

#responsive-utils .container-desktop {
  width: 940px !important;
}

#responsive-utils .container-phone {
  width: 100% !important;
}

#responsive-utils .container-phone2 {
  width: 100% !important;
}

#responsive-utils .container-phone3 {
  width: 100% !important;
}

#responsive-utils .container-phone4 {
  width: 100% !important;
}

#responsive-utils .container-tablet {
  width: 720px !important;
}

#responsive-utils .container-large {
  width: 1140px !important;
}

#responsive-utils .container-phone {
  padding: 0 10px;
}

@media screen and (min-width: 800px) {
  .no-desktop {
    display: none !important;
    visibility: hidden !important;
  }
}
@media screen and (min-width: 1024px) {
  .no-desktop {
    display: none !important;
    visibility: hidden !important;
  }
  .on-desktop {
    display: block !important;
    visibility: visible !important;
  }
  .container {
    width: 940px !important;
  }
}
@media screen and (min-width: 1200px) {
  html {
    font-size: 70%;
  }
  .no-large {
    display: none !important;
    visibility: hidden !important;
  }
  .on-large {
    display: block !important;
    visibility: visible !important;
  }
  .container {
    width: 1140px !important;
  }
}
@media only screen and (max-width: 1024px) {
  .no-tablet-landscape, .no-tablet {
    display: none !important;
    visibility: hidden !important;
  }
  .on-tablet {
    display: block !important;
    visibility: visible !important;
  }
  .container {
    width: 940px !important;
  }
}
@media only screen and (max-width: 800px) {
  html {
    font-size: 60%;
  }
  .no-tablet-portrait, .no-tablet {
    display: none !important;
    visibility: hidden !important;
  }
  .on-tablet {
    display: block !important;
    visibility: visible !important;
  }
  .container {
    width: 720px !important;
  }
  .grid:not(.fluid) > .row {
    margin: 0;
  }
  .grid:not(.fluid) > .row > [class*=span] {
    width: 350px !important;
    margin-left: 0 !important;
    margin-bottom: 20px;
  }
  .grid:not(.fluid) > .row > [class*=span]:nth-child(even) {
    margin-left: 20px !important;
  }
  .grid:not(.fluid) > .row .span12, .grid:not(.fluid) > .row .span7, .grid:not(.fluid) > .row .span8, .grid:not(.fluid) > .row .span9, .grid:not(.fluid) > .row .span10, .grid:not(.fluid) > .row .span11 {
    width: 720px !important;
  }
  .grid:not(.fluid) > .row .span12:nth-child(even), .grid:not(.fluid) > .row .span7:nth-child(even), .grid:not(.fluid) > .row .span8:nth-child(even), .grid:not(.fluid) > .row .span9:nth-child(even), .grid:not(.fluid) > .row .span10:nth-child(even), .grid:not(.fluid) > .row .span11:nth-child(even) {
    margin-left: 0 !important;
  }
  .grid:not(.fluid) > .row .row {
    margin: 0;
  }
  .grid:not(.fluid) > .row .row [class*=span] {
    width: 350px !important;
    margin-left: 0 !important;
    margin-bottom: 20px;
  }
  .grid:not(.fluid) > .row .row [class*=span]:nth-child(even) {
    margin-left: 20px !important;
  }
  .grid:not(.fluid) > .row .row .span12, .grid:not(.fluid) > .row .row .span7, .grid:not(.fluid) > .row .row .span8, .grid:not(.fluid) > .row .row .span9, .grid:not(.fluid) > .row .row .span10, .grid:not(.fluid) > .row .row .span11 {
    width: 720px !important;
  }
  .grid:not(.fluid) > .row .row .span12:nth-child(even), .grid:not(.fluid) > .row .row .span7:nth-child(even), .grid:not(.fluid) > .row .row .span8:nth-child(even), .grid:not(.fluid) > .row .row .span9:nth-child(even), .grid:not(.fluid) > .row .row .span10:nth-child(even), .grid:not(.fluid) > .row .row .span11:nth-child(even) {
    margin-left: 0 !important;
  }
  .navigation-bar, .navbar {
    position: relative !important;
  }
  .navigation-bar .pull-menu, .navbar .pull-menu {
    display: block !important;
  }
  .navigation-bar .element, .navbar .element {
    float: none !important;
  }
  .navigation-bar .element-divider, .navbar .element-divider {
    display: none !important;
  }
  .navigation-bar .element-menu, .navbar .element-menu {
    position: relative;
    float: none;
    display: none;
    width: 100% !important;
    background-color: inherit;
    z-index: 1000;
  }
  .navigation-bar .element-menu li, .navbar .element-menu li {
    display: block !important;
    float: none !important;
    width: 100%;
  }
  .navigation-bar .element-menu li a, .navbar .element-menu li a {
    display: block !important;
    float: none !important;
    width: 100%;
  }
  .navigation-bar .element-menu li .dropdown-menu, .navbar .element-menu li .dropdown-menu {
    position: relative !important;
    left: 0;
  }
  .navigation-bar .element-menu .dropdown-toggle, .navbar .element-menu .dropdown-toggle {
    color: inherit;
    position: relative;
  }
  .navigation-bar .element-menu .dropdown-toggle:after, .navbar .element-menu .dropdown-toggle:after {
    position: absolute;
    left: 100% !important;
    margin-left: -15px;
  }
  .navigation-bar .element-menu .dropdown-menu .dropdown-toggle:after, .navbar .element-menu .dropdown-menu .dropdown-toggle:after {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@media only screen and (max-width: 800px) {
  .navigation-bar .pull-menu, .navbar .pull-menu {
    display: block !important;
  }
}
@media only screen and (max-width: 640px) {
  html {
    font-size: 60%;
  }
  .no-phone-landscape, .no-phone {
    display: none !important;
    visibility: hidden !important;
  }
  .on-phone {
    display: block !important;
    visibility: visible !important;
  }
  .container {
    width: 100% !important;
    padding: 0 10px;
  }
  .grid:not(.fluid) > .row {
    margin: 0;
  }
  .grid:not(.fluid) > .row > [class*=span] {
    width: 100% !important;
    margin: 0 !important;
    margin-bottom: 5px !important;
  }
  .grid:not(.fluid) > .row > [class*=span]:nth-child(even) {
    margin-left: 0 !important;
  }
  .grid:not(.fluid) > .row .span12 {
    width: 100% !important;
  }
  .grid:not(.fluid) > .row .row {
    margin: 0;
  }
  .grid:not(.fluid) > .row .row > [class*=span] {
    width: 100% !important;
    margin: 0 !important;
    margin-bottom: 5px !important;
  }
  .grid:not(.fluid) > .row .row > [class*=span]:nth-child(even) {
    margin-left: 0 !important;
  }
  .grid:not(.fluid) > .row .row .span12 {
    width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  html {
    font-size: 45%;
  }
  .no-phone-landscape, .no-phone {
    display: none !important;
    visibility: hidden !important;
  }
  .container {
    width: 100% !important;
  }
}
@media only screen and (max-width: 360px) {
  html {
    font-size: 40%;
  }
  .no-phone-portrait, .no-phone {
    display: none !important;
    visibility: hidden !important;
  }
  .container {
    width: 100% !important;
  }
}
@media only screen and (max-width: 320px) {
  html {
    font-size: 40%;
  }
  .no-phone-portrait, .no-phone {
    display: none !important;
    visibility: hidden !important;
  }
  .container {
    width: 100% !important;
  }
}
header {
  height: 45px;
  position: relative;
}

@font-face {
  font-family: "iconFont";
  src: url("/assets/iconFont-03316e62.eot");
  src: url("/assets/iconFont-03316e62.eot?#iefix") format("embedded-opentype"), url("/assets/iconFont-03d9fa0e.woff") format("woff"), url("/assets/iconFont-cd6a806b.ttf") format("truetype"), url("/assets/iconFont-22fa54c3.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
.avatar {
  width: 50px;
  height: 50px;
}

.ticket-button-set {
  margin-top: 16px;
  border-top: 1px solid #e7e7e7;
  padding-top: 16px;
}

.field_with_errors input, .field_with_errors select, .field_with_errors textarea, [aria-invalid=true] input, [aria-invalid=true] select, [aria-invalid=true] textarea {
  border: 1px solid red;
}
.field_with_errors span.error, [aria-invalid=true] span.error {
  display: block;
  color: red;
}

.activity-duration {
  background-color: var(--neutral-100);
  padding: 0.2rem 0.4rem;
  border-radius: 0.4rem;
}

.ticket-box {
  padding: 16px;
}

.ticket-box-header {
  font-size: 120%;
}

.ticket-box-text {
  padding-top: 8px;
}
.ticket-box-text a {
  color: white;
  text-decoration: underline;
}

span.warning-state {
  color: red;
}

.new_ticket-header {
  font-size: 120%;
  margin-bottom: 10px;
}
.new_ticket-employee_details {
  margin-top: 10px;
  margin-bottom: 10px;
}
.new_ticket-employee_header {
  margin-top: 20px;
  margin-bottom: 10px;
}
.new_ticket-employee_header a {
  font-size: 120%;
  font-weight: bold;
}
.new_ticket-employee_email {
  margin-top: 5px;
}
.new_ticket-employee_description {
  margin-top: 10px;
  margin-bottom: 10px;
}
.new_ticket-employee_description p {
  line-height: 1.4;
}
.new_ticket-ticket_details {
  margin-top: 10px;
  margin-bottom: 20px;
}

.ticket-details__status {
  color: #6987A2;
  font-weight: bold;
  float: right;
}
.ticket-details__description {
  margin-top: 8px;
  color: #003436;
  font-size: 90%;
}
.ticket-details__author {
  color: #003436;
  font-weight: bold;
}

.ticket-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ticket-info__title i {
  color: var(--neutral-300);
  margin-right: 0.5rem;
}
.ticket-info__title {
  font-size: 2rem;
  font-weight: bold;
}
.ticket-info__subtitle {
  padding-top: 16px;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--neutral-500);
}
.ticket-info__subtitle .value {
  font-weight: bold;
  color: var(--neutral-700);
}
.ticket-info__description {
  background-color: var(--neutral-50-light);
  border: 1px solid var(--neutral-100);
  color: black;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  font-weight: 700 !important;
  line-height: 2rem;
  padding: 1rem;
}
.ticket-info__description a {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.ticket-info__description pre {
  overflow-x: auto;
  max-width: 40rem;
  font-size: 1.2rem !important;
}

.ticket-switch-controls {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.ticket-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.ticket-container__body {
  flex-basis: 50%;
}
.ticket-container__sidebar {
  flex-basis: 50%;
}

@media (min-width: 768px) {
  .ticket-container {
    flex-direction: row;
  }
}
.ticket-transitions-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ticket-transitions-container .error {
  color: var(--error);
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 1rem;
}

.ticket-transitions {
  margin: 0 !important;
}
.ticket-transitions__assigned-to {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ticket-transitions .select2-container {
  margin: 16px 0px !important;
}
.ticket-transitions .select2-selection--single, .ticket-transitions .select2-container--default {
  height: 42px !important;
}
.ticket-transitions .select2-selection__rendered {
  padding: 4px 8px !important;
}
.ticket-transitions .select2-selection--single .select2-selection__arrow {
  height: 44px !important;
  margin-right: 8px !important;
}

.pause {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--neutral-100);
  border-radius: 0.5rem;
  color: var(--neutral-500);
}
.pause span.value {
  color: var(--neutral-700);
  font-weight: 700 !important;
}
.pause textarea {
  width: 100%;
}

#pause .error {
  color: var(--error);
  font-size: 1.2rem;
  font-weight: 700;
}

.ticket-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--neutral-100);
  border-radius: 0.5rem;
  color: var(--neutral-500);
  font-size: 1.2rem;
}
.ticket-card__id {
  min-width: 6rem;
}
.ticket-card__header {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: baseline;
  color: var(--neutral-700) !important;
}
.ticket-card__header a {
  font-weight: 700 !important;
  text-decoration: none;
}
.ticket-card__description {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--neutral-700);
}
.ticket-card__date {
  font-size: 1.2rem !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: var(--neutral-500) !important;
}
.ticket-card__status {
  margin-left: auto;
  min-width: 7rem;
}

.ticket-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ticket-cards--sidebar .ticket {
  max-width: 100%;
  grid-template-columns: 3rem 12rem 16rem 8rem;
  grid-template-rows: 1fr 2rem 2rem;
  grid-template-areas: "assigned-to id employee date" "assigned-to status service sla" "assigned-to description description description";
}
.ticket-cards--sidebar .ticket__client {
  display: none;
}
.ticket-cards--sidebar .ticket__sla {
  min-width: unset;
}
.ticket-cards__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--neutral-700);
  text-transform: uppercase;
}

.ticket {
  font-size: 1.2rem;
  display: grid;
  column-gap: 1rem;
  row-gap: 0.5rem;
  grid-template-columns: 3rem 12rem 16rem 1fr 1fr;
  grid-template-rows: 1fr 2rem 2rem;
  grid-template-areas: "assigned-to id employee service date" "assigned-to status client service sla" "assigned-to description description description description";
}
.ticket--rfc {
  grid-template-columns: 3rem 12rem 16rem 1fr 12rem 1fr;
  grid-template-rows: 1fr 2rem 2rem;
  grid-template-areas: "assigned-to id employee service change date" "assigned-to status client service change sla" "assigned-to description description description description description";
}
.ticket__change {
  grid-area: change;
}
.ticket__id {
  grid-area: id;
  max-width: 12rem;
}
.ticket__description {
  grid-area: description;
  font-weight: 700 !important;
}
.ticket__assigned-to {
  grid-area: assigned-to;
}
.ticket__employee, .ticket__author {
  grid-area: employee;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket__service {
  grid-area: service;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket__status {
  grid-area: status;
}
.ticket__client {
  grid-area: client;
  color: var(--primary-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket__sla {
  grid-area: sla;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ticket__date {
  grid-area: date;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ticket--sidebar {
  display: grid;
  grid-template-columns: 3rem 2fr;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 0.5rem;
}
.ticket--sidebar .ticket__assigned-to {
  grid-column: 1/2;
  grid-row: 1/2;
}
.ticket--sidebar .ticket__meta {
  grid-column: 2/3;
  grid-row: 1/2;
}
.ticket--sidebar .ticket__description {
  grid-column: 1/3;
  grid-row: 2/3;
}
.ticket__meta--sidebar {
  display: flex;
  flex-direction: row;
  gap: 1.2rem;
}
.ticket__meta {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.ticket__icon {
  min-width: 4rem;
}
.ticket__service {
  min-width: 16rem;
}
.ticket__from {
  min-width: rem;
}
.ticket__description--truncated {
  max-height: 3.2rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket__sla {
  min-width: 13rem;
}
.ticket__sla-pause {
  margin-top: 0.5rem;
}
.ticket__author--vip {
  color: var(--accent-red);
}
.ticket__employee--vip {
  color: var(--accent-red);
}
.ticket__status {
  min-width: 10rem;
}
.ticket__change {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ticket__comments i {
  color: var(--neutral-600);
}

.status {
  font-family: var(--font-family-sans-serif) !important;
  font-weight: 500 !important;
  font-size: 1.1rem !important;
  border-radius: 0.8rem;
  text-align: center;
  padding: 0.5rem 1rem;
  line-height: 0.8;
  height: 2rem;
}
.status--open {
  background-color: var(--status-open);
  color: var(--status-open-dark);
}
.status--in_progress {
  background-color: var(--status-in_progress);
  color: var(--status-in_progress-dark);
}
.status--assigned {
  background-color: var(--status-assigned);
  color: var(--status-assigned-dark);
}
.status--finished {
  background-color: var(--status-finished);
  color: var(--status-finished-dark);
}
.status--closed {
  background-color: var(--status-closed);
  color: var(--status-closed-dark);
}
.status--reopened {
  background-color: var(--status-reopened);
}
.status--classified {
  background-color: var(--status-classified);
}
.status--problem {
  background-color: var(--status-problem);
  color: oklch(30% 0.03 45deg);
}
.status--workaround_found {
  background-color: var(--status-workaround_found);
}
.status--solution_found {
  background-color: var(--status-solution_found);
}

/* Table headers 
  TODO: remove after refactoring into divss
*/
.tickets {
  display: grid;
  flex-direction: column;
  gap: 3rem;
}
.tickets th.header__icon {
  width: 5rem;
}
.tickets th.header__id {
  min-width: 9rem;
}
.tickets th.header__from {
  width: 16rem;
}
.tickets th.header__description {
  width: 20rem;
}
.tickets th.header__status {
  width: 12rem;
}
.tickets th.header__created-at {
  min-width: 3rem;
}

.ticket-description {
  background-color: var(--neutral-50-light);
  border: 1px solid var(--neutral-100);
  border-radius: 0.8rem;
  padding: 1.4rem;
  max-width: 680px;
}
.ticket-description p {
  margin: 0 !important;
  font-size: 1.6rem !important;
  line-height: 1.6 !important;
}

.ticket-header {
  font-size: 3rem !important;
  color: var(--neutral-700) !important;
}

.tickets-filter {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}
.tickets-filter__client {
  width: 40rem;
}

.refresh-button a {
  font-weight: 700 !important;
  text-decoration: none;
  margin-top: 1rem;
  border-radius: 0.8rem;
  padding: 0.5rem 1rem;
  background-color: var(--error-100);
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
  font-size: 1.2rem;
}
.refresh-button a:hover {
  color: var(--accent-red) !important;
  background-color: var(--error-50) !important;
}

.report-header {
  font-size: 2em;
  font-weight: bold;
}

.ticket-report__id {
  float: left;
  width: 100px;
}

.ticket-report__author {
  padding: 0 8px;
  float: left;
  width: 40%;
}

.ticket-report__duration {
  float: left;
}

.ticket-report__description {
  clear: both;
}

.report {
  display: flex;
  flex-direction: column;
  gap: 1em;
  border-bottom: 1px solid var(--neutral-200);
  padding-top: 1em;
  padding-bottom: 1em;
}

.report-ticket-body {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  align-items: center;
  span {
    margin-left: 0.25em;
  }
}

.report-ticket-state {
  width: 45ch;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5em;
  i {
    margin-right: 0.25em;
  }
}

.report-ticket-states {
  ul {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
  }
  ul li {
    display: flex;
    width: 55ch;
    align-items: center;
    gap: 0.75em;
    list-style: none;
  }
}

.overdue {
  color: var(--warning-dark);
}

.state__event {
  margin-left: auto;
}

.state__author {
  flex-grow: 1;
}

.state__duration {
  flex-basis: 6ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ticket-state__value {
  background-color: var(--neutral-100);
  padding: 0 0.5em;
  border-radius: 0.25em;
}

.activity-content {
  padding: 20px 20px 0px 20px;
}

.activity {
  display: flex;
  gap: 10px;
}
.activity--invisible .balloon {
  background-color: var(--neutral-50);
}
.activity--invisible i {
  color: var(--neutral-500);
}
.activity--invisible p {
  opacity: 0.5;
}
.activity__author {
  width: 4rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.activity__author-avatar img {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
}
.activity__author-name {
  font-family: var(--font-family-sans-serif) !important;
  color: var(--neutral-700) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}
.activity__created-at time {
  font-family: var(--font-family-sans-serif) !important;
  font-size: 1rem !important;
  color: var(--neutral-500) !important;
}
.activity__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background-color: var(--neutral-50);
  border-radius: 1rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, 0.1);
  font-family: var(--font-family-sans-serif) !important;
  font-size: 1.2rem !important;
  line-height: 1.4 !important;
}
.activity__content-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--neutral-200);
  padding-bottom: 0.5rem;
  align-items: center;
}
.activity__content-footer {
  font-family: var(--font-family-sans-serif) !important;
  font-size: 1rem !important;
  color: var(--neutral-500) !important;
}
.activity__content ul, .activity__content li, .activity__content p {
  max-width: 30rem;
  word-wrap: break-word;
  font-family: var(--font-family-sans-serif) !important;
  font-size: 1.2rem !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.activities {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.activities-form {
  margin-top: 1rem;
}

meter {
  width: 100%;
}

.incident-button-set {
  /*margin-top: 20px;*/
  margin-left: 4px;
}

.incident-box {
  font-size: 80%;
  padding: 16px;
  margin-bottom: 6px;
}
.incident-box .incident-box-header {
  font-size: 120%;
}
.incident-box .incident-box-header a {
  color: white;
  text-decoration: underline;
}
.incident-box .incident-box-header .incident-status {
  padding: 6px;
}
.incident-box .incident-box-text {
  /*min-height: 64px;*/
  padding-top: 8px;
}
.incident-box .incident-box-text img {
  float: left;
  display: block;
  padding: 6px;
}
.incident-box .incident-box-text a {
  color: white;
  text-decoration: underline;
}

.incident-box-selected {
  border: 2px solid blue;
}

.servicerequest-button-set {
  /*margin-top: 20px; */
  margin-left: 4px;
}

ul.request-activities {
  margin-top: 40px;
}

.request-button-set {
  margin-top: 20px;
  margin-left: 4px;
}

.request-box {
  padding: 16px;
  margin-bottom: 6px;
  font-size: 80%;
}
.request-box .request-box-header {
  font-size: 120%;
}
.request-box .request-box-header a {
  color: white;
  text-decoration: underline;
}
.request-box .request-box-header .request-status {
  padding: 6px;
}
.request-box .request-box-text {
  padding-top: 8px;
}
.request-box .request-box-text img {
  float: left;
  display: block;
  padding: 6px;
}
.request-box .request-box-text a {
  color: white;
  text-decoration: underline;
}

.change-button-set {
  /*margin-top: 20px;*/
  margin-left: 4px;
}

.change-box {
  padding: 16px;
}

.change-box-header {
  font-size: 120%;
}

.change-box-text {
  padding-top: 8px;
}
.change-box-text a {
  color: white;
  text-decoration: underline;
}

[data-change-status] {
  padding: 0 8px;
}

[data-change-status=open] {
  background-color: #e51400;
  color: white;
}
[data-change-status=open] a {
  color: white;
  text-decoration: underline;
}

[data-change-status=in_progress] {
  background-color: #f0a30a;
  color: white;
}
[data-change-status=in_progress] a {
  color: white;
  text-decoration: underline;
}

[data-change-status=finished] {
  background-color: #008a00;
  color: white;
}
[data-change-status=finished] a {
  color: white;
  text-decoration: underline;
}

/* Table headers */
/* TODO: remove after refactoring into divs */
.changes {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.change-old--sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.change-old__meta {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.change-old__description {
  background-color: var(--neutral-50-light);
  border: 1px solid var(--neutral-100);
  border-radius: 0.8rem;
  padding: 1.4rem;
  max-width: 680px;
}
.change-old__description p {
  font-family: var(--font-family-sans-serif);
  margin: 0 !important;
  font-size: 1.6rem !important;
  line-height: 1.4 !important;
}
.change-old__assigned-to {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.change-old__start-on, .change-old__finish-on {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  color: var(--neutral-500);
}
.change-old__start-on span.value, .change-old__finish-on span.value {
  font-weight: 700 !important;
  color: var(--neutral-700);
}
.change-old__id {
  width: 8rem;
}
.change-old__title {
  font-size: 2rem;
  font-weight: bold;
}
.change-old__subtitle {
  font-size: 1.6rem;
  font-weight: bold;
}

.change {
  font-size: 1.2rem;
  display: grid;
  column-gap: 1rem;
  row-gap: 0.5rem;
  grid-template-columns: 3rem 12rem 16rem 1fr 1fr 1fr;
  grid-template-rows: 1fr 2rem;
  grid-template-areas: "assigned-to id client service start-on finish-on" "assigned-to status client service start-on finish-on";
}
.change__id {
  grid-area: id;
}
.change__client {
  grid-area: client;
}
.change__status {
  grid-area: status;
}
.change__assigned-to {
  grid-area: assigned-to;
}
.change__service {
  grid-area: service;
}
.change__start-on {
  grid-area: start-on;
}
.change__finish-on {
  grid-area: finish-on;
}
.change__info {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.change--sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.change--sidebar .ticket {
  border: 1px solid var(--neutral-100);
  border-radius: 0.8rem;
  padding: 1.4rem;
  grid-template-columns: 3rem 12rem 1fr;
  grid-template-rows: 1fr 2rem;
  grid-template-areas: "assigned-to id employee" "assigned-to status date";
}
.change--sidebar .ticket__sla {
  display: none;
}
.change--sidebar .ticket__date {
  display: block;
  grid-area: date;
}
.change--sidebar .ticket__description {
  display: none;
}
.change--sidebar .ticket__service {
  display: none;
}
.change--sidebar .ticket__client {
  display: none;
}

.change-prices, .change-dates, .change-duration {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--neutral-500);
  font-size: 1.2rem;
}
.change-prices span.value, .change-dates span.value, .change-duration span.value {
  font-weight: 700 !important;
  color: var(--neutral-700);
}

.tab-frames summary {
  cursor: pointer;
}
.tab-frames details[open] summary {
  display: none;
}

.knowledge-versions {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.knowledges {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.knowledge {
  display: grid;
  font-size: 1.2rem;
  column-gap: 1rem;
  row-gap: 0.5rem;
  grid-template-columns: 6rem 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "id client service updated";
}
.knowledge__id {
  grid-area: id;
}
.knowledge__title {
  font-size: 1.5rem;
  font-weight: bold;
}
.knowledge__client {
  grid-area: client;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.knowledge__service {
  grid-area: service;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.knowledge__updated {
  grid-area: updated;
  font-size: 1rem;
  color: #666;
}
.knowledge__content {
  font-size: 1.2rem;
}
.knowledge__content p {
  font-size: 1.2rem;
}
.knowledge__changes {
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--neutral-500);
}

.knowledge:nth-child(5n) {
  margin-bottom: 2rem;
}

.frame--knowledge .ticket {
  border: 1px solid var(--neutral-100);
  border-radius: 0.8rem;
  padding: 1.4rem;
  grid-template-columns: 3rem 12rem 1fr;
  grid-template-rows: 1fr 2rem 2rem;
  grid-template-areas: "assigned-to id employee" "assigned-to status date" "assigned-to description description";
}
.frame--knowledge .ticket__sla {
  display: none;
}
.frame--knowledge .ticket__date {
  display: block;
  grid-area: date;
}
.frame--knowledge .ticket__service {
  display: none;
}
.frame--knowledge .ticket__client {
  display: none;
}
.frame--knowledge p {
  overflow: wrap;
  word-break: break-word;
}

.knowledge-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--button-shadow);
  padding: 1.5rem;
  border-radius: var(--radius-md);
}
.knowledge-details__title {
  font-size: 1.5rem;
  font-weight: bold;
}
.knowledge-details__service {
  font-size: 1.5rem;
}
.knowledge-details__created {
  font-size: 1.2rem;
  color: var(--neutral-500);
}

.services {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.service {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.service__name {
  font-size: 2rem !important;
  font-weight: 500 !important;
  font-family: var(--font-family-sans-serif) !important;
}
.service__description {
  font-size: 1rem !important;
  font-family: var(--font-family-sans-serif) !important;
}
.service__levels {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.service-clients {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.service-clients__header {
  font-size: 2rem !important;
  text-transform: uppercase !important;
  color: var(--neutral-300) !important;
  font-weight: 500 !important;
  font-family: var(--font-family-sans-serif) !important;
}

.client-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.client-card__title {
  color: var(--neutral-500) !important;
  margin-bottom: 0.5rem;
}
.client-card__name {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
}
.client-card__name i {
  color: var(--neutral-500);
}
.client-card__name a {
  font-weight: 900 !important;
}
.client-card__description {
  max-width: 640px;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.client-card__manager-title {
  color: var(--neutral-500);
}

.client-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.client-form__title {
  font-size: 2rem !important;
  font-weight: 600 !important;
  color: var(--neutral-900) !important;
  margin-bottom: 1rem;
}
.client-form__manager {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  color: var(--neutral-500);
}
.client-form__manager .value {
  color: var(--neutral-900);
  font-weight: 700 !important;
}
.client-form__description {
  background-color: var(--neutral-50-light);
  border: 1px solid var(--neutral-100);
  border-radius: 0.8rem;
  padding: 1rem;
  font-size: 1.4rem;
  font-weight: 700 !important;
  line-height: 2rem;
}
.client-form__description a {
  max-width: 30rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.clients {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.client {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  width: 48%;
  border: 1px solid var(--neutral-200);
  border-radius: 0.8rem;
  padding: 1rem;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.client:hover {
  border-color: var(--neutral-300);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: var(--neutral-50);
}
.client:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.client--inactive {
  opacity: 0.5;
}
.client__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.7;
}
.client__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.client__title {
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  font-family: var(--font-family-sans-serif) !important;
  line-height: 1.4 !important;
  color: var(--neutral-700) !important;
}
.client__employees {
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  font-family: var(--font-family-sans-serif) !important;
  color: var(--neutral-500) !important;
}
.client__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
}

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

.clients-filter {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  max-width: 640px;
  align-items: center;
}
.clients-filter__search {
  flex: 3;
}
.clients-filter__search input {
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.6;
  padding: 0.5rem 1rem;
  background-color: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 0.8rem;
  outline: none;
}
.clients-filter__search input:focus {
  border-color: var(--neutral-300);
}

@media (max-width: 768px) {
  .client {
    width: 100%;
  }
}
.queue-user {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  gap: 1rem;
  margin-top: 4rem;
}
.queue-user__info {
  flex: 1;
}
.queue-user__avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
}
.queue-user__workload {
  flex: 1;
}
.queue-user__tickets-container {
  flex-basis: 100%;
}
.queue-user__ticket {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 0;
}
.queue-user__ticket-duration {
  text-align: right;
  flex: 0.2;
}
.queue-user__ticket-state {
  text-align: center;
}
.queue-user__ticket * {
  flex: 1;
}

.queue-filter {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.queue-filter > * {
  flex: 1;
}

.for-screen-reader {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.problem-link {
  cursor: pointer;
  text-decoration: none;
  color: var(--neutral-900) !important;
}
.problem-link:hover .problem {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

.problem-box-text {
  padding-top: 8px;
}
.problem-box-text a {
  color: white;
  text-decoration: underline;
}

[data-problem-status=problem] {
  background-color: #e51400;
}

[data-problem-status=workaround_found] {
  background-color: #f0a30a;
}

[data-problem-status=solution_found] {
  background-color: #008a00;
}

.with-images + .select2-container .select2-selection--single {
  min-height: 34px;
  max-height: 34px;
  overflow-y: auto;
}

#problems_opened td:first-child, table.problems td:first-child {
  width: 100px;
  text-align: right;
}

span.problem, span.problem-status {
  padding: 0 8px;
  color: white;
  font-size: 96%;
}

.high > td:first-child, span.high {
  background-color: #E61100;
}
.high > td:first-child a, span.high a {
  color: white;
}

.medium > td:first-child, span.medium {
  background-color: #F0A424;
}
.medium > td:first-child a, span.medium a {
  color: white;
}

.low > td:first-child, span.low {
  background-color: #A3C62B;
}
.low > td:first-child a, span.low a {
  color: white;
}

.urgent > td:first-child, span.urgent {
  background-color: #A30023;
}
.urgent > td:first-child a, span.urgent a {
  color: white;
}

.frame--problems {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.5rem;
}

.problem {
  font-size: 1.2rem;
  display: grid;
  column-gap: 1rem;
  row-gap: 0.5rem;
  grid-template-columns: 3rem 13rem 12rem 12rem 20rem 8rem 1fr;
  grid-template-rows: 1fr 2rem;
  grid-template-areas: "assigned-to id client service description sla priority" "assigned-to status client service description sla priority";
}
.problem__assigned-to {
  grid-area: assigned-to;
}
.problem__id {
  grid-area: id;
}
.problem__client {
  grid-area: client;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.problem__service {
  grid-area: service;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.problem__description {
  grid-area: description;
}
.problem__status {
  grid-area: status;
}
.problem__priority {
  grid-area: priority;
}
.problem__sla {
  grid-area: sla;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.problem--card {
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--shadow-color);
  justify-content: space-between;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}
.problem--sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.problem__header {
  font-size: 100%;
  font-weight: bold;
  flex-basis: 50px;
}
.problem__client {
  font-size: 100%;
  flex-grow: 1;
  flex-basis: 180px;
}
.problem__service {
  font-size: 100%;
  flex-basis: 200px;
}
.problem__meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 9rem;
}
.problem__description--truncated {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 3.2rem;
  max-width: 22rem;
}

.problem-incidents {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.problem-incidents .ticket {
  border: 1px solid var(--shadow-color);
  border-radius: 0.8rem;
  padding: 1rem;
  grid-template-columns: 3rem 9rem 20rem;
  grid-template-rows: 1fr 2rem;
  grid-template-areas: "assigned-to id employee" "assigned-to status description";
}
.problem-incidents .ticket__date {
  display: none;
}
.problem-incidents .ticket__sla {
  display: none;
}
.problem-incidents .ticket__service {
  display: none;
}
.problem-incidents .ticket__client {
  display: none;
}

.priority {
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  border-radius: 0.8rem;
  text-align: center;
  padding: 0.5rem 1rem;
}
.priority--high {
  background-color: var(--priority-high);
}
.priority--medium {
  background-color: var(--priority-medium);
}
.priority--low {
  background-color: var(--priority-low);
}
.priority--urgent {
  background-color: var(--priority-urgent);
}

/* Table headers */
/* TODO: remove after refactoring into divs */
.problems {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.problem-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.problem-details__header {
  font-size: 2rem;
  color: var(--neutral-500);
}

.level {
  box-shadow: var(--button-shadow);
  padding: 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  font-family: var(--font-family-sans-serif) !important;
}
.level__ticket_type {
  width: 20rem;
}
.level__ticket_type i {
  color: var(--neutral-500) !important;
  margin-right: 0.5rem;
}
.level__name {
  width: 18rem;
}
.level__response_duration_hours {
  width: 5rem;
  text-align: right;
  font-feature-settings: "tnum" 1;
}
.level__resolve_duration_hours {
  width: 5rem;
  text-align: right;
  font-feature-settings: "tnum" 1;
}
.level:hover {
  box-shadow: var(--button-focus-shadow);
}
.level--nosla {
  color: black;
}
.level--platinum {
  color: #8338ec;
}
.level--gold {
  color: #fb5607;
}
.level--classic {
  color: #577590;
}

.employee-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.employee-card__title {
  color: var(--neutral-500) !important;
}
.employee-card__name {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
}
.employee-card__name i {
  color: var(--neutral-500);
}
.employee-card__name a {
  font-weight: 900 !important;
}
.employee-card__label {
  color: var(--neutral-500) !important;
}
.employee-card__value {
  font-weight: 700 !important;
}

.frame--employee {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.employee-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.employee-form input[type=text],
.employee-form input[type=email],
.employee-form input[type=phone],
.employee-form textarea {
  width: 100%;
}
.employee-form label {
  margin-top: 1rem;
  margin-bottom: 0;
}
.employee-form__password-reset span {
  font-size: 1.2rem;
}
.employee-form__hint {
  font-size: 1rem !important;
  color: var(--neutral-500) !important;
}

.employees {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-direction: row;
  flex-wrap: wrap;
}

.employee {
  width: 48%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--neutral-200);
  position: relative;
}
.employee--inactive {
  opacity: 0.5;
}
.employee__avatar {
  min-width: 4rem;
}
.employee__name {
  font-weight: 700;
}
.employee__position {
  font-size: 1.2rem;
  color: var(--neutral-500);
}
.employee__meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.employee--vip {
  color: var(--accent-red);
}
.employee__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
}
.employee__tickets {
  font-size: 1rem;
  font-weight: 500 !important;
  font-family: var(--font-family-sans-serif) !important;
  background-color: var(--neutral-100);
  color: var(--neutral-600);
  padding: 0.2rem 0.4rem;
  border-radius: 0.5rem;
  border: 1px solid var(--neutral-200);
}

.employees-filter {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  max-width: 640px;
  align-items: center;
}
.employees-filter__search {
  flex: 1;
}
.employees-filter__search input {
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.6;
  padding: 0.5rem 1rem;
  background-color: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 0.8rem;
  outline: none;
}

.employee-avatar {
  border-radius: 50%;
  overflow: hidden;
}
.employee-avatar img {
  width: 4rem !important;
  height: 4rem !important;
  object-fit: cover;
}

img.userpic {
  width: 32px;
  height: 32px;
}

.assigned_to_nano {
  padding-right: 4px;
  vertical-align: middle;
}

.bigdrop.select2-container .select2-results {
  max-height: 300px;
}

.bigdrop .select2-results {
  max-height: 300px;
}

.user-card {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0.5rem;
}
.user-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
}
.user-card__name {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--neutral-900);
}

.assigned-to img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--neutral-200);
  min-width: 2rem;
}
.assigned-to--online {
  position: relative;
}
.assigned-to--online::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background-color: #10b981; /* green-500 */
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.user__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--neutral-200);
}

.users .user {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 0.5rem;
  border: 1px solid var(--neutral-200);
  width: 48%;
}
.users .user:hover {
  background-color: var(--neutral-100);
}
.users .user--inactive {
  opacity: 0.5;
}
.users {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.users-filter {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.ticket-subscriptions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ticket-subscription {
  font-size: 1rem !important;
}
.ticket-subscription--user {
  color: var(--neutral-500);
}
.ticket-subscription--employee {
  color: var(--primary-700);
}
.ticket-subscription__author {
  color: var(--neutral-700);
}
.ticket-subscription__notification {
  color: var(--neutral-700);
  font-weight: 700 !important;
}

.notification--unread {
  color: var(--primary-700);
}
.notification--unread i {
  color: var(--primary-500);
}
.notification--read {
  color: var(--neutral-500);
}
.notification--read i {
  color: var(--neutral-400);
}
.notification__name {
  font-weight: 500 !important;
}

.notifications-menu {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.notifications-menu .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
}

.rfc-button-set {
  /*margin-top: 20px;*/
  margin-left: 4px;
}

.rfc-box {
  padding: 16px;
  margin-bottom: 16px;
}

.rfc-box-header {
  font-size: 120%;
}

.rfc-box-text {
  padding-top: 8px;
}
.rfc-box-text a {
  color: white;
  text-decoration: underline;
}

form.edit_rfc ul.replies {
  margin-top: 24px;
  padding-top: 24px;
}

.rfcs-filter {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  cursor: pointer;
}
.rfcs-filter__body {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}
.rfcs-filter__body div {
  flex-grow: 1;
}
.rfcs-filter__toggle {
  border: 1px solid var(--neutral-50);
  font-size: 1.2rem;
  font-family: var(--font-family-sans-serif);
  font-weight: 500;
  background-color: var(--neutral-50);
  padding: 0.5rem 1rem;
  box-shadow: var(--button-shadow);
}
.rfcs-filter a[aria-expanded=true] .arrow-right {
  transform: rotate(90deg);
}

.rfcs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rfc--sidebar .change {
  border: 1px solid var(--neutral-100);
  border-radius: 0.8rem;
  padding: 1.4rem;
  grid-template-columns: 3rem 12rem 1fr;
  grid-template-rows: 1fr 2rem;
  grid-template-areas: "assigned-to id service" "assigned-to status service";
}
.rfc--sidebar .change__sla {
  display: none;
}
.rfc--sidebar .change__date {
  display: block;
  grid-area: date;
}
.rfc--sidebar .change__client {
  display: none;
}
.rfc--sidebar .change__start-on {
  display: none;
}
.rfc--sidebar .change__finish-on {
  display: none;
}

.sla {
  padding-top: 1rem;
}
.sla i {
  color: var(--neutral-500);
}
.sla__response {
  font-weight: 700 !important;
  color: var(--neutral-900);
}
.sla__resolve {
  font-weight: 700 !important;
  color: var(--neutral-900);
  background-color: var(--neutral-100);
  padding: 0.2rem 0.6rem;
  border-radius: 0.5rem;
}
.sla__resolve--warning {
  color: var(--warning-dark) !important;
  background-color: var(--warning) !important;
}
.sla__resolve--breached i {
  color: var(--error-500) !important;
}
.sla__resolve--breached {
  color: var(--error-900) !important;
  background-color: var(--error-500-light) !important;
}

.sla--disabled {
  text-decoration: line-through;
  background-color: #ededed;
}

:root {
  /* Primary Colors */
  --primary-50: oklch(96% 0.03 245);
  --primary-100: oklch(92% 0.06 245);
  --primary-200: oklch(86% 0.09 245);
  --primary-300: oklch(80% 0.12 245);
  --primary-400: oklch(74% 0.15 245);
  --primary-500: oklch(69% 0.17 245);
  --primary-600: oklch(63% 0.19 245);
  --primary-700: oklch(55% 0.21 245);
  --primary-800: oklch(45% 0.18 245);
  --primary-900: oklch(35% 0.15 245);
  /* Secondary Colors */
  --secondary-50: oklch(96% 0.03 45);
  --secondary-100: oklch(92% 0.06 45);
  --secondary-200: oklch(86% 0.09 45);
  --secondary-300: oklch(80% 0.12 45);
  --secondary-400: oklch(74% 0.16 45);
  --secondary-500: oklch(70% 0.20 45);
  --secondary-600: oklch(65% 0.23 45);
  --secondary-700: oklch(58% 0.24 45);
  --secondary-800: oklch(48% 0.20 45);
  --secondary-900: oklch(38% 0.17 45);
  /* Neutral Colors */
  --neutral-50: oklch(98% 0.005 0);
  --neutral-100: oklch(95% 0.005 0);
  --neutral-200: oklch(90% 0.005 0);
  --neutral-300: oklch(83% 0.005 0);
  --neutral-400: oklch(70% 0.005 0);
  --neutral-500: oklch(60% 0.005 0);
  --neutral-600: oklch(48% 0.005 0);
  --neutral-700: oklch(35% 0.005 0);
  --neutral-800: oklch(25% 0.005 0);
  --neutral-900: oklch(15% 0.005 0);
  --neutral-50-light: oklch(98% 0.02 245 / 50%);
  /* Accent Colors */
  --accent-green: oklch(72% 0.175 155);
  --accent-magenta: oklch(62% 0.19 355);
  --accent-red: oklch(62% 0.12 25);
  --accent-violet: oklch(56% 0.24 298);
  /* Semantic Colors */
  --success: oklch(72% 0.15 155);
  --warning: oklch(70% 0.20 70 / 10%);
  --warning-dark: oklch(60% 0.20 70 / 100%);
  --error: oklch(65% 0.24 25);
  --error-500: oklch(65% 0.24 25 / 50%);
  --error-900: oklch(40% 0.24 25 / 90%);
  --error-500-light: oklch(65% 0.24 25 / 10%);
  --error-100: oklch(65% 0.24 25 / 10%);
  --error-50: oklch(65% 0.24 25 / 5%);
  --info: oklch(70% 0.15 220);
  /* Base Colors */
  --white: oklch(100% 0 0);
  --black: oklch(0% 0 0);
  /* Shadow */
  --shadow-color: oklch(35% 0.01 260 / 0.2);
  /* Status Colors */
  --status-problem: oklch(90% 0.03 45);
  --status-workaround_found: oklch(92% 0.06 245);
  --status-solution_found: oklch(86% 0.09 245);
  --status-resolved: oklch(72% 0.15 245);
  --status-open: oklch(92% 0.03 47);
  --status-open-dark: oklch(40% 0.03 47);
  --status-assigned: oklch(92% 0.03 318);
  --status-assigned-dark: oklch(40% 0.03 318);
  --status-classified: oklch(92% 0.03 95);
  --status-in_progress: oklch(92% 0.03 155);
  --status-in_progress-dark: oklch(40% 0.03 155);
  --status-paused: oklch(72% 0.03 245);
  --status-finished: oklch(72% 0.03 245 / 40%);
  --status-finished-dark: oklch(30% 0.03 245);
  --status-closed: oklch(80% 0.03 245 / 30%);
  --status-closed-dark: oklch(30% 0.03 245);
  /* Priority Colors */
  --priority-high: oklch(90% 0.03 21);
  --priority-medium: oklch(92% 0.03 155);
  --priority-low: oklch(92% 0.03 155);
  --priority-urgent: oklch(92% 0.03 255);
  --font-family-monospace: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "monospace";
  --font-family-sans-serif: "SFProText-Regular", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
  --hover-shadow: inset rgba(0, 0, 0, .15) 0px -1px 0px, inset rgba(64, 68, 82, .15) 0px 0px 0px 1px, rgba(64, 68, 82, .08) 0px 2px 5px 0px;
  --focus-shadow: inset 0px -1px 0px rgba(0,0,0,.15),inset 0px 0px 0px 1px rgba(17,103,89,.4),0px 2px 5px 0px rgba(64,68,82,.08),0px 0px 0px 4px rgba(1,124,110,.25);
  --button-shadow: inset 0px -1px 0px rgba(0, 0, 0, .08), inset 0px 0px 0px 1px #f0efed;
  --button-focus-shadow: inset rgba(0, 0, 0, .15) 0px -1px 0px, inset rgba(64, 68, 82, .15) 0px 0px 0px 1px, rgba(64, 68, 82, .08) 0px 2px 5px 0px;
  --outline-size: 2px;
}

.hidden {
  display: none !important;
}

nav.breadcrumbs {
  padding-top: 20px;
}

.diff {
  overflow: auto;
}

.diff ul {
  background: #fff;
  overflow: auto;
  font-size: 13px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
  width: 100%;
}

.diff del,
.diff ins {
  display: block;
  text-decoration: none;
}

.diff li {
  padding: 0;
  display: table-row;
  margin: 0;
  height: 1em;
}

.diff li.ins {
  background: #dfd;
  color: #080;
}

.diff li.del {
  background: #fee;
  color: #b00;
}

.diff li:hover {
  background: #ffc;
}

/* try 'whitespace:pre;' if you don't want lines to wrap */
.diff del,
.diff ins,
.diff span {
  white-space: pre-wrap;
  font-family: courier;
}

.diff del strong {
  font-weight: normal;
  background: #fcc;
}

.diff ins strong {
  font-weight: normal;
  background: #9f9;
}

.diff li.diff-comment {
  display: none;
}

.diff li.diff-block-info {
  background: none repeat scroll 0 0 gray;
}

span.sidebar-counter {
  margin-left: 4px;
}

.content {
  padding: 20px;
  margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
}

div.btn-group[data-toggle=buttons-radio] input[type=radio] {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.hide {
  display: none;
}

.reply .text {
  min-height: 50px;
}
.reply .text a {
  color: white;
  text-decoration: underline;
  font-size: 100%;
}

.warning {
  color: var(--warning);
  font-size: 120%;
}

i.flag {
  width: 16px;
  height: 10px;
  display: block;
  float: left;
  margin-top: 4px;
  margin-right: 6px;
  /* 611x313 22x11 27,77 28,45  13x10*/
}

i.en {
  background: url("/assets/flags-b12c6db2.png") no-repeat -337px -259px;
}

i.ru {
  /* 17 x 6 */
  background: url("/assets/flags-b12c6db2.png") no-repeat -449px -146px;
}

i.uk {
  /* 21 x 9 */
  background: url("/assets/flags-b12c6db2.png") no-repeat -561px -231px;
}

a.selected1 i:after {
  content: "✓";
}

a.flag-button i {
  margin-left: 8px;
}

.select2-img {
  margin-right: 8px;
  border-radius: 50%;
  width: 2.8rem;
  height: 2.8rem;
}

.date-select {
  display: flex;
  flex-direction: column;
}

.date-select--period {
  font-size: 1.5rem;
  flex-grow: 1;
  padding: 1rem 0;
}

.date-select--selector {
  flex-grow: 1;
}

.clear-fix {
  clear: both;
}

.phones .phone i {
  color: var(--neutral-300);
}
.phones .phone--error {
  color: var(--warning-dark);
  margin-left: 8px;
  font-weight: bold;
}
.phones .phone__carrier {
  color: var(--neutral-500);
  font-size: 0.8em;
}

.phone_original {
  padding-top: 8px;
  color: #777777;
}

.version {
  float: right;
  color: #cecede;
  font-size: 0.8em;
}

.switch2 {
  block-size: 1.75em;
  border-radius: 2em;
  display: inline-flex !important;
  inline-size: 3em;
  position: relative;
  align-items: center;
}
.switch2:has(:focus-visible) .switch2__btn {
  box-shadow: 0 0 0 var(--outline-size) var(--neutral-50), 0 0 0 calc(var(--outline-size) * 2) var(--neutral-700);
}
.switch2 .switch2__label {
  margin-top: -0.25em;
  margin-left: 3.4em;
  white-space: nowrap;
}

.switch2__input {
  block-size: 0;
  inline-size: 0;
  opacity: 0.1;
}

.switch2__btn {
  background-color: var(--primary-200);
  border-radius: 2em;
  cursor: pointer;
  inset: 0;
  position: absolute;
  transition: 150ms ease;
}
.switch2__btn::before {
  background-color: var(--primary-50);
  block-size: 1.35em;
  border-radius: 50%;
  content: "";
  inline-size: 1.35em;
  inset-block-end: 0.2em;
  inset-inline-start: 0.2em;
  position: absolute;
  transition: 150ms ease;
}
.switch2__input:disabled + .switch2__btn {
  background-color: var(--primary-200) !important;
  cursor: not-allowed;
}
.switch2__input:checked + .switch2__btn {
  background-color: var(--primary-500);
}
.switch2__input:checked + .switch2__btn::before {
  transform: translateX(1.2em);
}

.tabs {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  cursor: pointer;
}
.tabs .tab {
  font-family: var(--font-family-sans-serif) !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  box-shadow: var(--button-shadow);
  padding: 0.5rem 1.2rem;
  border-radius: 0.5rem;
  color: var(--neutral-700) !important;
}
.tabs .tab span {
  font-family: var(--font-family-sans-serif) !important;
  font-size: 1.2rem !important;
  line-height: 1.2rem !important;
  font-weight: 500 !important;
  color: var(--neutral-700) !important;
}
.tabs .tab i {
  color: var(--neutral-500) !important;
}
.tabs .tab--active {
  background-color: var(--neutral-50);
  box-shadow: var(--button-focus-shadow);
}

.tabs li a {
  cursor: pointer;
  text-decoration: none;
}

/* Frame container */
.tab-frames {
  padding: 2rem 0;
}

/* Individual frames - hide by default */
.frame1 {
  display: none;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}
.frame1--active {
  opacity: 1;
  display: block;
}

.dropdown-toggle {
  cursor: pointer;
}

nav.pagination {
  margin: 2rem 0;
}

/* Errors */
.errors {
  background-color: var(--warning-color);
  padding: 1em;
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  color: var(--warning-color-text);
  margin-bottom: 2rem;
}

.warning, .alert--warning {
  background-color: var(--warning-color);
  color: var(--warning-color-text);
}

/* Flash */
.alert {
  position: absolute;
  top: 20px;
  background-color: var(--warning-color);
  border-radius: 0.5rem;
  padding: 1rem;
  animation: appear-then-fade 3s 400ms both;
  margin-right: 1rem;
}

.alert--success {
  background-color: var(--success-color);
  color: var(--success-color-text);
}

@keyframes appear-then-fade {
  0%, 100% {
    opacity: 0;
  }
  5%, 60% {
    opacity: 1;
  }
}
.continuousCalendarContainer a.calendarIcon {
  width: 18px;
}
.continuousCalendarContainer .continuousCalendar .calendarScrollContent {
  height: max(30vh, 250px);
}
.continuousCalendarContainer .popUpContainer {
  margin-top: -50px;
}