/* ------- ---
   ZENTRUM CSS
   ------- -*/
.bg-color-primary,
.bg-color-secondary,
.bg-color-tertiary {
  color: #fff; }

.bg-color-primary a:link,
.bg-color-primary a:visited {
  color: #fff; }

.bg-color-primary {
  background-color: #9575cd !important; }

.bg-color-secondary {
  background-color: #9dbdc6 !important; }

.bg-color-tertiary {
  background-color: #272f32 !important; }

.bg-color-background {
  background-color: #fff !important; }

.text-color-primary {
  color: #9575cd; }

.text-color-secondary {
  color: #9dbdc6; }

.text-color-tertiary {
  color: #272f32; }

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

html {
  box-sizing: border-box;
  font-size: 16px; }

body {
  background-color: #fff;
  color: #272f32;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.6;
  margin: 0; }

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

button,
a:link.button {
  background-color: #9575cd;
  border: 1px transparent;
  color: #fff;
  font-size: 1em;
  line-height: normal;
  margin-right: 18px;
  padding: 10px 15px;
  width: auto;
  transition: background-color .5s; }
  button:last-child,
  a:link.button:last-child {
    margin-right: 0; }
  button:hover,
  a:link.button:hover {
    background-color: #6b41b4;
    cursor: pointer; }
  button:focus,
  a:link.button:focus {
    outline: none; }
  button:disabled,
  a:link.button:disabled {
    background-color: #dbe1e3;
    color: #6a8088; }
    button:disabled:hover,
    a:link.button:disabled:hover {
      cursor: initial; }
  button.hollow,
  a:link.button.hollow {
    background-color: transparent;
    border: 1px solid #ebe5f6;
    color: #9575cd;
    transition: border .5s; }
    button.hollow:hover,
    a:link.button.hollow:hover {
      border: 1px solid #9575cd; }
  button.med,
  a:link.button.med {
    font-size: .75em;
    padding: .75em; }
  button.sm,
  a:link.button.sm {
    font-size: .65em;
    padding: .50em;
    letter-spacing: .1em; }

a:visited.button {
  background-color: transparent;
  border: 1px solid #9575cd;
  color: #fff; }
  a:visited.button.hollow {
    border: 1px solid #ebe5f6;
    color: #9575cd; }
    a:visited.button.hollow:hover {
      border: 1px solid #9575cd;
      color: #9575cd; }

form {
  display: block;
  width: 100%; }

.col .form-group {
  margin-bottom: 9px; }

.col > .form-group:last-child {
  margin-top: 18px;
  margin-bottom: 0; }

.form-group label {
  color: #54656b;
  display: block;
  font-weight: 600;
  width: 100%; }

.form-group input,
.form-group select {
  border: 1px solid #bec9cd;
  font-size: 1em;
  padding: 10px 15px;
  width: 100%;
  transition: border .2s; }
  .form-group input:hover,
  .form-group select:hover {
    border-color: #cfc0e8; }
  .form-group input:focus,
  .form-group select:focus {
    border: 1px solid #9575cd;
    outline-width: 0; }

.container {
  margin: 0 auto;
  max-width: 1120px;
  padding: 0 18px;
  position: relative;
  width: 100%; }
  .container.no-gutter {
    padding: 0; }

#styleguide .row {
  margin-bottom: 18px; }
  #styleguide .row .col {
    background-color: #f2f2f2; }

.row {
  display: flex;
  flex-direction: col;
  width: 100%; }
  .row.no-padding > .col {
    padding: 0; }
  .row.no-gutter > .col {
    margin-left: 0; }
  .row.wrap {
    flex-wrap: wrap; }
  .row.no-margin {
    margin-bottom: 0; }
  .row.row-top {
    align-items: flex-start; }
  .row.row-bottom {
    align-items: flex-end; }
  .row.row-center {
    align-items: center; }
  .row.row-stretch {
    align-items: stretch; }
  .row.row-baseline {
    align-items: baseline; }
  .row .col {
    display: block;
    flex: 1 1 auto;
    margin-left: 18px;
    max-width: 100%;
    width: 100%; }
    .row .col > .row {
      margin: 0 !important; }
    .row .col.col-no-padding {
      padding: 0; }
    .row .col:first-of-type {
      margin-left: 0; }
    .row .col.col-offset-10 {
      margin-left: 10%; }
    .row .col.col-offset-20 {
      margin-left: 20%; }
    .row .col.col-offset-25 {
      margin-left: 25%; }
    .row .col.col-offset-30 {
      margin-left: 30%; }
    .row .col.col-offset-33, .row .col.col-offset-34 {
      margin-left: 33.3333%; }
    .row .col.col-offset-50 {
      margin-left: 50%; }
    .row .col.col-offset-66, .row .col.col-offset-67 {
      margin-left: 66.6666%; }
    .row .col.col-offset-75 {
      margin-left: 75%; }
    .row .col.col-offset-80 {
      margin-left: 80%; }
    .row .col.col-offset-90 {
      margin-left: 90%; }
    .row .col.col-10 {
      flex: 0 0 10%;
      max-width: 10%; }
    .row .col.col-15 {
      flex: 0 0 15%;
      max-width: 15%; }
    .row .col.col-20 {
      flex: 0 0 20%;
      max-width: 20%; }
    .row .col.col-25 {
      flex: 0 0 25%;
      max-width: 25%; }
    .row .col.col-30 {
      flex: 0 0 30%;
      max-width: 30%; }
    .row .col.col-33, .row .col.col-34 {
      flex: 0 0 33.3333%;
      max-width: 33.3333%; }
    .row .col.col-35 {
      flex: 0 0 35%;
      max-width: 35%; }
    .row .col.col-40 {
      flex: 0 0 40%;
      max-width: 40%; }
    .row .col.col-45 {
      flex: 0 0 45%;
      max-width: 45%; }
    .row .col.col-50 {
      flex: 0 0 50%;
      max-width: 50%; }
    .row .col.col-10 {
      flex: 0 0 55%;
      max-width: 5%; }
    .row .col.col-60 {
      flex: 0 0 60%;
      max-width: 60%; }
    .row .col.col-65 {
      flex: 0 0 65%;
      max-width: 65%; }
    .row .col.col-66, .row .col.col-67 {
      flex: 0 0 66.6666%;
      max-width: 66.6666%; }
    .row .col.col-70 {
      flex: 0 0 70%;
      max-width: 70%; }
    .row .col.col-75 {
      flex: 0 0 75%;
      max-width: 75%; }
    .row .col.col-80 {
      flex: 0 0 80%;
      max-width: 80%; }
    .row .col.col-85 {
      flex: 0 0 85%;
      max-width: 85%; }
    .row .col.col-90 {
      flex: 0 0 90%;
      max-width: 90%; }
    .row .col .col-top {
      align-self: flex-start; }
    .row .col .col-bottom {
      align-self: flex-end; }
    .row .col .col-center {
      align-self: center; }

header {
  background-color: #9575cd; }
  header .col {
    padding: 9px; }
    header .col:first-of-type {
      padding-left: 0; }
    header .col:last-of-type {
      padding-right: 0; }
  header a:link,
  header a:visited {
    color: #ebe5f6;
    transition: color .3s; }
  header a:hover,
  header a:active {
    color: #fff; }

#breadcrumbs-container {
  background-color: #1c2224;
  color: #fff;
  font-size: .85em; }
  #breadcrumbs-container .row .col {
    padding: 9px 0; }

a:link,
a:visited {
  color: #9575cd;
  text-decoration: none;
  transition: color .3s; }

a:hover,
a:active {
  color: #9dbdc6; }

ul li ul {
  margin-left: 18px;
  padding: 0; }

ul.clean {
  margin: 0;
  padding: 0; }
  ul.clean li {
    list-style-type: none; }

ul.inline {
  margin: 0;
  padding: 0; }
  ul.inline li {
    display: inline-block;
    margin-right: 9px; }
    ul.inline li:last-child {
      margin-right: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Signika', sans-serif;
  font-weight: normal;
  margin: 0;
  width: 100%; }

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
  font-size: 0.70em; }

pre {
  background-color: white;
  border-left: 3px solid #9575cd;
  margin: 0;
  padding: 18px;
  width: 100%; }

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

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

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

.text-upper {
  text-transform: uppercase; }

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

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

.show {
  display: block !important; }

.hide {
  display: none !important; }

.invisible {
  visibility: hidden; }

.visible {
  visibility: visible; }

.float-left {
  float: left; }

.float-center {
  margin: 0 auto; }

.float-right {
  float: right; }

.display-block {
  display: block; }

#toc {
  display: block;
  left: 0;
  position: fixed;
  top: 120px;
  max-width: 320px; }
  #toc h2 {
    margin-left: 18px; }
  #toc ul {
    margin-left: 18px; }

.border-all {
  border: 1px solid #bec9cd; }

.border-top, .container.table .row {
  border-top: 1px solid #bec9cd; }

.border-right, .container.table.cells .col, .container.table .row {
  border-right: 1px solid #bec9cd; }

.border-bottom, .container.table .row:last-of-type {
  border-bottom: 1px solid #bec9cd; }

.border-left, .container.table .row {
  border-left: 1px solid #bec9cd; }

.red,
.green,
.blue,
.purple {
  color: #fff; }

.red {
  background-color: #c62828 !important; }

.green {
  background-color: #2e7d32 !important; }

.blue {
  background-color: #1565c0 !important; }

.yellow {
  background-color: #f9a825 !important; }

.purple {
  background-color: #6a1b9a !important; }

.text-red {
  color: red; }

.text-green {
  color: green; }

.text-blue {
  color: blue; }

.text-purple {
  color: purple; }

/* ------ -------- ---
   MODULE SPECIFIC CSS
   ------ -------- -*/
/* CHEMICALS MODULE CSS */
.gold-text {
  color: gold; }

#inp-comments {
  border: 0;
  outline: none;
  width: 100%; }

#page-chemicals-list .row .col {
  padding: 9px 9px; }

#page-chemicals-list #hero,
#page-chemicals-list .list-item {
  margin-bottom: 18px;
  position: relative; }
  #page-chemicals-list #hero .tarp,
  #page-chemicals-list .list-item .tarp {
    background-color: red;
    position: absolute;
    visibility: none;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    z-index: -1000;
    opacity: 0;
    transition: all .2s; }
    #page-chemicals-list #hero .tarp.active,
    #page-chemicals-list .list-item .tarp.active {
      opacity: 1;
      z-index: 1000;
      visibility: visible; }

#page-chemicals-list .list-item {
  margin-bottom: 0; }
  #page-chemicals-list .list-item .tarp {
    background-color: #4d4d4d !important;
    color: #fff; }

#page-chemicals-list #stats {
  padding: 18px; }
  #page-chemicals-list #stats .col {
    background-color: #2e373b; }
    #page-chemicals-list #stats .col button {
      background-color: #49575d;
      padding-left: 18px;
      padding-right: 18px;
      transition: all .5; }
      #page-chemicals-list #stats .col button:hover {
        background-color: gold; }
      #page-chemicals-list #stats .col button.active {
        background-color: gold;
        color: #272f32; }
  #page-chemicals-list #stats .label {
    color: #8599a0;
    font-size: .75em;
    text-transform: uppercase; }
  #page-chemicals-list #stats .stat {
    font-size: 2em; }

#page-chemicals-list .col.status {
  padding-top: 7px; }

#page-chemicals-list #chemical-status li {
  font-size: .65em;
  font-weight: 600;
  padding: 1.5px 5.5px;
  text-transform: uppercase; }
  #page-chemicals-list #chemical-status li.new {
    background-color: #a7d1f5;
    color: #1e88e5; }
  #page-chemicals-list #chemical-status li.reportable {
    background-color: #ffd095;
    color: #fb8c00; }
  #page-chemicals-list #chemical-status li.ignored {
    background-color: #a6b9c1;
    color: #546e7a; }
  #page-chemicals-list #chemical-status li.flagged {
    background-color: #f29aba;
    color: #d81b60; }
  #page-chemicals-list #chemical-status li.complete {
    background-color: #a3d9a6;
    color: #43a047; }
  #page-chemicals-list #chemical-status li.incomplete {
    background-color: #f6bebd;
    color: #e53935; }

#page-chemicals-single .warning button {
  background-color: #fceaea;
  border-color: #e53935;
  color: #e53935; }

#page-chemicals-single #chemical-title {
  padding-top: 18px; }
  #page-chemicals-single #chemical-title input,
  #page-chemicals-single #chemical-title button {
    background-color: #2e373b;
    color: #999999;
    padding: 5px 10px;
    text-align: center;
    width: auto; }
  #page-chemicals-single #chemical-title button {
    background-color: #9575cd;
    color: #fff; }
    #page-chemicals-single #chemical-title button.hollow {
      background-color: #2e373b;
      border-color: transparent;
      color: #999999; }

#page-chemicals-single #chemical-body .col {
  border-bottom: 1px solid;
  border-right: 1px solid;
  border-color: #bec9cd; }

#page-chemicals-single #chemical-body .col:first-of-type {
  border-left: 1px solid;
  border-color: #bec9cd; }

#page-chemicals-single #chemical-body input {
  text-align: center; }

#page-chemicals-single #chemical-body h3.no-margin {
  margin-bottom: 0; }

#page-chemicals-single #chemical-body .chemical-component .label,
#page-chemicals-single #chemical-body #inventory .label {
  margin-bottom: 0; }

#page-chemicals-single #chemical-body .chemical-component input,
#page-chemicals-single #chemical-body #inventory input {
  text-align: left; }

#page-chemicals-single #chemical-body #add-component button {
  margin-bottom: 0; }

#page-chemicals-single h1 {
  margin-bottom: 0; }

#page-chemicals-single #inventory .col {
  padding: 9px 18px; }

