/* xstylle1 */
html, body
{
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
  height: 100%;
  color: black;
  background-color: white;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 12pt;
  overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */
  text-shadow: 0 0 3px #fff; /* Keeps text readable against a dark background */
  -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
  -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}

.xnavtoc
{
  display: block;
  margin: auto;
  padding: 0.5em;
  line-height: 1.1em;
  font-size: 1em;
  font-weight: normal;
  text-align: left;
  text-decoration: none;
}

.xnavbar
{
  display: block;
  margin: auto;
  padding: 1em;
  font-family: 'Nunito', sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-align: left;
  text-decoration: none;
  background-color: #fff;
  color: #4A2169;
}

a
{
  text-decoration: none;
  color: navy;
  background-color: white;
}

a:visited
{
  color: navy;
  background-color: white;
}

a:link
{
  color: navy;
  background-color: white;
}

a:hover
{
  background-color: navy;
  color: white;
  text-decoration: underline;
}

a:active
{
  background-color: navy;
  color: white;
  text-decoration: underline;
}

.contrast1
{
  display: block;
  margin: auto;
  padding: 1.0em;
  line-height: 1.1em;
  font-size: 1em;
  font-weight: normal;
  text-align: left;
  text-decoration: none;
  color: #aaaaaa;
  background-color: #ffffff; /* Grey20 on White, contrast ratio 2.32:1 */
}

.hd1
{
  margin: 0;
  margin-bottom: 0.5em;
  line-height: 1.6em;
  font-size: 1.4em;
  font-style: normal;
  font-weight: bold;
  font-family: 'Nunito', sans-serif;
  text-align: center;
  background-color: #fffaf0; /* Floural White */
  color: #006666; /* Dark GreenBlue */
}

.hd2
{
  margin: 0;
  margin-bottom: 0.5em;
  line-height: 1.6em;
  font-size: 1.4em;
  font-style: italic;
  font-weight: bold;
  font-family: 'Nunito', sans-serif;
  text-align: center;
  background-color: #fffafa; /* snow White */
  color: #006666; /* Dark GreenBlue */
}

.hd3
{
  margin: 0;
  margin-bottom: 0.5em;
  line-height: 1.6em;
  font-size: 1.4em;
  font-style: normal;
  font-weight: bold;
  font-family: 'Nunito', sans-serif;
  text-align: left;
  background-color: #ffefd5; /* PapayaWhip */
  color: #006666; /* Dark GreenBlue */
}

.hd4
{
  margin: 0;
  margin-bottom: 0.5em;
  line-height: 1.5em;
  font-size: 1.3em;
  font-style: italic;
  font-weight: bold;
  font-family: 'Nunito', sans-serif;
  text-align: left;
  background-color: #f5f5f5; /* WhiteSmoke */
  color: #006666; /* Dark GreenBlue */
}

.hd5
{
  margin: 0;
  margin-bottom: 0.5em;
  line-height: 1.5em;
  font-size: 1.3em;
  font-style: normal;
  font-weight: bold;
  font-family: 'Nunito', sans-serif;
  text-align: left;
  background-color: #f5f5f5; /* WhiteSmoke */
  color: #006666; /* Dark GreenBlue */
}

.hd6
{
  margin: 0;
  margin-bottom: 0.5em;
  line-height: 1.5em;
  font-size: 1.3em;
  font-style: italic;
  font-weight: normal;
  font-family: 'Nunito', sans-serif;
  text-align: left;
  background-color: #f5f5f5; /* WhiteSmoke */
  color: #006666; /* Dark GreenBlue */
}

.hidden
{
  display: none;
}

[role="dialog"]
{
  box-sizing: border-box;
  padding: 15px;
  border: 1px solid #000;
  background-color: #fff;
  min-height: 100vh;
}

