@charset "utf-8";
html {
  box-sizing: border-box; }

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

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0; }

.clearfix {
  display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix {
  height: 1%; }

.clearfix {
  display: block; }

body {
  background: #C0C0C0;
  font-family: Verdana, Arial, sans-serif; }

.ui-dialog-titlebar-close {
  visibility: hidden; }

.wrapper:focus,
input:focus,
select:focus,
button:focus,
li:focus,
h1:focus,
h2:focus,
h3:focus,
h4:focus,
a.leftcell_link:focus {
  outline-color: #152359;
  outline-style: solid;
  outline-width: thin;
  background: #eeeeff; }

.inactive {
  pointer-events: none; }

/*doc
---
title: SRP 2.0 Styleguide
name: welcome
category: index
---

Welcome!

*/
/* normalize-scss 3.0.2+normalize.3.0.2 | MIT/GPLv2 License | bit.ly/normalize-scss */
/**
   * Establish a vertical rhythm unit using $base-font-size, $base-line-height,
   * and $rhythm-unit variables. Also, correct text resizing oddly in IE 6/7 when
   * body `font-size` is set using `em` units.
   */
* html {
  font-size: 75%; }

html {
  font-size: 12px;
  line-height: 1.41667em; }

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  *display: inline;
  *zoom: 1;
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
   * Address `[hidden]` styling not present in IE 8/9/10.
   */
[hidden] {
  display: none; }

/**
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
template {
  display: none; }

/* Links
   ========================================================================== */
/**
   * Remove the gray background color from active links in IE 10.
   */
a {
  background-color: transparent;
  color: blue;
  text-decoration: none; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
   * Set 1 unit of vertical rhythm on the top and bottom margin.
   */
blockquote {
  margin: 1.41667em 40px; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  /* Set the font-size and line-height while keeping a proper vertical rhythm. */
  font-size: 2em;
  line-height: 1.41667em;
  /* Set 1 unit of vertical rhythm on the top and bottom margins. */
  margin-top: 0.70833em;
  margin-bottom: 0.70833em; }

h2 {
  font-size: 1.5em;
  line-height: 1.88889em;
  margin-top: 0.94444em;
  margin-bottom: 0.94444em; }

h3 {
  font-size: 1.17em;
  line-height: 2.42165em;
  margin-top: 1.21083em;
  margin-bottom: 1.21083em; }

h4 {
  font-size: 1em;
  line-height: 1.41667em;
  margin-top: 1.41667em;
  margin-bottom: 1.41667em; }

h5 {
  font-size: 0.83em;
  line-height: 1.70683em;
  margin-top: 1.70683em;
  margin-bottom: 1.70683em; }

h6 {
  font-size: 0.67em;
  line-height: 2.11443em;
  margin-top: 2.11443em;
  margin-bottom: 2.11443em; }

/**
   * Address styling not present in IE 8/9.
   */
mark {
  background: #ff0;
  color: #000; }

/**
   * Set 1 unit of vertical rhythm on the top and bottom margin.
   */
p,
pre {
  margin: 1.41667em 0; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Lists
     ========================================================================== */
/**
   * Address margins set differently in IE 6/7.
   */
dl,
menu,
ol,
ul {
  margin: 1.41667em 0; }

dd {
  margin: 0 0 0 40px; }

/**
   * Address paddings set differently in IE 6/7.
   */
menu,
ol,
ul {
  padding: 0 0 0 40px; }

/**
   * Correct list images handled incorrectly in IE 7.
   */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none; }

/* Embedded content
   ========================================================================== */
/**
   * Remove border when inside `a` element in IE 8/9/10.
   */
img {
  border: 0;
  /* Improve image quality when scaled in IE 7. */
  -ms-interpolation-mode: bicubic; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
   * Address margin not present in IE 8/9 and Safari.
   */
figure {
  margin: 1.41667em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  _font-family: 'courier new', monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
   * Correct margin displayed oddly in IE 6/7.
   */
form {
  margin: 0; }

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7
 * 5. Improve appearance and consistency with IE 6/7.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
  *font-family: sans-serif;
  /* 4 */
  *vertical-align: middle;
  /* 5 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */
button,
html input[type="button"], input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
  *overflow: visible;
  /* 4 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
   * It's recommended that you don't attempt to style these elements.
   * Firefox's implementation doesn't respect box-sizing, padding, or width.
   *
   * 1. Address box sizing set to `content-box` in IE 8/9/10.
   * 2. Remove excess padding in IE 8/9/10.
   * 3. Remove excess padding in IE 7.
   *    Known issue: excess padding remains in IE 6.
   */
input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
  *height: 13px;
  /* 3 */
  *width: 13px;
  /* 3 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  /* 2 */
  /**
   * Remove inner padding and search cancel button in Safari and Chrome on OS X.
   * Safari (but not Chrome) clips the cancel button when the search input has
   * padding (and `textfield` appearance).
   */ }
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  margin: 0 2px;
  /* Apply borders and padding that keep the vertical rhythm. */
  border-color: #c0c0c0;
  border-#{$side}-style: solid;
  border-#{$side}-width: 0.08333em;
  padding-top: 0.4125em;
  border-#{$side}-style: solid;
  border-#{$side}-width: 0.08333em;
  padding-bottom: 0.8375em;
  border-#{$side}-style: solid;
  border-#{$side}-width: 0.08333em;
  padding-left: 0.80208em;
  border-#{$side}-style: solid;
  border-#{$side}-width: 0.08333em;
  padding-right: 0.80208em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
  *margin-left: -7px;
  /* 3 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

.waitpopup {
  display: none;
  position: fixed;
  z-index: 3003;
  top: 17%;
  left: 50%;
  margin-left: -152px;
  width: 304px;
  height: 155px;
  text-align: center;
  background: url(/SRP2/Content/images/WaitBackground.gif);
  background-color: transparent;
  color: #333;
  border: none; }

.waitpopup img {
  margin: auto;
  margin-top: 30px; }

.waitpopup span {
  color: #216b93;
  font-size: 110%;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  display: block;
  margin: auto;
  padding-top: 10px;
  padding-left: 5px; }

.jqmOverlay {
  /* z-index:100002;*/
  opacity: .8;
  background-color: #222222; }

* iframe.jqm {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: expression(this.parentNode.offsetWidth+'px');
  height: expression(this.parentNode.offsetHeight+'px'); }

* html .jqmWindow {
  position: absolute;
  top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px'); }

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  background-color: #000; }

.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5; }

.waitpopup {
  position: fixed;
  z-index: 1; }

.waitpopup-inside {
  position: fixed;
  z-index: -1;
  top: 17%;
  left: 50%;
  margin-left: -152px;
  width: 304px;
  height: 155px;
  text-align: center;
  background: url(/SRP2/Content/images/WaitBackground.gif);
  background-color: transparent;  
  color: #333;
  border: none; 

}

.waitpopup-inside img {
  margin: auto;
  margin-top: 30px; }

.waitpopup-inside span {
  color: #216b93;
  font-size: 110%;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  display: block;
  margin: auto;
  padding-top: 10px;
  padding-left: 5px; }

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  overflow: hidden; }

#cboxWrapper {
  max-width: none; }

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%; }

#cboxMiddleLeft, #cboxBottomLeft {
  clear: left; }

#cboxContent {
  position: relative; }

#cboxLoadedContent {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 10px auto;
  /*padding: 10px;*/ }

#cboxTitle {
  margin: 0; }

#cboxLoadingOverlay, #cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
  cursor: pointer; }

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
  -ms-interpolation-mode: bicubic; }

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0; }

#colorbox, #cboxContent, #cboxLoadedContent {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box; }

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
   background: url(/SRP2/Content/images/overlay.png) repeat 0 0;
  opacity: 0.9;
  filter: alpha(opacity=90);     
}

#colorbox {
  outline: 0; }

.cboxIframe {
  background: #fff; }

#cboxError {
  padding: 50px;
  border: 1px solid #ccc; }

#cboxTitle {
  position: absolute;
  bottom: 4px;
  left: 0;
  text-align: center;
  width: 100%;
  color: #949494; }

#cboxCurrent {
  position: absolute;
  bottom: 4px;
  left: 58px;
  color: #949494; }

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); }

#cboxContent {
  border: 3px solid #808080;
  background-color: #f8f9fb;
  overflow: hidden; }

div.opened[data-type="lightbox"] {
  padding: 10px; }

div[data-type="lightbox"][data-class="opened"] {
  padding: 10px; }

.banner {
  height: 119px; }

.navigation {
  background: #A8D1EF;
  height: 24px; }

.banner,
.navigation {
  float: left;
  width: 100%; }

.navigation__welcome {
  float: left;
  width: 25%;
  font-style: italic;
  margin-left: 10px;
  margin-top: 5px;
  text-align: left; }

.navigation__items {
  float: right;
  margin-top: 3px;
  text-align: right;
  text-transform: uppercase; }

.navigation a:link,
.navigation a:visited {
  padding-right: 16px;
  color: #152359;
  text-decoration: none;
  font-weight: bold;
  background-color: #A8D1EF; }

.navigation a:active,
.navigation a:hover {
  text-decoration: underline; }

.navigation li {
  margin: 0;
  margin-right: 1px;
  padding: 0;
  float: left;
  list-style: none;
  font-weight: bold;
  color: #152359;
  background-color: #A8D1EF;
  display: block; }

.navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: bold;
  color: #152359;
  background-color: #A8D1EF; }

/* Skip navigation */
.skipnav {
  text-align: left; }

.skipnav a {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden; }

.skipnav a:focus, .skipnav a:active {
  position: static;
  left: auto;
  width: auto;
  height: auto;
  overflow: visible;
  text-decoration: underline;
  padding: 3px 5px 5px;
  border: 1px solid #FFFFFF;
  background-color: #152359;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 100%;
  margin-left: auto; }

/* English PromptListItem - Title bar (About the portal, FAQ, Related links...*/
.PromptListItem {
  font-size: 10px;
  letter-spacing: 0px;
  text-decoration: none; }

/* English PromptListItem - Title bar (About the portal, FAQ, Related links...*/
.PromptCommentText {
  font-size: 10px;
  letter-spacing: 0px;
  text-decoration: none; }

.wrapper {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  width: 100%; }
  .wrapper:after {
    content: " ";
    display: block;
    clear: both; }

.page {
  background: white;
  float: left;
  width: 100%; }

.page__landing {
  padding: 10px; }

.page__sidenav {
  background: url("/SRP2/Content/images/back-leftsidebar.png");
  background-repeat: repeat-y;
  width: 1000px; }

.page__sidenav-main {
  float: left;
  padding: 10px 15px;
  width: 800px; }

.form-controls {
  float: right; }

.row {
  float: left;
  width: 100%; }

.form-row {
  float: left;
  margin: 5px 0;
  width: 100%; }

.form-row[data-type="row"] {
  margin: 20px 0 10px 0; }

.buttonbar {
  background-color: #a5ceee;
  padding: 5px;
  max-width: 98%; }

div#PromptSenderClass.col2 {
  float: none;
  margin-left: 10%; }

#PromptSenderClass-label strong {
  margin-left: 5%; }

.section {
  float: left;
  margin: 0 0 20px 0px;
  width: 100%; }

.plugin:not(#home-plugin_home) {
  margin-left: 10px; }

.small-1 {
  width: 8.33333%; }

.small-3 {
  width: 25%; }

.small-4 {
  width: 33.33333%; }

.columns {
  position: relative;
  padding-right: 4px;
  float: left;
  font-size: 11.2px;
  line-height: normal; }

.col1 {
  float: left;
  margin-bottom: 5px;
  width: 100%; }

