:root {
  --holland-sensor-blue: #254364;
  --holland-sensor-darkblue: #153251;
  --holland-sensor-gold: #d6be77;
  --holland-sensor-lightblue: #B2BDCC;
  --holland-sensor-liftedblue: #2f5580;
  --holland-sensor-red: #FF005A;
  --holland-sensor-crimson: #B23A48;
  --holland-sensor-brightblue: #2B9DF4;
  --holland-sensor-fadedblue: #D9DDE3;
  --measurement-plot: var(--holland-sensor-darkblue);
  --calibration-plot: var(--holland-sensor-fadedblue);
  --white: white;
  --black: #666666;
  --grey: #ccc;
  --orange: #EC7E16;
  --green: #198754;
  --threshold-green: rgba(25, 135, 84, 0.25);
  --threshold-orange: var(--orange);
  --threshold-red: var(--holland-sensor-red);
  --passed: var(--holland-sensor-blue);
  --failed: var(--holland-sensor-red);
  --off-white: #fafbfc;
  --light-grey: #f1f1f1;
  --medium-grey: #ddd;
  --dark-grey: #333;
  --default-radius: 0.6rem;
  --input-radius: 0.3rem;
  --default-font-weight: 600;
  --default-font-bold: 580;
  --root-font-size: 16px;
  --default-font-size: 1rem;
  --default-font-family: 'Montserrat', 'Noto Sans', sans-serif;
  --default-thin-line: 1px solid var(--medium-grey);
  --form-font-size: 1rem;
  --default-margin: 1rem;
  --default-card-padding: 2rem;
  
  --half-opacity: 0.5;
  --secondary-plot-opacity: 0.4;

  --fadein: all 0.3s ease;

  --primary: var(--holland-sensor-blue);
  --secondary: var(--holland-sensor-darkblue);
  --gradient-stops: var(--holland-sensor-liftedblue), var(--primary), var(--secondary);
  --header-gradient: linear-gradient(to right, var(--gradient-stops));
  --box-gradient: linear-gradient(to bottom, var(--gradient-stops));
  --accent: var(--holland-sensor-gold);
  --danger: var(--holland-sensor-crimson);

  --copper: #ed7e16;
  --lead: #254364;
  --silver: #9ca3a7;
  --cadmium: #e2b808;
  --mercury: #5e2129;
  --zinc: #357662;

}

.header .btn-link {
  color: var(--white);
  border: none;
  background: none;
  box-shadow: none;
  text-decoration: none;
  text-transform: none;
  font-family: var(--default-font-family);
  font-size: 1rem;
  font-weight: var(--default-font-weight);
  display: block;
  padding: 0.4rem;
}

.header a:hover, .header .btn-link:hover {
  text-decoration: underline;
  cursor: pointer;
  transform: none;
}

.search-input {border-radius: 0.2rem; color: var(--dark-grey); font-size: 1rem; height: 2rem; padding: 0.2rem; border: 1px solid var(--grey); }
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}


.search-no-result {text-align: center; padding: 3rem; color: var(--medium-grey)}

