input[type="button"],
input[type="submit"]
{
  min-width: 70px;
}

input[type="checkbox"],
input[type="radio"]
{
  margin: 0 4px;
  vertical-align: middle;
}

.form_msg
{
  width: 100%;
  margin: 8px 0px;
  text-align: center;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #841B2D;
  font-variant: small-caps;
  font-size: 1.2em;
}

.input_caption
{
  margin-bottom: 4px;
}

div.page_caption,
div.page_caption_sml,
div.dialog_caption
{
  display: block;
  width: 100%;
  font-size: 1.1em;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 12px;
}

div.page_caption
{
  font-size: 1.3em;
  letter-spacing: 2px;
}

div.page_caption_sml
{
  font-size: 1.15em;
}

div.dialog_subcaption
{
  display: block;
  width: 100%;
  letter-spacing: 1px;
  text-align: center;
  margin-top: -10px; /* assumnes dialog caption is above */
  margin-bottom: 12px;
}

div.subcaption
{
  display: block;
  width: 100%;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 12px;
}

/* ----- */

div.panel_caption
{
  display: block;
  position: relative;
  padding: 8px;
  font-size: 1.1em;
  letter-spacing: 2px;
  text-align: center;
}

div.list_caption
{
  display: block;
  position: relative;
  margin-bottom: 6px;
  font-size: 1.1em;
  letter-spacing: 2px;
}

div.row_box_caption
{
  margin: 8px 0 0 12px;
}

div.attrib_box
{
  width: 100%;
  margin-bottom: 12px;
  padding: 6px 8px;
  border: 1px dotted black;
  border-radius: 6px;
}

/* flex row */

div.flex_row,
div.flex_row_row
{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 2rem;
  margin-bottom: 12px;
}