.homecol2 {
  float: left;
  padding: 0px 10px;
  width: 50%; }

.col33,
.col3 {
  float: left;
  margin-right: 10px;
  max-width: 33%; }

.col4 {
  float: left;
  margin-right: 10px;
  max-width: 24%; }

.col5 {
  float: left;
  margin-right: 10px;
  max-width: 19%; }

.col40 {
  width: 40%; }

.col60 {
  width: 60%; }

.form-row__controls {
  background: #A7CDEC;
  padding: 10px 5px; }

.form-row__col {
  float: left;
  text-align: left; }

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

.indent-sm {
  margin-left: 10%;
  width: 90%; }

.indent-lg {
  margin-left: 25%;
  width: 75%; }

div#PromptGuestActionFilter.col2 {
  float: none;
  margin-left: 10%;
  margin-top: 10px; }

span.sidenav-report-icon {
  margin-right: 5px; }

#forgotPassword.page div.row {
  margin-left: 10%;
  width: 90%; }

#ForgotPasswordPrompt {
  margin-left: 10px; }

#ForgotPasswordCommentPrompt {
  margin-top: 10px; }

/*#PromptTitle-label, #PromptOtherPhoneNumber-label, #PromptFaxNumber-label, #PromptCompanyStreet2-label, #PromptIssueCategory1-label strong, #PromptPetFoodChoice-label strong, #PromptLivestockFoodChoice-label strong,  {
	margin-left: 13px;
}*/
input {
  margin-right: 5px; }

#PromptAttachDocumentFile-div {
  width: 90%; }

#PromptAttachDocumentFile {
  width: 90%;
  margin-left: 37px; }

#PromptAttachDocumentFileButton {
  margin-top: 4px; }

div[data-type="promptgroup"] {
  clear: left; }

