/*
 * From http://purecss.io/grids/#using-grids-with-custom-fonts
 * When setting the primary font stack, apply it to the Pure grid units along
 * with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use
 * specific font stacks to ensure the greatest OS/browser compatibility.
 */

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url(../../vendor/font/Ubuntu-Regular.woff2) format('woff2'),
       url(../../vendor/font/Ubuntu-Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url(../../vendor/font/Ubuntu-Bold.woff2) format('woff2'),
       url(../../vendor/font/Ubuntu-Bold.ttf) format('ttf');
}


/* ensure the scroll bars always appear */
html {
    overflow-y: scroll;
}


html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
  /* Set your content font stack here: */
  font-family: 'Ubuntu', sans-serif;
}

body {
  color: #777;
  margin: 0 0 1em;
}

a {
  color: #3b8bba; /* block-background-text-normal */
  text-decoration: none;
}

a:visited {
  color: #265778; /* block-normal-text-normal */
}

.break-word {
  word-break: break-word;
}

.errorlist {
  background: rgb(255, 255, 184);
}

.warning {
  background: rgb(223, 117, 20);
  color: white;
}

.header {
  text-align: center;
  padding: 0;
}

.header h1 {
  color: #1f8dd6;
  margin: 0;
  padding: 0;
}

.header h2 {
  color: #666;
  margin: 0.5em 0 0.8em;
}

.highlight {
  background: rgb(255, 255, 184);
  padding: 0px 5px 5px 5px;
  margin: 5px 5px 5px 0px;
}

/*
 * Footer Module Styles
 */
.legal {
  font-size: 80%;
  border-top: 1px solid #eee;
  padding: 0.5em 0;
  background: rgb(250, 250, 250);
}

.legal-license,
.legal-copyright {
  margin: 0;
}

.legal-copyright,
.legal-links {
  text-align: right;
}

.legal-links {
  list-style: none;
  margin: 0;
}

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

.kb-hide-bullet ul {
  list-style-type: none;
  padding: 0;
}

/*
 * Apply the .box class on the immediate parent of any grid element (pure-u-*)
 * to apply some padding.
 */
.l-box {
  padding: 1.3em;
}

.r-box {
  padding-right: 0.5em;
}

.small-margin-top {
    margin: 5px 0px 0px 0px;
}

.t-box {
  padding-top: 1.3em;
}

.ts-box {
  padding-top: 0.5em;
}

.marketing-ribbon {
  border-bottom: 1px solid #eee;
  padding: 1em 0;
}

.marketing-ribbon h3 {
  font-size: 1.47em;
  font-weight: normal;
}

#menu .menu-mini {
  text-align: right;
  padding: 0.0em 6px 0.0em 0.0em;
}

.message-error, .message-warning {
  text-align: center;
  padding: 0;
  background: rgb(190, 38, 37);
  color: white;
}

.message-info, .message-success {
  text-align: center;
  padding: 0;
  background: rgb(224, 255, 184);
}

.message p {
  margin: 0;
  -webkit-margin-after: 0px;
}

.pure-button-xsmall {
  font-size: 70%;
}

.pure-button-small {
  font-size: 85%;
}

.pure-button:visited {
  color: #333;
}

.pure-form-aligned .pure-input-1 {
  width: calc(100% - 12rem);
}

.pure-form-aligned .pure-input-1.datepicker {
  width: 100%;
}

.pure-form-aligned .Zebra_DatePicker_Icon_Wrapper .Zebra_DatePicker_Icon_Wrapper {
  width: 100%;
}
.pure-form-aligned .Zebra_DatePicker_Icon_Wrapper {
  width: calc(100% - 12rem);
}

.pure-form-aligned .pure-control-group label {
  text-align: left;
  padding: .2em .5em 0 0;
}
.pure-form-aligned .help-text {
  margin-left: 12rem;
  font-size: 80%;
}

.pure-form-aligned .pure-controls {
  margin-left: 0;
}

.pure-form-stacked input[type=checkbox] ~ strong label {
  display: inline-block !important;
}

.testing {
  text-align: center;
  padding: 0;
  background: rgb(255, 255, 184);
}

.col-label {
  font-weight: bold;
    padding: 20px 10px 10px;
}

.col-value {
  padding: 20px 10px 10px;
}

/* For the https://github.com/devbridge/jQuery-Autocomplete plugin. */
.autocomplete-suggestions {
  border: 1px solid #999;
  background: #FFF;
  overflow: auto;
}
.autocomplete-suggestion {
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
}
.autocomplete-selected {
  background: #F0F0F0;
}
.autocomplete-suggestions strong {
  font-weight: normal;
  color: #3399FF;
}
.autocomplete-group {
  padding: 2px 5px;
}
.autocomplete-group strong {
  display: block;
  border-bottom:
  1px solid #000;
}


[hidden][style="display: block;"] { display: block !important; }

/*
 * For the 'bxslider'.
 */
.bxslider{
  padding: 0;margin: 0;
}

 .bx-wrapper img{
  max-width: auto;
  width: 100%;
  height: 100%;
}

#layout,
#menu,
.menu-link {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}

#menu .nav-menu-container {
  position: relative;
}
#menu .nav-menu {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0 16px 16px 0 rgba(255,255,255,0.3);
  z-index: 1;
}
#menu .nav-menu a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  background-color: #111;
}
#menu .nav-menu a:hover {
  background-color: #1f8dd6;
}

#menu .nav-menu-container:hover .nav-menu {
  display: block;
  top: 35px;
  left: 10px;
}

/* media query for md and sm devices */
@media only screen and (max-width: 767px) {
  .pure-form-aligned .pure-input-1,
  .pure-form-aligned .Zebra_DatePicker_Icon_Wrapper {
    width: 100%;
  }
  
  .pure-form-aligned .pure-control-group input[type='checkbox'] ~ strong label {
    display: inline-block;
    width: auto;
  }
  .pure-form-aligned .help-text {
    margin-left: 0;
  }
}

/**
 * https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
 * ref:
 * http://designshack.net/articles/css/6-thinks-i-learned-about-print-stylesheets-from-html5-boilerplate/
 */

/* Style adjustments for high resolution devices */
@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}


/* Print styles.  http://www.phpied.com/delay-loading-your-print-css/ */
@media print {
  *,
  *:before,
  *:after,
  *:first-letter,
  *:first-line {
    background: transparent !important;
    color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */

  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * http://css-discuss.incutio.com/wiki/Printing_Tables
   */

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

.progress-status {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin-bottom: 2rem;
}

.progress-status .progress-label {
  flex: 0 0 10rem;
}

.progress-status .progress-bar-outer {
  flex-grow: 1;
  border: 1px solid grey;
  text-align: left;
  height: 2rem;
  box-sizing: border-box;
  overflow: clip;
}

.progress-status .progress-bar-outer .progress-bar {
  display: block;
  background-color: green;
  height: 2rem;
}