.search {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.search-input {
    flex: 1;
    min-width: 0;
}

.search-reset {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1rem;
    height: 2rem;
}


.search-reset {display: none;}

.search-loader {height: 1.5rem; width: 1.5rem;margin-top: 0.2rem; display: none; }
.search-loader svg {color: #757575}
.search-loader-text {display: none; padding-top: 0.3rem; padding-left: 0.1rem;}
.search-loader.loading {display: flex}

.search-loading {
  height: 4rem;
  color: var(--primary);
  opacity: var(--half-opacity);
  margin-bottom: 3rem;
  margin-top: 3rem;
}

.search-loading-text {
  display: flex;     
  align-items: center;
  justify-content: center; 
}

.drop-down-loading {
  width: 1rem;
  height: 2rem;
  display: none; 
}
.drop-down-loading.loading {
  display: flex; 
}

.drop-down-loading svg{
  color: white;
}

.cloud-connect-loading {
  text-align: center;
  padding-bottom: 0rem;
  display: none;
}

.cloud-connect-loading-text {
  font-size: 0.9rem;
  color: var(--white);
  opacity: var(--half-opacity);
}

.cloud-connect-loading svg.loading-svg {
  color: white;
  height: 4rem;
  opacity: var(--half-opacity);
}

.cloud-connect-sign-in {
  display: flex;     
  align-items: center;
  justify-content: center; 
}


.btn-link, .btn {
  border: none;
  cursor: pointer;
  font-family: var(--default-font-family);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  background: linear-gradient(172deg, rgba(235, 225, 144, 1) 0%, rgba(233, 192, 133, 1) 50%);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.btn-link, .btn, .btn-link:visited, .btn:visited {color: var(--primary)}
.btn-link:hover, .btn:hover {transform: translateY(1px)}
.btn-link:disabled, .btn:disabled {background: var(--light-grey); cursor: auto}
a {color: var(--primary) }

h1.title {color: var(--primary); font-weight: var(--default-font-bold);}

.container{min-width: 80%; display: flex; justify-content: center;  flex-flow: column; margin-left: 2rem; margin-right: 2rem }

@media (max-width: 480px) {
  .container {min-width: 100%; margin-left: 0rem; }
  .default-form  {
  margin-left: 1rem;
  margin-right: 1rem;
}
}

@media (min-width: 1000px) {
.centered_link, .default-form {
  max-width: 90rem;
  min-width: 70rem;
  margin-left: auto;
  margin-right: auto;
}
}


.header {
  background: var(--header-gradient);
  height: 3rem;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}



.header form {}
.header a {color: var(--white); text-decoration: none}

a.logo img {height: 3rem}

.header .menu {display: flex; flex-flow: row nowrap;}
.header .menu a {display: block; padding: 0.4rem; font-weight: var(--default-font-weight); text-wrap: nowrap}

.username {
  font-size: 0.8rem;
}


#dialog_cover {
  color: var(--white);
  background: var(--primary);
  position: fixed;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 9999;
  height: 100%;
}

#dialog_cover.hide {
  display: none;
}

.dialog-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.dialog-card {
    background: #153251;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 40px;
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.dialog-icon {
    font-size: 48px;
    color: var(--accent);
    margin-bottom: 20px;
}

.dialog-title {
    font-size: 2em;
    font-weight: 600;
    margin-bottom: 16px;
}

.dialog-message {
    font-size: 16px;
    line-height: 1.6;
}

.dialog-message a{
  color: #d6be77;
}


.list-header {
  background: var(--medium-grey);
  color: var(--dark-grey);
  padding: 1rem;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.list-header select {
  padding: 0.2rem;
  background: none;
  border-radius: 0.2rem;
  font-style: var(--default-font-family);
}

.list-header option, .list-header select {
  color: var(--dark-grey);
}
@media (max-width: 580px) {
  .sample-count { display: none }
  .search input.search-input {width: 9rem}
}

.list-header span{font-size: 0.7rem}

.list-footer {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem
}
.list-footer a {
  text-decoration: none;
  color: var(--black);
}


.element {  border-left: 0.5rem solid }

.element-Cu {  border-color: var(--copper) }

.element-Pb {border-color: var(--lead)}

.element-Ag {border-color: var(--silver)}

.element-Cd {border-color: var(--cadmium)}

.element-Hg {border-color: var(--mercury)}

.element-Zn {border-color:var(--zinc)}

.element-Xx {border-color: grey}


.list-label-value .label { text-transform: uppercase; font-size: 0.5rem; color: var(--dark-grey) }
.list-label-value .value { font-size: 0.7rem }

.arrow-right{
  color: var(--grey);
  font-size: 1.4rem;
}

.ppb {
  text-transform: uppercase;
  font-size: 0.5rem;
}

.value.index-concentration {
  font-size: 1rem;
}

.new-sample {
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}



.form-step {
  margin-bottom: 1rem;

}

form.default-form{
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
}

form.default-form input, form.default-form select, form.default-form textarea  {
  padding: 0.6rem;
  min-height: 2rem;
  width: 100%;
  box-sizing: border-box;
}

form.default-form label {
  display: block;
  text-transform: uppercase; font-size: 0.5rem; color: var(--dark-grey)
}


#measurement_analysis_result{
  display: none;
}

#measurement_analysis_result #error {
  display: none;
}

#measurement_analysis_result{
  text-align: center;
}