:focus {
  outline-color: #152359;
  outline-style: solid;
  outline-width: thin;
  background: #eeeeff; }

.footer {
  background: white;
  margin: 0 auto;
  width: 1000px; }

.footerwithoutlogo {
  margin-left: 200px; }

.footer-wrapper {
  margin: 0 auto;
  width: 700px; }

#footerLogos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; }

.footer-logos {
  /*float: left;
	text-align: center;*/ }

.footer-logos-hhs {
  /*width: 130px;*/ }

.footer-logos-usa {
  /*padding-top: 20px;
	width: 203px;*/
  margin-right: 10px; }
  .footer-logos-usa img {
    width: 100px;
    height: auto; }

.footer-logos-fda {
  /*padding-top: 40px;
	width: 233px;*/
  margin-left: 10px; }

.footer-logos-nih {
  /*width: 132px;*/ }

.footer-interior {
  padding-top: 0; }

.footer-small {
  padding-bottom: .1px; }

.footer-small p {
  font-size: 9.3px; }

.footer-interior .footer-small {
  background: url("/SRP2/Content/images/back-leftsidebar.png");
  background-repeat: repeat-y;
  overflow: auto;
  padding: 0 20px 20px 200px; }

/*doc
---
title: Page Title
name: title01
category: Text
---
```html_example
<h1 class='title__page'>My Reports</h1>
```
*/
/*doc
---
title: Promptgroup Title
name: title02
category: Text
---

```html_example
<div class="form-row">
	<h2 class="title__section">Promptgroup Title</h2>
	<h2 class="title__promptgroup">Promptgroup Title</h2>
</div>
```
*/
/*doc
---
title: Required Field Comment
name: title03
category: Text
---

```html_example
<p class="required-field"><span>*</span>=Required Field</p>
```
*/
/*doc
---
title: Required Label
name: title04
category: Text
---

```html_example
<div class="form-row">
	<div class="col1">
		<label for="title" class="required">Title</label>
	</div>
</div>
```

*/
/*doc
---
title: Regular Text
name: title05
category: Text
---

```html_example
<p>You have chosen to submit a <strong>Pet Food Safety Report</strong> to the FDA. Please be advised that under 18 U.S.C. 1001, anyone who makes a materially false, fictitious, or fraudulent statement to the U.S. Government is subject to criminal penalties.</p>
```

*/
/*doc
---
title: Error Text
name: title06
category: Text
---

```html_example
<div class="form-row">
	<div class="col2">
		<label for="fname">First Name</label>
	</div>
	<div class="col2">
		<input name="fname" type="text" id="fname" class="input__100">
		<p class="error">This is some error text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, facilis, optio illum alias similique iure error iste quos blanditiis earum. Commodi ab et quis, maxime ratione. Omnis illo, placeat temporibus.</p>
	</div>
</div>
```


*/
/*doc
---
title: Block Comment
name: title07
category: Text
---

```html_example
<div class="form-row">
	<h2 class="title__section">Block Comment</h2>
	<div class="block__comment">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut deserunt voluptas veritatis dicta dolore laudantium repellat ipsa doloribus iusto qui nemo ab amet corrupti illum ea, architecto commodi pariatur. Reiciendis.</div>
</div>
```


*/
a:active, a:hover {
  cursor: pointer;
  text-decoration: underline;
  outline: 0; }

a[disabled="disabled"] {
  pointer-events: none;
  cursor: default; }

input[type="checkbox"]:hover,
input[type="radio"]:hover {
  cursor: pointer; }

/* redundant due to the above.
a[disabled] {
  pointer-events: none;
  color: gray;
}   */
.required {
  color: #152359;
  font-weight: bold;
  /*padding-left: 5px;*/ }

.RequiredIndicatorText {
  vertical-align: middle;
  font-family: Verdana, Arial, Sans-Serif;
  font-size: 150%;
  font-weight: bolder;
  color: #ff0000; }

.error {
  color: red !important;
  margin: 5px 0 !important;
  padding: 5px 0 !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: bold !important;
  /*removed because it was causing the div holding the error message summary to take up nearly half the page height*/
  /*display: block;*/ }

.disabled {
  pointer-events: none;
  cursor: default;
  color: gray; }

.title__home {
  color: #152359;
  font-size: 16px;
  margin: 0 0 10px;
  padding: 5px 0; }

.title__page {
  color: #9c3627;
  font-size: 1.6em;
  padding: 5px; }

.title__section {
  color: #152359;
  font-size: 1em;
  font-weight: bold;
  margin: 0 0 20px;
  line-height: normal; }

.title__login {
  background: #152359;
  color: white;
  font-size: 21.952px;
  margin: 0 0 5px;
  padding: 3px;
  text-align: center; }

.title__promptgroup {
  background: #e1deca;
  color: #152359;
  float: left;
  font-size: 1.1em;
  padding: 5px;
  width: 100%; }

.block__comment {
  background: #F7F7F7;
  border: 1px solid grey;
  display: block;
  float: left;
  margin: 0 0 15px 10px;
  padding: 5px;
  width: 98%; }

.block__comment_mobile {
  background: #F7F7F7;
  border: 1px solid grey;
  display: block;
  float: left;
  margin: 0 0 15px 0;
  padding: 5px;
  width: 100%; }

/* class that positions a field to the right side of a page*/
.col__right {
  padding-right: 10px;
  width: 50%;
  margin-left: 50%; }

.block__note {
  display: block;
  font-weight: bold;
  margin-bottom: 15px; }

.required-field {
  color: #152359;
  font-weight: bold; }

.required-field span {
  color: red; }

label {
  color: #152359;
  font-weight: bold; }

label span {
  font-weight: normal; }

div.PopupPromptGroup {
  position: fixed;
  top: 5%;
  max-height: 90%;
  width: 790px;
  overflow: auto;
  background-color: #f8f9fb;
  border-width: 2px;
  border-style: solid;
  border-color: Gray;
  left: 565px;
  z-index: 3000; }

.nobox {
  margin-bottom: 10px; }

.Header2PopupGroupTitle {
  color: #152359;
  font: 110% Verdana, Arial, Sans-Serif;
  font-weight: bold;
  display: inline;
  padding-bottom: 5px; }

p,
li:not(a.tooltip li) {
  color: #6d6f71; }

.FeedbackError {
  background: #EEEEEE url(/SRP2/Content/stylesheets/Content/images/message_error.png) no-repeat 2% 50%;
  padding: 20px 10px 20px 50px; }

.Header1ReportPageTitle {
  margin-left: 10%; }

.JbsPromptErrorList {
  list-style-type: none;
  padding: 0; }

/*#FirstAdminDt_1361-label {
  font-size: 11px;
}*/
.emptygridtext {
  text-align: center; }

.waitpopup {
  display: none;
  position: fixed;
  z-index: 3003;
  top: 17%;
  left: 50%;
  margin-left: -152px;
  width: 304px;
  height: 155px;
  text-align: center;
  background: url(/SRP2/Content/images/WaitBackground.gif);
  background-color: transparent;
  color: #333;
  border: none; }

.waitpopup img {
  margin: auto;
  margin-top: 30px; }

.waitpopup span {
  color: #216b93;
  font-size: 110%;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  display: block;
  margin: auto;
  padding-top: 10px;
  padding-left: 5px; }

.jqmOverlay {
  /* z-index:100002;*/
  opacity: .8;
  background-color: #222222; }

* iframe.jqm {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: expression(this.parentNode.offsetWidth+'px');
  height: expression(this.parentNode.offsetHeight+'px'); }

* html .jqmWindow {
  position: absolute;
  top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px'); }

/*doc
---
title: Regular Label & Text Input
name: form01
category: Form Elements
---

```html_example
<div class="form-row">
	<h2 class="title__section">Regular Label & Text Input</h2>
	<div class="col2">
		<label for="title" class="required">Title</label>
	</div>
	<div class="col2">
		<input name="title" type="text" id="title" class="input__100">
	</div>
</div>
```

*/
/*doc
---
title: Long Label Example
name: form02
category: Form Elements
---

```html_example
<div class="form-row">
	<div class="col2">
		<label for="fname">First Name <span>(here is some explanatory text that is really, really, really long):</span></label>
	</div>
	<div class="col2">
		<input name="fname" type="text" id="fname" class="input__100">
	</div>
</div>
```

*/
/*doc
---
title: Two Text Fields Side By Side
name: form03
category: Form Elements
---

```html_example
<div class="row__form">
	<div class="col2">
		<div class="col2__label"><label for="date">Submitted as of <span>(mm/dd/yyyy or mm/yyyy):</span></label></div>
		<div class="col2__input"><input name="date" type="text" id="date" class="input__date"></div>
	</div>
	<div class="col2">
		<div class="col2__label"><label for="icrs">ICSR Number <span>(please enter the number only):</span></label></div>
		<div class="col2__input"><input name="icrs" type="text" id="icrs" class="input__sm"></div>
	</div>
</div>
```

*/
/*doc
---
title: Regular Select List
name: form04
category: Form Elements
---

```html_example
<div class="form-row">
	<div class="col2">
		<label for="fname">State</label>
	</div>
	<div class="col2">
		<select name="state" id="state" class="select__95">
			<option value="">Please select</option>
			<option value="items">Items</option>
		</select>
	</div>
</div>
```

*/
/*doc
---
title: Text Input & Select List Side By Side
name: form05
category: Form Elements
---

```html_example
<div class="form-row">
	<div class="col2">
		<label for="blah">2 prompts on same line, one single label</label>
	</div>
	<div class="col2">
		<div class="col2">
			<input name="fname" type="text" id="blah" class="input__100">
		</div>
		<div class="col2">
			<select name="state" id="blah2" class="select__95">
				<option value="">Please select</option>
				<option value="items">Items</option>
			</select>
		</div>
	</div>
</div>
```

*/
/*doc
---
title: Date Field
name: form06
category: Form Elements
---

```html_example
<div class="form-row">
	<div class="col2">
		<label for="datetime" class="required">Date</label>
	</div>
	<div class="col2">
		<input name="datetime" type="text" id="datetime" class="datetime"><span class="icon__calendar"></span>
	</div>
</div>
```

*/
/*doc
---
title: Tooltip
name: form07
category: Form Elements
---

[See this link for working version](http://www2.jbsinternational.com/dc/demo/srp2/report.html)

```html_example
<div class="form-row">
	<div class="col2">
		<label for="org">Organization Type: <a href="#" class="tooltip"><img src="images/icon_info.gif" alt=""><span>Here is some title text. <i>Here is a link. I am a link.</i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ipsum, sed repellat unde eaque maiores? Aut tenetur eligendi quia accusamus quos velit commodi nemo enim vel doloremque, illum laudantium libero.</span></a></label>
	</div>
	<div class="col2">
		<input name="org" type="text" id="org" class="input__100">
	</div>
</div>
```

*/
/*doc
---
title: Full-width Textarea
name: form08
category: Form Elements
---

```html_example
<div class="form-row">
	<div class="col1">
		<label for="blah" class="required">If known, what corrective actions has the responsible party taken to prevent future occurrences of this reportable food?</label>
	</div>
	<div class="col1">
		<textarea name="blahblah" rows="2" cols="20" id="blah" class="textarea__100" title="If known, what corrective actions has the responsible party taken to prevent future occurrences of this reportable food?" spellcheck="true"></textarea><span class="icon__spellcheck"><a href="#"><img src="images/icon_spellcheck.png" alt="Spellcheck"></a></span><span class="icon__info"><a href="#" class="tooltip"><img src="images/icon_info.gif" alt=""><span>Here is some title text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. <i>Here is a link. I am a link.</i> Enim ipsum, sed repellat unde eaque maiores? Aut tenetur eligendi quia accusamus quos velit commodi nemo enim vel doloremque, illum laudantium libero.</span></a></span>
	</div>
</div>
```

*/
/*doc
---
title: Regular Radio Buttons
name: form09
category: Form Elements
---

```html_example
<div class="form-row">
	<div class="col20">
		<label for="fname" class="required">Rational Questionnaire</label>
	</div>
	<div class="col80">
		<div class="col1">
			<input id="blah1" type="radio" name="blahgroup" value="7">
			<label for="blah1" class="label__radio"><strong>Item 1 Reportable Food Registry Report(mandatory):</strong> A <strong>food facility</strong> or <strong>responsible party</strong> that manufactures, processes, packs, or holds foods who is submitting a <strong>reportable food</strong> report.</label>
		</div>
		<div class="col1">
			<input id="blah2" type="radio" name="blahgroup" value="7">
			<label for="blah2" class="label__radio"><strong>Item 2 Reportable Food Registry Report(mandatory):</strong> A <strong>food facility</strong> or <strong>responsible party</strong> that manufactures, processes, packs, or holds foods who is submitting a <strong>reportable food</strong> report.</label>
		</div>
		<div class="col1">
			<input id="blah3" type="radio" name="blahgroup" value="7">
			<label for="blah3" class="label__radio"><strong>Item 3 Reportable Food Registry Report(mandatory):</strong> A <strong>food facility</strong> or <strong>responsible party</strong> that manufactures, processes, packs, or holds foods who is submitting a <strong>reportable food</strong> report.</label>
		</div>
	</div>
</div>
```

*/
/*doc
---
title: Horizontal Radio Example 1
name: form10
category: Form Elements
---

```html_example
<div class="form-row">
	<div class="col2">
		<label for="fname" class="required">Horizontal Radio Example 1</label>
	</div>
	<div class="col2">
		<div class="col1">
			<input id="blah1" type="radio" name="blahgroup" value="7">
			<label for="blah1" class="label__radio">Yes</label>
		</div>
		<div class="col1">
			<input id="blah2" type="radio" name="blahgroup" value="7">
			<label for="blah2" class="label__radio">No</label>
		</div>
	</div>
</div>
```

*/
/*doc
---
title: Horizontal Radio Example 2
name: form11
category: Form Elements
---

```html_example
<div class="form-row">
	<div class="col2">
		<label for="blahgroup" class="required">Horizontal Radio Example 2</label>
	</div>
	<div class="col2">
		<div class="col33">
			<input id="blah1" type="radio" name="blahgroup" value="7">
			<label for="blah1" class="label__radio">Adverse Event (a symptom, reaction or disease associated with the product</label>
		</div>
		<div class="col33">
			<input id="blah2" type="radio" name="blahgroup" value="7">
			<label for="blah2" class="label__radio">Product Problem (an observed or detected product issue or defect that has the potential to cause harm</label>
		</div>
		<div class="col33">
			<input id="blah3" type="radio" name="blahgroup" value="7">
			<label for="blah3" class="label__radio">Both</label>
		</div>
	</div>
</div>
```

*/
/*doc
---
title: Checkbox Example 1
name: form12
category: Form Elements
---

```html_example
<div class="form-row">
	<div class="col2">
		<label for="fname" class="required">Checkbox Example 1</label>
	</div>
	<div class="col2">
		<div class="col1">
			<input id="blah1" type="checkbox" name="blahgroup" value="7">
			<label for="blah1" class="label__radio">Item 1</label>
		</div>
		<div class="col1">
			<input id="blah2" type="checkbox" name="blahgroup" value="6">
			<label for="blah2" class="label__radio">Item 2</label>
		</div>
	</div>
</div>
```

*/
/*doc
---
title: Checkbox Example 2
name: form13
category: Form Elements
---

```html_example
<div class="form-row">
	<div class="col2">
		<label for="fname" class="required">Checkbox Example 2</label>
	</div>
	<div class="col2">
		<div class="col2">
			<div class="col1">
				<input id="blah1" type="checkbox" name="blahgroup" value="7">
				<label for="blah1" class="label__radio">Item 1</label>
			</div>
			<div class="col1">
				<input id="blah2" type="checkbox" name="blahgroup" value="6">
				<label for="blah2" class="label__radio">Item 2</label>
			</div>
			<div class="col1">
				<input id="blah3" type="checkbox" name="blahgroup" value="7">
				<label for="blah3" class="label__radio">Item 3</label>
			</div>
			<div class="col1">
				<input id="blah4" type="checkbox" name="blahgroup" value="6">
				<label for="blah4" class="label__radio">Item 4</label>
			</div>
		</div>
		<div class="col2">
			<div class="col1">
				<input id="blah5" type="checkbox" name="blahgroup" value="7">
				<label for="blah5" class="label__radio">Item 5</label>
			</div>
			<div class="col1">
				<input id="blah6" type="checkbox" name="blahgroup" value="6">
				<label for="blah6" class="label__radio">Item 6</label>
			</div>
			<div class="col1">
				<input id="blah7" type="checkbox" name="blahgroup" value="7">
				<label for="blah7" class="label__radio">Item 7</label>
			</div>
			<div class="col1">
				<input id="blah8" type="checkbox" name="blahgroup" value="6">
				<label for="blah8" class="label__radio">Item 8</label>
			</div>
		</div>
	</div>
</div>
```
*/
/*doc
---
title: Smaller Fields (For use in Modal/Lightbox)
name: form14
category: Form Elements
---

```html_example
<div class="form-row">
	<h2 class="title__section">Smaller Fields (For use in Modal/Lightbox)</h2>
	<div class="col2">
		<label for="fname">First Name</label>
	</div>
	<div class="col2">
		<input name="fname" type="text" id="fname" class="input__80">
	</div>
</div>

<div class="form-row">
	<div class="col2">
		<label for="fname" class="required">First Name</label>
	</div>
	<div class="col2">
		<select name="state" id="state" class="select__80">
			<option value="">Please select</option>
			<option value="items">Items</option>
		</select>
	</div>
</div>
```

*/
/*doc
---
title: Button Bar with Blue Background
name: form15
category: Form Elements
---

```html_example
<div class="form-row">
	<h2 class="title__section">Button Bar</h2>
	<div class="row form-row__controls">
		<div class="col2">
			<input type="submit" name="" value="Save Draft" id="save" class="btn__search">
			<input type="submit" name="" value="Exit" id="exit" class="btn__search">
			<input type="submit" name="" value="Submit Report" id="submit" class="btn__search">
		</div>
		<div class="col2 align-right">
			<input type="submit" name="" value="< Back" id="back" class="btn__search">
			<input type="submit" name="" value="Next >" id="next" class="btn__search">
		</div>
	</div>
</div>
```

*/
button[disabled=disabled],
button:disabled {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==) repeat;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid grey;
  color: #827F7F; }

.row__form {
  float: left;
  margin: 15px 0;
  width: 100%; }

.col2 {
  float: left;
  width: 50%;
  padding-right: 10px; }

.col2__label {
  float: left;
  width: 50%; }

.col2__label-small {
  float: left;
  width: 25%; }

.col2__input {
  float: left; }

.col2__input-large {
  float: left;
  width: 75%; }

.col20 {
  float: left;
  width: 20%; }

.col80 {
  float: left;
  width: 80%; }

/*for 508 copmliance of groups of controls: radiobuttons, checkboxes*/
.PromptFieldSetStyle {
  position: relative;
  border: none;
  margin-top: 0px;
  padding-top: 0px;
  margin-left: -10px; }

.RadioIndent {
  margin-left: 9% !important; }

.PromptFieldSetStyle legend {
  border: none;
  position: absolute;
  /* Set left for IE */
  left: -1000px;
  /* Set Margin for FF */
  margin-left: -90000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: none;
  padding: 0px; }

.input__100 {
  width: 100%; }

/* mobile */
.input__100_indented {
  width: 100%;
  margin-left: 10px; }

/* mobile */
.input__50_indented {
  width: 50%;
  margin-left: 10px; }

.textarea__100 {
  height: 100px;
  width: 100%;
  font-weight: normal; }

/* mobile */
.textarea__100_indented {
  height: 100px;
  width: 100%;
  margin-left: 10px;
  font-weight: normal; }

.input__medium,
.input__90 {
  width: 90%; }

.input__80,
.select__80 {
  width: 80%; }

.select__95 {
  width: 95%; }

.icon__calendar {
  content: url("/SRP2/Content/stylesheets/images/icon_calendar.gif");
  margin-left: 5px; }

.icon__spellcheck {
  display: inline-block; }

.icon__info {
  display: inline-block;
  margin-left: 5px; }

.infobox {
  position: relative; }

a.tooltip[title]:hover:after {
  background: #e0f1ff;
  border: 1px solid #0050b1;
  content: attr(title);
  padding: 5px;
  color: #0050b1;
  position: absolute;
  left: 0;
  top: 100%;
  width: 400px;
  font-weight: normal;
  z-index: 20px; }

.tooltip {
  color: #000000;
  text-decoration: none;
  position: relative; }

.tooltip span {
  background: #e0f1ff;
  border: 1px solid #0050b1;
  color: #0050b1;
  border-radius: 3px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  padding: 5px;
  position: absolute;
  left: 1em;
  top: 1.5em;
  z-index: 99;
  margin-left: 0;
  width: 400px;
  font-size: 11px; }

.tooltip i {
  color: #216b93;
  font-style: italic; }

.label__radio {
  font-weight: normal; }

.btn__search,
.btn__reset {
  margin-right: 5px; }

.ui-datepicker .ui-datepicker-month,
.ui-datepicker .ui-datepicker-year {
  color: #333333; }

ul.ui-autocomplete.ui-menu {
  z-index: 10000; }

.ui-datepicker table {
  border: none; }

.ui-autocomplete {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden; }

/* The matched characters in the entries in the dropdown list */
ul.ui-autocomplete li.ui-menu-item span.strong {
  font-weight: normal;
  color: RoyalBlue; }

radio:focus {
  outline: black dotted thin; }

a:focus::-moz-focus-inner {
  border: 2px dotted;
  -moz-outline-style: black dotted thin; }

/*doc
---
title: Grids
name: grids01
category: grids
---
```html_example
<div class="section section__grid">

	<h2 class="title__section">Draft Reports</h2>

	<table class="table__grid">
		<caption>Click column header to sort the column</caption>
		<thead>
			<tr>
				<th></th>
				<th><a href="#">Date Saved (EST)</a></th>
				<th><a href="#">Report ID</a></th>
				<th><a href="#">Title</a></th>
				<th><a href="#">Report Type Description</a></th>
			</tr>
		</thead>
		<tr>
			<td><input value="" name="" type="radio"></td>
			<td>08/03/2015 03:10:20 PM</td>
			<td>37340 (I)</td>
			<td>Voluntary Reportable Food Report (V2)</td>
			<td>Voluntary Reportable Food Report (Section 1005 of Public Law 110-85) (V2)</td>
		</tr>
		<tr>
			<td><input value="" name="" type="radio"></td>
			<td>08/03/2015 03:10:20 PM</td>
			<td>37340 (I)</td>
			<td>Voluntary Reportable Food Report (V2)</td>
			<td>Voluntary Reportable Food Report (Section 1005 of Public Law 110-85) (V2)</td>
		</tr>
		<tr>
			<td><input value="" name="" type="radio"></td>
			<td>08/03/2015 03:10:20 PM</td>
			<td>37340 (I)</td>
			<td>Voluntary Reportable Food Report (V2)</td>
			<td>Voluntary Reportable Food Report (Section 1005 of Public Law 110-85) (V2)</td>
		</tr>
	</table>

	<div class="table__controls">
		<div class="table__buttons">
			<button id="PromptSubmitNewReportButton" onclick="submit('event:PromptSubmitNewReportButton,type:button,id:PromptSubmitNewReportButton,rid:53')" type="button" data-title="Start New Report" data-type="button">Start New Report</button>
			<button id="PromptEditDraftReportButton" onclick="submit('event:EditGrid,type:button,id:PromptEditDraftReportButton,rid:53')" class="announcementText btn" type="button" data-title="Edit" data-type="button" disabled="disabled">Edit</button>
			<button id="PromptDeleteDraftReportButton" onclick="submit('event:DeleteGrid,type:button,id:PromptDeleteDraftReportButton,rid:53')" class="announcementText btn" type="button" data-title="Delete" data-type="button" disabled="disabled">Delete</button>
			<button id="PromptViewDraftReportButton" onclick="submit('event:PromptViewDraftReportButton,type:button,id:PromptViewDraftReportButton,rid:53')" class="announcementText btn" style="" type="button" data-title="View" data-type="button" disabled="disabled">View</button>
			<button id="PromptRefreshDraftReportButton" onclick="submit('event:PromptRefreshDraftReportButton,type:button,id:PromptRefreshDraftReportButton,rid:53')" class="announcementText btn" style="" type="button" data-title="Refresh" data-type="button">Refresh</button>
			<button id="PromptViewDraftReportTemplateButton" onclick="submit('event:PromptViewDraftReportTemplateButton,type:button,id:PromptViewDraftReportTemplateButton,rid:53')" class="announcementText btn" style="display: none;" type="button" data-title="View Template" data-type="button">View Template</button>
		</div>
		<div class="pagination">
        	<img src="images/icon_first.png" onclick="loadGrid('PromptDraftReportsGrid,53,F')">
        	<img src="images/icon_back.png" onclick="loadGrid('PromptDraftReportsGrid,53,P')">
        	<span id="pagination__label">Page 1 of 1</span>
			<img src="images/icon_next.png" onclick="loadGrid('PromptDraftReportsGrid,53,N')">
         	<img src="images/icon_last.png" onclick="loadGrid('PromptDraftReportsGrid,53,L')">
       </div>
	</div>

</div>
```

*/
/*doc
---
title: Indented Grids 1
name: grids02
category: grids
---
```html_example
<div class="form-row">
	<div class="indent-sm">
		<table class="table__grid">
			<caption>Click column header to sort the column</caption>
			<thead>
				<tr>
					<th></th>
					<th><a href="#">Date Saved (EST)</a></th>
					<th><a href="#">Report ID</a></th>
					<th><a href="#">Title</a></th>
					<th><a href="#">Report Type Description</a></th>
				</tr>
			</thead>
			<tr>
				<td><input value="" name="" type="radio"></td>
				<td>08/03/2015 03:10:20 PM</td>
				<td>37340 (I)</td>
				<td>Voluntary Reportable Food Report (V2)</td>
				<td>Voluntary Reportable Food Report (Section 1005 of Public Law 110-85) (V2)</td>
			</tr>
			<tr>
				<td><input value="" name="" type="radio"></td>
				<td>08/03/2015 03:10:20 PM</td>
				<td>37340 (I)</td>
				<td>Voluntary Reportable Food Report (V2)</td>
				<td>Voluntary Reportable Food Report (Section 1005 of Public Law 110-85) (V2)</td>
			</tr>
			<tr>
				<td><input value="" name="" type="radio"></td>
				<td>08/03/2015 03:10:20 PM</td>
				<td>37340 (I)</td>
				<td>Voluntary Reportable Food Report (V2)</td>
				<td>Voluntary Reportable Food Report (Section 1005 of Public Law 110-85) (V2)</td>
			</tr>
		</table>

		<div class="table__controls">
			<div class="table__buttons">
				<button id="PromptSubmitNewReportButton" onclick="submit('event:PromptSubmitNewReportButton,type:button,id:PromptSubmitNewReportButton,rid:53')" type="button" data-title="Start New Report" data-type="button">Start New Report</button>
				<button id="PromptEditDraftReportButton" onclick="submit('event:EditGrid,type:button,id:PromptEditDraftReportButton,rid:53')" class="announcementText btn" type="button" data-title="Edit" data-type="button" disabled="disabled">Edit</button>
				<button id="PromptDeleteDraftReportButton" onclick="submit('event:DeleteGrid,type:button,id:PromptDeleteDraftReportButton,rid:53')" class="announcementText btn" type="button" data-title="Delete" data-type="button" disabled="disabled">Delete</button>
				<button id="PromptViewDraftReportButton" onclick="submit('event:PromptViewDraftReportButton,type:button,id:PromptViewDraftReportButton,rid:53')" class="announcementText btn" style="" type="button" data-title="View" data-type="button" disabled="disabled">View</button>
				<button id="PromptRefreshDraftReportButton" onclick="submit('event:PromptRefreshDraftReportButton,type:button,id:PromptRefreshDraftReportButton,rid:53')" class="announcementText btn" style="" type="button" data-title="Refresh" data-type="button">Refresh</button>
				<button id="PromptViewDraftReportTemplateButton" onclick="submit('event:PromptViewDraftReportTemplateButton,type:button,id:PromptViewDraftReportTemplateButton,rid:53')" class="announcementText btn" style="display: none;" type="button" data-title="View Template" data-type="button">View Template</button>
			</div>
			<div class="pagination">
            	<img src="images/icon_first.png" onclick="loadGrid('PromptDraftReportsGrid,53,F')">
            	<img src="images/icon_back.png" onclick="loadGrid('PromptDraftReportsGrid,53,P')">
            	<span id="pagination__label">Page 1 of 1</span>
				<img src="images/icon_next.png" onclick="loadGrid('PromptDraftReportsGrid,53,N')">
             	<img src="images/icon_last.png" onclick="loadGrid('PromptDraftReportsGrid,53,L')">
           </div>
		</div>
	</div>
</div>
```

*/
/*doc
---
title: Indented Grids 2
name: grids03
category: grids
---
```html_example
<div class="form-row">
	<div class="indent-lg">
		<table class="table__grid">
			<caption>Click column header to sort the column</caption>
			<thead>
				<tr>
					<th></th>
					<th><a href="#">Date Saved (EST)</a></th>
					<th><a href="#">Report ID</a></th>
					<th><a href="#">Title</a></th>
					<th><a href="#">Report Type Description</a></th>
				</tr>
			</thead>
			<tr>
				<td><input value="" name="" type="radio"></td>
				<td>08/03/2015 03:10:20 PM</td>
				<td>37340 (I)</td>
				<td>Voluntary Reportable Food Report (V2)</td>
				<td>Voluntary Reportable Food Report (Section 1005 of Public Law 110-85) (V2)</td>
			</tr>
			<tr>
				<td><input value="" name="" type="radio"></td>
				<td>08/03/2015 03:10:20 PM</td>
				<td>37340 (I)</td>
				<td>Voluntary Reportable Food Report (V2)</td>
				<td>Voluntary Reportable Food Report (Section 1005 of Public Law 110-85) (V2)</td>
			</tr>
			<tr>
				<td><input value="" name="" type="radio"></td>
				<td>08/03/2015 03:10:20 PM</td>
				<td>37340 (I)</td>
				<td>Voluntary Reportable Food Report (V2)</td>
				<td>Voluntary Reportable Food Report (Section 1005 of Public Law 110-85) (V2)</td>
			</tr>
		</table>

		<div class="table__controls">
			<div class="table__buttons">
				<button id="PromptSubmitNewReportButton" onclick="submit('event:PromptSubmitNewReportButton,type:button,id:PromptSubmitNewReportButton,rid:53')" type="button" data-title="Start New Report" data-type="button">Start New Report</button>
				<button id="PromptEditDraftReportButton" onclick="submit('event:EditGrid,type:button,id:PromptEditDraftReportButton,rid:53')" class="announcementText btn" type="button" data-title="Edit" data-type="button" disabled="disabled">Edit</button>
				<button id="PromptDeleteDraftReportButton" onclick="submit('event:DeleteGrid,type:button,id:PromptDeleteDraftReportButton,rid:53')" class="announcementText btn" type="button" data-title="Delete" data-type="button" disabled="disabled">Delete</button>
				<button id="PromptViewDraftReportButton" onclick="submit('event:PromptViewDraftReportButton,type:button,id:PromptViewDraftReportButton,rid:53')" class="announcementText btn" style="" type="button" data-title="View" data-type="button" disabled="disabled">View</button>
				<button id="PromptRefreshDraftReportButton" onclick="submit('event:PromptRefreshDraftReportButton,type:button,id:PromptRefreshDraftReportButton,rid:53')" class="announcementText btn" style="" type="button" data-title="Refresh" data-type="button">Refresh</button>
				<button id="PromptViewDraftReportTemplateButton" onclick="submit('event:PromptViewDraftReportTemplateButton,type:button,id:PromptViewDraftReportTemplateButton,rid:53')" class="announcementText btn" style="display: none;" type="button" data-title="View Template" data-type="button">View Template</button>
			</div>
			<div class="pagination">
            	<img src="images/icon_first.png" onclick="loadGrid('PromptDraftReportsGrid,53,F')">
            	<img src="images/icon_back.png" onclick="loadGrid('PromptDraftReportsGrid,53,P')">
            	<span id="pagination__label">Page 1 of 1</span>
				<img src="images/icon_next.png" onclick="loadGrid('PromptDraftReportsGrid,53,N')">
             	<img src="images/icon_last.png" onclick="loadGrid('PromptDraftReportsGrid,53,L')">
           </div>
		</div>
	</div>
</div>
```
*/
table {
  border: none;
  border-collapse: separate;
  display: table;
  width: 100%; }

table[class="table__grid"] {
  border: 1px solid grey;
  border-bottom: none;
  border-collapse: separate;
  display: table;
  width: 100%; }

table input[type="radio"] {
  margin-left: 5px; }

th {
  background: #E1DEC9;
  color: #152359;
  font-weight: bold;
  text-align: left; }

th, td {
  padding: 5px; }

th a {
  color: #152359;
  text-decoration: none; }

caption {
  color: #152359;
  font-size: 1em;
  font-weight: bold;
  text-align: right;
  margin-bottom: 5px; }

.table__grid td {
  border-top: 1px solid grey; }

.table__grid th:nth-child(1) {
  width: 25px; }

/*.table__grid th:nth-child(2) {
	width: 155px;
}

.table__grid th:nth-child(3) {
	width: 90px;
}

.table__grid th:nth-child(4) {
	width: 200px;
}*/
tfoot {
  background: #E1DEC9; }

tfoot span {
  color: #216b93; }

.table__controls {
  background: #E1DEC9;
  border: 1px solid grey;
  overflow: auto;
  padding: 5px; }

.table__buttons {
  float: left;
  width: 60%; }

.pagination {
  color: #216b93;
  float: right;
  text-align: right; }

.pagination img {
  cursor: pointer; }

/*
 div[data-type='promptgroup'] div[data-type='comment-label']:not(.block__comment) {
     margin-left:80px;
 }*/
div#faq table {
  border: 1px solid grey;
  border-collapse: separate;
  display: table;
  width: 100%; }

.HeaderRow {
  background-color: #728e82;
  color: #FFFFFF; }

.HeaderCell {
  background-color: #e1dec9;
  color: #152359;
  text-align: left;
  padding: 5px 5px 5px 5px;
  font-weight: bold;
  position: relative; }

/* this class is used for a column header that has been clicked */
.SortHeaderCell {
  background-color: #9c3627;
  color: #EEEEEE;
  text-align: left;
  padding: 5px 5px 5px 5px;
  font-weight: bold;
  position: relative; }

/* these two classes are for the text of a column header that has been clicked for sorting */
th.SortHeaderCell a:link {
  color: white; }

th.SortHeaderCell a:visited {
  color: white; }

/* these two classes are for the ascending and descending arrow images used in a column that is being sorted */
.SortAscImage {
  float: right; }

.SortDescImage {
  float: right; }

.ColumnLabelHolder {
  float: left;
  line-height: 16px; }

/*doc
---
title: Sidenav
name: sidenav01
category: Sidenav
---

This example shows all of the states necessary for the report subnav, including active and inactive, as well as report statuses like complete, partial, and incomplete.

```html_example
<section class="page page__sidenav">
	<div class="sidenav">
		<nav class="sidenav-report">
			<ul>
				<li><a href="#" class="active"><span class="sidenav-report-icon"><img src="images/icon_complete.png" alt="Complete"></span><span class="sidenav-report-item">Introduction</span></a></li>
				<li><a href="#"><span class="sidenav-report-icon"><img src="images/icon_partial.png" alt="Partial"></span><span class="sidenav-report-item">Contact Information</span></a></li>
				<li><a href="#"><span class="sidenav-report-icon"><img src="images/icon_incomplete.png" alt="Incomplete"></span><span class="sidenav-report-item">Problem Summary</span></a></li>
				<li><a href="#"><span class="sidenav-report-icon"><img src="images/icon_incomplete.png" alt="Incomplete"></span><span class="sidenav-report-item">Products</span></a></li>
				<li><a href="#"><span class="sidenav-report-icon"><img src="images/icon_incomplete.png" alt="Incomplete"></span><span class="sidenav-report-item">Veterinarian Visits</span></a></li>
				<li><a href="#"><span class="sidenav-report-icon"><img src="images/icon_incomplete.png" alt="Incomplete"></span><span class="sidenav-report-item">Attachments</span></a></li>
				<li><a href="#"><span class="sidenav-report-icon"><img src="images/icon_incomplete.png" alt="Incomplete"></span><span class="sidenav-report-item">Report Submission Confirmation</span></a></li>
			</ul>
		</nav>
	</div>
</section>
```
*/
/*doc
---
title: Report Info Table
name: sidenav02
category: Sidenav
---

```html_example
<section class="page page__sidenav">
	<div class="sidenav">
		<table class="report__info" valign="top">
			<tr>
				<th>Name:</th>
				<td>Voluntary Reportable Food Report (Section 1005 of Public Law 110-85) (V2)</td>
			</tr>
			<tr>
				<th>ID:</th>
				<td>FPSR33 (I)</td>
			</tr>
			<tr>
				<th>Created:</th>
				<td>08/13/2015</td>
			</tr>
		</table>
	</div>
</section>
```
*/
/*doc
---
title: Report Info Table 2
name: sidenav03
category: Sidenav
---

```html_example
<section class="page page__sidenav">
	<div class="sidenav">
		<p><a href="#">My Report History</a></p>
		<table class="report__info">
			<tbody>
				<tr>
					<th>OMB Approval Number:</th>
					<td>0910-0645</td>
				</tr>
				<tr>
					<th>OMB Expiration Date:</th>
					<td>09/30/2012</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="2"><a href="#">OMB Burden Statement</a></td>
				</tr>
			</tfoot>
		</table>
	</div>
</section>
```
*/
.sidenav,
.sidenav-report {
  float: left;
  width: 200px;
  background: #E1DEC9 !important;
}

.sidenav ul,
.sidenav-report ul {
  margin: 0;
  padding: 0; }

.sidenav li,
.sidenav-report li {
  margin: 0; }

.sidenav a,
.sidenav-report a {
  display: block;
  font-size: 1.1em;
  padding: 5px;
  min-height: 18px;
  border-bottom: 2px solid white;
  overflow: auto; }

.sidenav a {
  font-weight: bold;
  padding: 10px; }

.sidenav a.active {
  background-color: #9C3627;
  color: white; }

.sidenav p {
  border-bottom: 2px solid white;
  float: left;
  margin: 0;
  width: 100%; }

.active {
  background-color: #9C3627;
  color: white; }

.sidenav-report ul {
  border-top: 2px solid white; }

.sidenav li a,
.sidenav-report li a {
  color: #152359; }

.sidenav li a.active,
.sidenav-report li a.active,
.active a {
  color: white; }

.sidenav p a {
  border-bottom: none;
  color: #152359; }

.sidenav-report-icon {
  float: left;
  text-align: center;
  width: 5%; }

.sidenav-report-item {
  float: right;
  width: 90%; }

.report__info {
  border: none;
  padding: 5px; }

.report__info td,
.report__info th {
  vertical-align: top;
  overflow-wrap: break-word;
  max-width: 100px; }

.report__info a {
  border-bottom: none;
  font-size: 1em;
  font-weight: normal;
  padding: 0; }

.tabs {
  background: #F6F6F6;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ddd;
  margin-bottom: 0; }

.tab-heading {
  cursor: pointer;
  font-size: 1.1em;
  margin: 0; }

.tab-panel {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  margin-bottom: 50px;
  overflow: auto;
  padding: 20px; }

.tabs.enabled .tab-heading:focus,
.tabs.enabled .tab-list li:focus {
  outline: 1px solid #ccc; }

.tabs.enabled .active-tab-heading:focus {
  outline: none !important; }

.tabs.enabled .tab-heading {
  padding: 10px;
  position: relative; }

.tabs.enabled .tab-heading:before {
  color: #ACACAC;
  content: "\f055";
  font-family: FontAwesome;
  font-size: 1.8em;
  position: relative;
  top: 3px;
  margin-right: 5px; }

.tabs.enabled .tab-heading.active-tab-heading:before {
  content: "\f056"; }

.home-panel {
  /*background-image: url('images/front-backpanel.jpg');*/
  background-repeat: no-repeat;
  margin: 0 1em;
  padding: 10px 16px 80px 0; }

.home-panel-top {
  background-image: url("/SRP2/Content/images/front-top.png");
  background-repeat: no-repeat;
  height: 13px;
  width: 100%; }

.home-panel-content {
  background-image: url("/SRP2/Content/images/front-back.png");
  background-repeat: repeat-y;
  width: 100%;
  overflow: auto; }

.home-panel-bottom {
  background-image: url("/SRP2/Content/images/front-bottom-hhs.png");
  background-repeat: no-repeat;
  height: 106px;
  width: 100%;
  margin-top: -65px; }

.home-panel-left {
  margin-bottom: 0;
  padding: 0 50px 0 20px;
  line-height: normal; }

.home-panel-right {
  margin-bottom: 0;
  padding: 0 50px 0 20px;
  line-height: normal; }

.home-panel-left h1, .home-panel-right h1 {
  padding: 0; }

#g00home_home {
  padding: 0 20px; }

#g0140_home {
  min-width: 140px;
  margin: -5px 0 0 -5px; }

a#PromptForgotPasswordButton {
  bottom: 0;
  left: 0; }

#PromptGuestActionFilter-label strong {
  padding-left: 20px; }

section.col2.columns.home-panel-right p:last-child {
  margin-left: 50px; }

.navigation_es {
  background: #A8D1EF;
  height: 24px;
  float: left;
  width: 100%; }

.navigation__welcome_es {
  float: left;
  font-size: 11px;
  font-style: italic;
  margin-left: 10px;
  margin-top: 5px;
  text-align: left; }

.navigation_es a:link,
.navigation_es a:visited {
  padding-right: 10px;
  color: #152359;
  text-decoration: none;
  font-weight: bold;
  background-color: #A8D1EF; }

.navigation_es a:active,
.navigation_es a:hover {
  text-decoration: underline; }

.navigation_es li {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  font-weight: bold;
  color: #152359;
  background-color: #A8D1EF;
  display: block; }

.navigation_es ul {
  margin: 0;
  margin-right: 1px;
  padding: 0;
  list-style: none;
  font-weight: bold;
  color: #152359;
  background-color: #A8D1EF; }

/* spanish PromptListItem - Title bar (About the portal, FAQ, Related links...*/
.PromptListItem_es {
  font-size: 9px;
  letter-spacing: 0px;
  text-decoration: none; }

/* spanish PromptListItem - Title bar (About the portal, FAQ, Related links...*/
.PromptCommentText_es {
  font-size: 9px;
  letter-spacing: 0px;
  text-decoration: none; }

/* width of separator bar between login and guest for login plugin*/
.small-1-es {
  width: 3.0%; }

/* width of separator bar between guest and create account for login plugin*/
.small-1-1-es {
  width: 4.33333%; }

/* Report as guest column width in spanish version */
.small-3-es {
  width: 32%;
  margin-left: 10px; }

.col1_es {
  float: left;
  margin-bottom: 5px;
  width: 100%; }

#SubmitButtonsPromptGroup {
     display: flex;
}

#SubmitButtonsPromptGroup button {
     margin-right: 5px
}

@media (min-width:992px) {
    .d-lg-none {
        display: none !important;
    }
}

/*.dropdown-option.dropdown-chose:after {
  content: '';
  float: right !important;
  width: 10px;
  height: 10px;
  background: none !important;
  border-radius: 100%;  
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' fill='%2343A608'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");                
  background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' fill='%2343A608'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    margin: 0 0 0 0; !important;
    text-indent: 15px;
}*/

/* Welcome to Compass. Use this file to define print styles.
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */

.asmContainer {
	/* container that surrounds entire asmSelect widget */
}

.asmSelect {
	/* the newly created regular 'select' */
	display: inline; 
}

.asmOptionDisabled {
	/* disabled options in new select */
	color: #999; 
}

.asmHighlight {
	/* the highlight span */
	padding: 0;
	margin: 0 0 0 1em;
}

.asmList {
	/* html list that contains selected items */
	margin: 0.25em 0 1em 0; 
	position: relative;
	display: block;
	padding-left: 0; 
	list-style: none; 
}

.asmListItem {
	/* li item from the html list above */
	position: relative; 
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	background: #ddd;
	border: 1px solid #bbb; 
	width: 100%; 
	margin: 0 0 -1px 0; 
	line-height: 1em;
}

.asmListItem:hover {
	background-color: #e5e5e5;
}

.asmListItemLabel {
	/* this is a span that surrounds the text in the item, except for the remove link */
	padding: 5px; 
	display: block;
}

.asmListSortable .asmListItemLabel {
	cursor: move; 
}

.asmListItemRemove {
	/* the remove link in each list item */
	position: absolute;
	right: 0; 
	top: 0;
	padding: 5px; 
}

/* jquery ui datepicker month year picker */
.ui-datepicker .ui-datepicker-select-month td ,
.ui-datepicker .ui-datepicker-select-year td {
	line-height: 3.4em;
}
.ui-datepicker .ui-datepicker-select-month td span,
.ui-datepicker .ui-datepicker-select-month td a,
.ui-datepicker .ui-datepicker-select-year td span,
.ui-datepicker .ui-datepicker-select-year td a  {
	font-size: 1.5em;
	text-align: center;
}
.ui-datepicker .ui-datepicker-select-year td.outoffocus {
	opacity: 0.5;
}



/**
 * Container
 */
.ac_container {
  border: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: text-bottom;
  position: relative;
}

.ac_input {
  background-color: white;
  /*border-radius: 4px 0 0 4px;*/
  border-right: none;
  border: 1px solid #79b;
  box-shadow:         1px 1px 1px rgba(0,0,0,0.2) inset;
  -moz-box-shadow:    1px 1px 1px rgba(0,0,0,0.2) inset;
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2) inset;
  vertical-align: text-bottom;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  padding: 4px;
  width: 320px;
  height: 32px;
  box-sizing: border-box;
}

.ac_container_open .ac_input {
  /*border-radius: 4px 4px 0 0 !important;*/
}

/**
 * "Get all" button
 */
.ac_button {
  display: inline-block;
  vertical-align: text-bottom;
  border: 1px solid #79b;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  border-left: 0;
  cursor: pointer;
  position: relative;
  text-align: center;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
}

.ac_container_open > .ac_button {
  border-bottom-right-radius: 0 !important;
}

.ac_button > img {
  top: 6px;
  left: 8px;
  height: 16px;
  position: absolute;
  width: 16px;
}

.ac_btn_out {
  background: #bde;
  background-image: linear-gradient(to bottom, #eeffff, #99aabb);
}

.ac_btn_on {
  background: #dee;
  background-image: linear-gradient(to bottom, #ffffff, #bbbbcc);
}

/**
 * Results
 */
.ac_result_area {
  /*background-color: transparent;*/
  background-color: #eee;
  border-top: 0;
  border: 1px solid #79b;
  box-shadow:         2px 2px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:    2px 2px 2px rgba(0,0,0,0.4);
  -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: static;
  z-index: 10000;
}

.ac_results {
  background-color: white;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ac_results > li {
  color: #000;
  font-size: 13px;
  height: auto !important;
  line-height: 1;
  margin: 0;
  overflow: hidden;
  padding: 3px 5px;
  position: relative;
  text-align: left;
  /*white-space: nowrap;*/
  border-bottom-style: inset;
}

.ac_results > li:last-child {
      border-bottom-style: none;
}

.ac_selected {
  /*background-color: #def;*/
  /*font-weight: bold;*/
}

.ac_over {
  /*background-color: #36c;*/
  background-color: #fdf5ce;
  font-weight: bold;
  color: #c77405 !important;
  /*color: #fff !important;*/
  cursor: pointer;
}

.ac_disabled {
    opacity: .35;
	filter:Alpha(Opacity=35); /* support: IE8 */
	background-image: none;
    pointer-events: none;
}

.ac_divider {
    margin: 5px 0;
	/*height: 0;*/
	font-size: 0;
	line-height: 0;
	border-width: 1px 0 0 0;
}

.ac_results > li.ac_divider {
    height: 0 !important;
    cursor: default !important;
}

/**
 * 選択していないほうの表示を暗くする
 */
.ac_results_off {
  background: rgba(255, 255, 255, 0.8);
}

.ac_input_off {
  background: #eee;
  color: #555;
}

.ac_hide {
  display: none;
}

/**
 * Navi
 */
.ac_navi {
  background: #eee;
  border-bottom: 1px solid #79b;
  font-size: 13px;
  font-weight: normal;
  line-height: 1;
  margin: 0;
  padding: 4px;
  text-align: right;
}

.ac_navi > p > a:link,
.ac_navi > p > a:visited,
.ac_navi > p > a:hover,
.ac_navi > p > a:active {
  color: blue;
  font-weight: normal;
  margin: 0 4px;
  text-decoration: underline;
}

.ac_navi > p {
  color: black;
  font-size: 13px;
  margin: 0;
  padding-top: 4px;
  text-align: center;
}

.ac_navi > p > a >.current {
  color: #00c;
  font-size: 14px;
  font-weight: bold;
}

.ac_navi > p >.page_end {
  color: gray;
  font-weight: normal;
  margin: 0 4px;
}

.navi_page,
.navi_first,
.navi_prev,
.navi_next,
.navi_last {
  margin: auto 4px !important;
}

.ac_navi > .info {
  margin: 0 !important;
  padding: 0 !important;
}

/**
 * Sub-info
 */
.ac_subinfo {
  margin: 0 !important;
  padding: 0 !important;
}

.ac_subinfo > dl {
  background: #eee;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  border: 1px solid #aaa;
  box-shadow:         2px 2px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:    2px 2px 2px rgba(0,0,0,0.4);
  -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
  color: #000;
  display: none;
  margin: 0;
  position: absolute;
  width: 260px;
  z-index: 200;
}

.ac_subinfo > dl > dt {
  background: #CEDFF7;
  clear: both;
  color: #37486A;
  float: left;
  font-size: 13px;
  font-weight: normal;
  margin: 0;
  padding: 2px 4px;
  text-align: left;
  width: 92px;
  word-wrap: break-word;
}

.ac_subinfo > dl > dt.hide {
  display: none !important;
}

.ac_subinfo > dl > dd {
  float: left;
  font-size: 13px;
  margin: 0;
  padding: 2px 4px;
  width: 152px;
  word-wrap: break-word;
}

/**
 * Select only
 */
.ac_container > .ac_select_ng {
  background: #fcc;
}

/**
 * Simple
 */
.ac_s_input {
  background-color: white;
  /*border-radius: 4px;*/
  border: 1px solid #79b;
  box-shadow:         1px 1px 1px rgba(0,0,0,0.2) inset;
  -moz-box-shadow:    1px 1px 1px rgba(0,0,0,0.2) inset;
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2) inset;
  display: block !important;
  float: left;
  font-size: 12px;
  margin: 0;
  padding: 1px 0 1px 0;
  width: 360px;
  /*width: 100%*/
  margin-right: 5px;
}

/**
 * Mobile Simple
 */
.ac_m_input {
  background-color: white;
  /*border-radius: 4px;*/
  border: 1px solid #79b;
  box-shadow:         1px 1px 1px rgba(0,0,0,0.2) inset;
  -moz-box-shadow:    1px 1px 1px rgba(0,0,0,0.2) inset;
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2) inset;
  display: block !important;
  float: left;
  font-size: 12px;
  margin: 0;
  padding: 1px 0 1px 0;
  /*width: 360px;*/
  width: 100%;
  margin-right: 5px;
}

.ac_container_open > .ac_s_input {
  /*border-radius: 4px 4px 0 0 !important;*/
}

/**
 * Text Area
 */
.ac_textarea {
  background-color: white;
  /*border-radius: 4px;*/
  border: 1px solid #79b;
  box-shadow:         1px 1px 1px rgba(0,0,0,0.2) inset;
  -moz-box-shadow:    1px 1px 1px rgba(0,0,0,0.2) inset;
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2) inset;
  font-size: 16px;
  margin: 0;
  padding: 4px;
}


li.ac_selected span.strong {
  font-weight: normal;
  color: RoyalBlue; }



#interactive.viewport {
  width: 640px;
  height: 480px;
}


#interactive.viewport canvas, video {
  float: left;
  width: 640px;
  height: 480px;
}

#interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
  margin-left: -640px;
}

.browseButton{
    box-sizing: border-box;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 6px;
    border-width: 2px;
    border-style: outset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
}

#ProductCd_791 > ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  width: auto;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

#ProductCd_791-msg-div  > li {
  display: inline-block;
  vertical-align: middle;
  width: 160px;
}

#ProductCd_791-msg-div  > li .thumbnail {
  padding: 5px;
  margin: 4px;
  border: 1px dashed #CCC;
}

#ProductCd_791-msg-div > li .thumbnail img {
  max-width: 140px;
}