div.flex_row > div
{
  /* flex: grow shrink basis must be set for each instance */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

div.flex_row_row > div
{
  display: flex;
  align-items: center;
  gap:4px 2px;
}

/*--- record_row ---*/

div.record_row_box
{
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

div.record_row
{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-end;
  margin-bottom: 4px;
  padding: 4px 0;
}

div.record_row_box div.record_row
{
  margin: 4px 8px;
  padding: 0;
}

div.record_row > div
{
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 4px;
  white-space: nowrap;
}

div.record_row .ri_packed /* non-expanding with right margin */
{
  flex: 0 1 auto;
  margin-right: 20px;
}

div.record_row > div.ri_stacked
{
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

div.record_row .ri_rgt  /* push item to right margin */
{
  flex: 0 1 auto;
  margin-left: auto;
  margin-right: 0;
}

div.record_row > div > div
{
  white-space: nowrap;
}

/*--- record_table ---*/

div.record_table
{
  display: table;
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: separate;
  border-spacing: 8px 8px;
  border: 1px solid gray;
}

div.record_table > div
{
  display: table-row;
}

div.record_table > div > div
{
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  border: 1px none gray;
}

div.record_table > div > div *
{
  vertical-align: middle;
}

div.record_table > div > div input[type="text"]
{
  width: 100%;
}

div.record_table > div > div:first-child
{
  width: 33%;
  text-align: right;
}

/* -- */

input[type="text"].address
{
  width: 100%;
  max-width: 400px;
}

input[type="text"].moniker
{
  width: 100%;
  max-width: 150px;
}

input[type="text"].city
{
  width: 100%;
  max-width: 150px;
  min-width: 100px;
}

input[type="text"].state
{
  max-width: 3em;
}

input[type="text"].zip
{
  max-width: 8em;
  letter-spacing: 1px;
}

input[type="text"].email
{
  width: 100%;
  max-width: 22em;
}

input[type="text"].phone
{
  width: 100%;
  max-width: 150px;
  letter-spacing: 1px;
}

input[type="text"].upc
{
  width: 100%;
  max-width: 150px;
  letter-spacing: 1px;
}

input[type="text"].int_input
{
  width: 100%;
  max-width: 50px;
  letter-spacing: 1px;
}

input[type="text"].decimal_input
{
  width: 100%;
  max-width: 90px;
}

input[type="text"].hex_input
{
  width: 100%;
  max-width: 150px;
}

input[type="text"].percent_input
{
  width: 100%;
  max-width: 4em;
}

input[type="text"].color_input
{
  width: 100%;
  max-width: 100px;
}

input[type="text"].font_url
{
  width: 100%;
  max-width: 400px;
}

input[type="text"].font_family
{
  width: 100%;
  max-width: 400px;
}

input[type="text"].font_size
{
  width: 100%;
  max-width: 100px;
}

input[type="text"].html_color
{
  width: 100%;
  max-width: 100px;
}

input[type="text"].html_attribute
{
  width: 100%;
  max-width: 120px;
}

input[type="color"]
{
  max-width: 100px;
  min-width: 40px;
  letter-spacing: 1px;
}

/* record_row & record table */

div.record_row textarea,
div.record_table textarea
{
  resize: vertical;
  width: 100%;
}

div.record_row input[type="text"],
div.record_row input[type="date"],
div.record_row input[type="password"],
div.record_row input[type="color"],
div.record_table input[type="text"]
div.record_table input[type="date"],
div.record_table input[type="password"],
div.record_table input[type="color"]
{
  width: 100%;
}

/* --- */

.bgc1 { background: #d2deca } /* green */
.bgc2 { background: #cadbdc } /* blue */
.bgc3 { background: #acb3bd } /* gray */
.bgc4 { background: #bdaeac } /* brown */
.bgc5 { background: #feffe5 } /* yellow */
.bgc6 { background: #ffecec } /* pink */

/* ---*/

div.dialog_buttons,
div.bottom_buttons
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0  0 8px 0;
}

div.dialog_buttons > div,
div.bottom_buttons > div
{
  display: flex;
  flex: 0 1 auto;
  justify-content: center;
  flex-wrap: wrap;
  margin: 6px 0;
}

div.dialog_buttons input,
div.bottom_buttons input
{
  margin: 4px 6px;
}

/* ----- */

input.styled_button,
input.styled_button_lrg,
input.browse_img
{
  width: auto;
  min-width: 70px;
  max-width: initial;
  margin: 12px;
  padding: 4px 12px;
  background: inherit;
  letter-spacing: 1px;
  cursor: pointer;
  border-style: none;
  border-top: 1px dotted gray;
  border-bottom: 1px dotted gray;
  -webkit-box-shadow: 2px 2px 4px 0px rgba(99,99,99,.3);
  box-shadow: 2px 2px 4px 0px rgba(99,99,99,.3);
}

input.styled_button:hover,
input.styled_button_lrg:hover
{
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: rgba(120,150,150, .2);
}

input.styled_button:disabled:hover,
input.styled_button_lrg:disabled:hover
{
  background-color: transparent;
}

input.styled_button_lrg
{
  font-size: 1.1em;
  padding: 4px 20px;
}

input.browse_img
{
  width: 100%;
  max-width: initial;
}

/* ----- */

div.list_buttons
{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 4px 20px;
  width: 100%;
  margin: 12px 0 20px 0;
}

div.list_buttons > div
{
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 0 8px;
}

div.list_buttons > div.sml_gap
{
  gap: 0 2px;
}

div.list_buttons input,
div.llist_buttons select
{
  display: inline-block;
}

div.list_buttons .lb_la
{
  display: flex;
  align-items: center;
  margin-right: auto;
}

div.list_buttons .lb_ca
{
  margin-left: auto;
  margin-right: auto;
}

div.list_buttons div.lb_ca
{
  display: flex;
  align-items: center;
}

div.list_buttons .lb_ra
{
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  margin-right: 0;
}

/* ---*/

div.table_caption
{
  width: 100%;
  font-size: 1.1em;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

div.list_display
{
  display: table;
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
  border: 1px solid black;
}

div.list_display div.list_display_header
{
  display: table-header-group;
  background:  #476161;
  color: white;
  text-align: center;
}

div.list_display div.list_display_header > div
{
  display: table-cell;
  vertical-align: middle;
  height: 2em;
  padding: 8px 4px;
}

div.list_display a
{
  display: table-row;
  text-decoration: none;
  cursor: pointer;
}

div.list_display a:nth-child(even)
{
  background: #aeb4b4;
}

div.list_display a:nth-child(odd)
{
  background: #8C9898;
}

div.list_display a:link { color: black; }
div.list_display a:hover { color: black; }
div.list_display a:visited { color: black; }
div.list_display a:active { color: black; }

div.list_display a:hover
{
  background: #777777;
  color: white;
}

div.list_display a > div
{
  display: table-cell;
  text-align: left;
  padding: 6px 4px;
  border: 1px dotted black;
}

div.list_display a > div *
{
  vertical-align: middle;
}

/* ----- */

.top_buttons
{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}

/* ----- */

.form_msg
{
  width: 100%;
  margin: 8px 0px;
  text-align: center;
  color: #841B2D;
  font-variant: small-caps;
  font-size: 1.2em;
}

/* ----- */

.disabled
{
  color: #646464;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  cursor: default !important;
  opacity: .8;
}

input.refresh
{
  min-width: initial;
  width: 2em;
  border: 1px dotted gray;
  border-radius:4px;
  background-image: url("/images/site/refresh_04.svg");
  background-size: 65%;
  background-repeat: no-repeat;
  background-position: center;
}

/* ----- */

input.inline_button
{
  min-width: initial;
  width: 2.2em;
  margin: 3px;
  border: 1px dotted gray;
  border-radius: 4px;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  box-shadow: 0px 0px 1px 1px rgba(100, 100, 100, 0.3);
  cursor: pointer;
  /*background-image: url("/images/site/search_01.svg");*/
}

input.inline_button:hover
{
  box-shadow: none;    
}

div.input_grid
{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px 20px;
  padding: 8px;
  border: 1px dotted gray;
  border-radius: 6px;  
}

div.input_grid > div,
div.input_grid > div > div
{
  display: flex;
  align-items: center;
}

div.input_grid > div > div:nth-of-type(1n+2)
{
  margin-left: 16px;
}

div.input_grid > div:nth-of-type(odd)
{
  justify-content: flex-end;
}