/* IMPORTED CSS */
@import "/css/font-awesome.min.css";
@import '/css/plugins/scrollbar.css';
/* CALC -- support all browsers */
/* COLORS function */
/* TEMPLATE COLORS */
/* define colors variable */
/* LOGIN */
/* SYSTEM */
/* DEFAULT CSS */
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  z-index: 0;
}
html .clear {
  clear: both;
  width: 100%;
  line-height: 0;
  font-size: 0;
}
html .unselectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
html .overflow {
  overflow: auto;
  overflow-scrolling: auto;
  -webkit-overflow-scrolling: touch;
}
html .anmt {
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
html body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  z-index: 0;
  position: relative;
  background: #ffffff;
  color: #34495e;
  font-weight: normal;
  font-family: Calibri, Verdana, Arial;
  font-size: 14px;
  right: 0;
  /* GLOBAL - color classes */
  /* MAIN CSS ==== TOOLS 2015 */
  /* show class settings */
  /*  FORMS   */
  /* labels */
  /* filter */
  /* select */
  /* inputs */
  /* filter submit */
  /* textarea */
  /* LOGIN PAGE AND ERROR PAGES*/
}
html body p,
html body h1,
html body h2,
html body h3 {
  margin: 0;
  padding: 0;
  font-family: Calibri, Verdana, Arial;
  font-weight: normal;
  line-height: 1;
}
html body table,
html body thead,
html body th,
html body tbody,
html body tr,
html body td {
  border: none!important;
  padding: 0;
  margin: 0;
}
html body a {
  color: #7f8c8d;
  text-decoration: none;
}
html body a:hover {
  color: #34495e;
  text-decoration: none;
}
html body a:visited {
  color: #7f8c8d;
  text-decoration: none;
}
html body img {
  border: none;
}
html body ul {
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
html body ul li {
  list-style-type: none;
}
html body *:focus {
  outline: none;
}
html body .ba-white {
  background: #ffffff;
}
html body .co-white {
  color: #ffffff;
}
html body .ba-black {
  background: #000000;
}
html body .co-black {
  color: #000000;
}
html body .ba-light-gray {
  background: #ecf0f1;
}
html body .co-light-gray {
  color: #ecf0f1;
}
html body .ba-lightness-gray {
  background: #bdc3c7;
}
html body .co-lightness-gray {
  color: #bdc3c7;
}
html body .ba-gray {
  background: #7f8c8d;
}
html body .co-gray {
  color: #7f8c8d;
}
html body .ba-dark-gray {
  background: #34495e;
}
html body .co-dark-gray {
  color: #34495e;
}
html body .ba-very-dark-gray {
  background: #363636;
}
html body .co-very-dark-gray {
  color: #363636;
}
html body .ba-classic-gray {
  background: #cdcdcd;
}
html body .co-classic-dark-gray {
  color: #34495e;
}
html body .ba-green {
  background: #0099CC;
}
html body .co-green {
  color: #0099CC;
}
html body .ba-blue {
  background: #0099cc;
}
html body .co-blue {
  color: #2980b9;
}
html body .ba-red {
  background: #b3392c;
}
html body .co-red {
  color: #b3392c;
}
html body .ba-yellow {
  background: #f1e448;
}
html body .co-yellow {
  color: #f1e448;
}
html body .ba-purple {
  background: #8C5FB5;
}
html body .co-purple {
  color: #8C5FB5;
}
html body #header {
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  height: 54px;
  border-bottom: 1px solid;
  border-color: #0099CC;
  background: rgba(255, 255, 255, 0.9);
}
html body #header .user {
  position: relative;
  float: left;
  background: #0099CC;
  overflow: hidden;
}
html body #header .user .user-ico {
  float: left;
  width: 16px;
  height: 16px;
  padding: 18.5px 12px;
  line-height: 1;
  color: #ffffff;
}
html body #header .user .user-ico:before {
  font-family: FontAwesome;
  content: "\f007";
  font-size: 16px;
}
html body #header .user h3 {
  float: left;
  width: auto;
  color: #ffffff;
  cursor: default;
}
html body #header .user h3 a {
  color: #ffffff;
}
html body #header .user h3 a:hover {
  color: #34495e;
}
html body #header .menu-icon {
  position: relative;
  float: left;
  width: auto;
  height: 24px;
  padding: 15.5px 21px;
  color: #7f8c8d;
  line-height: 1;
}
html body #header .menu-icon:after {
  font-family: FontAwesome;
  content: "\f0c9";
  font-size: 22px;
}
html body #header .menu-icon:hover {
  color: #2980b9;
  cursor: pointer;
}
html body #header .settings {
  position: relative;
  float: right;
  width: auto;
  height: 24px;
  padding: 15.5px 14px;
  color: #7f8c8d;
  line-height: 1;
}
html body #header .settings:before {
  font-family: FontAwesome;
  content: "\f085";
  font-size: 22px;
}
html body #header .settings:hover {
  color: #2980b9;
  cursor: pointer;
}
html body #header .logout {
  position: relative;
  float: right;
  width: auto;
  height: 24px;
  padding: 15.5px 14px;
  color: #7f8c8d;
  line-height: 1;
}
html body #header .logout:before {
  font-family: FontAwesome;
  content: "\f011";
  font-size: 22px;
}
html body #header .logout:hover {
  color: #2980b9;
  cursor: pointer;
}
html body #header .logout a {
  color: #7f8c8d;
}
html body #header .logout a:hover {
  color: #2980b9;
}
html body #header .help {
  position: relative;
  float: right;
  width: auto;
  height: 24px;
  padding: 15.5px 14px;
  color: #7f8c8d;
  line-height: 1;
}
html body #header .help:before {
  font-family: FontAwesome;
  content: "\f128";
  font-size: 22px;
}
html body #header .help:hover {
  color: #2980b9;
  cursor: pointer;
}
html body #header .help p.help-text {
  display: none !important;
}
html body #header .feedback {
  position: relative;
  float: right;
  width: auto;
  height: 24px;
  padding: 15.5px 14px;
  color: #7f8c8d;
  line-height: 1;
}
html body #header .feedback:before {
  font-family: FontAwesome;
  content: "\f003";
  font-size: 22px;
}
html body #header .feedback:hover {
  color: #2980b9;
  cursor: pointer;
}
html body #header .export {
  position: relative;
  float: right;
  width: auto;
  height: 24px;
  padding: 15.5px 14px;
  color: #7f8c8d;
  line-height: 1;
}
html body #header .export:before {
  font-family: FontAwesome;
  content: "\f01a";
  font-size: 22px;
}
html body #header .export:hover {
  color: #2980b9;
  cursor: pointer;
}
html body #header .exportpdf {
  position: relative;
  float: right;
  width: auto;
  height: 24px;
  padding: 15.5px 14px;
  color: #7f8c8d;
  line-height: 1;
}
html body #header .exportpdf:before {
  font-family: FontAwesome;
  content: "\f1c1";
  font-size: 22px;
}
html body #header .exportpdf:hover {
  color: #2980b9;
  cursor: pointer;
}
html body #header .exportxls {
  position: relative;
  float: right;
  width: auto;
  height: 24px;
  padding: 15.5px 14px;
  color: #7f8c8d;
  line-height: 1;
}
html body #header .exportxls:before {
  font-family: FontAwesome;
  content: "\f1c3";
  font-size: 22px;
}
html body #header .exportxls:hover {
  color: #2980b9;
  cursor: pointer;
}
html body #header .last-child {
  padding-right: 28px;
}
html body #header .first-child {
  padding-left: 28px;
}
@media screen and (min-width: 1600px) {
  html body #header .user {
    width: 40px;
    height: 100%;
  }
  html body #header .user h3 {
    font-size: 1em;
    line-height: 56px;
    vertical-align: middle;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1599px) {
  html body #header .user {
    width: 40px;
    height: 100%;
  }
  html body #header .user h3 {
    font-size: 1em;
    line-height: 56px;
    vertical-align: middle;
  }
}
@media screen and (min-width: 850px) and (max-width: 1199px) {
  html body #header .user {
    width: 0;
    height: 100%;
    overflow: hidden;
  }
  html body #header .user h3 {
    font-size: 1em;
    line-height: 54px;
    vertical-align: middle;
  }
}
@media screen and (max-width: 849px) {
  html body #header .user {
    width: 0;
    height: 100%;
    overflow: hidden;
  }
  html body #header .user h3 {
    font-size: 1em;
    line-height: 54px;
    vertical-align: middle;
  }
  html body #header .menu-icon {
    padding: 18.5px 16px;
    height: 18px;
  }
  html body #header .menu-icon:after {
    font-size: 20px;
  }
  html body #header .settings,
  html body #header .logout,
  html body #header .help,
  html body #header .feedback,
  html body #header .export {
    padding: 18.5px 8px;
    height: 18px;
  }
  html body #header .settings:before,
  html body #header .logout:before,
  html body #header .help:before,
  html body #header .feedback:before,
  html body #header .export:before {
    font-size: 20px;
  }
  html body #header .last-child {
    padding-right: 16px;
  }
  html body #header .first-child {
    padding-left: 16px;
  }
}
html body #menu {
  position: fixed;
  background: #ecf0f1;
}
html body #menu ul {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
html body #menu ul li {
  position: relative;
  width: 47px;
  width: -webkit-calc((100% - 53px)*(1));
  width: -moz-calc((100% - 53px)*(1));
  width: calc((100% - 53px)*(1));
  height: 40px;
  font-size: 1em;
  line-height: 40px;
  vertical-align: middle;
  text-align: left;
  padding: 0px 13px 0px 40px;
  text-transform: uppercase;
  border-bottom: 1px solid;
  border-color: transparent;
  color: #7f8c8d;
}
html body #menu ul li:hover {
  color: #34495e;
}
html body #menu ul li.submenu {
  cursor: pointer;
}
html body #menu ul li.submenu ul {
  height: auto;
  max-height: 0;
  overflow: hidden;
}
html body #menu ul li.submenu ul li {
  width: 87px;
  width: -webkit-calc((100% - 13px)*(1));
  width: -moz-calc((100% - 13px)*(1));
  width: calc((100% - 13px)*(1));
  line-height: 26px;
  vertical-align: middle;
  padding: 0px 0 0 13px;
  text-transform: lowercase;
  font-weight: normal;
}
html body #menu ul li.submenu ul li.active {
  color: #0099CC;
  border: none;
  cursor: default;
  font-weight: bold;
}
html body #menu ul li.submenu.active {
  color: #34495e;
}
html body #menu ul li.active {
  color: #34495e;
  cursor: default;
  font-weight: bold;
}
html body #menu ul li.active span:before {
  color: #0099CC;
  font-weight: normal;
}
html body #menu ul li span {
  position: absolute;
  top: 0px;
  right: auto;
  left: 12px;
  width: 16px;
}
html body #menu ul li span.alert {
  right: -40px;
  left: auto;
  width: auto;
  background: #e95359;
  color: #ffffff;
  font-weight: bold;
  font-size: 12px;
  padding: 2px 4px;
}
html body #menu ul li span.ico1:before {
  font-family: FontAwesome;
  content: "\f0e4";
  font-size: 16px;
}
html body #menu ul li span.ico2:before {
  font-family: FontAwesome;
  content: "\f0f3";
  font-size: 16px;
}
html body #menu ul li span.ico3:before {
  font-family: FontAwesome;
  content: "\f200";
  font-size: 16px;
}
html body #menu ul li span.ico4:before {
  font-family: FontAwesome;
  content: "\f080";
  font-size: 16px;
}
html body #menu ul li span.ico5:before {
  font-family: FontAwesome;
  content: "\f0c2";
  font-size: 16px;
}
html body #menu ul li span.ico6:before {
  font-family: FontAwesome;
  content: "\f15b";
  font-size: 16px;
}
html body #menu ul li span.ico7:before {
  font-family: FontAwesome;
  content: "\f0c0";
  font-size: 16px;
}
html body #menu ul li span.ico8:before {
  font-family: FontAwesome;
  content: "\f013";
  font-size: 16px;
}
html body #menu ul li span.ico9:before {
  font-family: FontAwesome;
  content: "\f009";
  font-size: 16px;
}
html body #menu ul li span.ico10:before {
  font-family: FontAwesome;
  content: "\f0c5";
  font-size: 16px;
}
html body #menu ul li span.ico11:before {
  font-family: FontAwesome;
  content: "\f03a";
  font-size: 16px;
}
html body #menu ul li span.ico14:before {
  font-family: FontAwesome;
  content: "\f183";
  font-size: 16px;
}
html body #menu ul li span.ico15:before {
  font-family: FontAwesome;
  content: "\f075";
  font-size: 16px;
}
html body #menu ul li span.ico16:before {
  font-family: FontAwesome;
  content: "\f118";
  font-size: 16px;
}
html body #menu ul li span.ico17:before {
  font-family: FontAwesome;
  content: "\f201";
  font-size: 16px;
}
html body #menu ul li span.ico18:before {
  font-family: FontAwesome;
  content: "\f1c0";
  font-size: 16px;
}
html body #menu ul li span.ico19:before {
  font-family: FontAwesome;
  content: "\f071";
  font-size: 16px;
}
html body #menu ul li span.ico20:before {
  font-family: FontAwesome;
  content: "\f0e8";
  font-size: 16px;
}
html body #menu ul li span.ico21:before {
  font-family: FontAwesome;
  content: "\f012";
  font-size: 16px;
}
html body #menu ul li span.ico22:before {
  font-family: FontAwesome;
  content: "\f091";
  font-size: 16px;
}
html body #menu ul li span.ico23:before {
  font-family: FontAwesome;
  content: "\f004";
  font-size: 16px;
}
html body #menu ul li span.ico24:before {
  font-family: FontAwesome;
  content: "\f098";
  font-size: 16px;
}
html body #menu ul li span.ico25:before {
  font-family: FontAwesome;
  content: "\f1fe";
  font-size: 16px;
}
html body #menu ul li span.ico26:before {
  font-family: FontAwesome;
  content: "\f0e4";
  font-size: 16px;
}
html body #menu ul li span.ico27:before {
  font-family: FontAwesome;
  content: "\f05a";
  font-size: 16px;
}
html body #menu ul li span.ico28:before {
  font-family: FontAwesome;
  content: "\f1d8";
  font-size: 16px;
}
html body #menu ul a {
  color: #7f8c8d;
}
html body #menu ul a:hover {
  color: #34495e;
}
@media screen and (min-width: 1600px) {
  html body #menu {
    top: 55px;
    right: auto;
    bottom: 0;
    left: 0;
    width: 40px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1599px) {
  html body #menu {
    top: 55px;
    right: auto;
    bottom: 0;
    left: 0;
    width: 40px;
  }
}
@media screen and (min-width: 850px) and (max-width: 1199px) {
  html body #menu {
    top: 55px;
    right: auto;
    bottom: 0;
    left: 0;
    width: 0;
  }
}
@media screen and (max-width: 849px) {
  html body #menu {
    top: 55px;
    right: auto;
    bottom: 0;
    left: 0;
    width: 0;
  }
}
html body #settings {
  position: fixed;
  background: #34495e;
  overflow-x: hidden;
}
html body #settings .navigation {
  position: relative;
  float: left;
  width: 100%;
  height: 54px;
  border-bottom: 1px solid;
  border-color: #0099CC;
}
html body #settings .navigation .logo {
  position: relative;
  width: auto;
  height: 28px;
  margin: 14px;
  float: left;
}
html body #settings .filter {
  position: relative;
  float: left;
  width: 100%;
  height: 44px;
  height: -webkit-calc((100% - 56px)*(1));
  height: -moz-calc((100% - 56px)*(1));
  height: calc((100% - 56px)*(1));
}
html body #settings .filter .form {
  position: relative;
  width: 100%;
  height: auto;
  display: inline-block;
}
@media screen and (min-width: 1600px) {
  html body #settings {
    top: 0;
    right: -280px;
    bottom: 0;
    left: auto;
    width: 280px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1599px) {
  html body #settings {
    top: 0;
    right: -280px;
    bottom: 0;
    left: auto;
    width: 280px;
  }
}
@media screen and (min-width: 850px) and (max-width: 1199px) {
  html body #settings {
    top: 0;
    right: -280px;
    bottom: 0;
    left: auto;
    width: 280px;
  }
}
@media screen and (max-width: 849px) {
  html body #settings {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 0;
  }
}
html body #content {
  position: relative;
  width: 100%;
  height: 100%;
}
html body #content a {
  color: #2980b9;
}
html body #content a:hover {
  color: #34495e;
}
html body #content .labels {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 40px;
  margin: 0;
  padding: 0;
  background: #ecf0f1;
  overflow: hidden;
}
html body #content .labels h1 {
  width: auto;
  line-height: 40px;
  color: #ecf0f1;
  background: #34495e;
  text-transform: uppercase;
  font-weight: bold;
  float: left;
  vertical-align: middle;
}
html body #content .labels h2 {
  width: auto;
  line-height: 40px;
  color: #34495e;
  background: #bdc3c7;
  text-transform: lowercase;
  font-weight: normal;
  float: left;
  vertical-align: middle;
}
html body #content .labels .triangle-h1,
html body #content .labels .triangle-h2,
html body #content .labels .triangle-h3 {
  width: 0;
  height: 0;
  float: left;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