#ProductCd_791-msg-div > li .thumbnail .caption {
  white-space: normal;
}

#ProductCd_791-msg-div > li .thumbnail .caption h4 {
  text-align: center;
  word-wrap: break-word;
  margin: 0px;
}

#ProductCd_791-msg-div > li:after {
  content: "";
  display: table;
  clear: both;
}


.scanner-overlay {
  display: none;
  width: 640px;
  height: 510px;
  position: absolute;
  padding: 20px;
  top: 50%;
  margin-top: -275px;
  left: 50%;
  margin-left: -340px;
  background-color: #FFF;
  -moz-box-shadow: #333333 0px 4px 10px;
  -webkit-box-shadow: #333333 0px 4px 10px;
  box-shadow: #333333 0px 4px 10px;
}

.scanner-overlay > .header {
  position: relative;
  margin-bottom: 14px;
}

.scanner-overlay > .header h4, .scanner-overlay > .header .close {
  line-height: 16px;
}

.scanner-overlay > .header h4 {
  margin: 0px;
  padding: 0px;
}

.scanner-overlay > .header .close {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 16px;
  width: 16px;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}


i.icon-24-scan {
  width: 24px;
  height: 24px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzFFMjMzNTBFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzFFMjMzNTFFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMUUyMzM0RUU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDMUUyMzM0RkU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtQr90wAAAUuSURBVHjanFVLbFRVGP7ua97T9DGPthbamAYYBNSMVbBpjCliWWGIEBMWsnDJxkh8RDeEDW5MDGticMmGBWnSlRSCwgLFNkqmmrRIqzjTznTazkxn5s7c6/efzm0G0Jhwkj/nP+d/nv91tIWFBTQaDQWapkGW67p4ltUub5qmAi0UCqF/a/U2m81tpmddotwwDGSz2dzi4uKSaOucnJycGhsbe1XXdQiIIcdxEAgEtgXq9brySHCht79UXi/8QheawN27d385fPjwuEl6XyKR6LdtW7t06RLK5TKOHj2K/fv3Q87Dw8OYn5/HiRMnMDs7i5mZGQwODiqlPp8PuVwO6XRaOXb16lXl1OnTp5FMJvtosF8M+MWLarWqGJaWlpBKpRRcu3YN4+PjmJ6exsTEhDJw5coVjI6OKgPhcBiZTAbxeBx+vx+XL19Gd3c3Tp48Ka9zqDYgBlTQxYNgMIhIJKLCILkQb+TZsgvdsiyFi+feWRR7oRNZyanQtvW2V4DEUUBiK2eJpeDirSyhCe7F2QPh8fiEp72i9PbsC5G52DbiKZA771yr1dTuGfJ4PQNPFoAyQNR1aNEmsS5eyB3PgjeooMZd2AWvNmzYci/Gea7TeFOcI93jV/K67noGmi4vdRI9gPSDeMLSdKUBZZczlWm1rTtHjLZ24d+WER2tc8N1m+Y+ID74wx0zGYvhg9UNrJdtHJyZRdQfwPsrq9g99xsGlgsYmr6BNzO/IVwsYfjBQ6XYz6JI/72MV366B5/lw0elOkJWGUM3bmKtWjXSLuLaBWhnPnnp0FfoiFi4+TMfVAb2poBkDLjO845uYLEAjL4ALGWBP5YAOsP4AJYBFDaB1HOSVWD2PuV95H2RdV93Lv74/cf6p6Zxq/h6OofeOPJBC39JtONdwOAAViOs4p4OFGTf0Uc8iiyrr9YdQrUnDLsngrVOC0jQib44HlF2RafRZBz1Qy+vfhgK3NJZBlrm+LEm9qWwzFgLU7Ozg0JxZP06jQSRpQ7EerAWDSt6PuhHPmChEAog56fCLvJT5hHTm3OZkz3DyLx7XNWTGEA1GkV14gjWgwbW0ESVjYRwCOuai03L5E7OUBAV4kXSS4auoGIaKOma4m8EA5R1sMEGLh95C+XuLph0WJWpxepYYLtfT0RRgY1KgNODY6BoaChRuEhDCIZQYseuki5KN6hcQHiq7OZNv4/Zq2O6P4Lfkwn46vZjjaYZrIpvWbpzjLErrc4xUGE4avRedpYJalRcIl5hQius/SrPm9xrNOQYJhao6BvNUeWqtY8KaWuNjHOFAr7mM9f4NA4UbKysoUJ8PV9UzVOx6wxDDWUOxnK1pmCD07fOMAvtIsM3l89Dl3HRGhVma9AZMqjOnz2LQqWCxs6dqr3T7x1DTzKJaG8SekcHhg4cgI/56uKdlKnBV/WndqN3YAB/7tyBd3oT6GBIOzs7kc/nDfFdDFT5bS73cp06dQoaPa/Rw/rtO/resTHxxE2m9rCrbSR27UJCcMf1BpiA5rAAGgdfc868fUR1sMwj0cm9Iu9IctweisViB3hhKTHDcHc5jv/LspbyaZrR1OD82/fIlOkuB9LnEWRmDX2TsddUPg3D5gvuc0je0rZaD5EW6G3yjS+A3eeBEWq3XW/Abw1HhUspXADufQb86oW7tZytkYCN//3hHwBvDALPi8EnSOYK8DAOfCc2h4aGcO7cuafkzampqf9UripH12/DtOZbx8ciVGzYy5OO40o25ascGRl5Ssc/AgwAjW3JwqIUjSYAAAAASUVORK5CYII=");
  display: inline-block;
  background-repeat: no-repeat;
  line-height: 24px;
  margin-top: 1px;
  vertical-align: text-top;
}

