/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
  text-decoration-style: dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small, .small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 1.5em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/**
  * our green:   rgb(132,190,72)
  * our red:     rgb(140,73,69)
  * our lt grey: rgb(241,241,241)
  * our md grey: #555 /#4f4f4f
  * our dk grey: #333 /#343434
  */
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?1rlvtr');
  src:  url('fonts/icomoon.eot?1rlvtr#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?1rlvtr') format('truetype'),
    url('fonts/icomoon.woff?1rlvtr') format('woff'),
    url('fonts/icomoon.svg?1rlvtr#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.verify{
  margin-right: 20px;
}

.freq{
  font-size:14px;
}
.freq > * {
  padding-left: 5px;
  padding-right: 5px;
}
.freq > a.disabled{
  color: var(--c-onSurface, black);
  cursor: default;
}
.pager{
  font-weight: bold !important;
  font-size: 14px;
}
.pager_pipe{
  padding-right:5px;
  padding-left:5px;
  color:var(--c-outline, rgba(0,0,0,0.2));
}
.fermentation_cols td, .table_col, .table_col_name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 15em;
}

.table_col, .table_col_name{
  padding: 0 15px;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-tank-icon:before {
  content: "\e900";
}
body {
  font-family: 'SF Pro Display', Helvetica, Arial;
  background-color: var(--c-background, rgb(241,241,241));
  color: var(--c-onBackground, #676767);
}

#main {
  background-color: var(--c-background, #fff);
  color: var(--c-onBackground, #555);
  padding: 36px 36px;
  transition: 0.5s;
}

#main ol li {
  padding: 10px 0;
}

#help-center {
  float: right;
  position: relative;
  color: var(--c-primary, rgb(132,190,72));
  font-weight: 200;
  top: -48px;
  margin: 0;
}

.help_links{
  font-weight: normal !important;
  text-decoration: underline !important;
}

#logo-menu,#open-menu {
  display: inline-block;
  position: relative;
  top: -48px;
  left: -36px;
  margin: 0;
}

#open-menu {
  color: var(--c-onPrimaryContainer, #fff);
  background-color: var(--c-primaryContainer, rgb(132,190,72));
  width: 33px;
  height: 31px;
  text-align: center;
  cursor:pointer;
  margin-right: 10px;
  top: -58px;
  border-radius: 2px;
}

#open-menu i {
  line-height: 32px;
}

h2 {
  font-weight: 300;
  font-size: 28px;
  margin-top: -12px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--c-outlineVariant, #eee);
}

h2.login_page {
  padding-bottom: 0;
  border-bottom: none;
}

h2.fermentation_page {
  font-size: 18px;
}