html body #content .labels .triangle-h1 {
  border-left: 20px solid #34495e;
  background: #bdc3c7;
}
html body #content .labels .triangle-h2 {
  border-left: 20px solid #bdc3c7;
  background: #ecf0f1;
}
html body #content .labels .triangle-h3 {
  border-left: 20px solid #34495e;
  background: #ecf0f1;
}
html body #content .labels .labels-navigate {
  position: relative;
  float: right;
  width: auto;
  color: #7f8c8d;
  line-height: 1;
}
html body #content .labels .labels-navigate:before {
  font-family: FontAwesome;
  content: "\f078";
  font-size: 16px;
}
html body #content .labels .labels-navigate:hover {
  color: #2980b9;
  cursor: pointer;
}
html body #content .labels.active {
  max-height: 450px;
}
html body #content .labels.active .labels-navigate {
  color: #2980b9;
}
html body #content .labels.active .labels-navigate:before {
  content: "\f077";
}
html body #content .container {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background: #ffffff;
  /* TABLES */
}
html body #content .container .columns {
  position: relative;
  float: left;
  padding: 0;
  margin: 0;
  /* without .h-1 or .h-2 has aspect ratio auto */
  /* with .h-1 has aspect ratio 1:1 */
  /* with .h-2 has aspect ratio 2:1 */
  /* with .h-2 has aspect ratio 4:1 */
}
html body #content .container .columns .default {
  position: relative;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}