#measurement_analysis_result_concentration{
  font-size: 2rem;
  color: var(--accent);
  font-weight: var(--default-font-weight);
}

#measurement_analysis_result_concentration .unit {
  font-variant-position: sub;
  font-size: 1rem;
  color: var(--primary);
}

#measurement_analysis_result #judgement {
  font-size: 0.8rem;
  font-weight: var(--default-font-weight);
  color: var(--primary);
}


#start_measurement_btn, #start_calibration_btn{width: 50%; padding: 0.7rem 0.75rem;}

#start_sensor_diagnostics{display: none} 
/* Todo don't set initial visibility in css  */
#start_sensor_diagnostics, #cancel_measurement{width: 100%; display: none}

#measurement_analysis_dilution_required{display: none}


.measurement_buttons {display: flex; flex-direction: row; gap: 0.2rem}

#new_sample_btn{margin-bottom: 1rem}


#progress {
  width: 100%;
  margin-bottom: 1rem;
  margin-top: 0.2rem;
  min-height: 2rem;
}

#progress-bar {width: 0%; height: 2rem; background: var(--accent);}


#measurement_form select {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13,110,253;
    --bs-secondary-rgb: 108,117,125;
    --bs-success-rgb: 25,135,84;
    --bs-info-rgb: 13,202,240;
    --bs-warning-rgb: 255,193,7;
    --bs-danger-rgb: 220,53,69;
    --bs-light-rgb: 248,249,250;
    --bs-dark-rgb: 33,37,41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 0,0,0;
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33,37,41;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255,255,255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0,0,0;
    --bs-secondary-color: rgba(33, 37, 41, 0.75);
    --bs-secondary-color-rgb: 33,37,41;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233,236,239;
    --bs-tertiary-color: rgba(33, 37, 41, 0.5);
    --bs-tertiary-color-rgb: 33,37,41;
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-bg-rgb: 248,249,250;
    --bs-heading-color: inherit;
    --bs-link-color: #0d6efd;
    --bs-link-color-rgb: 13,110,253;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #0a58ca;
    --bs-link-hover-color-rgb: 10,88,202;
    --bs-code-color: #d63384;
    --bs-highlight-color: #212529;
    --bs-highlight-bg: #fff3cd;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
    --bs-form-valid-color: #198754;
    --bs-form-valid-border-color: #198754;
    --bs-form-invalid-color: #dc3545;
    --bs-form-invalid-border-color: #dc3545;
    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    box-sizing: border-box;
    margin: 0;
    font-family: inherit;
    text-transform: none;
    word-wrap: normal;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    appearance: none;
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border: var(--default-thin-line);
    background: var(--light-grey);
    color: #0A223C;
}

#measurement_form textarea {
      --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13,110,253;
    --bs-secondary-rgb: 108,117,125;
    --bs-success-rgb: 25,135,84;
    --bs-info-rgb: 13,202,240;
    --bs-warning-rgb: 255,193,7;
    --bs-danger-rgb: 220,53,69;
    --bs-light-rgb: 248,249,250;
    --bs-dark-rgb: 33,37,41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 0,0,0;
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33,37,41;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255,255,255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0,0,0;
    --bs-secondary-color: rgba(33, 37, 41, 0.75);
    --bs-secondary-color-rgb: 33,37,41;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233,236,239;
    --bs-tertiary-color: rgba(33, 37, 41, 0.5);
    --bs-tertiary-color-rgb: 33,37,41;
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-bg-rgb: 248,249,250;
    --bs-heading-color: inherit;
    --bs-link-color: #0d6efd;
    --bs-link-color-rgb: 13,110,253;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #0a58ca;
    --bs-link-hover-color-rgb: 10,88,202;
    --bs-code-color: #d63384;
    --bs-highlight-color: #212529;
    --bs-highlight-bg: #fff3cd;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
    --bs-form-valid-color: #198754;
    --bs-form-valid-border-color: #198754;
    --bs-form-invalid-color: #dc3545;
    --bs-form-invalid-border-color: #dc3545;
    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    box-sizing: border-box;
    margin: 0;
    font-family: inherit;
    resize: vertical;
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    appearance: none;
    border: var(--default-thin-line);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    min-height: calc(1.5em + .75rem + calc(var(--bs-border-width) * 2));
    background: var(--light-grey);
    color: #0A223C;
}