@media screen and (min-width: 640px)
{
  [role="dialog"]
  {
    position: absolute;
    top: 2rem;
    left: 50vw; /* move to the middle of the screen (assumes relative parent is the body/viewport) */
    transform: translateX( -50% ); /* move backwards 50% of this element's width */
    min-width: calc(640px - (15px * 2)); /* == breakpoint - left+right margin */
    min-height: auto;
    box-shadow: 0 19px 38px rgb(0 0 0 / 12%), 0 15px 12px rgb(0 0 0 / 22%);
  }
}

.dialog_label
{
  text-align: center;
}

.dialog_form
{
  margin: 15px;
}

.dialog_form .label_text
{
  box-sizing: border-box;
  padding-right: 0.5em;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  width: 30%;
  text-align: right;
}

.dialog_form .label_info
{
  box-sizing: border-box;
  padding-right: 0.5em;
  font-size: 12px;
  width: 30%;
  text-align: right;
  display: inline-block;
}

.dialog_form_item
{
  margin: 10px 0;
  font-size: 0;
}

.dialog_form_item .wide_input
{
  box-sizing: border-box;
  max-width: 70%;
  width: 27em;
}

.dialog_form_item .city_input
{
  box-sizing: border-box;
  max-width: 70%;
  width: 17em;
}

.dialog_form_item .state_input
{
  box-sizing: border-box;
  max-width: 70%;
  width: 15em;
}

.dialog_form_item .zip_input
{
  box-sizing: border-box;
  max-width: 70%;
  width: 9em;
}

.dialog_form_actions
{
  text-align: right;
  padding: 0 20px 20px;
}

.dialog_close_button
{
  float: right;
  position: absolute;
  top: 10px;
  left: 92%;
  height: 25px;
}

.dialog_close_button img
{
  border: 0;
}

.dialog_desc
{
  padding: 10px 20px;
}

/* native <dialog> element uses the ::backdrop pseudo-element */