h3 {
  margin: 30px 0;
  color: var(--c-onSurface, #555);
  font-weight: normal;
}
hr {
  border: 0;
  height: 0;
  border-top: 1px solid var(--c-outline, rgba(0, 0, 0, 0.1));
  border-bottom: 1px solid var(--c-outlineVariant, rgba(255, 255, 255, 0.3));
  margin: 30px 0;
}

form input, form select, form textarea {
/*   display: block; */
  margin-bottom: 30px;
  color: var(--c-onSurfaceVariant, #888);
}
label{display: block}
.status-suc{
  color:var(--c-success, rgb(132,190,72));
}
.status-err{
  color:var(--c-error, rgb(140,73,69));
}

.danger{
  color:var(--c-error, rgb(140,73,69)) !important;
}

.status-msg{
  font-size: 1.2em;
}
.status-button
{
  margin-bottom: 28px;
}
.inline_block{
  display: inline-block;
}

.graph-title {
  font-family: Helvetica, Arial;
  font-size: 14px;
  font-weight: normal;
}

.axis-label {
  font-family: Helvetica, Arial;
  font-size: 10px;
}

.axis, .domain, .tick, .tick line {
  stroke: var(--c-outlineVariant, #666);
  stroke-width: .5px;
  fill: none;
}

.tick text {
  fill: var(--c-outlineVariant, #666);
  stroke: none;
  font-size: 8px;
}

.dashboard circle {
}

.nodashboard path {
/*  fill: none;*/
  stroke-width: 1;
}

.dashboard .graph-title, .dashboard .axis-label {
  display: none;
}

/* .nodashboard .graph-container {
  border: 1px solid #ddd;
  margin: 4px 17px 22px 0;
  overflow: visible;
} */

.nodashboard .graph-container {
  border-bottom: 1px solid var(--c-outlineVariant, #ddd);
  border-left: 1px solid var(--c-outlineVariant, #ddd);
  border-right: 1px solid var(--c-outlineVariant, #ddd);
  border-top: 0 solid var(--c-outlineVariant, #ddd);
  overflow: visible;
}

.nodashboard .graph-container-hover {
  border-bottom: 2px dashed var(--c-onSurface, #000000);
  border-left: 2px dashed var(--c-onSurface, #000000);
  border-right: 2px dashed var(--c-onSurface, #000000);
  border-top: 2px dashed var(--c-onSurface, #000000);
  overflow: visible;
}

.nodashboard .graph-resize-bar {
  background-color: var(--c-surfaceContainerLow, #f5f5f5);
  height: 20px;
  border-bottom: 0 solid var(--c-outlineVariant, #ddd);
  border-left: 1px solid var(--c-outlineVariant, #ddd);
  border-right: 1px solid var(--c-outlineVariant, #ddd);
  border-top: 1px solid var(--c-outlineVariant, #ddd);
  margin-top: 10px;
  display: flex;
  align-items: center;
}

div.nodashboard {
  margin-right:-13px;
  margin-top: 16px;
}
.p_rdng_do, .c_rdng_do, .p_avg_do, .c_avg_do, g.p_avg_do path{
  stroke: var(--c-graph-do, rgb(255,114,184));
}
.p_secondary {
  stroke: var(--c-graph-secondary, #ACACAC);
}

.c_rdng_do, .c_avg_do, .a_avg_do {
  fill: var(--c-graph-do, rgb(255,114,184));
}

.p_rdng_density, .c_rdng_density, .p_avg_density, .c_avg_density,
.c_avg_plato g.p_rdng_density path{
  stroke: var(--c-graph-primary, rgb(152, 212, 66));
}

.p_scatter_primary {
  fill: var(--c-surface, #fff);
  stroke: var(--c-graph-primary, rgb(152, 212, 66));
}

.p_scatter_secondary {
  fill: var(--c-surface, #fff);
  stroke: var(--c-graph-secondary, #ACACAC);
}

.p_scatter_primary_filled {
  fill: var(--c-graph-primary, rgb(152, 212, 66));
  stroke: var(--c-graph-primary, rgb(152, 212, 66));
}

.p_scatter_secondary_filled {
  fill: var(--c-graph-secondary, #ACACAC);
  stroke: var(--c-graph-secondary, #ACACAC);
}

.p_scatter_line {
  fill: var(--c-surface, #fff);
  stroke: var(--c-graph-secondary, #ACACAC);
  stroke-opacity: 0;
  fill-opacity: 0;
}

.p_scatter_projected { /* BMC-462 */
  fill: var(--c-surface, #fff);
  stroke: var(--c-graph-primary-light, #cbe4af);
  stroke-width: 4;
  stroke-opacity: 0.32;
}
/* BMC-244 Style for benchmark data */
.p_scatter_bench {
  stroke: var(--c-graph-secondary, #ACACAC);
  fill: var(--c-graph-secondary, #ACACAC);
  stroke-width: 6;
  stroke-opacity: 0.15;
  fill-opacity: 0.15;
}

.p_bench path {
  stroke: var(--c-graph-secondary, #ACACAC);
  stroke-width: 6;
  stroke-opacity: 0.22;
}

/* BMC-145 Style for lab data circles */
.p_labdata {
  stroke: var(--c-graph-lab, rgb(57, 73, 171));
  fill: var(--c-surface, #fff);
}

.lab_notes {
  stroke: var(--c-graph-secondary, #ACACAC);
  fill: var(--c-surface, #fff);
}

.c_rdng_density, .c_avg_density, .c_avg_plato {
  fill: var(--c-graph-primary, rgb(152,212,66));
}

.p_rdng_ph, .c_rdng_ph, .p_avg_ph, .c_avg_ph, g.p_avg_ph path{
  stroke: var(--c-graph-ph, rgb(87,184,149));
}

.c_rdng_ph, .c_avg_ph, .a_avg_ph {
  fill: var(--c-graph-ph, rgb(87,184,149));
}

.p_rdng_pressure, .c_rdng_pressure, .p_avg_pressure, .c_avg_pressure,
g.p_avg_pressure path {
  stroke: var(--c-graph-pressure, rgb(255,0,0));
}

.c_rdng_pressure, .c_avg_pressure, .a_avg_pressure {
  fill: var(--c-graph-pressure, rgb(255,0,0));
}

.p_rdng_temp_fld, .c_rdng_temp_fld, .p_avg_temp_fld, .c_avg_temp_fld,
g.p_avg_temp_fld path{
  stroke: var(--c-graph-temp-fld, rgb(250,120,80));
}

.c_rdng_temp_fld, .c_avg_temp_fld, .a_avg_temp_fld {
  fill: var(--c-graph-temp-fld, rgb(250,120,80));
}

.p_rdng_temp_amb, .c_rdng_temp_amb, .p_avg_temp_amb, .c_avg_temp_amb,
g.p_avg_temp_amb path {
  stroke: var(--c-graph-temp-amb, rgb(135,206,250));
}

.c_rdng_temp_amb, .c_avg_temp_amb, .a_avg_temp_amb {
  fill: var(--c-graph-temp-amb, rgb(135,206,250));
}

.p_rdng_conductivity, .c_rdng_conductivity, .p_avg_conductivity, .c_avg_conductivity {
  stroke: var(--c-graph-conductivity, rgb(123,141,190));
}

.c_rdng_conductivity, .c_avg_conductivity {
  fill: var(--c-graph-conductivity, rgb(123,141,190));
}

g.p_avg_do path,
g.p_avg_ph path,
g.p_avg_pressure path,
g.p_avg_temp_fld path,
g.p_avg_temp_amb path,
g.p_avg_conductivity path,
g.p_avg_temp_jacket path,
g.p_avg_gravity path,
g.p_avg_plato path,
g.p_wifi_signal path
g.p_battery_pct path
{
  stroke:var(--c-graph-primary, rgb(152,212,66));
  stroke-width: 2
}

.a_avg_do,
.a_avg_ph,
.a_avg_pressure,
.a_avg_temp_fld,
.a_avg_temp_amb,
.a_avg_plato,
.a_avg_conductivity,
.a_avg_temp_jacket,
.a_wifi_signal,
.a_battery_pct
{
  opacity: 0.04;
  fill: var(--c-onSurface, #000);
}

.aGreen_avg_do,
.aGreen_avg_ph,
.aGreen_avg_pressure,
.aGreen_avg_temp_fld,
.aGreen_avg_temp_amb,
.aGreen_avg_plato,
.aGreen_opt_plato,
.aGreen_avg_conductivity
{
  opacity: 0.09;
  fill: var(--c-success, rgb(130,186,65));
}

.aYellow_avg_temp_fld,
.aYellow_avg_temp_amb
{
  opacity: 0.25;
  fill: var(--c-warning, rgb(255,140,0));
}

#qc_notes {
  resize:none;
  height: 205px;
  width: 473px;
  margin-bottom:21px;
  border: 1px solid var(--c-outlineVariant, #ddd);
  font-size: 80%;
  font-weight: normal;
}

#signin-page {
  background-color: var(--c-tertiaryFixed, #fff);
  color: var(--c-onTertiaryFixed, #000);
  text-align: center;
  background-image: url('/images/login-background.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
}

#signin-page form {
  margin: 0 auto;
  width: 320px;
}

#signin-page form input {
  display: block;
  width: 320px;
  margin-bottom: 40px;
}

#signin-page form input::-webkit-input-placeholder {
text-align: center;
}

#signin-page form input::-moz-placeholder {
  text-align: center;
}

#signin-page form input:-ms-input-placeholder {
  text-align: center;
}

#signin-page h1 img {
  max-width: 90%;
  height: auto;
}

#signin-page h2 {
  font-size: 26px;
  font-weight: normal;
  margin: 40px;
}

.signin-helper {
  margin: 40px;
}

#signin-logo {
  margin: 30px;
}
/** btn.strong will probably be obsolete after update **/
button, .btn.strong, .btn, .btn-off {
  color: var(--c-onPrimaryContainer, #fff);
  background-color: var(--c-primaryContainer, rgb(132,190,72));
  border: 0;
  margin-bottom: 26px;
  margin-right: 10px;
  padding: 7px 10px;
  font-size: 14px;
  cursor: pointer;
  text-transform: uppercase;
  /** unify weight for all buttons and links*/
  font-weight: 700
}

.btn-off {
  background-color: var(--c-secondaryContainer, rgb(166,166,166));
  cursor: default;
  font-weight: 700;
  display: inline-block;
  pointer-events: none;
  color: var(--c-onSecondaryContainer, #fff) !important;
}

.btn-min {
  padding:6px 9px;
  font-size: 11px;
  margin-bottom: 0;
}
#bs_form p {
  border-bottom: 1px solid var(--c-outlineVariant, #ddd);
  font-size: 20px;
  margin: 10px 0 40px;
  color: var(--c-onSurfaceVariant, #aaa);
}
.bs_add_div{
  background-color: var(--c-surfaceContainerLow, #eee);
  padding: 11px;
  display: none;
  margin-bottom: 20px;
}
.bs_add_table{
  margin-bottom: 40px;
}
.trig_bs_add_div{
  margin-top:-35px;
}
button:hover{
  background-color: var(--c-surfaceTint, rgb(166,166,166));
}
a:link,a:visited {
  color: var(--c-primary, rgb(132,190,72));
  text-decoration: none;
  font-weight: 700;
}
a:hover{
  color: var(--c-onSurfaceVariant, rgb(166,166,166));
}
abbr:hover{
  color: var(--c-tertiary, rgb(17,17,17));
}
button a:link,button a:visited {
  color: var(--c-onPrimaryContainer, #fff);
  text-decoration: none;
}
.btn{display: inline-block}
.btn:link,.btn:visited{
  color: var(--c-onPrimaryContainer, #fff);
}
.btn:hover{
  color: var(--c-onPrimaryContainer, #fff);
  background-color: var(--c-secondaryContainer, rgb(166,166,166));
}
.cancel_btn{
  border:2px solid  var(--c-primary, rgb(132,190,72));
  padding: 5px 10px;
  font-size: 14px;
  margin-left: 20px;
  display: inline-block;
}
.cancel_btn:hover {
  border-color: var(--c-outlineVariant, #ccc);
}
.cancel_btn.short
{
  line-height: 13px;
  vertical-align: bottom;
  margin-bottom: 0px;
}
a.cancel_btn:hover
{
  color: var(--c-onSurfaceVariant, rgb(166,166,166));
}
#logo-no-menu {
  width:194px;
  margin: 0 auto;
  margin-top: 40px;
}

form.accountop input {
  margin: 0 0 30px;
}

.scm_step:not(.active)
{
  background-color: var(--c-surfaceContainerLowest, rgb(241,241,241));
}

.scm_step
{
  font-weight: bold;
  color: var(--c-onSurfaceVariant, #999);
}

.af_container {
  color: var(--c-onSurface, #333);
  background-color: var(--c-surfaceContainer, #eee);
  padding: 5px;
  box-sizing: border-box;
  margin: 0 0 50px 0;
  display: block;
}

.af_container ul {
  list-style: none;
  padding-left: 25px;
}

.af_container ul li {
  display: inline-block;
  margin: 10px 0;
  width: 209px;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 300;
}
.af_container span{
  font-weight: 300;
}

.af_container span.af_container_label {
  font-weight: 500;
  margin-right: 8px;
  margin-left: 5px;
}

.af_container:hover {
  background-color: var(--c-primaryContainer, rgb(132,190,72));
}
.graph-container {
  border: 1px solid var(--c-outlineVariant, #eee);
  margin-bottom: 10px;
  box-sizing: border-box;
}

div.dashboard_fermentation_container:nth-child(odd){
  margin-right: 50px;
}

div.dashboard_fermentation_container, div.dashboard, div.af_container {
  display: inline-block;
  width: 576px;
  margin: auto;
}

.db_a_shade{
  fill: var(--c-graph-a-shade, #be4884);
  fill-opacity: .5;
}

.db_n_shade{
  fill:var(--c-graph-n-shade, rgba(132,190,72,1));
  stroke:var(--c-graph-n-shade, rgba(132,190,72,1));
  stroke-width:0px;
}
.db_g_shade{
  fill:var(--c-graph-g-shade, #ccc);
  stroke:var(--c-graph-g-shade, #ccc);
  stroke-width:0px;
}
.db_r_shade{
  fill:var(--c-graph-r-shade, red);
  stroke:var(--c-graph-r-shade, red);
  stroke-width:0px;
}

.db_s_label,.db_r_label{
  font-size: 14px;
  font-weight: 500;
}
.db_s_label{
  fill: var(--c-graph-n-shade, rgba(132,190,72,1));
}
.db_r_label{
  fill: var(--c-graph-r-shade, red);
}

.db_p{
  fill: var(--c-surface, #fff);
  stroke: var(--c-graph-bold, #333);
  stroke-width: 1px;
}
.db_p_shade{
  fill: var(--c-graph-p-shade, #4f4f4f);
  fill:var(--c-graph-secondary, #ccc);
  stroke-width:0;
}
.db_triangle{
  fill: var(--c-surface, #fff);
  stroke: var(--c-surface, #fff);
  stroke-width: .5px;
}
.db_triangle_oor{
  fill: var(--c-graph-a-shade, #be4884);
  stroke: var(--c-graph-bold, #333);
  stroke-width: .5px;
}

.db_time_area,.db_hour_area{
  font-size: 14px;
}
.db_time_area text,.db_hour_area text{
  font-weight: 500;
}
.db_time_area tspan,.db_hour_area tspan{
  font-weight: 300;
}
.db_trend_rect{
  fill: var(--c-surface, #fff);
  stroke: var(--c-graph-secondary, #ccc);
  stroke-width: 1px;
}
.db_x_axis path{
  stroke: var(--c-surface, #fff);
  stroke-width: 0px;
}
path.db_trend_fill{
  fill: var(--c-graph-secondary, #ccc);
  stroke-width: 0;
}
table {
  border: 1px solid var(--c-outlineVariant, #a7a7a7);
  border-collapse: collapse;
  width: 100%;
  font-size: 1em;
  font-weight: 300;
}

table#raw_data
{
  margin-bottom: 16px;
}
table#raw_data tr td,
table#raw_data tr th
{
  font-size: 14px;
  padding: 0 5px;
  height: 25px;
  /* width: 100px; */
  overflow: hidden;
}
table#raw_data>tr>:nth-child(1),
table#raw_data>tr>:nth-child(2) { 
  width: 150px;
}
table#raw_data>tr.sliders.shown,
table#raw_data>tr.sliders.shown>td
{
  height: auto;
  line-height: 1;
  transition: all 1s;
  overflow: hidden;
}
table#raw_data>tr.sliders.shown>td>div.card
{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  height: auto;
  line-height: 1;
  transition: all 1s;
  overflow: hidden;
}
table#raw_data>tr.sliders,
table#raw_data>tr.sliders>td
{
  border: 0px;
  padding: 0;
  height: 0px;
  line-height: 0;
  overflow: hidden;
  transition: all 1s;
}
table#raw_data>tr.sliders>td>div.card
{
  table-layout: fixed;
  border: 0;
  padding: 0;
  height: 0px;
  line-height: 0;
  min-height: 0px;
  overflow: hidden;
  transition: all 1s;
}
.alert-email-add,
.alert-email-add2,
.alert-email-rem,
.alert-email-rem2,
.alert-phone-add,
.alert-phone-rem{
  margin-left: 12px;
  font-size: 22px;
  position: relative;
  top: 2px;
}
.alert-email-rem,
.alert-email-rem2,
.alert-phone-rem{
  color: var(--c-error, red) !important;
}
.ferm_alert_heading{
  margin-bottom: 10px;
  font-size: 16px;
}
.ferm_alert_range{
  margin-top: -5px;
  font-size: 12px;
  margin-bottom: 4px;
}
.ferm_alert_label{
  font-size: 12px;
}
.ferm_alert_input{
  width:80px;
}
.fai_min{
  margin-bottom: 5px;
  margin-right:24px;
}

#calib_form{
  margin-top: 20px;
  margin-bottom: 0px;
}
#calib_form input{
  margin-bottom: 0px;
  width: 100px;
}
tr.fermentation_cols > .i_actferm {
  font-size: 18px;
  text-align: center;
  color: var(--c-primary, rgba(132,190,72,1));
}
.i_actferm i {
  padding-left: 13px;
}

.action_items_td {
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  height: 60px;
}

.tbl_cta a{
  white-space: nowrap;
  text-transform: uppercase;
  padding: 0 15px;
  /*max-width: 40px;*/
  text-decoration: none;
  font-weight: 700;
  font-size: .9em;
}

.tbl_cta_red a{
  color: var(--c-error, rgb(140,73,69));
}

#location_select1{
  margin-bottom:20px;
}
#location_select{
  margin: 0;
}
#location_select fieldset,#premeta fieldset{
   border:1px solid var(--c-outlineVariant, #a7a7a7);
   margin-bottom: 1em;
}
#sf_mask{
  position: relative;
}
.sf_mask:after{
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: var(--c-mask, rgba(255,255,255,0.7));
}
tr:not(:last-child) {
  border-bottom: 1px solid var(--c-outlineVariant, #eee);
}

/* Fix regression from adding thead to header rows, which makes last
   row of header last-child */
thead tr {
  border-bottom: 1px solid var(--c-outlineVariant, #eee);
}

td:not([class]), th:not([class]) {
  height: 60px;/** 75 */
  padding: 0 15px;/** 0 30 */
  text-align: left;
  white-space: nowrap;
}

a.define-benchmark {
  position: relative;
  margin: 7px;
}
/* BMC-74 fix loss of row height in fermentation list due to empty
   class attribute left by jQuery when removing sourt classes. After
   a few sorts, there is an empty class attribute on each cell, causing
   the above td:not([class]) to not be applied. The below will apply 
   independent of class assigned to the cell */
.fermentation_cols td {
  height: 60px;
  padding: 0 15px;
  text-align: left;
  white-space: nowrap;
}

th{
  text-transform: uppercase
}
.bs_subtable{
  border: 0;
}
.bs_subtable th, .bs_subtable td{
  height:37.5px;
}
ul#ferm_details{
  list-style: none;
  padding: 0;
}
ul#ferm_details span{
  font-weight: 300;
}
ul#ferm_details li{
  padding-bottom: 20px;
}
a.contact_support{
  font-weight:300;
  color:var(--c-secondary, #a7a9ac);
  text-decoration:none;
  font-size:15px;
}

a.contact_support:hover{
  color:var(--c-primary, rgb(132,190,72));
}

#fermentation_status{
  border: 1px solid var(--c-outlineVariant, #dcdcdc);
  font-size: 14px;
}
#fermentation_status tr{
  border: 0px;
}
#fermentation_status td{
  height: 18px;
  padding: 0px 28px;
}
#fermentation_status td:first-child{
  width: 200px;
  border-right: 1px solid var(--c-outlineVariant, #dcdcdc);
}
#fermentation_status td.dkfjdie{
  padding-top:12px;
}
#fermentation_status td.eidjfkd{
  padding-bottom:12px;
}

@media only screen and (min-width: 0px) and (max-width: 414px) {
  .large-only {
    display: none !important;
  }
  select {
    max-width: 250px;
  }
}


@media screen and (min-width:480px){
  #bs_form input {
    width: auto;
  }

  #bs_form .bs_numeric_input {
    width: 100px;
  }

  #bs_form label.add {
    display: inline-block;
  }

}

@media screen and (min-width:960px){
  /*#main {
    margin-left: 241px;
  }*/
  #left-menu {
    width: 229px;
  }
  #scm_step_list {
    display: inline-block;
  }
  #scm_step_list li {
    display: inline-block;
    width: 70px;
    height: 22px;
    line-height: 23px;
    text-align: center;
    /**border-radius: 5px;**/
  }
  #bs_form label {
    font-size: 16px;
  }

  .tank_edit,.tank_delete{
    padding: 0 30px;/** 0 30 */
  }
  form input, textarea{
/*    width: 20em;*/
  }
  /* USABILITY: EMAIL FORM FIELDS NEED TO SHOW FULL ADDRESS */
  form input[type="email"]{
    width: 20em;
  }
  #bs_form p{
    width: 300px;

  }
  .large_only {
    box-sizing: border-box;
  }
}

.square-button {
  display: inline-block;
  height: 25px;
  width: 28px;
  background-color: var(--c-primaryContainer, #84be48);
  /* color: var(--c-onPrimaryContainer, #fff); */
  text-align: center;
  margin-right: 0.5rem;
}

.square-button i {
  margin-top: 2px;
  line-height: 23px;
  background-color: var(--c-primaryContainer, #84be48);
  color: var(--c-onPrimaryContainer, #fff);
}

.square-button.small {
  height: 20px;
  width: 22px;
}

.square-button.small i {
  margin-top: 3px;
  line-height: 16px;
}

/* BMC-74 */
.dataTables_length, .dataTables_filter {
  margin-bottom: 0.5em;
}

.fermlist_active {
  width: 50px;
  min-width: 50px;
}

table.dataTable thead .sorting_desc {
  background-image: url(/images/sort_desc_pfi.png) !important;
  background-position: center left;
  padding-left: 25px;
}

/* Align sorting arrows in header with column data */
table.dataTable tbody td {
  padding-left: 5px;
}

table.dataTable thead .sorting {
  background-position: center left;
  padding-left: 25px;
}

table.dataTable thead .sorting_asc {
  background-image: url(/images/sort_asc_pfi.png) !important;
  background-position: center left;
  padding-left: 25px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: none         !important;
  color: var(--c-primary, rgb(132,190,72)) !important;
  font-weight: bold;
  border: 0                !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(disabled):hover {
  color: var(--c-secondary, rgb(166,166,166)) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--c-primary, rgb(132,190,72)) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  color: var(--c-tertiary, #555)            !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  color: var(--c-tertiary, #555);
}

.dataTables_wrapper .dataTables_length select {
  color: var(--c-tertiary, #555);
}

.dataTables_wrapper .dataTables_filter input {
  color: var(--c-tertiary, #555);
}


.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: var(--c-primary, rgb(132,190,72)) !important;
}

table.dataTable thead tr {
  border-bottom: 1px solid var(--c-outlineVariant, #eee) !important;
}

table.dataTable thead tr th {
  border-bottom: none;
  text-align: left;
  padding-left: 10px;
  margin-left: 5px;
}

table.dataTable thead tr td {
  margin-left: 5px;
}

#fermentation_list, #fermentationsTable {
  border-collapse: collapse !important;
  width: 100%;
}

#fermentation_list thead tr {
  height: 60px;
}

#fermentation_list tbody tr td {
  padding-bottom: 0;
  padding-top: 0;
}

#fermentation_list{
  width: 100% !important; 
  table-layout: initial;
}

#fermentation_list td, th{
  /* width: auto !important; */
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
}

.fermlist_started{
  padding-right: 0px;
}

@media screen and (min-width:1440px){
  table{
    font-size: 1.05em;
  }
  td:not([class]), th:not([class]) {
    height: 75px;/** 75 */
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  #fermentation_list > th.sorting, th.sorting_desc, th.sorting_asc, td.sorting_1.i_actferm {
    height: 75px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  .tbl_cta a{
    font-size: 1em;
  }
}
.AnyTime-pkr *{border:0;font:inherit;font-size:x-small;font-style:normal;font-weight:400;list-style-type:none;margin:0;padding:0;white-space:nowrap;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.AnyTime-win{background-color:#F0F0F1;border:3px solid silver;display:inline-block;font:normal normal normal xx-small/normal sans-serif;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px}.AnyTime-pkr,.AnyTime-pkr *{text-align:center}.AnyTime-pkr .AnyTime-cloak{background-color:#D7D7D7;opacity:.7;position:absolute;filter:alpha(opacity=70)}.AnyTime-pkr .AnyTime-hdr{background-color:#D0D0D1;color:#606062;font-family:Arial,Helvetica,sans-serif;font-size:medium;font-weight:400;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.AnyTime-pkr .AnyTime-x-btn{background-color:#FCFCFF;border:1px solid #F99;color:#FF9F9F;cursor:default;float:right;margin:.25em .25em 0 0;width:1.5em;-moz-border-radius:.4em;-webkit-border-radius:.4em;border-radius:.4em}.AnyTime-pkr .AnyTime-btn{background-color:#FCFCFE;border:1px solid #999;color:#606062;cursor:default;font-family:Arial,Helvetica,sans-serif;margin:0 .1em .1em 0;padding:.2em .3em;-moz-border-radius:.1em;-webkit-border-radius:.1em;border-radius:.1em}.AnyTime-pkr .AnyTime-body{margin:0 1em 1em 0}.AnyTime-pkr .AnyTime-date{display:inline-block;margin-left:1em;vertical-align:top}.AnyTime-pkr .AnyTime-lbl{color:#606063;font-family:Arial,Helvetica,sans-serif;font-size:100%;font-weight:400;font-style:normal;margin-top:.8em}.AnyTime-pkr .AnyTime-yrs{width:20em}.AnyTime-pkr .AnyTime-yrs-past-btn,.AnyTime-pkr .AnyTime-yrs-ahead-btn{display:inline-block;width:2.4em}.AnyTime-pkr .AnyTime-yr-prior-btn,.AnyTime-pkr .AnyTime-yr-cur-btn,.AnyTime-pkr .AnyTime-yr-next-btn{display:inline-block;width:4.8em}.AnyTime-pkr .AnyTime-mons{width:20em}.AnyTime-pkr .AnyTime-mons:after{content:"";display:table;clear:both}.AnyTime-pkr .AnyTime-mon-btn{float:left;width:3.2em}.AnyTime-pkr .AnyTime-mon7-btn{clear:left}.AnyTime-pkr .AnyTime-dom-table{background-color:#F0F0F1;border:1px solid #E3E3E4;border-spacing:1px;width:20em}.AnyTime-pkr th.AnyTime-dow{background-color:#C0C0C1;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:95%;font-weight:400;font-style:normal;padding:.1em .3em}.AnyTime-pkr .AnyTime-dom-btn{text-align:right;padding-right:.5em}.AnyTime-pkr .AnyTime-dom-btn-empty,.AnyTime-pkr .AnyTime-min-ten-btn-empty,.AnyTime-pkr .AnyTime-min-one-btn-empty,.AnyTime-pkr .AnyTime-sec-ten-btn-empty,.AnyTime-pkr .AnyTime-sec-one-btn-empty{background-color:#F3F3F4;border:1px solid #C0C0c1}.AnyTime-pkr .AnyTime-time,.AnyTime-pkr .AnyTime-hrs-am,.AnyTime-pkr .AnyTime-hrs-pm,.AnyTime-pkr .AnyTime-mins-tens,.AnyTime-pkr .AnyTime-mins-ones,.AnyTime-pkr .AnyTime-secs-tens,.AnyTime-pkr .AnyTime-secs-ones{display:inline-block}.AnyTime-pkr .AnyTime-hrs,.AnyTime-pkr .AnyTime-mins,.AnyTime-pkr .AnyTime-secs,.AnyTime-pkr .AnyTime-offs{display:inline-block;margin-left:1em}.AnyTime-pkr .AnyTime-hr-btn{text-align:right;width:3.5em}.AnyTime-pkr .AnyTime-min-ten-btn,.AnyTime-pkr .AnyTime-min-one-btn{width:2em}.AnyTime-pkr .AnyTime-sec-ten-btn,.AnyTime-pkr .AnyTime-sec-one-btn{width:2em}.AnyTime-pkr .AnyTime-off-cur-btn{display:inline-block;overflow:hidden}.AnyTime-pkr .AnyTime-off-select-btn{display:inline-block;vertical-align:top;width:2em}.AnyTime-pkr .AnyTime-yr-selector{position:absolute}.AnyTime-pkr .AnyTime-body-yr-selector{margin:.8em 1em}.AnyTime-pkr .AnyTime-yr-mil,.AnyTime-pkr .AnyTime-yr-cent,.AnyTime-pkr .AnyTime-yr-dec,.AnyTime-pkr .AnyTime-yr-yr,.AnyTime-pkr .AnyTime-yr-era{display:inline-block;vertical-align:top}.AnyTime-pkr .AnyTime-mil-btn,.AnyTime-pkr .AnyTime-cent-btn,.AnyTime-pkr .AnyTime-dec-btn,.AnyTime-pkr .AnyTime-yr-btn{width:2em}.AnyTime-pkr .AnyTime-era-btn{margin-left:1em}.AnyTime-pkr .AnyTime-off-selector{margin:1em 2em;position:absolute}.AnyTime-pkr .AnyTime-body-off-selector{margin:.8em 1em;overflow-x:hidden;overflow-y:auto;white-space:nowrap}.AnyTime-pkr .AnyTime-off-off-btn{text-align:left}.AnyTime-pkr .AnyTime-cur-btn{border:1px solid #333334;background-color:#C0C0C1;color:#FCFCFE;font-weight:700}.AnyTime-pkr .AnyTime-out-btn{background-color:#F0F0F1;border:1px solid #C0C0c1}.AnyTime-pkr .AnyTime-focus-btn{border:1px dashed #000}

/* modal */
.blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:1;padding:20px;box-sizing:border-box;background-color:#000;background-color:rgba(0,0,0,0.75);text-align:center}.blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em}.blocker.behind{background-color:transparent}.modal{display:none;vertical-align:middle;position:relative;z-index:2;max-width:500px;box-sizing:border-box;width:90%;background:#fff;padding:15px 30px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 0 10px #222;-moz-box-shadow:0 0 10px #222;-o-box-shadow:0 0 10px #222;-ms-box-shadow:0 0 10px #222;box-shadow:0 0 10px #222;text-align:left}.modal a.close-modal{position:absolute;top:-12.5px;right:-12.5px;display:block;width:30px;height:30px;text-indent:-9999px;background-size:contain;background-repeat:no-repeat;background-position:center center;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==')}.modal-spinner{display:none;position:fixed;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);padding:12px 16px;border-radius:5px;background-color:#111;height:20px}.modal-spinner>div{border-radius:100px;background-color:#fff;height:20px;width:2px;margin:0 1px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}.modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.modal-spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.modal-spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}@-webkit-keyframes sk-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.5)}20%{-webkit-transform:scaleY(1.0)}}@keyframes sk-stretchdelay{0%,40%,100%{transform:scaleY(0.5);-webkit-transform:scaleY(0.5)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}

.modal a.close-modal[class*="icon-"] {
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  color: var(--c-onSecondaryContainer, #fff);
  line-height: 1.20;
  text-align: center;
  text-decoration: none;
  text-indent: 0;
  background: var(--c-secondaryContainer, #676767);
  border: 2px solid var(--c-secondaryContainer, #676767);
  -webkit-border-radius:  26px;
  -moz-border-radius:     26px;
  -o-border-radius:       26px;
  -ms-border-radius:      26px;
  -moz-box-shadow:    1px 1px 5px var(--c-shadow-50, rgba(0,0,0,0.5));
  -webkit-box-shadow: 1px 1px 5px var(--c-shadow-50, rgba(0,0,0,0.5));
  box-shadow:         1px 1px 5px var(--c-shadow-50, rgba(0,0,0,0.5));
}

#help_list{
  list-style-type: none;
  padding-left: 20px;
  padding-top: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--c-outlineVariant, #eee);
  margin-top: 0;
}

#help_list li{
  padding-bottom: 20px;
}

#contact_support{
  list-style-type: none;
  padding-left: 20px;
  padding-top: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--c-outlineVariant, #eee);
  margin-top: 0;
}

#mobile_text_container{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#mobile_qr_code_container{
  padding-bottom: 20px;
  padding-right: 30px;
}
#mobile_info_container{
  display: flex;
  flex-direction: row;
}

div#monitor_control
{
    margin-top:-20px;
    margin-bottom: 10px;
}
div#monitor_control a.btn,
div#monitor_control a.btn-off
{
    margin-right:10px;
    min-width:100px;
    text-align:center;
}
form#admin_message_form
{
  padding-top: 24px;
}
form#admin_site_down_form
{
  padding-bottom: 24px;
}

div#monitor_control form
{
    margin-top:0px;
  padding: 10px;
}
div#monitor_control table
{
    font-size:12px;
    border:0px;
  width: auto;
}
div#monitor_control table td
{
    padding-right:10px;
    padding-left:0px;
    width:auto;
}
div#monitor_control form > input,
div#monitor_control table input
{
    padding:0px 0px 0px 1px;
    height:17px;
    width:80px;
    margin-bottom:5px;
}
div#monitor_control input.calib
{
  width:175px;
  margin-right:10px;
  margin-bottom:0;
  border-radius: 0px;
  height:24px;
  outline: none;
}
tr.sliders .data_component button,
div#monitor_control button,
div#monitor_control a#add_entry_cancel,
div#nav-add button
{
    line-height: 13px;
    vertical-align: bottom;
    margin-bottom: 1px;
}
div#monitor_control button {
  margin-bottom: 0;
  min-height: 27px;
}
div#nav-add form#admin_message_form button
{
  margin-top: 13px;
  margin-bottom: 0px;
}
div#nav-site-down form#admin_site_down_form button
{
  margin-top: 13px;
  margin-bottom: 0px;
}
#tooltip_templates,
.tooltip_templates
{ 
  display: none;
}
div#monitor_control td > div
{
    margin:auto;
    width:auto;
}
div#monitor_control td.control
{
    line-height:11px;
    position:relative;
    top:-2px;
    margin-bottom:0px;
}
div#monitor_control td.control a 
{
    margin-left:10px;
    margin-top:14px;
}
div.form_layout a.cancel_btn
{
  margin-left:0px;
  margin-right:10px;
}
div.form_layout #data_entry_start
{
  width:200px;
}
div.form_layout #add_data_form_0
{
  position:relative;
  padding-left: 0px !important;
}
div.form_layout #data_entry_start.btn-off
{
  margin-bottom:10px;
}
div.form_layout .data_component
{
  float:left;
  margin-right:10px;
}
div.form_layout label
{
  font-family: 'SF Pro Display', Helvetica, Arial;
  font-size: 12px;
}
div.form_layout .data_component input
{
  font-family: 'SF Pro Display', Helvetica, Arial;
  font-size: 14px;
  margin-bottom:10px;
  height:23px;
  border:1pt solid var(--c-outlineVariant, #a2a4a8);
  border-radius:          1px;
  -webkit-border-radius:  1px;
  -moz-border-radius:     1px;
  -o-border-radius:       1px;
  -ms-border-radius:      1px;
}
div.form_layout .data_component textarea
{
  font-family: 'SF Pro Display', Helvetica, Arial;
  font-size: 14px;
  margin-bottom:10px;
  border:1pt solid var(--c-outlineVariant, #a2a4a8);
  border-radius:          1px;
  -webkit-border-radius:  1px;
  -moz-border-radius:     1px;
  -o-border-radius:       1px;
  -ms-border-radius:      1px;
}
hr.thin
{
  margin: 5px 0;
}
dd p
{
  margin: 0px;
}
div.form_layout .data_component input.lab
{
  width:70px;
}
div.form_layout div.form-container
{
  min-width: 500px;
}
div.form_layout .data_component input.links
{
  width: 175px;
}
div.form_layout .data_component select
{
  width: 120px;
  line-height: 14px;
  height: 18px;
  font-size: 14px;
  margin-bottom: 10px;
}
div.form_layout .data_component textarea
{
  width: 500px;
}
input[name=disable_title],
input[name=disable_subtitle],
input[name=disable_headline]
{
  width: 500px;
}
h1.example_title
{
  margin: 0px 0px 8px 0px;
}
h2.example_subtitle
{
  margin: 0px 0px 8px 2em;
  padding-bottom: 0px;
  border-bottom: 0px;
}
h3.example_headline
{
  margin: 0px 0px 8px 5.5em;
}
div#pending-graph
{
  position:relative;
  visibility:hidden;
  padding-left:28px;
  margin-bottom:20px;
}
/** this needs to migrate to notice/bootstrap alerts **/
td.alreadyDismissed
{
  height: 30px;
  padding: 0 15px;/** 0 30 */
  text-align: left;
  vertical-align: middle;
  white-space: normal;
  text-decoration: line-through;
  color: var(--c-surfaceDim, #bbb);
  font-weight: lighter;
}
span.show_data_checkbox
{
  float:right;
  vertical-align:middle;
}
span.show_data_checkbox input
{
  display:inline-block;
  margin-bottom:3px;
  vertical-align:middle;
}
br.clr
{
  clear:both;
  height:1px;
  margin:-1px;
}
table.device-data
{
  width:580px;
  margin-bottom:10px;
}

table.devices-list th.serial,
table.devices-list td.serial,
table.devices-list th.link,
table.devices-list td.link
{
  text-align:left;
  width:151px;
}
div.notice-container
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -21px;
  margin-bottom: 4px;
}
div.notice-container > div.notice-box
{
  width: 100%;
}
div.notice-container > div.notice-box div.notice
{
  background: var(--c-tertiaryContainer, #a3a4a8);
  color: var(--c-onTertiaryContainer, #fffffd);
  padding: 24px;
  padding-left: 60px;
  vertical-align: middle;
  position: relative;
}
div.user-guide_form div.alert
{
  position: relative;
  top: -21px;
}
div.user-guide_form div.alert,
div.message_form div.alert
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 4px;
  padding: 24px;
  padding-left: 20px;
}
div.message_form div.alert.alert-white
{
  padding: 8px 8px 7px 20px;
  margin-bottom: 6px;
}
div.user-guide_form div.alert-dismissable,
div.message_form div.alert-dismissable
{
  padding-right: 24px;
}
div.message_form div.alert-white
{
  border-color:var(--c-outlineVariant, #e7e7e7);
}
div.message_form div.alert-white.alert-dismissible .close
{
  color:var(--c-surfaceDim, #ababab);
}
div.alert div.notice
{
  padding: 1px;
  padding-left: 32px;
  font-size: 16px;
  vertical-align: middle;
  line-height: 20px;
}
div.alert.alert-white div.notice
{
  font-size: 15px;
}
div.notice.text-white a,
div.notice.text-white button
{
  font-weight: 700;
  color: var(--c-surface, #fffffd);
  text-decoration:underline;
}
div.notice.text-white a:link, 
div.notice.text-white a:visited,
div.notice button
{
  color: var(--c-surface, #fffffd);
  font-weight: 700;
  text-decoration:underline;
}
div.notice a:hover
{
  color: var(--c-tertiary, #4f4f4f);
  font-weight: 700;
  text-decoration:underline;
}
div.message-row div.notice .big-icon
{
  top: 8px;
}
div.notice .big-icon
{
  text-decoration: none;
  font-size: 30px;
  position: absolute;
  top: 13px;
  left: 22px;
}
div.alert-white div.notice .big-icon
{
  font-size: 17px;
  top: 10px;
  left: 22px;
}
div.notice a.close:hover,
div.notice a.close:active,
div.notice .big-icon:hover,
div.notice .big-icon:active
{
  text-decoration:none;
}

div.notice.text-white a.download
{
  font-size: 18px;
  font-weight: 900;
}
div.notice a.close,
div.notice button.close
{
  cursor: pointer;
  font-size: 20px;
}
div.alert-white div.notice a.close,
div.alert-white div.notice button.close
{
  font-size: 15px;
}
div.alert-white.alert-dismissible .close
{
  padding: .25rem;
}
div.notice span.closer
{
  position: absolute;
  top: 8px;
  right: 8px;
}
input[name=mesg_start],
input[name=mesg_end]
{
  width: 175px;
}
input[name=disable_start],
input[name=disable_end]
{
  width: 243px;
}
div.form_layout select[name=mesg_type],
div.form_layout select[name=comp_choice]
{
  height: 25px;
}
h2#message_table_title
{
  padding-bottom: 0px;
  margin-bottom: 20px;
  border-bottom: 0px;
}
div#collapseMessages
{
  margin-bottom: 20px;
}

/*PFI utility classes*/
.pl-1 {
  padding-left: 2px;
}

.pr-1 {
  padding-right: 2px;
}

.display-inline {
  display: inline;
}

.inline-checkbox input,
.inline-checkbox label {
  width: auto;
  display: inline;
}

.ferm-title {
  font-size: 18px; 
  font-weight: lighter;
  display : inline-block;
}

/* ++++++++ Custom pfi drop-down ++++++++*/
.pfi-dropdown{
  position: relative;
  display: inline;
  float: right;
}

select::-ms-expand {
  display: none;
}

.pfi-dropdown:after {
  content: '>';
  font: 17px "Consolas", monospace;
  color: var(--c-tertiary, #888);
  transform: rotate(90deg);
  right: 11px;
  top: 20px;
  padding: 0 0 2px;
  position: absolute;
  pointer-events: none;
}

.pfi-dropdown select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  max-width: 210px;
  float: right;
  margin: 12px 0px;
  padding: 0px 15px;
  font-size: 16px;
  font-weight: lighter;
  line-height: 1.75;
  color: var(--c-tertiary, #888);
  background-color: var(--c-surface, #ffffff);
  background-image: none;
  border: 1.5px solid var(--c-outlineVariant, #dcdcdc);
  -ms-word-break: normal;
  word-break: normal;
  font-size:1.17em;
}

/* ------ Custom pfi drop-down ------ */

/* Added 12/25/19 - ELW - BMC-21 */
.border-left-primary {
  border-left: .25rem solid var(--c-statement, #4e73df) !important;  
}

.border-left-success {  
  border-left: .25rem solid var(--c-success, #1cc88a) !important;
}
  
.border-left-info {  
  border-left: .25rem solid var(--c-info, #36b9cc) !important;
}

.border-left-warning {
  border-left: .25rem solid var(--c-warning, #f6c23e) !important;
}
  
.text-gray-300 {  
  color: var(--c-surfaceVariant, #dddfeb) !important
}  

.text-gray-600 { 
  color: var(--c-onSurfaceVariant, #858796) !important;
}
  
.text-xs {
  font-size: .7rem;
}

.text-s {
  font-size: .85rem;
}

.progress-sm {
  height: .5rem;
}

/* End ELW add 12/25/19 */

.modal.m-large {
  max-width: 900px;
}

table.pfi-dataTable thead th {
  text-align:left;
}

table.pfi-dataTable td {
  height: 30px;/** 75 */
  padding: 0 10px;/** 0 30 */
  text-align: left;
}
.fermentation-modal-table {
  overflow-y: auto;
  height: 50vh;
}

@media only screen and (max-width: 800px) {
  #switchFermentationDropdown {
    display: none;
  }
}

#switcher {
  margin-top: -17px;
  display: flex;
  align-items: baseline;
  border-bottom: 1px solid var(--c-outlineVariant, #eee);
}

.float-right {
  margin-left: auto;
}

#switchFermentationDropdown > button {
  color: var(--c-tertiary, #555);
  background-color:var(--c-surface, #fff);
  border: 1px solid var(--c-outlineVariant, #dcdcdc);
  padding: 6px 10px;
  font-size: 16px;
  font-weight: lighter;
  cursor: pointer;
  text-transform: none;
  margin-right: 0px;
  margin-bottom: 23px;
}

#switchFermentationDropdown > button:hover {
  color: var(--c-onSurface, #fff);
  background-color: var(--c-surfaceContainerLow, #858796);
}

#switchFermentationDropdown > button:focus {
  outline: 0;
}

#switchFermentationDropdown > div.dropdown-menu > a.dropdown-item {
  color: var(--c-tertiary, #555);
  font-weight: lighter;
  margin-left: 0px;
  padding-left: 0px;
  margin-right: 0px;
  padding-right: 0px;
}

#switchFermentationDropdown > div.dropdown-menu > a.dropdown-item.current-ferm {
  background-color: var(--c-surfaceDim, rgba(132,190,72,0.1));
}

#switchFermentationDropdown > div.dropdown-menu > a.dropdown-item.active-ferm > i.fa-bullseye,
#switchFermentationDropdown > div.dropdown-menu > a.dropdown-item.active-ferm.current-ferm > i.fa-bullseye {
  font-size: 13px;
  color:var(--c-primary, rgb(132,190,72));
}

/* BMC 6 syles */

.collapsible-content.table-style{
  padding: 0px 0px !important;
}

.collapsible-content.table-style .collapsible-button{
  margin: 15px;
}

.table-style table {
  border: 0px;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: 1px solid var(--c-outlineVariant, #CCC) !important;
}

.collapsible-container {
  margin-bottom: 20px;
}

.fermentation-card {
  border : 1px solid var(--c-outlineVariant, #CCC);
  padding: 10px;
  display: inline-flex;
  flex-direction: column;
  margin-right: 10px;
  margin-top: 7px;
  margin-bottom: 7px;
}

.fermentation-card-title {
  padding-bottom: 10px;
}

.fermentation-card-title,.fermentation-card-content  {
  display: flex;
  align-items: center;
}

.fermentation-card-content {
  font-size: 12px;
  color: var(--c-secondary, gray);
}

.fermentation-card-title i.delete-fermentation,.fermentation-card-content a {
  flex: 1;
  text-align: right;
  margin-left: 10px
}

.fermentation-card-title p,.fermentation-card-content p  {
  margin:0;
}
.fermentation-card-title p{
  font-weight: bold;
  margin-left: 10px;
}

.collapsible-button:disabled{
  background-color: var(--c-surfaceContainerHighest, rgb(166,166,166));
  cursor: default;
}

.fermentation-empty-container {
  padding: 15px;
  border-style: dashed;
  border-width: 1px;
  border-color:var(--c-outlineVariant, #CCC);
  text-align: center;
  font-size: 20px;
  color: var(--c-secondary, gray);
  font-weight: bold;
}

p.fermentation-empty-subtext {
  color: var(--c-secondary, gray);
  font-size: 12px;
  margin-top: 5px;
}
.modal.m-large {
  max-width: 900px;
}

.collapsible-header{
  padding: 10px 20px;
  border: solid 1px var(--c-outlineVariant, #CCC);
  cursor: pointer;
  display: flex;
  align-items: center;
  background-color: var(--c-surfaceDim, rgba(0, 0, 0, 0.03));
}

.collapsible-header h3{
  margin: 0;
}

.collapsible-header i{
  padding: 10px;
  color: var(--c-primary, rgb(132,190,72));
  font-size: 24px;
  font-weight: 900;
  flex: 1;
  text-align: right;
}

#benchmarkCollapsible .collapsible-content,
.collapsible-content.table-style {
  padding: 20px 20px;
  border-bottom: solid 1px var(--c-outlineVariant, #CCC);
  border-left: solid 1px var(--c-outlineVariant, #CCC);
  border-right: solid 1px var(--c-outlineVariant, #CCC);
}

.collapsible-content .collapsible-button{
  margin-bottom: 0;
  margin-top: 20px;
}

.collapsible-container {
  margin-bottom: 20px;
}

.fermentation-card {
  border : 1px solid var(--c-outlineVariant, #CCC);
  padding: 10px;
  display: inline-flex;
  flex-direction: column;
  margin-right: 10px;
}

.fermentation-card-title {
  padding-bottom: 10px;
}

.fermentation-card-title,.fermentation-card-content  {
  display: flex;
  align-items: center;
}

.fermentation-card-content {
  font-size: 12px;
  color: var(--c-secondary, gray);
}

.fermentation-card-title i.delete-fermentation,.fermentation-card-content a {
  flex: 1;
  text-align: right;
  margin-left: 10px
}

.collapsible-button:disabled{
  background-color: var(--c-surfaceContainerHighest, rgb(166,166,166));
  cursor: default;
}

.loader{
  display: none;
}

.loader img{
  width: 70px;
  height: 45px;
}

.fermentation-empty-container {
  border-width: 1px;
  padding: 15px;
  border-style: dashed;
  border-color:var(--c-outlineVariant, #CCC);
  text-align: center;
  font-size: 20px;
  color: var(--c-secondary, gray);
  font-weight: bold;
}

p.fermentation-empty-subtext {
  color: var(--c-secondary, gray);
  font-size: 14px;
  margin-top: 5px;
}

.row_selected{
  font-weight: bolder;
}

.hidden-container {
  display: none;
}
#ph-tab {
  text-align: right;
}

.benchmark-setter {
  cursor: pointer;
  border-color: var(--c-secondary, grey);
  color: var(--c-primary, rgb(132,190,72));
  text-decoration: none;
}

.active-benchmark {
  cursor : default;
  color: var(--c-tertiary, #555) !important;
  text-decoration: none !important;
}

.active-benchmark-card{
  border-color: var(--c-primary, rgb(132,190,72));
}

.no-padding{
  padding: 0px 0px;
}

input[type=checkbox].fermentation-selector-check {
  visibility: hidden;
  position: absolute;
  width: 13px;
  height: 13px;
}

/* Center sorting arrows over checkbox column, the value
   for background position is related to the width, height,
   and left margin of label.input-background that follows */
#fermentationsTable_wrapper table.dataTable thead tr th:first-child {
  background-position: 13px;
}

label.input-background {
  text-align: center;
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid var(--c-outline, gray);
  line-height: 9px;
  top: 16px;
  margin-left: 10px;
}

input[type=checkbox].fermentation-selector-check:checked + label.input-background {
  background:var(--c-surface, #fff);
}

input[type="checkbox"].fermentation-selector-check:checked  + label.input-background::after{
  content: "\f00c"; 
}

input[type="checkbox"].fermentation-selector-check + label.input-background::after{
  font-family: 'FontAwesome';
  font-size: 12px;
} 

table.pfi-dataTable td.td-fermentation-table-m {
  position: relative;
/*  vertical-align: top !important; */
}

table.pfi-dataTable td.td-fermentation-table-m.dt-center {
  text-align: center;
}

.btn i{
  padding-right: 6px;
}

.tab-headers {
  margin-top: 0;
  padding-top: 10px;
  padding-bottom : 10px;
}

/* Customized pills */
.tab-button {
  border-radius: 0 !important;
  color:var(--c-primary, #82ba41) !important;
  background-color: transparent !important;
}

.tab-button.active {
  background-color: transparent !important;
  color: var(--c-tertiary, #555) !important;
}
a.nav-link.tab-button:hover {
  color: var(--c-onPrimaryFixedVariant, rgb(166,166,166)) !important;
}

a.nav-link.tab-button.active:hover {
  color: var(--c-tertiary, #555) !important;
  cursor: default;
}

.tab-container {
  border-radius: 0;
}
/*END BMC 6 styles*/
/*
** this might work better in scss/bootstrap-overrides.scss
*/
.card 
{
  border-radius:0;
}
div.form_layout .data_component input {
  padding-top: 0px;
  padding-bottom: 0px;
}

#calibrate_form .calib {
  border:1pt solid var(--c-outlineVariant, #a2a4a8);
}

#monitor_control .btn, .btn-off {
  margin-bottom: 13px;
}

div#graph {
  margin-top: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: fit-content;
}

/* modebar aling with the graph's title */
div.modebar {
  margin-top: 18px !important;
  margin-right: 1% !important;
}

/* Tooltip for toolbar customized */
a.modebar-btn::after {
  margin-top: -48px !important;
  background: inherit !important;
  color: var(--c-secondary, rgb(166,166,166)) !important;
  left: -88px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 200px;
  text-align: center;
}

a.modebar-btn::before {
/*  border-bottom-color: rgb(166,166,166)!important;  */
  display: none !important;
}

.modebar-group {
  padding-left: 13px !important;
}

.card-body.no-top-padding {
  padding-top: 0px;
  padding-left: 0px;
}

.plot {
  top: -10px;
}

.legendtoggle {  /* this and its hover are to make legends look clickable */
  fill: var(--c-surfaceContainerLow, lightgray) !important;
  fill-opacity: 23% !important;
}

.legendtoggle:hover {
  stroke-width: 1px;
  stroke: var(--c-secondary, gray);
}

g.layers { /*Used to center the legend reference. */
  transform: translateY(0.5%);
}

g.legendpoints { /* Vertically center legend dots */
  transform: translateY(-0.5%);
}

/* Hides the notifier note */
.notifier-note {
  display: none !important;
}

#tabsContainer .card-header {
  padding-left: 4px;
}

/* BMC-160 Styles */

line.startTimeIndicator {
  stroke: var(--c-graph-bold, #666666);
  stroke-width: 1;
}

circle.startTimeIndicator {
  fill:  var(--c-graph-bold, #666666);
  stroke: var(--c-graph-bold, #666666);
}

/* Obsolete
rect.startTimeIndicator {
  fill: lightblue;
  fill-opacity: 50%;
  stroke: lightblue;
  stroke-opacity: 50%;
} */

p.graph-title {
  margin: 0;
}

p.graph-title select {
  color: var(--c-tertiary, #555);
}

div.ferm-graph-wrapper {
  width: 480px;
  display: inline-block;
}

.status-selector {
  float: right;
  border-color: var(--c-outlineVariant, #ddd);
  font-size: 80%;
  margin-right: 10px;
}

.compare-status-selector {
  margin-left: 20px;
  border-color: var(--c-outlineVariant, #ddd);
  font-size: 80%;
}

.series-selector {
  float: right;
  border-color: var(--c-outlineVariant, #ddd);
  font-size: 80%;
}
.series-selector:focus {
  outline: none;
}

.gravity-selector {
  border-color: var(--c-outlineVariant, #ddd);
  font-size: 80%;
  margin-right: 0.6em;
  float: right;
}

.gravity-selector:focus {
  outline: none;
}

g.p_secondary path
{
  stroke: var(--c-graph-secondary, #acacac);
  stroke-width: 2;
}

img.tooltip-image {
  position: relative;
  margin-left: 0.5em;
}

img.resize-button {
  margin: 0 3px;
  height: 60%;
}

.resize-seperator {
  position: relative;
  margin-left: 0.25em;
  margin-right: 0.25em;
  height: 20px;
  display: inline-block;
  border-right: 2px solid var(--c-surface, white);
}

.notes-button {
  color: var(--c-secondary, #aaaaaa);
}

a.notes-button::before{
  position: absolute;
}

.graph-controls {
  margin-top: 16px;
  margin-bottom: 24px;
}

.graph-controls p {
  margin-bottom: 0px;
}

.graph-controls h4 {
  font-weight: 500;
  margin-bottom: 10px;
}

.graph-controls label {
  font-weight: 300;
}

.ferm-graph-start-time-control {
  width: 300px;
  margin-left: 10px;
}
.ferm-graph-start-time-control label {
  display: inline-flex;
}

.ferm-graph-view-time-control {
  width: 200px;
  margin-left: 10px;
}
.ferm-graph-view-time-control label {
  display: inline-flex;
}

.ferm-graph-qc-status {
  width: 325px;
  margin-left: 10px;
}
.ferm-graph-qc-status label {
  display: inline-flex;
}

.ferm-graph-benchmark-control {
  width: 250px;
}
.ferm-graph-benchmark-control label {
  display: inline-flex;
}
.ferm-graph-benchmark-control-disabled {
  width: 250px;
  display: none;
}
.ferm-graph-density-temp-control {
  width: 200px;
}
.ferm-graph-density-temp-control label {
  display: inline-flex;
}
.ferm-graph-density-temp-control-disabled {
  width: 200px;
  display: none;
}
ul.graph-notes {
  padding-left: 10px;
  padding-right: 1px;
  padding-top: 1px;
  padding-bottom: 1px;
  margin-top: 1px;
  margin-bottom: 1px;
}

ul.graph-notes > li {
  margin-bottom: 4px;
}

.pfi-radio {
  display: block;
  position: relative;
  padding-left: 17px;
  margin-bottom: 8px;
  cursor: pointer;
  margin-right: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pfi-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.pfi-checkbox {
  display: block;
  position: relative;
  padding-left: 19px;
  margin-bottom: 8px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pfi-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.pfi-checkmark {
  position: absolute;
  left: 0px;
  font-size: 12px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.pfi-checkmark:before {
  font: var(--fa-font-regular);
  content: '\f111';
}

.pfi-radio input:checked ~ .pfi-checkmark:before {
  content: '\f192';
}

.pfi-cbox {
  position: absolute;
  top: 1px;
  left: 0px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 500;
  font-size: 14px;
}

.pfi-cbox:before {
  content: '\f0c8';
}

.pfi-checkbox input:checked ~ .pfi-cbox:before {
  content: '\f14a';
}

/** this will likley be replaced by notice/bootstrap alerts **/
table#msg-table
{
  margin-bottom:30px;
}
div.message_form h2
{
  padding-top:    10px;
  padding-bottom: 0px;
  border-bottom:  0px;
}
table#msg-table td:not([class])
{
  height: 75px;
  padding: 0 15px;/** 0 30 */
  text-align: left;
  vertical-align: middle;
  white-space: normal;
}
/*
** slowing down alert fade outs.
*/
.alert-white.alert-dismissible
{
  transition-duration: 1.15s;
}
div.one-by-one
{
  width: 1px !important;
  height: 1px !important;
  line-height: 1px !important;
  overflow: hidden;
}
/*
** animation of message admin delete of rows.
*/
table#msg-table tbody>tr.temp>td
{
  padding: 0.75rem;
  border-bottom: 1px;
  line-height: 1.15em; /* 19.3167px */
  height: auto;
  transition: all 1.15s;
}
table#msg-table tbody>tr.temp.shrunk>td
{
  padding: 0rem;
  line-height: 0em;
  height: 0px;
  border-bottom: 0px;
  transition: all 1.15s;
}
table#msg-table tbody>tr.temp>td>div.slide-wrap
{
  line-height: 1.15em; /* 19.3167px */
  height: auto;
  overflow: hidden;
  transition: all 1.15s;
}
table#msg-table tbody>tr.temp.shrunk>td>div.slide-wrap
{
  border: 0px;
  height: 0px;
  line-height: 0em;
  transition: all 1.15s;
}
.dropdown-toggle-nocaret::after {
  display: none;
}
/* .pfi-benchmark-slider{
  width: 45%;
  border-color: transparent;
  border-radius: 0px;
  height: 10px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 2%
} */

/* .ui-slider.ui-slider-handle{
  width: 0px !important;
}  */

/* .ui-slider-handle.ui-corner-all.ui-state-default {
  border-radius: 50% !important;
  outline: none;
  border: none;
  background: no-repeat center url(/images/green-triangle-lightgrayborder.png);
} */

/* .ui-state-active:active{
  background-color:transparent !important;
  border-color:transparent !important;
  width: 0px !important;
}

.ui-state-active:hover{
  background-color:transparent !important;
  border-color:transparent !important;
  width: 0px !important;
} */

/* .ui-slider-range.ui-corner-all.ui-widget-header.ui-slider-range-min{ */
  /* background-color: rgb(132, 190, 72);
  top: 10%;
  height: 92%; */
/* } */

/* .pfi-benchmark-slider.ui-slider.ui-corner-all.ui-slider-horizontal.ui-widget.ui-widget-content{
  top: 10%;
  height: 15px;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 8px;
  background-color:  rgb(241,241,241) !important;
  border-color: transparent;
  border-color:transparent;
  border-radius: 0px;
} */

/* .ui-slider-handle.ui-corner-all.ui-state-default{
  margin-top: 2px;
} */


/* .ui-slider-handle.ui-corner-all:focus{
  background-color:transparent !important;
  border-color:transparent !important;
  width: 0px !important;
} */

/* .pfi-slider .ui-slider-handle-old {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 24px solid #84be48;
  border-bottom: none;
  outline: none;
  background-color: transparent;
  position: absolute;
  margin-top: initial;
  z-index: 1;
  margin-top: -2px;
  margin-left: -10px;
} */

.ui-slider-handle.ui-corner-all.ui-state-default {
  width: 33px;
  height: 29px;
  border: none;
  background: no-repeat center url(/images/green-triangle-lightgrayborder.png?v=s1);
  position: absolute;
  margin-top: initial;
  z-index: 3;
  margin-top: -4px;
  margin-left: -10px;
}

.pfi-slider .ui-slider-handle:hover {
  background: no-repeat center url(/images/midgray-triangle-lightgrayborder-hover.png?v=s1);
}

.pfi-slider .ui-slider-range {
  background: var(--c-primary, #84be48);
}

/************************************MODAL***************************************/
/* The modal type colors */
.pfi-success{
  color: var(--c-success, rgb(132,190,72));
}
.pfi-error{
  color: var(--c-error, rgb(190,81,75));
}
.pfi-warning{
  color: var(--c-warning, rgb(228, 179, 88));
}
.pfi-default{
  color: var(--c-secondary, rgb(112, 119, 114));
}
/* The Modal (background) */
.modal-pfi {
  display: none; /* Hidden by default */
  position: absolute; /* Stay in place */
  z-index: 3; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: var(--c-scrim, rgb(0,0,0)); /* Fallback color */
  background-color: var(--c-shadow-50, rgba(0,0,0,0.4)); /* Black w/ opacity */
}

/* Modal Header */
.modal-pfi-header {
  padding: 9px;
  background-color: var(--c-surface, #f7f7f7);
  color: var(--c-onSurfaceVariant, #999999);
  border-radius: 7px;
}
/* Modal Header h2*/
.modal-pfi-header>h2 {
  font-size: 17px;
  margin-top: 10px;
  padding-bottom: 0;
  border:none;
  font-weight: bold;
}

/* Modal Body */
.modal-pfi-body {
  padding: 2px 16px;
}

/* Modal Body */
.modal-pfi-body > p {
  text-align: center;
}

/* Modal Footer */
.modal-pfi-footer {
  padding: 7px;
  background-color: var(--c-surface, #f3f3f3);
  color: var(--c-onSurface, white);
  border-radius: 5px;
}
/* Modal Footer h3 */
.modal-pfi-footer > h3 {
  margin: 3px;
  background-color: var(--c-surface, #f3f3f3);
  /*color: white;*/
}
/* Modal Footer button */
.modal-pfi-footer > button {
  margin: 0;
}

/* Modal Content */
.modal-pfi-content {
  position: relative;
  background-color: var(--c-surface, #fefefe);
  margin: 5% auto;
  /*margin-top: 10%;*/
  padding: 0;
  border: 1px solid var(--c-outlineVariant, #888);
  width: 400px;
  border-radius: 13px;
  box-shadow: 0 4px 8px 0 var(--c-shadow-50, rgba(0,0,0,0.2)),0 6px 20px 0 var(--c-shadow-50, rgba(0,0,0,0.19));
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}

/* The Close Button */
.close {
  color: var(--c-onSurfaceVariant, #aaa);
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: var(--c-primary, black);
  text-decoration: none;
  cursor: pointer;
}
/* hidden slidebar elements */

.hidden-slider{
  display: none;
}

.fa-circle.label-icon{
  font-size: 60%;
  margin-top: 0.5%;
}

.fa-horizontal-rule.label-icon{
  font-size: 90% !important;
}

.trace-label{
  background-color: var(--c-surface, #fafafa);
  display: inline-flex;
  flex-direction: column;
  margin-right: 2px;
}

.trace-label:hover{
  cursor: pointer;
}
.apply-benchmark{
    font-size: 11px;
    margin-top: 0.71rem;
}
.reset-action{
    background: var(--c-surface, white);
    color: var(--c-primary, rgb(132,190,72));
    margin-left: 0px !important;
}
.reset-action:hover:not([disabled]){
    background: var(--c-surface, white);
    border-color: var(--c-outlineVariant, #ccc);
    color: var(--c-onSurfaceVariant, #ccc);
}
.reset-action:hover:disabled{
    background: var(--c-surface, white);
    border-color: var(--c-outlineVariant, #ccc);
    color: var(--c-onSurfaceVariant, #ccc);
}
.reset-action:disabled{
    background: var(--c-surface, white);
    border-color: var(--c-outlineVariant, #ccc);
    color: var(--c-onSurfaceVariant, #ccc);
    /*cursor: not-allowed;*/
}

  .container-custom{
    width: auto;
    margin-top: -12px;
    margin-left: 2.6rem;
  }
  @media(min-width: 960px)  {
    .container-custom{
      max-width: 650px;
    }
  }


  .svg-container{
    z-index: 1;
  }
  
  .trace-label-container{
    z-index: 2;
    margin-top: 0px !important;
    /*position: absolute;*/
    display: inline-flex;
    /*margin-left: 21%;*/
    display: block;
    /*width: 75%;*/
  }

  .disabled-label{
    opacity: 0.7;
  }

  .graph-title-container{
    width: 180px !important;
    border-color: var(--c-surface, white);   
    z-index: 2;
    position: absolute;
    display: inline-flex;
  }

  .trace-label{
    width: max-content !important;
  }

  .graph-title-comparison{
    z-index: 2;
    /*position: absolute;*/
    display: inline-flex;
    width: 110px !important;
    border-color: var(--c-surface, white);
    font-size: 17px;
    padding-right: 0 !important;
    margin-left: 0% !important;
    /*margin-right: 0% !important;*/
    margin-left: 1% !important;
    /*margin-top: 1.3% !important;*/
    
  }

  .graph-header{
    z-index: 2;
    position: absolute;
    margin-top: 2%;
    width: 72% !important
  }

 /* On fullscreen graph header */
@media screen and (max-width: 1200px) {
  #trace-label-container{
    /*margin-left: 10%;*/
    /*margin-top: 0.5%;*/
  }
  #graph-header{
    width: 50% !important;
    /*margin-top: 0.5% !important;*/

  }
  #graph-title{
    /*margin-top:1.1%;*/
  }
}

.arrow-down-background {
  width: 0; 
  height: 0; 
  border-left: 19px solid transparent;
  border-right: 19px solid transparent;
  border-top: 30px solid var(--c-surface, white);
  position: absolute;
  margin-top: 0px;
  z-index: 0;
  margin-left: -14px;

}

.arrow-down-handler {
  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 24px solid var(--c-primary, rgb(132,190,72));
  position: absolute;
  margin-top: initial;
  z-index: 1;
  margin-top: -3px;
  margin-left: -10px;

}

.pfi-slider-value{
  z-index: 3;
  color: var(--c-primary, rgb(132,190,72));
  font-size: 14px;
  font-weight: 600;
  width: 40px;
  /*background: red;*/
  /*text-align: center;*/
  /*margin-left: -29px;*/
}

.pfi-axis-label-slider {
  margin-right: 2%;
  margin-top: 4%;
  display: inline-block;
  vertical-align: middle;
}
.alert_type_label{
  font-size: 10px;
  color: var(--c-secondary, darkgray);
  margin-right: 1.0rem;
  margin-top: 0.01rem;
  float: right;
  text-transform: uppercase;
}
.alert-type-dropdown button{
  background-color: transparent;
  color: var(--c-primary, rgb(132,190,72));
  font-size: 10px;
  text-transform: uppercase;
  margin: 0 1.1rem 0 0;
  float: right;
  padding: 0px;
}
.alert-type-dropdown button:hover{
  background-color: transparent;
  color: var(--c-primary, rgb(132,190,72));
}
.alert-type-dropdown button:focus{
  outline: -webkit-focus-ring-color auto 0px !important;
}
.alert-type-dropdown .dropdown-menu{
  /*background-color: transparent;*/
  color: var(--c-primary, rgb(132,190,72));
  font-size: 10px;
  text-transform: uppercase;
  min-width: 0px;
  padding: 0px;
  border-radius: 0px;
}
.alert-type-dropdown .dropdown-menu .dropdown-item{
  display: block;
   width: auto;
  padding: 0.25rem 0.5rem;
  clear: both;
  font-weight: 400;
  color: var(--c-onSurface, #212529);
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
.alert-type-dropdown .dropdown-menu .dropdown-item:hover{
  background-color: var(--c-shadow-50, rgba(0, 0, 0, 0.03));
  cursor: default;
}
/*.nav-link-custom {*/
/*  !*padding-left: 1rem;*!*/
/*  padding-right: 0.8rem;*/

/*}*/
.alert_type{
  /*margin-right: 1.0rem;*/
  max-width: 69px;
  border:0px;
  outline:0px;
  float: right;
  background-color: transparent;
  color: var(--c-primary, rgb(132,190,72));
  font-size: 10px;
  text-transform: uppercase;
  margin-top: 0.01rem;
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}



.arrow-down-handler:active{
  border-top: 24px solid var(--c-primary, rgb(132,190,72));
}

.graph-tabs-container .card-header {
  padding: 5px;
}
a.disabled:not(.scm_next)
{
  pointer-events: none;
  cursor: default;
  color: var(--c-onSurfaceVariant, #fff);
  background-color: var(--c-surfaceVariant, rgb(166,166,166));
}

input:read-only.brand_info_input{
  color: var(--c-onSurfaceVariant, #fff);
  background-color: var(--c-surfaceVariant, rgb(166, 166, 166));
  border-bottom-color: var(--c-outlineVariant, rgba(118, 118, 118, 0.1));
  border-left-color: var(--c-outlineVariant, rgba(118, 118, 118, 0.1));
  border-right-color: var(--c-outlineVariant, rgba(118, 118, 118, 0.1));
  border-top-color: var(--c-outlineVariant, rgba(118, 118, 118, 0.1));
}

.disabled-custom{
  pointer-events: none;
  cursor: default;
  color: var(--c-onSurfaceVariant, rgb(166,166,166)) !important;
}
button, .btn.strong, .btn, .btn-off {
  font-weight: 700
}

div.graph-tooltip {
  position: absolute;
  margin: 0 5px 0 5px;
  display: inline-block;
  height: 20px;
  padding: 0 5px 3px 3px;
  font-size: 10px;
  line-height: 20px;
  pointer-events: none;
}

div.graph-tooltip.primary {
  background-color: var(--c-primary, rgb(132,190,72));
  color: var(--c-onPrimary, white);
}

div.graph-tooltip.secondary {
  background-color: var(--c-secondaryContainer, #ACACAC);
  color: var(--c-onSecondaryContainer, white);
}

div.graph-tooltip.primary:before {
  position: absolute;
  content: "";
  left: -7px;
  width: 1px;
  height: 0px;
  border-right: 6px solid var(--c-primary, rgb(132,190,72));
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

div.graph-tooltip.secondary:before {
  position: absolute;
  content: "";
  left: -7px;
  width: 1px;
  height: 0px;
  border-right: 6px solid var(--c-outlineVariant, #ACACAC);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
/*
** [BMC-228] Improvements to Smart Clean Manager
*/
div.modal.cleaning>p>span.hid:not(.clean),
div.modal.sanitizing>p>span.hid:not(.sanitizing)
{
  height:       0px;
  line-height:  0em;
  display:      none;
}
/*
** SCM Flex upgrades
*/
div#scm_flexbox
{
  display:          flex;
  flex-direction:   column;
  justify-content:  flex-start;
  transition:       all 1.15s ease-out;
}
div#scm_flexbox .section
{
  transition: all 1.15s ease-out;
  height:     auto;
  flex:       1;
}
div#scm_flexbox .section.collapsed
{
  overflow:       hidden;
  flex:           0;
  height:         0px;
  padding-top:    0px;
  padding-bottom: 0px;
  border-top:     0px;
  border-bottom:  0px;
  margin-top:     0px;
  margin-bottom:  0px;
}
div#scm_flexbox #scm_status,
div#scm_flexbox #scm_progress,
div#scm_flexbox #scm_dev_control,
div#scm_flexbox #scm_gov_status
{
  flex-grow: 0;
}
section.scm_action
{
  border:   1px solid var(--c-outlineVariant, #eee);
  padding:  0 15px;
}
/*
**  Re-instated specific class 'readystate' to div#scm_feedback, to roll
**  back unapproved CSS animation ui changes.
*/
a#sc_pause:not(.paused)>span.resume,
a#sc_pause.paused>span.pause,
div#scm_feedback.readystate,
div#scm_start_cont.hidden,
div#scm_start_cont a.scm_next.hidden,
a#instructions.hidden,
#scm_step_list li.hidden
{
  height:       0px;
  width:        0px;
  padding:      0px;
  border:       0px;
  margin:       0px;
  line-height:  0em;
  display:      none;
  visibility:   hidden;
}
/*
**  Since we're not using css animations to hide the CTA icon away, we need
**  to ensure it is hidden durring page load.
*/
i#scm_cta_icon.hidden
{
  display: none;
}
div#scm_feedback
{
  margin:           40px;
  padding:          20px;
  background-color: var(--c-surfaceContainerLow, #eee);
  display:          flex;
}
div#scm_feedback span.scm_tmp
{
  color:      var(--c-secondary, #666);
  font-size:  14px;
}
div#scm_feedback div.bulb
{
  flex:0 0 6%;
}
div#scm_feedback div.feedback
{
  flex:1;
}
div#scm_feedback div.bulb i
{
  color: var(--c-onSurfaceVariant, #ccc);
  font-size:48px;
}
div#scm_start_cont
{
  margin:         40px 0;
  text-transform: uppercase;
  text-align:     left;
}
button.scm_next
{
  margin-bottom: 0px;
}
#scm_step_list 
{
  text-transform: uppercase;
  list-style:     none;
  margin:         0px;
  padding:        0px;
}
#scm_step_list li
{
  padding:      5px;
  font-size:    12px;
}
#scm_step_list li a
{
  display:        block;
  color:          var(--c-secondary, rgb(166,166,166));
  cursor:         default;
  vertical-align: middle;
}
#scm_step_list li.reachable a
{
  color:        var(--c-primary, rgb(132,190,72));
  font-weight:  normal;
  cursor:       pointer;
}
#scm_header
{
  font-weight:    700;
  font-size:      28px;
  color:          var(--c-onSurfaceVariant, #ccc);
  text-transform: uppercase;
  margin-top:     17px;
  margin-bottom:  17px;
}
#scm_status,
#scm_progress,
#scm_gov_status
{
  padding:    8px 5px 7px 0px;
  margin-top: 0;
}
#scm_status,
#scm_progress
{
  text-transform:   uppercase;
  text-align:       left;
  text-decoration:  none;
  font-size:        14px;
  font-weight:      bold;
  padding-left:     8px;
}
#scm_status
{
  color:            var(--c-secondary, rgb(156,156,158));
  background-color: var(--c-surfaceContainerLow, rgb(241,241,241));
  margin-bottom:    0;
  margin-top:       3px;
  display:          flex;
}
#scm_progress
{
  background-color: var(--c-surfaceContainerLow, rgb(166,166,166));
  color:            var(--c-onSurfaceVariant, #fff);
  display:          flex;
}
#scm_dev_control
{
  border:         1px solid var(--c-outlineVariant, #eee);
  padding:        0 15px;
  margin-bottom:  13px;
  display:        block;
  transition:     all 1.15s;
}
#scm_gov_status
{
  display:        flex;
  text-align:     left;
  margin-left:    auto;
  flex-wrap:      wrap;
  flex-direction: row-reverse;
}
#scm_gov_status.hidden-container
{
  display:  none;
}
#scm_gov_status #scm_ph,
#scm_gov_status #scm_temp
{
  margin-right: 0;
  padding-left: 9px;
  order:        1;
}
#scm_gov_status #scm_ph
{
  order: 2;
}
#scm_gov_status .scm_timesavings
{
  padding-left: 0px;
  order:        3;
  flex-grow:    3;
}
/*
**  Re-instated specific class 'hide_for_upgrade' to #scm_dev_control, to
**  roll back unapproved CSS animation ui changes.
*/
#scm_dev_control.hide_for_upgrade
{
  height:       0px;
  line-height:  0em;
  display:      none;
  visibility:   hidden;
}
#scm_dev_control p
{
  margin-top:   14px;
  font-weight:  300;
}
#scm_dev_control a
{
  margin-right:   10px;
  width:          100px;
  text-align:     center;
  margin-bottom:  22px;
}
#scm_dev_control a.paused
{
  width:  105px;
}
a#instructions
{
  text-decoration:none;
  cursor:pointer;
  font-size:14px;
}
a#instructions span
{
  font-size:12px;
  position:relative;
  top:-1px;
}
/*
**  Since we're not using css animations to put the link away, we need to
**  ensure it's not clickable.
*/
a.scm_next.disabled
{
  pointer-events: none;
  cursor: default;
  color: var(--c-onSurfaceVariant, rgb(166,166,166));
}

/* BMC-716 */
.display-flex {
  display: flex;
}

.font-smaller {
  font-size: 70%;
}

.sensor-button {
  margin-right:20px;
  text-decoration:none;
  text-align:right;
}

.alert-type-label{
  font-size:10px;
  color: var(--c-secondary, darkgray);
  text-transform:uppercase;
  margin-right:20px;
  text-align:right;
}

/* Select2 style overrides to match PFI styling */
.select2-container .select2-selection--single {
  height: 23px !important;
}
.select2-container .select2-selection--multiple {
  min-height: 23px !important;
}

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  font-weight: 100 !important;
}

.select2-container--default .select2-selection--multiple {
  padding-bottom: 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 21px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 21px !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-radius: 0 !important;
}

.select2-results {
  font-weight: 100 !important;
  font-size: 16px !important;
}

.select2-search__field {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  font-weight: 100 !important;
  font-size: 16px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin-bottom: 2px !important;
  margin-top: 2px !important;
}

h3.section {
  border-bottom: 1px solid var(--c-outlineVariant, #eee);
  width: 100%;
}

.row.brow {
  margin-right: -15px;
  margin-left: -15px;
  display: flex;
}

.row.brow div[class*='col'] {
  display: flex;
}

.flex-vertical-center {
  display: flex;
  align-items: center;
}

/* style-form.scss - Form styling */
.pfi-form {
  margin-left: -5px;
  margin-right: -5px;
}

/* Overrides default form input style from style-core */
.pfi-form form input,
.pfi-form form select {
  margin-bottom: 0px;
}

.pfi-form label,
.pfi-form input,
.pfi-form select,
.pfi-form .form-value {
  font-weight: 100;
}

.pfi-form .col-12, .pfi-form .col-11, .pfi-form .col-10,
.pfi-form .col-9, .pfi-form .col-8, .pfi-form .col-7,
.pfi-form .col-6, .pfi-form .col-5, .pfi-form .col-4,
.pfi-form .col-3, .pfi-form .col-2, .pfi-form .col-1 .pfi-form .col {
  padding-left: 12px;
  padding-right: 12px;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group-inline {
  display: inline-flex;
  margin-bottom: 0;
}

.form-group-inline label {
  margin-bottom: 0;
  margin-right: 0.5em;
}

.form-inline .form-group {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row wrap;
  align-items: center;
  margin-bottom: 0;
}

.form-check-inline label {
  margin-bottom: 0;
/*  margin-left: 0.5em; */
}

.d-none {
  display: none !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.xsmb-2 {
  margin-bottom: 0.5em;
}

.xs-pl-0 {
  padding-left: 0px !important;
}

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

.sm-only {
  display: none;
}

.btn-sm {
  font-size: 70%;
}

.collapsible-content {
  padding: 20px 20px;
  border-bottom: solid 1px var(--c-outlineVariant, #ccc);
  border-left: solid 1px var(--c-outlineVariant, #ccc);
  border-right: solid 1px var(--c-outlineVariant, #ccc);
}

.mb0 {
  margin-bottom: 0;
}

.fermentation-kpi-item {
  font-size: 13px;
  font-weight: normal;
  margin-bottom: 1em;
}

.fermentation-kpi-item .kpi-name {
  font-weight: lighter;
  margin-bottom: 1em;
}

.fermentation-kpi-item .kpi-target-difference {
  display: inline-block;
  margin-left: 8px;
}

.fermentation-kpi-item .kpi-pill {
  color: var(--c-inversePrimary, white);
  padding: 4px 8px;
  width: 60px;
  border-radius: 12px;
  display: inline-block;
  text-align: center;
}

.fermentation-kpi-item .kpi-pill.kpi-pill-critical {
  background-color: var(--c-error, #A91313);
}

.fermentation-kpi-item .kpi-pill.kpi-pill-warning {
  background-color: var(--c-warning, #ffda35);
}

.fermentation-kpi-item .kpi-pill.kpi-pill-in-target {
  background-color: var(--c-success, #82ba41);
}

a.btn {
  background: var(--c-primary, black) !important;
  color: var(--c-onPrimary, white) !important;
}

.card-header {
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
}

.card.manual-reading-cta {
  max-width: 733px;
  border-radius: 8px;
  border: 1px solid var(--Brand-Maturity, #4F63E6);
  background: rgba(79, 99, 230, 0.05);
  margin-top: 12px;
  margin-bottom: 12px;
}

.manual-reading-cta .card-body {
  display: flex;
  padding: 24px 32px;
  align-items: center;
  gap: 48px;
}

.manual-reading-cta-text {
  flex: 1;
}

.manual-reading-cta-title {
  color: #1E1E1E;
  font-family: "SF Pro Display";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.36px;
  leading-trim: both;
  text-edge: cap;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.manual-reading-cta-badge,
.manual-reading-cta-badge:hover {
  display: flex;
  padding: 2px 6px 2px 2px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  background: rgba(79, 99, 230, 0.10);
  text-decoration: none;
}

.manual-reading-cta-brand-name {
  color: #1E1E1E;
  leading-trim: both;
  text-edge: cap;
  font-family: "SF Pro Display";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.36px;
  text-decoration: none;
}

.manual-reading-cta-icon {
  width: 10px;
  height: 10px;
  fill: #4F63E6;
}

.manual-reading-cta-subtitle {
  color: #3C3C3C;
  leading-trim: both;
  text-edge: cap;
  font-family: "SF Pro Display";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.42px;
}

.manual-reading-cta-action {
  flex-shrink: 0;
}

.brand-maturity-color {
  color: var(--c-brand-maturity, #4F63E6);
}

.brand-maturity-badge-wrapper {
  position: relative;
  display: inline-flex;
  margin-right: 6px;
  vertical-align: middle;
}

.brand-maturity-badge-wrapper:hover .brand-maturity-tooltip {
  display: block;
}

.brand-maturity-tooltip {
  display: none;
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(calc(-50% - 1px));
  width: 284px;
  background: #fff;
  border: 1px solid #ADADAD;
  border-radius: 6px;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.20));
  padding: 12px 12px;
  z-index: 9999;
  box-sizing: border-box;
  white-space: normal;
}

.brand-maturity-tooltip::before,
.brand-maturity-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: solid transparent;
}

.brand-maturity-tooltip::after {
  right: 100%;
  border-width: 9px;
  border-right-color: #ADADAD;
}

.brand-maturity-tooltip::before {
  right: 100%;
  border-width: 8px;
  border-right-color: #fff;
  z-index: 1;
}

.brand-maturity-tooltip.brand-maturity-tooltip--left {
  left: auto;
  right: calc(100% + 14px);
}

.brand-maturity-tooltip.brand-maturity-tooltip--left::after {
  right: auto;
  left: 100%;
  border-right-color: transparent;
  border-left-color: #ADADAD;
}

.brand-maturity-tooltip.brand-maturity-tooltip--left::before {
  right: auto;
  left: 100%;
  border-right-color: transparent;
  border-left-color: #fff;
}

.brand-maturity-tooltip.brand-maturity-tooltip--above {
  left: 50%;
  top: auto;
  bottom: calc(100% + 14px);
  transform: translateX(-50%);
}

.brand-maturity-tooltip.brand-maturity-tooltip--above::after {
  top: 100%;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  border-right-color: transparent;
  border-top-color: #ADADAD;
}

.brand-maturity-tooltip.brand-maturity-tooltip--above::before {
  top: 100%;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  border-right-color: transparent;
  border-top-color: #fff;
}

.brand-maturity-tooltip-label {
  font-size: 9px;
  font-weight: 600;
  color: #757575;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: -6px;
}

.brand-maturity-tooltip-title {
  font-size: 15px;
  font-weight: bold;
  color: var(--c-brand-maturity, #4F63E6);
}

.brand-maturity-tooltip-desc {
  font-size: 12px;
  font-weight: 400;
  color: #3C3C3C;
  line-height: 1.4;
  letter-spacing: 0.025em;
}

div#monitor_control .manual-reading-cta a.btn {
  display: flex;
  padding: 11px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  background: var(--Brand-Maturity, #4F63E6) !important;
  margin-right: 0;
  margin-bottom: 0;
  white-space: nowrap;
  text-transform: none;
  font-weight: 700;
}

div#monitor_control .manual-reading-cta a.btn:hover {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), #4F63E6 !important;
}