#new_sample_btn {
  margin-bottom: 1rem;
  margin-top: 2rem;
  width: 100%;
}

#updates #progress-text, #updates #progress, #cancel_update, #apply_update, #download {display: none}


#errors {display: none}

#measurement_form .box {padding: 1rem; border-radius: var(--default-radius); background: var(--box-gradient)}
#measurement_form .box * {text-align: center}
#measurement_form .box *:not(.btn) {color: var(--white)}
#measurement_form .box label {color: var(--white); text-align: left}
#measurement_form .box #concentration {color: var(--accent)}
#measurement_form .box #judgement {color: var(--accent)}
#measurement_form .box .text a.btn-link{color: var(--accent); background: none; box-shadow: none; padding: 0; text-transform: none; font-weight: var(--default-font-weight)}


.progress-bar-container {border: var(--default-thin-line);}
.measurement_guide{margin-bottom: 2rem}
.toggle_guide_button{background: none; border: none; cursor: pointer; text-decoration: underline; color: var(--primary); font-size: 0.9rem}
.method_guide {
  padding: 0.3rem;
}

.img_auto_scale{width: 100%; max-width: 50rem;}

.method_guide h1, h2, h3{color: var(--primary)}
.method_guide h3{text-transform: uppercase;}
.method_guide span.emphasize{color: var(--dark-black)}

.flash {background: var(--holland-sensor-darkblue); padding: 1rem; color: var(--white); border-radius: var(--default-radius); margin-bottom: 1rem;}

.centered_link{text-align: center; padding: 1rem}
button.btn-link.logout{background: none; box-shadow: none}


button#cloud-connect-button {margin-left: 0.3rem; cursor: pointer; background: none; border: none; color: var(--white)}
button#cloud-connect-button, span#cloud-connection-status{color: var(--white); font-size: 0.6rem; display: block; margin-top: 0.2rem; margin-left: 0.2rem; text-transform: uppercase;}


.debug_section {margin-bottom: 2rem;}



.ms {display: flex; flex-flow: column;}
.ms a {
  padding: 0.7rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 1rem;
  align-items: center;
  border-bottom: var(--default-thin-line);
}

.ms .col {display: flex; justify-content: flex-start}
.ms .col-right {justify-content: flex-end}

.threshold-indicator {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
}
.threshold-indicator.threshold-green {background: var(--threshold-green)}
.threshold-indicator.threshold-orange {background: var(--threshold-orange)}
.threshold-indicator.threshold-red {background: var(--threshold-red)}

.element.threshold-green {border-color: var(--threshold-green)}
.element.threshold-orange {border-color: var(--threshold-orange)}
.element.threshold-red {border-color: var(--threshold-red)}
.element.threshold-grey {border-color: var(--grey)}

.sample-point-group-name {
  font-weight: var(--default-font-bold);
  font-size: 1rem;
  padding: 0.7rem;
  margin: 1rem 0 0 0;
  border-bottom: var(--default-thin-line);
}