/* dialog::backdrop, */
.dialog-backdrop
{
  display: none;
  position: fixed;
  overflow-y: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@media screen and (min-width: 640px)
{
  .dialog-backdrop
  {
    background: rgb(0 0 0 / 30%);
  }
}

.dialog-backdrop.active
{
  display: block;
}

.no-scroll
{
  overflow-y: auto !important;
}

/* this is added to the body when a dialog is open */
.has-dialog
{
  overflow: hidden;
}

.menubar-editor
{
  margin: 0;
  padding: 2px;
  width: 560px;
}

.menubar-editor.focus
{
  padding: 0;
  border: solid 2px #034575;
}

.menubar-editor textarea
{
  padding: 4px;
  margin: 0;
  border: 2px solid #eee;
  height: 400px;
  width: 548px;
  font-size: medium;
  font-family: sans-serif;
}

.menubar-editor
  [role="menubar"]
{
  margin: 0;
  padding: 2px;
  border: 2px solid #eee;
  font-size: 110%;
  list-style: none;
  background-color: #eee;
  height: 32px;
  display: block;
}

.menubar-editor
  [role="menubar"] li
{
  margin: 0;
  padding: 0;
  list-style: none;
}

.menubar-editor
  [role="menubar"]
  > li
 {
  display: inline-block;
  position: relative;
  top: 3px;
  left: 1px;
}

.menubar-editor
  [role="menubar"]
  [role="menuitem"]
  > [aria-hidden]::before
{
  content: "▼";
  padding-left: 0.25rem;
  font-size: 11px;
  vertical-align: middle;
}

.menubar-editor
  [role="menubar"]
  [role="menuitem"]
  [aria-expanded="true"]
  > [aria-hidden]::before
{
  content: "▲";
}

.menubar-editor
  [role="menubar"]
  [role="menu"]
{
  display: none;
  margin: 0;
  padding: 2px;
  position: absolute;
  border: 2px solid #034575;
  background-color: #eee;
}

.menubar-editor
  [role="menubar"]
  [role="group"]
{
  margin: 0;
  padding: 0;
}

.menubar-editor
  [role="menubar"]
  [role="menuitem"]
  [aria-disabled="true"]
{
  color: #666;
  text-decoration: line-through;
}

.menubar-editor
  [role="menubar"]
  [role="separator"]
{
  padding-top: 3px;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cline x1='0' y1='6' x2='12' y2='6' style='stroke:black;stroke-width:1' /%3E%3C/svg%3E%0A");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: repeat-x;
}

.menubar-editor
  [role="menubar"]
  [role="menuitem"],
.menubar-editor
  [role="menubar"]
  [role="menuitemcheckbox"],
.menubar-editor
  [role="menubar"]
  [role="menuitemradio"],
.menubar-editor
  [role="menubar"]
  [role="separator"]
{
  padding: 6px;
  background-color: #eee;
  border: 0 solid #eee;
  color: black;
}

.menubar-editor
  [role="menubar"]
  [role="menuitem"]
 [aria-expanded="true"]
{
  padding: 4px;
  border: 2px solid #034575;
  background-color: #034575;
  color: #fff;
  outline: none;
}

.menubar-editor
  [role="menubar"]
  [role="menu"]
  [role="menuitem"],
.menubar-editor
  [role="menubar"]
  [role="menu"]
  [role="menuitemcheckbox"],
.menubar-editor
  [role="menubar"]
  [role="menu"]
  [role="menuitemradio"],
.menubar-editor
  [role="menubar"]
  [role="menu"]
  [role="separator"]
{
  padding-left: 27px;
  width: 8em;
}

.menubar-editor
  [role="menubar"]
  [role="menu"]
  [aria-checked="true"]
{
  padding: 6px;
  padding-left: 8px;
  padding-right: 18px;
}

.menubar-editor
  [role="menubar"]
  [role="menuitemradio"]
  [aria-checked="true"]
  > [aria-hidden]::before
{
  content: "●";
  display: inline-block;
  width: 18px;
}

.menubar-editor
  [role="menubar"]
  [role="menuitemcheckbox"]
  [aria-checked="true"]
  > [aria-hidden]::before
{
  content: "✓";
  display: inline-block;
  width: 18px;
}

/* focus and hover styling */
.menubar-editor
  [role="menubar"]
  [role="menuitem"]:focus,
.menubar-editor
  [role="menubar"]
  [role="menuitemcheckbox"]:focus,
.menubar-editor
  [role="menubar"]
  [role="menuitemradio"]:focus
{
  padding: 4px;
  border: 2px solid #034575;
  background-color: #034575;
  color: #fff;
  outline: none;
}

.menubar-editor
  [role="menubar"]
  [role="menuitemradio"]
  [aria-checked="true"]:focus
  > [aria-hidden]::before,
.menubar-editor
  [role="menubar"]
  [role="menuitemcheckbox"]
  [aria-checked="true"]:focus
  > [aria-hidden]::before
{
  margin-left: -2px;
}

.menubar-editor
  [role="menubar"]
  [role="menuitem"]:hover
{
  padding: 4px;
  border: 2px solid #034575;
}

.menubar-editor
  [role="menubar"]
  [role="menu"]
  [role="menuitem"]:focus,
.menubar-editor
  [role="menubar"]
  [role="menu"]
  [role="menuitemcheckbox"]:focus,
.menubar-editor
  [role="menubar"]
  [role="menu"]
  [role="menuitemradio"]:focus
{
  padding-left: 25px;
}

.menubar-editor
  [role="menubar"]
  [role="menu"]
  [role="menuitem"]
  [aria-checked="true"]:focus,
.menubar-editor
  [role="menubar"]
  [role="menu"]
  [role="menuitemcheckbox"]
  [aria-checked="true"]:focus,
.menubar-editor
  [role="menubar"]
  [role="menu"]
  [role="menuitemradio"]
  [aria-checked="true"]:focus
{
  padding-left: 8px;
  padding-right: 21px;
}

/* Text area styles */
.menubar-editor .italic
{
  font-style: italic;
}

.menubar-editor .bold
{
  font-weight: bold;
}

.menubar-editor .underline
{
  text-decoration: underline;
}

.control, fieldset {
  margin: 6px 0;
}

label {
  display: inline-block;
  width: 120px;
  vertical-align: top;
}

input + label {
  width: auto;
}