@media (max-width: 603px) {

  #interactive.viewport {
    width: 300px;
    height: 300px;
    overflow: hidden;
  }


  #interactive.viewport canvas, video {
    margin-top: -50px;
    width: 300px;
    height: 400px;
  }

  #interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
    margin-left: -300px;
  }


  #ProductCd_791-msg-div {
    margin-top: 5px;
    padding-top: 5px;
  }

  #ProductCd_791-msg-div > li .thumbnail .imgWrapper {
    width: 130px;
    height: 130px;
    overflow: hidden;
  }

  #ProductCd_791-msg-div > li .thumbnail .imgWrapper img {
    margin-top: -25px;
    width: 130px;
    height: 180px;
  }
}
@media (max-width: 603px) {

  .overlay.scanner {
    width: 640px;
    height: 510px;
    padding: 20px;
    margin-top: -275px;
    margin-left: -340px;
    background-color: #FFF;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .overlay.scanner > .header {
    margin-bottom: 14px;
  }

  .overlay.scanner > .header h4, .overlay.scanner > .header .close {
    line-height: 16px;
  }

  .overlay.scanner > .header .close {
    height: 16px;
    width: 16px;
  }
}

/*DynamSoft Scanner styles  Starts
*/
.latest-result {
        display: block;
        margin: 0;
        padding: 0.4rem 0.8rem;
        color: inherit;
        width: 80vw;
        border: none;
        font-size: 1rem;
        border-radius: 0.2rem;
        text-align: center;
    }

    .latest-result::placeholder {
        color: #B0BEC5;
    }

    .latest-result:focus {
        outline: none;
        box-shadow: 0.1rem 0.4rem 0.8rem #5e35b1;
    }

    #results {
        border: 1px dashed grey;
        overflow: auto;
        width: 80vw;
        padding: 2vmin;
        margin-bottom: 3vh;
        height: 15vh;
    }

    .resultText {
        color: #cE5E04
    }

    .bigger {
        font-size: large;
        margin-bottom: 2%;
    }

    #UIElement {
        margin: 2vmin auto;
        text-align: center;
        font-size: medium;
        height: 40vh;
        width: 80vw;
    }

    #UIElement img {
        max-width: 100%;
        max-height: 90%;
        border: solid 1px gray;
    }

    /* The switch - the box around the slider */
    .switch {
        position: relative;
        display: inline-block;
        width: 30px;
        height: 17px;
        margin: 10px;
    }

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* The slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 13px;
        width: 13px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked+.slider {
        background-color: #2196F3;
    }

    input:focus+.slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked+.slider:before {
        -webkit-transform: translateX(13px);
        -ms-transform: translateX(13px);
        transform: translateX(13px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 17px;
    }

    .slider.round:before {
        border-radius: 50%;
    }
    
    /* QuaggaJS Video styles*/
    

.collapsable-source pre {
    font-size: small;
}

.input-field {
    display: flex;
    align-items: center;
    width: 260px;
}

.input-field label {
    flex: 0 0 auto;
    padding-right: 0.5rem;
}

.input-field input {
    flex: 1 1 auto;
    height: 20px;
}

.input-field button {
    flex: 0 0 auto;
    height: 28px;
    font-size: 20px;
    width: 40px;
}

.icon-barcode {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTAgNGg0djIwaC00ek02IDRoMnYyMGgtMnpNMTAgNGgydjIwaC0yek0xNiA0aDJ2MjBoLTJ6TTI0IDRoMnYyMGgtMnpNMzAgNGgydjIwaC0yek0yMCA0aDF2MjBoLTF6TTE0IDRoMXYyMGgtMXpNMjcgNGgxdjIwaC0xek0wIDI2aDJ2MmgtMnpNNiAyNmgydjJoLTJ6TTEwIDI2aDJ2MmgtMnpNMjAgMjZoMnYyaC0yek0zMCAyNmgydjJoLTJ6TTI0IDI2aDR2MmgtNHpNMTQgMjZoNHYyaC00eiI+PC9wYXRoPjwvc3ZnPg==);
}