#page-chemicals-single .label {
  color: #8599a0;
  font-size: .75em;
  margin-bottom: 9px;
  text-transform: uppercase; }

#page-chemicals-single button {
  margin-right: 9px;
  margin-bottom: 9px;
  padding: 5px 10px; }

#page-chemicals-single button:last-of-type {
  margin-right: 0; }

#page-chemicals-single input {
  border: 0px;
  width: 100%; }

#page-chemicals-single .chemical-component {
  position: relative; }

#page-chemicals-single .btn-delete-component {
  position: absolute;
  top: 18px;
  right: 40px; }

#page-chemicals-blacklist #blacklist-form {
  padding: 0;
  margin-bottom: 18px; }

#page-chemicals-blacklist #blacklist {
  flex-wrap: wrap; }

#page-chemicals-blacklist #blacklist .col {
  padding: 0;
  margin-left: 0;
  margin-right: 18px;
  margin-bottom: 18px;
  max-width: calc(25% - 13.6px);
  position: relative; }

#page-chemicals-blacklist .bl-cover {
  background-color: red;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: .3;
  width: 30px; }

#page-chemicals-blacklist #blacklist .col:nth-child(4n) {
  margin-right: 0; }

/* --- ---
// APP CSS
   --- -*/
header {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#9575cd+23,afa1cc+100 */
  background: #9575cd;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #9575cd 23%, #afa1cc 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #9575cd 23%, #afa1cc 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #9575cd 23%, #afa1cc 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9575cd', endColorstr='#afa1cc',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */ }

#breadcrumbs-container {
  background-color: #1c2224;
  color: #999999;
  font-size: .85em; }