html body #content .container .columns.h-1:before {
  content: "";
  display: block;
  padding-top: 100%;
}
html body #content .container .columns.h-2:before {
  content: "";
  display: block;
  padding-top: 50%;
}
html body #content .container .columns.h-3:before {
  content: "";
  display: block;
  padding-top: 25%;
}
html body #content .container .columns .vertical-align {
  display: table;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
html body #content .container .columns .vertical-align div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
html body #content .container .columns .vertical-align div p {
  font-size: 1.4em;
  font-weight: bold;
}
html body #content .container .columns .vertical-align div p.number {
  font-size: 1.9em;
  font-weight: bold;
}
html body #content .container h2 {
  width: 100%;
  height: auto;
  text-align: center;
  padding: 8px 0;
  font-size: 1.3em;
  font-weight: bold;
}
html body #content .container form table {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0 0 8px 0;
  border-spacing: 0;
}
html body #content .container form table tbody tr th {
  width: 26%;
  padding: 4px 2%;
  text-align: right;
  color: #7f8c8d;
}
html body #content .container form table tbody tr th label {
  margin: 0;
}
html body #content .container form table tbody tr td {
  width: 66%;
  padding: 4px 2%;
  text-align: left;
}
html body #content .container form table tbody tr td select {
  width: 99%;
  padding: 6px 0.5%;
  font-size: .9em;
  background: #bdc3c7;
}
html body #content .container form table tbody tr:nth-child(2n) {
  background: #ecf0f1;
}
html body #content .container form table tbody tr.required th {
  color: #34495e;
}
html body #content .container form table tbody tr:last-child {
  background: #ffffff;
}
html body #content .container form table tbody tr:last-child input[type="submit"] {
  width: 50%;
  max-width: 96%;
}
html body #content .container table.data-table {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0 0 8px 0;
  border-spacing: 0;
}
html body #content .container table.data-table thead th {
  background: #2980b9;
  color: #ecf0f1;
  padding: 4px 1%;
  text-align: center;
  font-size: 1em;
  font-weight: normal;
}
html body #content .container table.data-table tbody tr th {
  padding: 4px 2%;
  text-align: right;
  color: #7f8c8d;
}
html body #content .container table.data-table tbody tr th label {
  margin: 0;
}
html body #content .container table.data-table tbody tr td {
  padding: 4px 1%;
  text-align: center;
  font-size: .9em;
}
html body #content .container table.data-table tbody tr:nth-child(2n) {
  background: #ecf0f1;
}
@media screen and (min-width: 1600px) {
  html body #content .labels {
    width: 60px;
    width: -webkit-calc((100% - 40px)*(1));
    width: -moz-calc((100% - 40px)*(1));
    width: calc((100% - 40px)*(1));
    padding-top: 55px;
    padding-left: 40px;
  }
  html body #content .labels h1,
  html body #content .labels h2 {
    font-size: 1.1em;
    padding: 0 28px;
  }
  html body #content .labels .labels-navigate {
    height: 16px;
    padding: 12px 29px 12px 12px;
  }
  html body #content .labels .labels-navigate:before {
    font-size: 16px;
  }
  html body #content .container {
    width: 60px;
    width: -webkit-calc((100% - 40px)*(1));
    width: -moz-calc((100% - 40px)*(1));
    width: calc((100% - 40px)*(1));
    min-height: 5px;
    min-height: -webkit-calc((100% - 95px)*(1));
    min-height: -moz-calc((100% - 95px)*(1));
    min-height: calc((100% - 95px)*(1));
    padding-left: 40px;
  }
  html body #content .container .columns.w-1 {
    width: -7.5px;
    width: -webkit-calc((12.5% - 20px)*(1));
    width: -moz-calc((12.5% - 20px)*(1));
    width: calc((12.5% - 20px)*(1));
    height: auto;
    padding: 8px;
    margin: 2px;
  }
  html body #content .container .columns.w-2 {
    width: 5px;
    width: -webkit-calc((25% - 20px)*(1));
    width: -moz-calc((25% - 20px)*(1));
    width: calc((25% - 20px)*(1));
    height: auto;
    padding: 8px;
    margin: 2px;
  }
  html body #content .container .columns.w-3 {
    width: 30px;
    width: -webkit-calc((50% - 20px)*(1));
    width: -moz-calc((50% - 20px)*(1));
    width: calc((50% - 20px)*(1));
    height: auto;
    padding: 8px;
    margin: 2px;
  }
  html body #content .container .columns.w-4 {
    width: 80px;
    width: -webkit-calc((100% - 20px)*(1));
    width: -moz-calc((100% - 20px)*(1));
    width: calc((100% - 20px)*(1));
    height: auto;
    padding: 8px;
    margin: 2px;
  }
  html body #content .container .columns.m-1 {
    margin-left: 89.5px;
    margin-left: -webkit-calc((87.5% + 2px)*(1));
    margin-left: -moz-calc((87.5% + 2px)*(1));
    margin-left: calc((87.5% + 2px)*(1));
  }
  html body #content .container .columns.m-2 {
    margin-left: 77px;
    margin-left: -webkit-calc((75% + 2px)*(1));
    margin-left: -moz-calc((75% + 2px)*(1));
    margin-left: calc((75% + 2px)*(1));
  }
  html body #content .container .columns.m-3 {
    margin-left: 52px;
    margin-left: -webkit-calc((50% + 2px)*(1));
    margin-left: -moz-calc((50% + 2px)*(1));
    margin-left: calc((50% + 2px)*(1));
  }
  html body #content .container .columns.m-4 {
    margin-left: 27px;
    margin-left: -webkit-calc((25% + 2px)*(1));
    margin-left: -moz-calc((25% + 2px)*(1));
    margin-left: calc((25% + 2px)*(1));
  }
  html body #content .container .columns.m-5 {
    margin-left: 14.5px;
    margin-left: -webkit-calc((12.5% + 2px)*(1));
    margin-left: -moz-calc((12.5% + 2px)*(1));
    margin-left: calc((12.5% + 2px)*(1));
  }
  html body #content .container .columns.h-1 .default,
  html body #content .container .columns.h-2 .default,
  html body #content .container .columns.h-3 .default {
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: 84px;
    width: -webkit-calc((100% - 16px)*(1));
    width: -moz-calc((100% - 16px)*(1));
    width: calc((100% - 16px)*(1));
  }
}
@media screen and (min-width: 1200px) and (max-width: 1599px) {
  html body #content .labels {
    width: 60px;
    width: -webkit-calc((100% - 40px)*(1));
    width: -moz-calc((100% - 40px)*(1));
    width: calc((100% - 40px)*(1));
    padding-top: 55px;
    padding-left: 40px;
  }
  html body #content .labels h1,
  html body #content .labels h2 {
    font-size: 1.1em;
    padding: 0 28px;
  }
  html body #content .labels .labels-navigate {
    height: 16px;
    padding: 12px 29px 12px 12px;
  }
  html body #content .labels .labels-navigate:before {
    font-size: 16px;
  }
  html body #content .container {
    width: 60px;
    width: -webkit-calc((100% - 40px)*(1));
    width: -moz-calc((100% - 40px)*(1));
    width: calc((100% - 40px)*(1));
    min-height: 5px;
    min-height: -webkit-calc((100% - 95px)*(1));
    min-height: -moz-calc((100% - 95px)*(1));
    min-height: calc((100% - 95px)*(1));
    padding-left: 40px;
  }
  html body #content .container .columns.w-1 {
    width: -7.5px;
    width: -webkit-calc((12.5% - 20px)*(1));
    width: -moz-calc((12.5% - 20px)*(1));
    width: calc((12.5% - 20px)*(1));
    height: auto;
    padding: 8px;
    margin: 2px;
  }
  html body #content .container .columns.w-2 {
    width: 5px;
    width: -webkit-calc((25% - 20px)*(1));
    width: -moz-calc((25% - 20px)*(1));
    width: calc((25% - 20px)*(1));
    height: auto;
    padding: 8px;
    margin: 2px;
  }
  html body #content .container .columns.w-3 {
    width: 30px;
    width: -webkit-calc((50% - 20px)*(1));
    width: -moz-calc((50% - 20px)*(1));
    width: calc((50% - 20px)*(1));
    height: auto;
    padding: 8px;
    margin: 2px;
  }
  html body #content .container .columns.w-4 {
    width: 80px;
    width: -webkit-calc((100% - 20px)*(1));
    width: -moz-calc((100% - 20px)*(1));
    width: calc((100% - 20px)*(1));
    height: auto;
    padding: 8px;
    margin: 2px;
  }
  html body #content .container .columns.m-1 {
    margin-left: 89.5px;
    margin-left: -webkit-calc((87.5% + 2px)*(1));
    margin-left: -moz-calc((87.5% + 2px)*(1));
    margin-left: calc((87.5% + 2px)*(1));
  }
  html body #content .container .columns.m-2 {
    margin-left: 77px;
    margin-left: -webkit-calc((75% + 2px)*(1));
    margin-left: -moz-calc((75% + 2px)*(1));
    margin-left: calc((75% + 2px)*(1));
  }
  html body #content .container .columns.m-3 {
    margin-left: 52px;
    margin-left: -webkit-calc((50% + 2px)*(1));
    margin-left: -moz-calc((50% + 2px)*(1));
    margin-left: calc((50% + 2px)*(1));
  }
  html body #content .container .columns.m-4 {
    margin-left: 27px;
    margin-left: -webkit-calc((25% + 2px)*(1));
    margin-left: -moz-calc((25% + 2px)*(1));
    margin-left: calc((25% + 2px)*(1));
  }
  html body #content .container .columns.m-5 {
    margin-left: 14.5px;
    margin-left: -webkit-calc((12.5% + 2px)*(1));
    margin-left: -moz-calc((12.5% + 2px)*(1));
    margin-left: calc((12.5% + 2px)*(1));
  }
  html body #content .container .columns.h-1 .default,
  html body #content .container .columns.h-2 .default,
  html body #content .container .columns.h-3 .default {
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: 84px;
    width: -webkit-calc((100% - 16px)*(1));
    width: -moz-calc((100% - 16px)*(1));
    width: calc((100% - 16px)*(1));
  }
}
@media screen and (min-width: 850px) and (max-width: 1199px) {
  html body #content .labels {
    width: 100%;
    padding-top: 55px;
    padding-left: 0;
  }
  html body #content .labels h1,
  html body #content .labels h2 {
    font-size: 1.1em;
    padding: 0 28px;
  }
  html body #content .labels .labels-navigate {
    height: 16px;
    padding: 12px 29px 12px 12px;
  }
  html body #content .labels .labels-navigate:before {
    font-size: 16px;
  }
  html body #content .container {
    width: 100%;
    min-height: 5px;
    min-height: -webkit-calc((100% - 95px)*(1));
    min-height: -moz-calc((100% - 95px)*(1));
    min-height: calc((100% - 95px)*(1));
    padding-left: 0;
  }
  html body #content .container .columns.w-1 {
    width: 5px;
    width: -webkit-calc((25% - 20px)*(1));
    width: -moz-calc((25% - 20px)*(1));
    width: calc((25% - 20px)*(1));
    height: auto;
    padding: 8px;
    margin: 2px;
  }
  html body #content .container .columns.w-2 {
    width: 30px;
    width: -webkit-calc((50% - 20px)*(1));
    width: -moz-calc((50% - 20px)*(1));
    width: calc((50% - 20px)*(1));
    height: auto;
    padding: 8px;
    margin: 2px;
  }
  html body #content .container .columns.w-3 {
    width: 30px;
    width: -webkit-calc((50% - 20px)*(1));
    width: -moz-calc((50% - 20px)*(1));
    width: calc((50% - 20px)*(1));
    height: auto;
    padding: 8px;
    margin: 2px;
  }
  html body #content .container .columns.w-4 {
    width: 80px;
    width: -webkit-calc((100% - 20px)*(1));
    width: -moz-calc((100% - 20px)*(1));
    width: calc((100% - 20px)*(1));
    height: auto;
    padding: 8px;
    margin: 2px;
  }
  html body #content .container .columns.tablet-25 {
    width: 5px;
    width: -webkit-calc((25% - 20px)*(1));
    width: -moz-calc((25% - 20px)*(1));
    width: calc((25% - 20px)*(1));
    height: auto;
    padding: 8px;
    margin: 2px;
  }
  html body #content .container .columns.tablet-50 {
    width: 30px;
    width: -webkit-calc((50% - 20px)*(1));
    width: -moz-calc((50% - 20px)*(1));
    width: calc((50% - 20px)*(1));
    height: auto;
    padding: 8px;
    margin: 2px;
  }
  html body #content .container .columns.tablet-100 {
    width: 80px;
    width: -webkit-calc((100% - 20px)*(1));
    width: -moz-calc((100% - 20px)*(1));
    width: calc((100% - 20px)*(1));
    height: auto;
    padding: 8px;
    margin: 2px;
  }
  html body #content .container .columns.m-1 {
    margin-left: 77px;
    margin-left: -webkit-calc((75% + 2px)*(1));
    margin-left: -moz-calc((75% + 2px)*(1));
    margin-left: calc((75% + 2px)*(1));
  }
  html body #content .container .columns.m-2 {
    margin-left: 52px;
    margin-left: -webkit-calc((50% + 2px)*(1));
    margin-left: -moz-calc((50% + 2px)*(1));
    margin-left: calc((50% + 2px)*(1));
  }
  html body #content .container .columns.m-3 {
    margin-left: 52px;
    margin-left: -webkit-calc((50% + 2px)*(1));
    margin-left: -moz-calc((50% + 2px)*(1));
    margin-left: calc((50% + 2px)*(1));
  }
  html body #content .container .columns.m-4 {
    margin-left: 27px;
    margin-left: -webkit-calc((25% + 2px)*(1));
    margin-left: -moz-calc((25% + 2px)*(1));
    margin-left: calc((25% + 2px)*(1));
  }
  html body #content .container .columns.m-5 {
    margin-left: 2px;
    margin-left: -webkit-calc((0% + 2px)*(1));
    margin-left: -moz-calc((0% + 2px)*(1));
    margin-left: calc((0% + 2px)*(1));
  }
  html body #content .container .columns.h-1 .default,
  html body #content .container .columns.h-2 .default,
  html body #content .container .columns.h-3 .default {
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: 84px;
    width: -webkit-calc((100% - 16px)*(1));
    width: -moz-calc((100% - 16px)*(1));
    width: calc((100% - 16px)*(1));
  }
}
@media screen and (max-width: 849px) {
  html body #content .labels {
    width: 100%;
    padding-top: 55px;
    padding-left: 0;
  }
  html body #content .labels h1,
  html body #content .labels h2 {
    font-size: 1.1em;
    padding: 0 28px;
  }
  html body #content .labels .labels-navigate {
    height: 14px;
    padding: 13px 18px 13px 12px;
  }
  html body #content .labels .labels-navigate:before {
    font-size: 14px;
  }
  html body #content .container {
    width: 100%;
    min-height: 5px;
    min-height: -webkit-calc((100% - 95px)*(1));
    min-height: -moz-calc((100% - 95px)*(1));
    min-height: calc((100% - 95px)*(1));
    padding-left: 0;
  }
  html body #content .container .columns.w-1 {
    width: 38px;
    width: -webkit-calc((50% - 12px)*(1));
    width: -moz-calc((50% - 12px)*(1));
    width: calc((50% - 12px)*(1));
    height: auto;
    padding: 4px;
    margin: 2px;
  }
  html body #content .container .columns.w-2 {
    width: 38px;
    width: -webkit-calc((50% - 12px)*(1));
    width: -moz-calc((50% - 12px)*(1));
    width: calc((50% - 12px)*(1));
    height: auto;
    padding: 4px;
    margin: 2px;
  }
  html body #content .container .columns.w-3 {
    width: 88px;
    width: -webkit-calc((100% - 12px)*(1));
    width: -moz-calc((100% - 12px)*(1));
    width: calc((100% - 12px)*(1));
    height: auto;
    padding: 4px;
    margin: 2px;
  }
  html body #content .container .columns.w-4 {
    width: 88px;
    width: -webkit-calc((100% - 12px)*(1));
    width: -moz-calc((100% - 12px)*(1));
    width: calc((100% - 12px)*(1));
    height: auto;
    padding: 4px;
    margin: 2px;
  }
  html body #content .container .columns.mobile-50 {
    width: 38px;
    width: -webkit-calc((50% - 12px)*(1));
    width: -moz-calc((50% - 12px)*(1));
    width: calc((50% - 12px)*(1));
    height: auto;
    padding: 4px;
    margin: 2px;
  }
  html body #content .container .columns.mobile-100 {
    width: 88px;
    width: -webkit-calc((100% - 12px)*(1));
    width: -moz-calc((100% - 12px)*(1));
    width: calc((100% - 12px)*(1));
    height: auto;
    padding: 4px;
    margin: 2px;
  }
  html body #content .container .columns.m-1 {
    margin-left: 52px;
    margin-left: -webkit-calc((50% + 2px)*(1));
    margin-left: -moz-calc((50% + 2px)*(1));
    margin-left: calc((50% + 2px)*(1));
  }
  html body #content .container .columns.m-2 {
    margin-left: 52px;
    margin-left: -webkit-calc((50% + 2px)*(1));
    margin-left: -moz-calc((50% + 2px)*(1));
    margin-left: calc((50% + 2px)*(1));
  }
  html body #content .container .columns.m-3 {
    margin-left: 2px;
    margin-left: -webkit-calc((0% + 2px)*(1));
    margin-left: -moz-calc((0% + 2px)*(1));
    margin-left: calc((0% + 2px)*(1));
  }
  html body #content .container .columns.m-4 {
    margin-left: 2px;
    margin-left: -webkit-calc((0% + 2px)*(1));
    margin-left: -moz-calc((0% + 2px)*(1));
    margin-left: calc((0% + 2px)*(1));
  }
  html body #content .container .columns.m-5 {
    margin-left: 2px;
    margin-left: -webkit-calc((0% + 2px)*(1));
    margin-left: -moz-calc((0% + 2px)*(1));
    margin-left: calc((0% + 2px)*(1));
  }
  html body #content .container .columns.h-1 .default,
  html body #content .container .columns.h-2 .default,
  html body #content .container .columns.h-3 .default {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    width: 92px;
    width: -webkit-calc((100% - 8px)*(1));
    width: -moz-calc((100% - 8px)*(1));
    width: calc((100% - 8px)*(1));
  }
  html body #content .container table.data-table {
    display: block;
    width: 100%;
    overflow: hidden;
  }
  html body #content .container table.data-table thead,
  html body #content .container table.data-table tbody,
  html body #content .container table.data-table th,
  html body #content .container table.data-table tr,
  html body #content .container table.data-table td {
    display: block;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}