.overlay {
    z-index:90000;
    overflow: hidden;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.overlay__content {
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-height: 90%;
    max-width: 500px;
}

.overlay__close {
    position: absolute;
    right: 0;
    padding: 0.5rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    background-color: white;
    cursor: pointer;
    border: 3px solid black;
    font-size: 1.5rem;
    margin: -1rem;
    border-radius: 2rem;
    z-index: 100;
    box-sizing: content-box;
}

.overlay__content video {
    width: 100%;
    height: 100%;
}

.overlay__content canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

#interactive.viewport {
    position: relative;
}

#interactive.viewport > canvas, #interactive.viewport > video {
    max-width: 100%;
    width: 100%;
}

canvas.drawing, canvas.drawingBuffer {
    position: absolute;
    left: 0;
    top: 0;
}

/* line 16, ../sass/_viewport.scss */
.controls fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
/* line 19, ../sass/_viewport.scss */
.controls .input-group {
  float: left;
}
/* line 21, ../sass/_viewport.scss */
.controls .input-group input, .controls .input-group button {
  display: block;
}
/* line 25, ../sass/_viewport.scss */
.controls .reader-config-group {
  float: right;
}
/* line 28, ../sass/_viewport.scss */
.controls .reader-config-group label {
  display: block;
}
/* line 30, ../sass/_viewport.scss */
.controls .reader-config-group label span {
  width: 9rem;
  display: inline-block;
  text-align: right;
}
/* line 37, ../sass/_viewport.scss */
.controls:after {
  content: '';
  display: block;
  clear: both;
}