.sample-point-plots {
  padding: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.method-plot {
  flex: 1 1 22rem;
  max-width: 36rem;
  min-width: 0;
}

.list .sample-point-plots {display: none}
.list.view-plots .sample-point-plots {display: flex}
.list.view-plots .ms {display: none}

.view-toggle,
.download-csv {
  border: none;
  background: none;
  padding: 0.2rem;
  margin-left: 0.5rem;
  cursor: pointer;
  color: var(--dark-grey);
  vertical-align: middle;
}
.view-toggle svg,
.download-csv svg {display: block; fill: currentColor}
.view-toggle .icon-list {display: none}
.view-toggle.showing-plots .icon-list {display: block}
.view-toggle.showing-plots .icon-plot {display: none}

.date-filter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}


.method-plot svg {width: 100%; height: auto}

.method-plot-name {
  font-size: 0.8rem;
  font-weight: var(--default-font-bold);
  color: var(--dark-grey);
  margin: 0.5rem 0 0.2rem 0;
  text-align: center;
}

.plot-grid {stroke: var(--light-grey)}
.plot-axis {stroke: var(--grey)}
.plot-axis-label {font-size: 10px; fill: var(--dark-grey)}
.plot-axis-label-y {text-anchor: end; dominant-baseline: middle}
.plot-axis-label-x {text-anchor: middle}
.plots-empty {flex-basis: 100%; text-align: center; color: var(--grey); margin: 1rem 0}
.plot-series {fill: none; stroke: var(--holland-sensor-blue); stroke-width: 1; stroke-dasharray: 0.1 4; stroke-linecap: round}
.plot-threshold-label {font-size: 10px; text-anchor: end}
text.threshold-orange {fill: var(--threshold-orange)}
text.threshold-red {fill: var(--threshold-red)}
.plot-point {cursor: pointer; fill: var(--holland-sensor-blue)}
.plot-point:hover {r: 6}
.plot-point-orange {stroke: var(--threshold-orange); stroke-width: 2.5; fill: var(--white)}
.plot-point-red {stroke: var(--threshold-red); stroke-width: 2.5; fill: var(--white)}



.ms .index-element {padding: 1rem; border: 1px solid var(--primary); font-weight: var(--default-font-bold); flex: 1; margin-right: 0.5rem}
.ms .index-datetime {flex: 1; padding-top: 0.3rem}
.ms .index-parameter {color: var(--primary); }
.ms .index-concentration {color: var(--primary); font-weight: var(--default-font-bold); flex: 1}

.ms a {text-decoration: none}
.ms a:hover{background: var(--off-white)}



@media (max-width: 1080px) {
  #logo {
    transition: var(--fadein);
  }
  #logo.menu-open {
    opacity: 0;
  }
  #hamburger button#toggle_hamburger {display: block}  
  #hamburger.open .menu {
    background: var(--header-gradient);
    position: absolute;
    width: 100%;
    padding-left: 1rem;
    padding-bottom: 10rem;
    left: 0rem;
    top: 4rem;
    display: block;
  }

  #hamburger.open .menu a {
    color: var(--white);
  }

  #hamburger.closed .menu {
    display: none;
  }
}

@media (min-width: 1080px) {
  #hamburger button#toggle_hamburger {display: none}
}


/* Add to base.css */
#toggle_hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#toggle_hamburger svg {
  transition: transform 0.2s ease;
}

#toggle_hamburger svg line {
  transition: all 0.2s ease;
  transform-origin: center;
  transform-box: fill-box;
}

/* Hamburger to X animation */
#hamburger.open #toggle_hamburger #hamburger-top {
  transform: translateY(6px) rotate(45deg);
}

#hamburger.open #toggle_hamburger #hamburger-middle {
  opacity: 0;
}

#hamburger.open #toggle_hamburger #hamburger-bottom {
  transform: translateY(-6px) rotate(-45deg);
}

.terms_of_service {
  width: 100%; height: 20rem; color: var(--dark-grey); margin-bottom: 2rem;
}

form.set-password label{color: white; font-size: 0.6rem; margin-bottom: 0.2rem}

div.form-msg {color: white; text-align: center}
div.form-msg label {color: var(--primary)}
.card.set_password{width: 60rem}

.back-button {text-decoration: none}
.back-button span{text-decoration: underline}