.debug {
    position: fixed;
    max-width: 400px;
    bottom: 0;
    left: 0;
    border: 1px solid black;
    background: white;
}
html, body {
    font-family: calibri, arial, helvetica, sans-serif;
    background-color: #f4f4f4;
    color: #283143;
}

h1 { font-size: 2em; 
    display: flex;
    align-items: center;
  }
h2 { font-size: 1.5em; margin-bottom: 1em; }
h3 { font-size: 1.25em; margin-bottom: 1em; margin-top: 1.5em;}
h4 { font-size: 1em; margin-bottom: 1em; }

#content {
    max-width: 800px;
    margin: 0 auto;
    padding: 1em;
}
h1 .button {
    font-size: .6em;
    font-weight: bold;
}

header {
    /* FOR LAKAMO ONLY - removed for use by other HP client.
    padding-top: 201px;
    background: url('/assets/page-header-logo.png') no-repeat center top;
    min-height: 201px;
    */
}
header > h1 {
    font-weight: bold;
    text-align: center;
    justify-content: center; 
    align-items: center;
}

table {
    border-collapse: collapse;
    border: 2px solid #43617D;
    width: 100%;
    margin-bottom: 2em;
    background-color: #fdfdfd;
}
td,th {
    border-bottom: 1px solid #eee;
    padding: 2px 10px;
    padding: 5px 10px 0px 10px;
    margin: 0;
}
th {
    border-bottom: 2px solid #43617D;
}
th h2 {
    margin: 0;
    font-size: 1.5em;
    font-weight: bold;
}
.flag {
    float: left;
    position: relative;
    text-align: center;
    font-size: 1.5em;
    top: -4px;
    left: -52px;
    width: 40px;
    height: 40px;
    line-height: 38px;
    border: 2px solid #43617D;
    border-right: none;
    background-color: #b5d3db;
}

/* colors */
.bg-color-0 { background-color: #eee; }
   .color-0 { color: #eee; }
.bg-color-1 { background-color: #DAD2C7; }
   .color-1 { color: #DAD2C7; }
.bg-color-2 { background-color: #B5D3DB; }
   .color-2 { color: #B5D3DB; }
.bg-color-3 { background-color: #5A8DAB; }
   .color-3 { color: #5A8DAB; }
.bg-color-4 { background-color: #43617D; }
   .color-4 { color: #43617D; }
.bg-color-5 { background-color: #283143; }
   .color-5 { color: #283143; }


/* ### BIG CHECKBOX ### */

/* Customize the label (the checkbox container) */
.checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 1px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #f4f4f4;
  border: 1px solid #DAD2C7;
  border-radius: 4px;
}

/* On mouse-over, add a grey background color */
.checkbox:hover input ~ .checkmark {
  background-color: #B5D3DB;
}

/* When the checkbox is checked, add a blue background */
.checkbox input:checked ~ .checkmark {
  background-color: #5A8DAB;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
/*
.checkbox .checkmark:after {
  left: 8px;
  top: 3px;
  width: 8px;
  height: 15px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
} 
*/
.checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
} 

/* for keeping segments of a line together when the window is narrow */
span.keep-together {
    white-space: nowrap;
}

input:invalid + span.validity:after {
    content: '✖';
    color: #f00;
    display: inline-block;
    padding-top: 5px;
    padding-left: 5px;
}

input:valid + span.validity:after {
    content: '✓';
    color: #26b72b;
    display: inline-block;
    padding-top: 5px;
    padding-left: 5px;
}

.input, .textarea {
    width: 90%;
}