#hero-stats {
  background-color: #272f32;
  color: #fff;
  padding-bottom: 18px;
  margin-bottom: 18px; }
  #hero-stats .label {
    font-size: .85em;
    color: #b3b3b3;
    text-transform: uppercase; }
  #hero-stats #sub-menu {
    padding: 9px 0; }
  #hero-stats #title {
    margin: 0 0 18px 0; }
    #hero-stats #title .wrap {
      display: inline-block;
      width: auto; }
    #hero-stats #title .underline {
      background-color: #7850bf;
      height: 3px;
      margin: 0 auto;
      width: 60%; }
  #hero-stats #title h1 {
    text-shadow: 2px 2px 2px #272f32, 4px 4px 2px gray; }
  #hero-stats #sub-title {
    color: #b3b3b3;
    font-size: 1em;
    margin: 18px 0; }
  #hero-stats #info > .col {
    background-color: #2e373b;
    padding: 18px 0; }
  #hero-stats #info .data-percent {
    font-size: 2em; }
  #hero-stats #info small {
    color: #999999; }

.container.table {
  margin-bottom: 25px; }
  .container.table.banded .row:nth-child(2n) {
    background-color: red; }
  .container.table.banded .row:nth-child(1) {
    background-color: transparent; }
  .container.table.banded .row:nth-child(2) {
    background-color: #bec9cd; }
  .container.table .row {
    transition: all .3s; }
    .container.table .row .col {
      padding: 4px 8px; }
      .container.table .row .col:last-of-type {
        border: 0; }
  .container.table .row:nth-child(1),
  .container.table .row:nth-child(2) {
    border: 0;
    margin-bottom: 0; }
  .container.table .row:nth-child(1) .col {
    padding: 0; }
  .container.table .row:nth-child(2) {
    background-color: #bec9cd; }

.fixed {
  position: fixed;
  top: 0; }

.modal-overlay {
  background-color: #272f32;
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  transform: opacity 0.5s ease; }

.modal {
  border-radius: 5px;
  color: #fff;
  display: none;
  height: 500px;
  left: 0;
  right: 0;
  margin: auto;
  /*this to solve "the content will not be cut when the window is smaller than the content": */
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  padding: 20px;
  position: fixed;
  /*it can be fixed too*/
  top: 0;
  bottom: 0;
  width: 400px;
  z-index: 2;
  transform: opacity .4s ease; }