/* line 22, ../sass/_viewport.scss */
#result_strip {
  margin: 10px 0;
  border-top: 1px solid #EEE;
  border-bottom: 1px solid #EEE;
  padding: 10px 0;
}
/* line 28, ../sass/_viewport.scss */
#result_strip ul.thumbnails {
  padding: 0;
  margin: 0;
  list-style-type: none;
  width: auto;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
/* line 37, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li {
  display: inline-block;
  vertical-align: middle;
  width: 160px;
}
/* line 41, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail {
  padding: 5px;
  margin: 4px;
  border: 1px dashed #CCC;
}
/* line 46, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail img {
  max-width: 140px;
}
/* line 49, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail .caption {
  white-space: normal;
}
/* line 51, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail .caption h4 {
  text-align: center;
  word-wrap: break-word;
  height: 40px;
  margin: 0px;
}
/* line 61, ../sass/_viewport.scss */
#result_strip ul.thumbnails:after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 603px) {
  /* line 2, ../sass/phone/_core.scss */
  #container {
    margin: 10px auto;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
@media (max-width: 603px) {
  /* line 5, ../sass/phone/_viewport.scss */
  .reader-config-group {
    width: 100%;
  }

  .reader-config-group label > span {
      width: 50%;
  }

  .reader-config-group label > select, .reader-config-group label > input {
      max-width: calc(50% - 2px);
  }

  #interactive.viewport {
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  /* line 20, ../sass/phone/_viewport.scss */
  #result_strip {
    margin-top: 5px;
    padding-top: 5px;
  }

  #result_strip ul.thumbnails {
    width: 100%;
    height: auto;
  }

  /* line 24, ../sass/phone/_viewport.scss */
  #result_strip ul.thumbnails > li {
    width: 150px;
  }
  /* line 27, ../sass/phone/_viewport.scss */
  #result_strip ul.thumbnails > li .thumbnail .imgWrapper {
    width: 130px;
    height: 130px;
    overflow: hidden;
  }
  /* line 31, ../sass/phone/_viewport.scss */
  #result_strip ul.thumbnails > li .thumbnail .imgWrapper img {
    margin-top: -25px;
    width: 130px;
    height: 180px;
  }
}


/* Prism styles */
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+jsx */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	background: none;
	text-shadow: 0 1px white;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #999;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #a67f59;
	background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}

