:root {
  --holland-sensor-blue: #254364;
  --holland-sensor-darkblue: #153251;
  --holland-sensor-gold: #d6be77;
  --holland-sensor-lightblue: #B2BDCC;
  --holland-sensor-red: #FF005A;
  --white: white;
  --black: #666666;
  --grey: #ccc;
  --orange: #EC7E16;
  --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;
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 768px;

  --fadein: all 0.3s ease;

  --primary: var(--holland-sensor-blue);
  --secondary: var(--holland-sensor-darkblue);
  --accent: var(--holland-sensor-gold);
  --danger: var(--orange);

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

}

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

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


.btn-link {background: none}
.btn-link, a {color: var(--primary) }
.btn-link:visited {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(--primary); 
  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;
}

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


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

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

.btn {padding: 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: 1.5rem;}

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

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

#cancel_update, #apply_update, #download, #start_clean, #cancel_clean, #measurement_form .measurement_buttons button, #new_sample_btn, #cancel_measurement, #start_sensor_diagnostics, #start_dongle_tests_btn, #cloud-connect-submit, #start_cleaning_btn {
    --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;
    -webkit-appearance: button;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    line-height: var(--bs-btn-line-height);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    font-weight: 600!important;
    text-transform: uppercase!important;
    color: #254364 !important;
    background: linear-gradient(172deg, rgba(235, 225, 144, 1) 0%, rgba(233, 192, 133, 1) 50%);
    cursor: pointer;
}

#measurement_form .measurement_buttons button:disabled, #start_sensor_diagnostics:disabled, #start_dongle_tests_btn:disabled{
  background: var(--light-grey);
  cursor: auto;
}

#errors {display: none}

#measurement_form .box {padding: 1rem; border-radius: var(--default-radius); background: var(--primary)}
#measurement_form .box * {color: var(--white); text-align: center}
#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)}


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


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: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--default-thin-line);
  text-wrap: nowrap;
}

.ms .col {display: flex; justify-content: space-between}



.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; display: flex}
.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(--primary);
    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;
}

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

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

#hamburger.open #toggle_hamburger #hamburger-bottom {
  transform: translateY(-0.28rem) 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};