html body #pop-up {
  position: fixed;
  left: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
html body #pop-up .pop-up-content {
  position: relative;
  width: 100%;
  height: 45px;
  height: -webkit-calc((100% - 55px)*(1));
  height: -moz-calc((100% - 55px)*(1));
  height: calc((100% - 55px)*(1));
  float: left;
  background: #ecf0f1;
}
html body #pop-up .pop-up-content .pop-up-container {
  position: relative;
  width: 100%;
  height: auto;
  display: inline-block;
}
html body #pop-up .pop-up-content .pop-up-container p.help-text {
  width: 90%;
  font-size: 1.1em;
  color: #34495e;
  padding: 5%;
}
html body #pop-up .pop-up-content .pop-up-container p.help-text strong {
  font-size: 1.4em;
}
html body #pop-up .close {
  position: relative;
  width: 100%;
  height: 54px;
  background: #bdc3c7;
  border-bottom: 1px solid;
  border-color: #0099CC;
}
html body #pop-up .close .close-icon {
  position: relative;
  width: 22px;
  height: 22px;
  padding: 16px;
  color: #ffffff;
  line-height: 1;
  background: #7f8c8d;
  text-align: center;
}
html body #pop-up .close .close-icon:hover {
  cursor: pointer;
  color: #2980b9;
}
html body #pop-up .close .close-icon:before {
  font-family: FontAwesome;
  content: "\f00d";
  font-size: 22px;
}
@media screen and (max-width: 849px) {
  html body #pop-up .close .close-icon {
    width: 16px;
    height: 16px;
    padding: 19px;
  }
  html body #pop-up .close .close-icon:before {
    font-size: 16px;
  }
}
@media screen and (min-width: 1600px) {
  html body {
    font-size: 14px;
    /* show main menu */
    /* show filter panel */
    /* pop up window active */
  }
  html body.show-menu #header .user {
    width: 225px;
  }
  html body.show-menu #header .menu-icon {
    color: #2980b9;
  }
  html body.show-menu #header .menu-icon:after {
    content: "\f00d";
  }
  html body.show-menu #menu {
    width: 225px;
  }
  html body.show-menu #menu ul li {
    height: auto;
  }
  html body.show-menu #menu ul li.submenu {
    cursor: default;
  }
  html body.show-menu #menu ul li.submenu ul {
    max-height: 500px;
  }
  html body.show-menu #menu ul li span.alert {
    right: 12px;
  }
  html body.show-menu #content .container,
  html body.show-menu #content .labels {
    width: -125px;
    width: -webkit-calc((100% - 225px)*(1));
    width: -moz-calc((100% - 225px)*(1));
    width: calc((100% - 225px)*(1));
    padding-left: 225px;
  }
  html body.show-filter #header {
    right: 280px;
  }
  html body.show-filter #header .settings {
    color: #2980b9;
  }
  html body.show-filter #header .settings:before {
    content: "\f00d";
  }
  html body.show-filter #settings {
    right: 0;
  }
  html body.show-filter #content .container,
  html body.show-filter #content .labels {
    width: -220px;
    width: -webkit-calc((100% - 320px)*(1));
    width: -moz-calc((100% - 320px)*(1));
    width: calc((100% - 320px)*(1));
    padding-left: 40px;
  }
  html body.pop-up-active {
    overflow: hidden;
    right: 50%;
  }
  html body.pop-up-active #header {
    left: -50%;
    right: 50%;
  }
  html body.pop-up-active #menu {
    left: -50%;
  }
  html body.pop-up-active #content {
    overflow: hidden;
  }
  html body.pop-up-active #pop-up {
    left: 50%;
  }
  html body.pop-up-active #pop-up .pop-up-content {
    overflow: auto;
    overflow-scrolling: auto;
    -webkit-overflow-scrolling: touch;
  }
  html body.show-filter.pop-up-active #header {
    left: -50%;
    right: 330px;
    right: -webkit-calc((50% + 280px)*(1));
    right: -moz-calc((50% + 280px)*(1));
    right: calc((50% + 280px)*(1));
  }
  html body.show-filter.pop-up-active #settings {
    right: 50%;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1599px) {
  html body {
    font-size: 14px;
    /* show main menu */
    /* show filter panel */
    /* pop up window active */
  }
  html body.show-menu #header .user {
    width: 225px;
  }
  html body.show-menu #header .menu-icon {
    color: #2980b9;
  }
  html body.show-menu #header .menu-icon:after {
    content: "\f00d";
  }
  html body.show-menu #menu {
    width: 225px;
  }
  html body.show-menu #menu ul li {
    height: auto;
  }
  html body.show-menu #menu ul li.submenu {
    cursor: default;
  }
  html body.show-menu #menu ul li.submenu ul {
    max-height: 500px;
  }
  html body.show-menu #menu ul li span.alert {
    right: 12px;
  }
  html body.show-menu #content .container,
  html body.show-menu #content .labels {
    width: -125px;
    width: -webkit-calc((100% - 225px)*(1));
    width: -moz-calc((100% - 225px)*(1));
    width: calc((100% - 225px)*(1));
    padding-left: 225px;
  }
  html body.show-filter #header {
    right: 280px;
  }
  html body.show-filter #header .settings {
    color: #2980b9;
  }
  html body.show-filter #header .settings:before {
    content: "\f00d";
  }
  html body.show-filter #settings {
    right: 0;
  }
  html body.show-filter #content .container,
  html body.show-filter #content .labels {
    width: -220px;
    width: -webkit-calc((100% - 320px)*(1));
    width: -moz-calc((100% - 320px)*(1));
    width: calc((100% - 320px)*(1));
    padding-left: 40px;
  }
  html body.pop-up-active {
    overflow: hidden;
    right: 50%;
  }
  html body.pop-up-active #header {
    left: -50%;
    right: 50%;
  }
  html body.pop-up-active #menu {
    left: -50%;
  }
  html body.pop-up-active #content {
    overflow: hidden;
  }
  html body.pop-up-active #pop-up {
    left: 50%;
  }
  html body.pop-up-active #pop-up .pop-up-content {
    overflow: auto;
    overflow-scrolling: auto;
    -webkit-overflow-scrolling: touch;
  }
  html body.show-filter.pop-up-active #header {
    left: -50%;
    right: 330px;
    right: -webkit-calc((50% + 280px)*(1));
    right: -moz-calc((50% + 280px)*(1));
    right: calc((50% + 280px)*(1));
  }
  html body.show-filter.pop-up-active #settings {
    right: 50%;
  }
}
@media screen and (min-width: 850px) and (max-width: 1199px) {
  html body {
    font-size: 13px;
    /* show main menu */
    /* show filter panel */
    /* pop up window active */
    /* overflow only for touch device */
  }
  html body.show-menu {
    overflow: hidden;
  }
  html body.show-menu #header {
    right: -255px;
    overflow: hidden;
  }
  html body.show-menu #header .user {
    width: 255px;
  }
  html body.show-menu #header .menu-icon {
    color: #2980b9;
  }
  html body.show-menu #header .menu-icon:after {
    content: "\f00d";
  }
  html body.show-menu #menu {
    width: 255px;
  }
  html body.show-menu #menu ul li {
    height: auto;
  }
  html body.show-menu #menu ul li.submenu {
    cursor: default;
  }
  html body.show-menu #menu ul li.submenu ul {
    max-height: 500px;
  }
  html body.show-menu #menu ul li span.alert {
    right: 12px;
  }
  html body.show-menu #content {
    overflow: hidden;
  }
  html body.show-menu #content .container,
  html body.show-menu #content .labels {
    padding-left: 255px;
  }
  html body.show-filter {
    overflow: hidden;
  }
  html body.show-filter #header {
    overflow: hidden;
    right: 280px;
    left: -280px;
  }
  html body.show-filter #header .settings {
    color: #2980b9;
  }
  html body.show-filter #header .settings:before {
    content: "\f00d";
  }
  html body.show-filter #menu {
    left: -280px;
  }
  html body.show-filter #settings {
    right: 0;
  }
  html body.show-filter #content {
    overflow: hidden;
  }
  html body.show-filter #content .container,
  html body.show-filter #content .labels {
    padding-left: 0;
    margin-left: -280px;
  }
  html body.pop-up-active {
    overflow: hidden;
    right: 75%;
  }
  html body.pop-up-active #header {
    left: -75%;
    right: 75%;
  }
  html body.pop-up-active #menu {
    left: -75%;
  }
  html body.pop-up-active #content {
    overflow: hidden;
  }
  html body.pop-up-active #pop-up {
    left: 25%;
  }
  html body.pop-up-active #pop-up .pop-up-content {
    overflow: auto;
    overflow-scrolling: auto;
    -webkit-overflow-scrolling: touch;
  }
  html body.show-filter.pop-up-active #header {
    left: -75%;
    right: 355px;
    right: -webkit-calc((75% + 280px)*(1));
    right: -moz-calc((75% + 280px)*(1));
    right: calc((75% + 280px)*(1));
  }
  html body.show-filter.pop-up-active #settings {
    right: 75%;
  }
  html body.touch #settings {
    overflow: hidden;
  }
  html body.touch #settings .filter {
    overflow: auto;
    overflow-scrolling: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media screen and (max-width: 849px) {
  html body {
    font-size: 12px;
    /* show main menu */
    /* show filter panel */
    /* pop up window active */
    /* overflow only for touch device */
  }
  html body.show-menu {
    overflow: hidden;
  }
  html body.show-menu #header {
    overflow: hidden;
  }
  html body.show-menu #header .user {
    width: 20px;
    width: -webkit-calc((100% - 80px)*(1));
    width: -moz-calc((100% - 80px)*(1));
    width: calc((100% - 80px)*(1));
  }
  html body.show-menu #header .menu-icon {
    color: #2980b9;
    width: 80px;
    text-align: center;
  }
  html body.show-menu #header .menu-icon:after {
    content: "\f00d";
  }
  html body.show-menu #header .first-child {
    padding-left: 0;
    padding-right: 0;
  }
  html body.show-menu #menu {
    width: 20px;
    width: -webkit-calc((100% - 80px)*(1));
    width: -moz-calc((100% - 80px)*(1));
    width: calc((100% - 80px)*(1));
  }
  html body.show-menu #menu ul li {
    height: auto;
  }
  html body.show-menu #menu ul li.submenu {
    cursor: default;
  }
  html body.show-menu #menu ul li.submenu ul {
    max-height: 500px;
  }
  html body.show-menu #menu ul li span.alert {
    right: 12px;
  }
  html body.show-menu #content {
    overflow: hidden;
  }
  html body.show-menu #content .labels h1 {
    padding-left: 34px;
  }
  html body.show-menu #content .container,
  html body.show-menu #content .labels {
    padding-left: 20px;
    padding-left: -webkit-calc((100% - 80px)*(1));
    padding-left: -moz-calc((100% - 80px)*(1));
    padding-left: calc((100% - 80px)*(1));
  }
  html body.show-filter {
    overflow: hidden;
  }
  html body.show-filter #header {
    overflow: hidden;
    right: 20px;
    right: -webkit-calc((100% - 80px)*(1));
    right: -moz-calc((100% - 80px)*(1));
    right: calc((100% - 80px)*(1));
    left: -20px;
    left: -webkit-calc((100% - 80px)*(-1));
    left: -moz-calc((100% - 80px)*(-1));
    left: calc((100% - 80px)*(-1));
  }
  html body.show-filter #header .settings {
    color: #2980b9;
    width: 80px;
    text-align: center;
  }
  html body.show-filter #header .settings:before {
    content: "\f00d";
  }
  html body.show-filter #header .last-child {
    padding-left: 0;
    padding-right: 0;
  }
  html body.show-filter #menu {
    left: -20px;
    left: -webkit-calc((100% - 80px)*(-1));
    left: -moz-calc((100% - 80px)*(-1));
    left: calc((100% - 80px)*(-1));
  }
  html body.show-filter #settings {
    width: 20px;
    width: -webkit-calc((100% - 80px)*(1));
    width: -moz-calc((100% - 80px)*(1));
    width: calc((100% - 80px)*(1));
  }
  html body.show-filter #content {
    overflow: hidden;
  }
  html body.show-filter #content .container,
  html body.show-filter #content .labels {
    padding-left: 0;
    margin-left: -20px;
    margin-left: -webkit-calc((100% - 80px)*(-1));
    margin-left: -moz-calc((100% - 80px)*(-1));
    margin-left: calc((100% - 80px)*(-1));
  }
  html body.pop-up-active {
    overflow: hidden;
    right: 100%;
  }
  html body.pop-up-active #header {
    left: -100%;
    right: 100%;
  }
  html body.pop-up-active #menu {
    left: -100%;
  }
  html body.pop-up-active #content {
    overflow: hidden;
  }
  html body.pop-up-active #pop-up {
    left: 0%;
  }
  html body.pop-up-active #pop-up .pop-up-content {
    overflow: auto;
    overflow-scrolling: auto;
    -webkit-overflow-scrolling: touch;
  }
  html body.touch #settings {
    overflow: hidden;
  }
  html body.touch #settings .filter {
    overflow: auto;
    overflow-scrolling: auto;
    -webkit-overflow-scrolling: touch;
  }
}
html body label {
  width: 96%;
  margin: 4% 0 0 2%;
  float: left;
  cursor: default;
  text-transform: lowercase;
  font-size: .9em;
}
html body #settings .filter {
  /* calendar */
}
html body #settings .filter form {
  margin-top: 10px;
}
html body #settings .filter .calendar-display {
  width: calc(96% - 18px);
  padding: 4% 0;
  background: transparent;
  border: none;
  color: #0099CC;
  text-align: right;
  font-size: 1em;
  cursor: pointer;
}
html body #settings .filter .cld {
  position: relative;
  width: 92%;
  height: auto;
  margin: 2% 2% 2% 2%;
  padding: 2%;
  float: left;
  cursor: pointer;
  background: transparent;
}
html body #settings .filter .cld input {
  width: auto;
  max-width: 75px;
  padding: 0;
  background: #0099CC;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: .9em;
  line-height: 14px;
  vertical-align: middle;
  font-weight: bold;
  float: right;
  cursor: pointer;
}
html body #settings .filter .cld .cld-text {
  width: calc(100% - 100px);
  height: 14px;
  float: left;
  font-size: 1em;
  line-height: 14px;
  vertical-align: middle;
  color: #ffffff;
  overflow: hidden;
}
html body #settings .filter .cld .cld-icon {
  width: 14px;
  float: right;
  line-height: 1;
  text-align: right;
  color: #ffffff;
  margin-left: 4px;
}
html body #settings .filter .cld .cld-icon:before {
  font-family: FontAwesome;
  content: "\f078";
  font-size: 14px;
  vertical-align: text-top;
}
html body #settings .filter .cld.active {
  margin: 2% 2% 0 2%;
}
html body #settings .filter .cld.active .cld-text {
  color: #bdc3c7;
}
html body #settings .filter .cld.active .cld-icon {
  color: #bdc3c7;
}
html body #settings .filter .cld.active .cld-icon:before {
  content: "\f077";
}
html body #settings .filter .cld-list {
  width: 100%;
  height: 200px;
  max-height: 0;
  overflow: hidden;
}
html body #settings .filter .cld-list.active {
  max-height: 200px;
}
html body #settings .filter .cld-list .ui-datepicker {
  width: 100%;
  margin-top: 10px;
  cursor: default;
  text-transform: uppercase;
  font-size: .9em;
}
html body #settings .filter .cld-list .ui-datepicker table,
html body #settings .filter .cld-list .ui-datepicker tr,
html body #settings .filter .cld-list .ui-datepicker th,
html body #settings .filter .cld-list .ui-datepicker td,
html body #settings .filter .cld-list .ui-datepicker th {
  border: none;
  border-spacing: 0;
}
html body #settings .filter .cld-list .ui-datepicker .ui-datepicker-header {
  color: #0099CC;
  font-weight: bold;
}
html body #settings .filter .cld-list .ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
  width: 10%;
  text-align: left;
  float: left;
  margin-left: 4%;
  color: #ffffff;
}
html body #settings .filter .cld-list .ui-datepicker .ui-datepicker-header .ui-datepicker-next {
  width: 10%;
  text-align: right;
  float: right;
  margin-right: 4%;
  color: #ffffff;
}
html body #settings .filter .cld-list .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
  width: 72%;
  text-align: center;
  float: left;
  color: #ffffff;
  cursor: pointer;
}
html body #settings .filter .cld-list .ui-datepicker .ui-datepicker-header .ui-datepicker-title:hover {
  color: #0099CC;
}
html body #settings .filter .cld-list .ui-datepicker .ui-datepicker-header a {
  color: #0099CC;
  font-weight: bold;
}
html body #settings .filter .cld-list .ui-datepicker .ui-datepicker-header a:hover {
  color: #7f8c8d;
  cursor: pointer;
}
html body #settings .filter .cld-list .ui-datepicker .ui-datepicker-calendar {
  position: relative;
  width: 100%;
  padding: 0 2% 0 4%;
  overflow: hidden;
}
html body #settings .filter .cld-list .ui-datepicker .ui-datepicker-calendar th {
  padding-top: 15px;
  padding-bottom: 10px;
  text-align: center;
  font-weight: normal;
  color: #0099CC;
}
html body #settings .filter .cld-list .ui-datepicker .ui-datepicker-calendar td {
  padding: 0 2px;
  text-align: center;
  line-height: 20px;
}
html body #settings .filter .cld-list .ui-datepicker .ui-datepicker-calendar .ui-state-default {
  display: block;
  width: 100%;
  outline: none;
  text-decoration: none;
  color: #ffffff;
}
html body #settings .filter .cld-list .ui-datepicker .ui-datepicker-calendar .ui-state-active {
  background: #0099CC;
}
html body #settings .filter .cld-list .ui-datepicker .ui-datepicker-calendar tbody,
html body #settings .filter .cld-list .ui-datepicker .ui-datepicker-calendar thead {
  width: 100%;
}
html body #settings .filter .cld-list .ui-datepicker .ui-datepicker-unselectable.ui-state-disabled span {
  color: #7f8c8d;
}
@media screen and (max-width: 849px) {
  html body #settings .filter .cld-list .ui-datepicker {
    height: 200px;
  }
}
html body .select-display {
  display: none;
}
html body .slc {
  position: relative;
  width: 92%;
  height: auto;
  margin: 2% 2% 2% 2%;
  padding: 2%;
  float: left;
  cursor: pointer;
  background: transparent;
}
html body .slc .slc-text {
  width: calc(100% - 18px);
  height: 14px;
  float: left;
  font-size: 1em;
  line-height: 14px;
  vertical-align: middle;
  color: #ffffff;
  overflow: hidden;
}
html body .slc .slc-icon {
  width: 14px;
  float: right;
  line-height: 1;
  text-align: right;
  color: #ffffff;
}
html body .slc .slc-icon:before {
  font-family: FontAwesome;
  content: "\f078";
  font-size: 14px;
}
html body .slc.active {
  margin: 2% 2% 0 2%;
}
html body .slc.active .slc-text {
  color: #bdc3c7;
}
html body .slc.active .slc-icon {
  color: #bdc3c7;
}
html body .slc.active .slc-icon:before {
  content: "\f077";
}
html body .slc.mark .slc-text .slc-text-cat {
  padding: 0 5px;
  float: right;
  background: #0099CC;
  color: #ffffff;
  font-weight: bold;
}
html body .slclist {
  position: relative;
  width: 96%;
  height: auto;
  max-height: 0;
  float: left;
  margin: 0 2% 2% 2%;
  padding: 0;
  overflow: hidden;
}
html body .slclist ul {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
html body .slclist ul li {
  width: 90%;
  padding: 4px 2% 4px 8%;
  font-size: .9em;
  line-height: 14px;
  vertical-align: middle;
  text-align: left;
  color: #bdc3c7;
}
html body .slclist ul li:hover {
  color: #ffffff;
  cursor: pointer;
}
html body .slclist ul li.selected {
  color: #0099CC;
}
html body .slclist ul li.slclist-search {
  width: 96%;
  height: 14px;
  padding: 4px 2% 8px 2%;
}
html body .slclist ul li.slclist-search input[type="text"] {
  width: calc(100% - 22px);
  height: auto;
  padding: 0 2px 0 2px;
  margin: 0;
  border: none;
  font-size: .9em;
  line-height: 14px;
  vertical-align: middle;
  float: left;
  color: #0099CC;
  background: transparent;
  border-bottom: 1px solid;
  border-color: #ffffff;
}
html body .slclist ul li.slclist-search input[type="text"]:focus {
  outline: none;
  border-bottom: 1px solid;
  border-color: #0099CC;
}
html body .slclist ul li.slclist-search .slclist-search-icon {
  width: 14px;
  height: 14px;
  float: right;
  line-height: 1;
  color: #ffffff;
}
html body .slclist ul li.slclist-search .slclist-search-icon:before {
  font-family: FontAwesome;
  content: "\f002";
  font-size: 14px;
}
html body .slclist ul li.slclist-select {
  width: 96%;
  height: 12px;
  padding: 4px 2% 8px 2%;
  text-align: center;
}
html body .slclist ul li.slclist-select p {
  width: 50%;
  float: left;
  color: #ffffff;
  font-size: .9em;
  line-height: 14px;
  vertical-align: middle;
}
html body .slclist ul li.slclist-select p:hover {
  color: #0099CC;
}
html body .slclist.active {
  max-height: 200px;
}
@media screen and (min-width: 850px) and (max-width: 1199px) {
  html body {
    /* select */
  }
  html body .slclist.active {
    overflow: auto;
    overflow-scrolling: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media screen and (max-width: 849px) {
  html body {
    /* select */
  }
  html body .slclist.active {
    overflow: auto;
    overflow-scrolling: auto;
    -webkit-overflow-scrolling: touch;
  }
}
html body input[type="text"],
html body input[type="password"],
html body input[type="search"] {
  position: relative;
  width: 99%;
  height: auto;
  padding: 6px 0.5%;
  float: left;
  color: #34495e;
  background: #bdc3c7;
  border: 1px solid;
  border-color: #2980b9;
  font-size: .9em;
  line-height: 14px;
  vertical-align: middle;
}
html body input[type="text"]:focus,
html body input[type="password"]:focus,
html body input[type="search"]:focus {
  outline: none;
}
html body input[type="text"].true,
html body input[type="password"].true,
html body input[type="search"].true {
  color: #27ae60;
}
html body input[type="text"].true:focus,
html body input[type="password"].true:focus,
html body input[type="search"].true:focus {
  border: 1px solid;
  border-color: #27ae60;
}
html body input[type="text"].false,
html body input[type="password"].false,
html body input[type="search"].false {
  color: #b3392c;
}
html body input[type="text"].false:focus,
html body input[type="password"].false:focus,
html body input[type="search"].false:focus {
  border: 1px solid;
  border-color: #b3392c;
}
html body input[type="submit"] {
  position: relative;
  width: 96%;
  height: auto;
  margin: 6px 2%;
  padding: 6px 2%;
  float: left;
  cursor: pointer;
  font-size: .9em;
  line-height: 14px;
  vertical-align: middle;
  font-weight: bold;
  color: #ecf0f1;
  background: #2980b9;
  border: none;
  border-bottom: 1px solid;
  border-color: transparent;
}
html body input[type="submit"]:hover {
  border-bottom: 1px solid;
  border-color: #ffffff;
  color: #ffffff;
}
html body input[type="submit"]:focus {
  outline: none;
}
html body input[name="send"] {
  background: #0099CC;
}
html body input[name="send"]:hover {
  border-bottom: 1px solid;
  border-color: #ecf0f1;
  color: #ffffff;
}
html body input[name="_submit"] {
  color: #ffffff;
  background: #0099CC;
}
html body input[name="_submit"]:hover {
  border-bottom: 1px solid;
  border-color: #ffffff;
  color: #ffffff;
  background: #0099CC;
}
html body input[name="_reset"] {
  color: #34495e;
  background: #ffffff;
}
html body input[name="_reset"]:hover {
  border-bottom: 1px solid;
  border-color: #0099CC;
  color: #0099CC;
  background: #ffffff;
}
html body textarea {
  position: relative;
  width: 100%;
  min-width: 100%;
  height: 75px;
  float: left;
  font-size: .9em;
  line-height: 14px;
  vertical-align: middle;
  color: #34495e;
  background: #bdc3c7;
  border: 1px solid;
  border-color: #2980b9;
}
html body.login-page {
  background: #ecf0f1;
}
html body #caption {
  position: relative;
  width: 100%;
  float: left;
}
html body #caption h1,
html body #caption p {
  position: absolute;
  font-size: 2.5em;
  color: #2980b9;
}
html body #caption h1 {
  top: 0;
  left: 0;
  width: 165px;
  text-align: right;
  font-weight: bold;
}
html body #caption h1.error {
  left: 54px;
  width: -8px;
  width: -webkit-calc((100% - 108px)*(1));
  width: -moz-calc((100% - 108px)*(1));
  width: calc((100% - 108px)*(1));
  text-align: left;
}
html body #caption p {
  top: 42px;
  left: 165px;
  width: auto;
  text-align: left;
  font-weight: normal;
}
@media screen and (min-width: 850px) and (max-width: 1199px) {
  html body #caption h1 {
    width: 144px;
  }
  html body #caption h1.error {
    width: -8px;
    width: -webkit-calc((100% - 108px)*(1));
    width: -moz-calc((100% - 108px)*(1));
    width: calc((100% - 108px)*(1));
  }
  html body #caption p {
    top: 34px;
    left: 144px;
  }
}
@media screen and (max-width: 849px) {
  html body #caption h1 {
    width: 113px;
  }
  html body #caption h1.error {
    width: -8px;
    width: -webkit-calc((100% - 108px)*(1));
    width: -moz-calc((100% - 108px)*(1));
    width: calc((100% - 108px)*(1));
  }
  html body #caption p {
    top: 28px;
    left: 113px;
  }
}
html body.export-resizer .container {
  background-color: white !important;
}
html body.export-resizer #header,
html body.export-resizer #menu,
html body.export-resizer #settings,
html body.export-resizer #pop-up {
  display: none!important;
  visibility: hidden!important;
}
html body.export-resizer #content .container,
html body.export-resizer #content .labels {
  width: 1100px !important;
  padding: 0!important;
  margin: 0!important;
}
html body.export-resizer .labels .labels-navigate {
  display: none!important;
  visibility: hidden!important;
}
html body.export-resizer .hide-export {
  display: none!important;
  visibility: hidden!important;
}
html body.export-resizer .loading {
  top: 45% !important;
  margin-top: 0 !important;
}
html body.export-resizer .export {
  width: 100%;
  height: 100%;
  padding: 1px !important;
  margin: 1px !important;
}
html body #frm-signInForm {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  height: 275px;
}
html body #frm-signInForm .inputs {
  position: relative;
  width: 100%;
  height: 110px;
  background: #ffffff;
}
html body #frm-signInForm .inputs .login {
  width: 16px;
  height: 16px;
  padding: 19px;
  float: left;
  line-height: 1;
  text-align: center;
}
html body #frm-signInForm .inputs .login:before {
  font-family: FontAwesome;
  content: "\f007";
  font-size: 16px;
}
html body #frm-signInForm .inputs .pass {
  width: 16px;
  height: 16px;
  padding: 19px;
  float: left;
  line-height: 1;
  text-align: center;
}
html body #frm-signInForm .inputs .pass:before {
  font-family: FontAwesome;
  content: "\f023";
  font-size: 16px;
}
html body #frm-signInForm .inputs input {
  width: -22px;
  width: -webkit-calc((33% - 55px)*(1));
  width: -moz-calc((33% - 55px)*(1));
  width: calc((33% - 55px)*(1));
  height: 14px;
  float: left;
  padding: 20.5px 0;
  margin: 0;
  border: none;
  font-size: 1em;
  line-height: 14px;
  vertical-align: middle;
  background: #ffffff;
  color: #34495e;
}
html body #frm-signInForm .inputs input[name="username"] {
  padding-bottom: 19.5px;
  border-bottom: 1px solid;
  border-color: #34495e;
}
html body #frm-signInForm .submit {
  position: relative;
  width: 100%;
  height: 55px;
  background: #0099CC;
}
html body #frm-signInForm .submit input {
  width: 33%;
  margin: 0;
  padding: 18.5px 0;
  height: 100%;
  background: transparent;
  color: #ffffff;
  font-weight: normal;
  font-size: 1.3em;
  line-height: 18px;
  vertical-align: middle;
  border: none;
}
html body #frm-signInForm .submit input:hover {
  border: none;
  background: #34495e;
}
html body #frm-signInForm .footer {
  position: relative;
  width: 100%;
  height: 110px;
  background: #bdc3c7;
}
html body #frm-signInForm .footer .errors {
  position: absolute;
  top: 18.5px;
  width: 33%;
}
html body #frm-signInForm .footer .errors p {
  width: 80%;
  padding: 0 10%;
  color: #b3392c;
  text-align: center;
  font-size: .9em;
  font-weight: bold;
}
html body #frm-signInForm .footer .signature {
  position: absolute;
  right: 0;
  bottom: 18.5px;
  width: 100%;
}
html body #frm-signInForm .footer .signature p {
  width: auto;
  padding: 0 18.5px;
  color: #34495e;
  text-align: right;
  font-size: .9em;
  float: right;
  font-weight: bold;
}
@media screen and (min-width: 850px) and (max-width: 1199px) {
  html body #frm-signInForm .inputs input {
    width: -5px;
    width: -webkit-calc((50% - 55px)*(1));
    width: -moz-calc((50% - 55px)*(1));
    width: calc((50% - 55px)*(1));
  }
  html body #frm-signInForm .submit input {
    width: 50%;
  }
  html body #frm-signInForm .footer .errors {
    width: 50%;
  }
}
@media screen and (max-width: 849px) {
  html body #frm-signInForm {
    height: 200px;
  }
  html body #frm-signInForm .inputs {
    width: 100%;
    height: 80px;
  }
  html body #frm-signInForm .inputs .login,
  html body #frm-signInForm .inputs .pass {
    padding: 11.5px;
  }
  html body #frm-signInForm .inputs input {
    width: 60px;
    width: -webkit-calc((100% - 40px)*(1));
    width: -moz-calc((100% - 40px)*(1));
    width: calc((100% - 40px)*(1));
    padding: 13px 0;
  }
  html body #frm-signInForm .inputs input[name="username"] {
    padding-bottom: 12px;
  }
  html body #frm-signInForm .submit {
    height: 40px;
  }
  html body #frm-signInForm .submit input {
    width: 100%;
    padding: 11px 0;
  }
  html body #frm-signInForm .footer {
    height: 80px;
  }
  html body #frm-signInForm .footer .errors {
    top: 11px;
    width: 100%;
  }
  html body #frm-signInForm .footer .signature {
    bottom: 11px;
  }
  html body #frm-signInForm .footer .signature p {
    padding: 0 11px;
  }
}
#loader {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 100%;
  background-color: #D8E5F2;
  overflow: hidden;
  z-index: 10000;
}
#loader div {
  position: relative;
  width: 100%;
  height: 100%;
}
#loader img {
  position: absolute;
  bottom: 55%;
  width: 120px;
  height: 128px;
  margin-left: -10px;
  margin-left: -webkit-calc((50% - 60px)*(1));
  margin-left: -moz-calc((50% - 60px)*(1));
  margin-left: calc((50% - 60px)*(1));
}
#loader span.text {
  position: absolute;
  top: 55%;
  width: 100%;
  color: black;
  text-align: center;
  font-size: 16px;
}
.tg {
  border-collapse:collapse;
  border-spacing:0;
  margin: 0 auto;
}
.tg td {
  border: 1px solid #7f8c8d!important;
  overflow:hidden;
  padding:10px 5px;
  word-break:normal;
  background: #ecf0f1;
}
.tg th {
  border: 1px solid #7f8c8d!important;
  overflow:hidden;
  padding:10px 5px;
  word-break:normal;
  background: #0099cc;
  color: #ffffff;
}
.tg .tg-0lax {
  text-align:left;
  vertical-align:top;
}