.token.function {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

/* pygment trac Styles */
.highlight  { background: #ffffff; }
.highlight .c { color: #999988; font-style: italic } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { font-weight: bold } /* Keyword */
.highlight .o { font-weight: bold } /* Operator */
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #999999 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { font-weight: bold } /* Keyword.Constant */
.highlight .kd { font-weight: bold } /* Keyword.Declaration */
.highlight .kn { font-weight: bold } /* Keyword.Namespace */
.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #009999 } /* Literal.Number */
.highlight .s { color: #d14 } /* Literal.String */
.highlight .na { color: #008080 } /* Name.Attribute */
.highlight .nb { color: #0086B3 } /* Name.Builtin */
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
.highlight .no { color: #008080 } /* Name.Constant */
.highlight .ni { color: #800080 } /* Name.Entity */
.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
.highlight .nn { color: #555555 } /* Name.Namespace */
.highlight .nt { color: #000080 } /* Name.Tag */
.highlight .nv { color: #008080 } /* Name.Variable */
.highlight .ow { font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #009999 } /* Literal.Number.Float */
.highlight .mh { color: #009999 } /* Literal.Number.Hex */
.highlight .mi { color: #009999 } /* Literal.Number.Integer */
.highlight .mo { color: #009999 } /* Literal.Number.Oct */
.highlight .sb { color: #d14 } /* Literal.String.Backtick */
.highlight .sc { color: #d14 } /* Literal.String.Char */
.highlight .sd { color: #d14 } /* Literal.String.Doc */
.highlight .s2 { color: #d14 } /* Literal.String.Double */
.highlight .se { color: #d14 } /* Literal.String.Escape */
.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
.highlight .si { color: #d14 } /* Literal.String.Interpol */
.highlight .sx { color: #d14 } /* Literal.String.Other */
.highlight .sr { color: #009926 } /* Literal.String.Regex */
.highlight .s1 { color: #d14 } /* Literal.String.Single */
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #008080 } /* Name.Variable.Class */
.highlight .vg { color: #008080 } /* Name.Variable.Global */
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */

.type-csharp .highlight .k { color: #0000FF }
.type-csharp .highlight .kt { color: #0000FF }
.type-csharp .highlight .nf { color: #000000; font-weight: normal }
.type-csharp .highlight .nc { color: #2B91AF }
.type-csharp .highlight .nn { color: #000000 }
.type-csharp .highlight .s { color: #A31515 }
.type-csharp .highlight .sc { color: #A31515 }


/* Quagga reg styles */

/*@media print, screen and (max-width: 480px) {
  
  header ul.github {
    display:none;
  }

  a > img:first-child:last-child {
      width: 100%;
  }

  a > img {
      width: 49%;
  }
}*/



.columns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.columns > * {
    box-sizing: border-box;
    padding: 2px;
}

.columns.large-thirds > * {
    max-width: 33.3333%;
    width: 33.3333%;
}

.columns.large-quater > * {
    max-width: 25%;
    width: 25%;
}

i[class^="icon-"], i[class*=" icon-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: cover;
    vertical-align: bottom;
}

.icon-camera {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTkuNSAxOWMwIDMuNTkgMi45MSA2LjUgNi41IDYuNXM2LjUtMi45MSA2LjUtNi41LTIuOTEtNi41LTYuNS02LjUtNi41IDIuOTEtNi41IDYuNXpNMzAgOGgtN2MtMC41LTItMS00LTMtNGgtOGMtMiAwLTIuNSAyLTMgNGgtN2MtMS4xIDAtMiAwLjktMiAydjE4YzAgMS4xIDAuOSAyIDIgMmgyOGMxLjEgMCAyLTAuOSAyLTJ2LTE4YzAtMS4xLTAuOS0yLTItMnpNMTYgMjcuODc1Yy00LjkwMiAwLTguODc1LTMuOTczLTguODc1LTguODc1czMuOTczLTguODc1IDguODc1LTguODc1YzQuOTAyIDAgOC44NzUgMy45NzMgOC44NzUgOC44NzVzLTMuOTczIDguODc1LTguODc1IDguODc1ek0zMCAxNGgtNHYtMmg0djJ6Ij48L3BhdGg+PC9zdmc+);
}

.icon-image {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTI5Ljk5NiA0YzAuMDAxIDAuMDAxIDAuMDAzIDAuMDAyIDAuMDA0IDAuMDA0djIzLjk5M2MtMC4wMDEgMC4wMDEtMC4wMDIgMC4wMDMtMC4wMDQgMC4wMDRoLTI3Ljk5M2MtMC4wMDEtMC4wMDEtMC4wMDMtMC4wMDItMC4wMDQtMC4wMDR2LTIzLjk5M2MwLjAwMS0wLjAwMSAwLjAwMi0wLjAwMyAwLjAwNC0wLjAwNGgyNy45OTN6TTMwIDJoLTI4Yy0xLjEgMC0yIDAuOS0yIDJ2MjRjMCAxLjEgMC45IDIgMiAyaDI4YzEuMSAwIDItMC45IDItMnYtMjRjMC0xLjEtMC45LTItMi0ydjB6Ij48L3BhdGg+PHBhdGggZD0iTTI2IDljMCAxLjY1Ny0xLjM0MyAzLTMgM3MtMy0xLjM0My0zLTMgMS4zNDMtMyAzLTMgMyAxLjM0MyAzIDN6Ij48L3BhdGg+PHBhdGggZD0iTTI4IDI2aC0yNHYtNGw3LTEyIDggMTBoMmw3LTZ6Ij48L3BhdGg+PC9zdmc+);
}

.icon-video-camera {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTEyIDljMC0yLjc2MSAyLjIzOS01IDUtNXM1IDIuMjM5IDUgNWMwIDIuNzYxLTIuMjM5IDUtNSA1cy01LTIuMjM5LTUtNXpNMCA5YzAtMi43NjEgMi4yMzktNSA1LTVzNSAyLjIzOSA1IDVjMCAyLjc2MS0yLjIzOSA1LTUgNXMtNS0yLjIzOS01LTV6TTI0IDE5di0zYzAtMS4xLTAuOS0yLTItMmgtMjBjLTEuMSAwLTIgMC45LTIgMnYxMGMwIDEuMSAwLjkgMiAyIDJoMjBjMS4xIDAgMi0wLjkgMi0ydi0zbDggNXYtMTRsLTggNXpNMjAgMjRoLTE2di02aDE2djZ6Ij48L3BhdGg+PC9zdmc+);
}

@media print, screen and (max-width: 480px) {
    .columns {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .columns.small-half > * {
        max-width: 50%;
        width: 50%;
    }
}

@-webkit-keyframes iui-fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@-moz-keyframes iui-fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@-ms-keyframes iui-fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@-o-keyframes iui-fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@keyframes iui-fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@-webkit-keyframes iui-fadeOut {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

@-moz-keyframes iui-fadeOut {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

@-ms-keyframes iui-fadeOut {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

@-o-keyframes iui-fadeOut {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

@keyframes iui-fadeOut {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

.dropdown-multiple,
.dropdown-multiple-label,
.dropdown-single {
  position: relative
}

.dropdown-multiple-label.active .dropdown-main,
.dropdown-multiple.active .dropdown-main,
.dropdown-single.active .dropdown-main {
  display: block;
  -webkit-animation: iui-fadeIn .2s ease-in forwards;
  -moz-animation: iui-fadeIn .2s ease-in forwards;
  -ms-animation: iui-fadeIn .2s ease-in forwards;
  -o-animation: iui-fadeIn .2s ease-in forwards;
  animation: iui-fadeIn .2s ease-in forwards
}

.dropdown-multiple-label.active .dropdown-display-label:after,
.dropdown-multiple-label.active .dropdown-display:after,
.dropdown-multiple.active .dropdown-display-label:after,
.dropdown-multiple.active .dropdown-display:after,
.dropdown-single.active .dropdown-display-label:after,
.dropdown-single.active .dropdown-display:after {
  border-top: none;
  border-bottom: 10px solid #999;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent
}

.dropdown-multiple-label.active .dropdown-display,
.dropdown-multiple-label.active .dropdown-display-label,
.dropdown-multiple.active .dropdown-display,
.dropdown-multiple.active .dropdown-display-label,
.dropdown-single.active .dropdown-display,
.dropdown-single.active .dropdown-display-label {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0
}

.dropdown-display,
.dropdown-display-label {
  position: relative;
  display: block;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.42857143;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333;
  background-color: #fff
}

.dropdown-display-label:after,
.dropdown-display:after {
  content: '';
  position: absolute;
  border-top: 10px solid #999;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 12px;
  right: 8px
}

.dropdown-clear-all {
   background-color: #fff;
    border: none;
    font-size: 22px;
    z-index: 999;
    color: #999;
    position: absolute;
    right: 2px;
    top: 2px;
    display: none;
    width: 25px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.dropdown-clear-all:focus {
  outline: 0
}

.dropdown-clear-all:hover {
  color: #ccc;
  text-decoration: none;
}

.dropdown-display {
  white-space: nowrap;
  padding: 6px 20px 6px 12px
}

.dropdown-multiple:hover .dropdown-clear-all,
.dropdown-single:hover .dropdown-clear-all {
  display: block
}

.dropdown-display .dropdown-chose-list {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.dropdown-display .dropdown-chose-list span:before {
  content: ','
}

.dropdown-display .dropdown-chose-list span:first-child:before {
  content: ''
}

.dropdown-display .placeholder {
  display: none
}

.dropdown-display .placeholder:first-child {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  color: #999;
  display: block;
  text-indent: 10px;
  font-size: 13px;
  line-height: 32px
}

.dropdown-display input {
  border: 0;
  outline: 0
}

.dropdown-display-label {
  cursor: text;
  padding: 6px 25px 5px 0
}

.dropdown-display-label .dropdown-search {
  display: inline-block
}

.dropdown-display-label input,
.dropdown-display-label input:focus {
  border: none;
  outline: 0
}

.dropdown-display-label .dropdown-chose-list {
  display: inline-block;
  padding: 0 5px
}

.dropdown-display-label .dropdown-chose-list .placeholder {
  display: none
}

.dropdown-display-label .dropdown-selected {
  position: relative;
  margin: 0 5px 5px 0;
  padding: 0 20px 0 5px;
  border: 1px solid #aaa;
  max-width: 100%;
  border-radius: 3px;
  background-repeat: repeat-x;
  color: #333;
  cursor: default;
  display: inline-block
}

.dropdown-display-label .dropdown-selected .del {
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: 0 0;
  border: 0;
  float: right;
  line-height: 1;
  color: #999;
  position: absolute;
  right: 3px;
  top: 0
}

.dropdown-display-label .dropdown-selected .del:after {
  content: '\D7';
  font-size: 16px
}

.dropdown-main {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1010;
  width: 100%;
  color: #444;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  margin-top: -1px;
  border-top: 0;
  padding: 4px 7px;
  display: none
}

.dropdown-main ul {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 240px;
  margin: 0;
  padding: 0
}

.dropdown-main input {
  margin-top: 0;
  display: block;
  box-sizing: border-box;
  height: 30px;
  border: 1px solid #ccc;
  width: 100%;
  text-indent: 5px;
  border-radius: 3px
}

.dropdown-main .dropdown-search {
  display: block;
  padding: 5px 0
}

.dropdown-group {
  font-weight: 700
}

.dropdown-group,
.dropdown-option {
  margin: 0;
  padding-left: 20px;
  list-style: none;
  line-height: 18px;
  word-wrap: break-word;
  position: relative;
  margin-bottom: 5px;
}


.dropdown-option {
  cursor: pointer
}

.dropdown-option:focus,
.dropdown-option:hover {
  background-color: #efefef;
  outline: 0
}

.dropdown-option[disabled] {
  color: #ddd;
  background-color: #fff;
  cursor: not-allowed;
  text-decoration: line-through
}

.dropdown-option.dropdown-chose:after {
    content: "\2713";
    font-family: 'FontAwesome';
	font-size: 20px;
	color: #28a745;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 0px;
	height: 100%;
	display: flex;
	align-items: center;
}

.dropdown-option:not(.dropdown-chose) {
	padding-left: 20px;
}

.dropdown-maxItem-alert, .dropdown-minItem-alert {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #e4e3e2;
  width: 100%;
  height: 39px;
  line-height: 39px;
  padding: 0 5px;
  border-radius: 5px;
  color: #999;
  -webkit-animation: iui-fadeIn .2s ease-in forwards;
  -moz-animation: iui-fadeIn .2s ease-in forwards;
  -ms-animation: iui-fadeIn .2s ease-in forwards;
  -o-animation: iui-fadeIn .2s ease-in forwards;
  animation: iui-fadeIn .2s ease-in forwards
}