/* **********************************************************************
                Custom CSS by DJS for djschoch.com
********************************************************************** */

/* ********** Define color scheme values ********** */
/*  Defining CSS variables:
      :root {
        --main-color: #06c;
      }
    Using it:
      #header h1 {
        color: var(--main-color);
      }
*/

:root {
  /*  SteelBlue (#4687B9) */
  --steelblue-faint: #edf3f8;
  /* 95% */
  --steelblue-lighter: #dae7f1;
  /* 90% */
  --steelblue-light: #a3c3dc;
  /* 75% */
  --steelblue-main: #4687b9;
  /* 50% */
  --steelblue-dark: #386c94;
  /* 40% */
  --steelblue-darker: #2a516f;
  /* 30% */
  /*  Blue */
  --blue-faint: #eaf5ff;
  /* 95% */
  --blue-lighter: #d2e8ff;
  /* 90% */
  --blue-light: #99c8f5;
  /* 70% */
  --blue-main: #378cdd;
  /* 50% */
  --blue-dark: #1169cc;
  /* 40% */
  --blue-darker: #004f99;
  /* 30% */
  /*  Green */
  --green-faint: #edfbe9;
  /* 95% */
  --green-lighter: #ccf7b5;
  /* 90% */
  --green-light: #a6eb93;
  /* 75% */
  --green-main: #4ed728;
  /* 50% */
  --green-dark: #3eac20;
  /* 40% */
  --green-darker: #2f8118;
  /* 30% */
  /*  Red */
  --red-faint: #fee7e9;
  /* 95% */
  --red-lighter: #fdced1;
  /* 90% */
  --red-light: #fa858c;
  /* 75% */
  --red-main: #f53d53;
  /* 60% */
  --red-dark: #dc0917;
  /* 45% */
  --red-darker: #ab0712;
  /* 35% */
  /*  Orange (Brown) */
  --orange-faint: #ffe9cc;
  /* 90% */
  --orange-lighter: #ffdeb3;
  /* 85% */
  --orange-light: #ffc880;
  /* 75% */
  --orange-main: #ff9c1a;
  /* 55% */
  --orange-dark: #cc7400;
  /* 40% */
  --orange-darker: #995700;
  /* 30% */
  /* use? hex #8A3324 (Burnt umber) */
  /*  Purple */
  --purple-faint: #ededf8;
  /* 95% */
  --purple-lighter: #dcdaf1;
  /* 90% */
  --purple-light: #a7a3dc;
  /* 75% */
  --purple-main: #5755ba;
  /* 50% */
  --purple-dark: #3e3894;
  /* 40% */
  --purple-darker: #2f2a6f;
  /* 30% */
  /*  Yellow */
  --yellow-faint: #fff9cc;
  /* 90% */
  --yellow-lighter: #fff6b3;
  /* 85% */
  --yellow-light: #fff080;
  /* 75% */
  --yellow-main: #ffe600;
  /* 55% */
  --yellow-dark: #ccb400;
  /* 40% */
  --yellow-darker: #807100;
  /* 30% */
  /*  Black */
  --black-faint: #f7f7f7;
  /* F5F5F5 95% */
  --black-lighter: #e1e1e1;
  /* E6E6E6 90% */
  --black-light: #b0b0b0;
  /* BFBFBF 75% */
  --black-main: #888888;
  /* 808080 50% */
  --black-dark: #606060;
  /* 666666 40% */
  --black-darker: #4c4c4c;
  /* 4D4D4D 30% */
  --black-black: #000000;
  /*  White */
  --white-white: #ffffff;
  --near-white: #fcfcfc;
  --near-white-green: #fcfffc;
  --near-white-blue: #fcfcff;
  /* Tan - Shoji White (main) */
  --tan-faint: #f5f4ee;
  --tan-lighter: #f0ece2;
  --tan-light: #edece6;
  --tan-main: #e6dfd3;
  --tan-dark: #bfb6a7;
  --tan-darker: #554c3e;
}

/* ********************************************************************** */
/* ******************************* colors ******************************* */
/* ********************************************************************** */
.color-djschoch {
  color: var(--blue-dark);
}

.color-red {
  color: Red;
}

.background-color-djschoch {
  background-color: var(--blue-faint);
}

.background-color-head-djschoch {
  background-color: var(--blue-lighter);
}

.color-djs-default-faint {
  color: var(--black-faint);
}

.color-djs-default-darker {
  color: var(--black-darker);
}

.background-color-djs-default-faint {
  background-color: var(--black-faint);
}

.background-color-djs-default-darker {
  background-color: var(--black-darker);
}

/* ******************************* primary colors ******************************* */
/* steelblue */
.color-steelblue-faint {
  color: var(--steelblue-faint);
}

.color-steelblue-lighter {
  color: var(--steelblue-lighter);
}

.color-steelblue-light {
  color: var(--steelblue-light);
}

.color-steelblue-main {
  color: var(--steelblue-main);
}

.color-steelblue-dark {
  color: var(--steelblue-dark);
}

.color-steelblue-darker {
  color: var(--steelblue-darker);
}

/* blue */
.color-blue-faint {
  color: var(--blue-faint);
}

.color-blue-lighter {
  color: var(--blue-lighter);
}

.color-blue-light {
  color: var(--blue-light);
}

.color-blue-main {
  color: var(--blue-main);
}

.color-blue-dark {
  color: var(--blue-dark);
}

.color-blue-darker {
  color: var(--blue-darker);
}

/* green */
.color-green-faint {
  color: var(--green-faint);
}

.color-green-lighter {
  color: var(--green-lighter);
}

.color-green-light {
  color: var(--green-light);
}

.color-green-main {
  color: var(--green-main);
}

.color-green-dark {
  color: var(--green-dark);
}

.color-green-darker {
  color: var(--green-darker);
}

/* red */
.color-red-faint {
  color: var(--red-faint);
}

.color-red-lighter {
  color: var(--red-lighter);
}

.color-red-light {
  color: var(--red-light);
}

.color-red-main {
  color: var(--red-main);
}

.color-red-dark {
  color: var(--red-dark);
}

.color-red-darker {
  color: var(--red-darker);
}

/* orange */
.color-orange-faint {
  color: var(--orange-faint);
}

.color-orange-lighter {
  color: var(--orange-lighter);
}

.color-orange-light {
  color: var(--orange-light);
}

.color-orange-main {
  color: var(--orange-main);
}

.color-orange-dark {
  color: var(--orange-dark);
}

.color-orange-darker {
  color: var(--orange-darker);
}

/* purple */
.color-purple-faint {
  color: var(--purple-faint);
}

.color-purple-lighter {
  color: var(--purple-lighter);
}

.color-purple-light {
  color: var(--purple-light);
}

.color-purple-main {
  color: var(--purple-main);
}

.color-purple-dark {
  color: var(--purple-dark);
}

.color-purple-darker {
  color: var(--purple-darker);
}

/* yellow */
.color-yellow-faint {
  color: var(--yellow-faint);
}

.color-yellow-lighter {
  color: var(--yellow-lighter);
}

.color-yellow-light {
  color: var(--yellow-light);
}

.color-yellow-main {
  color: var(--yellow-main);
}

.color-yellow-dark {
  color: var(--yellow-dark);
}

.color-yellow-darker {
  color: var(--yellow-darker);
}

/* black */
.color-black-faint {
  color: var(--black-faint);
}

.color-black-lighter {
  color: var(--black-lighter);
}

.color-black-light {
  color: var(--black-light);
}

.color-black-main {
  color: var(--black-main);
}

.color-black-dark {
  color: var(--black-dark);
}

/* tan */
.color-black-darker {
  color: var(--black-darker);
}

.color-tan-faint {
  color: var(--tan-faint);
}

.color-tan-lighter {
  color: var(--tan-lighter);
}

.color-tan-light {
  color: var(--tan-light);
}

.color-tan-main {
  color: var(--tan-main);
}

.color-tan-dark {
  color: var(--tan-dark);
}

.color-tan-darker {
  color: var(--tan-darker);
}

/* pure white and black */
.color-white-white {
  color: var(--white-white);
}

.color-black-black {
  color: var(--black-black);
}

/* ******************************* background colors ******************************* */
/* steelblue */
.background-color-steelblue-faint {
  background-color: var(--steelblue-faint);
}

.background-color-steelblue-lighter {
  background-color: var(--steelblue-lighter);
}

.background-color-steelblue-light {
  background-color: var(--steelblue-light);
}

.background-color-steelblue-main {
  background-color: var(--steelblue-main);
}

.background-color-steelblue-dark {
  background-color: var(--steelblue-dark);
}

.background-color-steelblue-darker {
  background-color: var(--steelblue-darker);
}

/* blue */
.background-color-blue-faint {
  background-color: var(--blue-faint);
}

.background-color-blue-lighter {
  background-color: var(--blue-lighter);
}

.background-color-blue-light {
  background-color: var(--blue-light);
}

.background-color-blue-main {
  background-color: var(--blue-main);
}

.background-color-blue-dark {
  background-color: var(--blue-dark);
}

.background-color-blue-darker {
  background-color: var(--blue-darker);
}

/* green */
.background-color-green-faint {
  background-color: var(--green-faint);
}

.background-color-green-lighter {
  background-color: var(--green-lighter);
}

.background-color-green-light {
  background-color: var(--green-light);
}

.background-color-green-main {
  background-color: var(--green-main);
}

.background-color-green-dark {
  background-color: var(--green-dark);
}

.background-color-green-darker {
  background-color: var(--green-darker);
}

/* red */
.background-color-red-faint {
  background-color: var(--red-faint);
}

.background-color-red-lighter {
  background-color: var(--red-lighter);
}

.background-color-red-light {
  background-color: var(--red-light);
}

.background-color-red-main {
  background-color: var(--red-main);
}

.background-color-red-dark {
  background-color: var(--red-dark);
}

.background-color-red-darker {
  background-color: var(--red-darker);
}

/* orange */
.background-color-orange-faint {
  background-color: var(--orange-faint);
}

.background-color-orange-lighter {
  background-color: var(--orange-lighter);
}

.background-color-orange-light {
  background-color: var(--orange-light);
}

.background-color-orange-main {
  background-color: var(--orange-main);
}

.background-color-orange-dark {
  background-color: var(--orange-dark);
}

.background-color-orange-darker {
  background-color: var(--orange-darker);
}

/* purple */
.background-color-purple-faint {
  background-color: var(--purple-faint);
}

.background-color-purple-lighter {
  background-color: var(--purple-lighter);
}

.background-color-purple-light {
  background-color: var(--purple-light);
}

.background-color-purple-main {
  background-color: var(--purple-main);
}

.background-color-purple-dark {
  background-color: var(--purple-dark);
}

.background-color-purple-darker {
  background-color: var(--purple-darker);
}

/* yellow */
.background-color-yellow-faint {
  background-color: var(--yellow-faint);
}

.background-color-yellow-lighter {
  background-color: var(--yellow-lighter);
}

.background-color-yellow-light {
  background-color: var(--yellow-light);
}

.background-color-yellow-main {
  background-color: var(--yellow-main);
}

.background-color-yellow-dark {
  background-color: var(--yellow-dark);
}

.background-color-yellow-darker {
  background-color: var(--yellow-darker);
}

/* black */
.background-color-black-faint {
  background-color: var(--black-faint);
}

.background-color-black-lighter {
  background-color: var(--black-lighter);
}

.background-color-black-light {
  background-color: var(--black-light);
}

.background-color-black-main {
  background-color: var(--black-main);
}

.background-color-black-dark {
  background-color: var(--black-dark);
}

.background-color-black-darker {
  background-color: var(--black-darker);
}

/* tan */
.background-color-tan-faint {
  background-color: var(--tan-faint);
}

.background-color-tan-lighter {
  background-color: var(--tan-lighter);
}

.background-color-tan-light {
  background-color: var(--tan-light);
}

.background-color-tan-main {
  background-color: var(--tan-main);
}

.background-color-tan-dark {
  background-color: var(--tan-dark);
}

.background-color-tan-darker {
  background-color: var(--tan-darker);
}

/* pure white and black */
.background-color-white {
  background-color: white;
}

.background-color-black {
  background-color: black;
}

/* ********************************************************************** */
/* ******************** colors for groups of options ******************** */
/* ********************************************************************** */
.color-head-entity {
  color: var(--black-black);
}

.background-color-entity {
  background-color: var(--blue-faint);
}

.background-color-head-entity {
  background-color: var(--blue-lighter);
}

/* group */
.color-group {
  color: var(--green-dark);
}

.color-head-group {
  color: var(--black-black);
}

.background-color-group {
  background-color: var(--green-faint);
}

.background-color-head-group {
  background-color: var(--green-lighter);
}

/* album */
.color-album {
  color: #333399;
}

.color-head-album {
  color: #3333ff;
}

.background-color-album {
  background-color: #ccffff;
}

.background-color-head-album {
  background-color: #99ffff;
}

/* event/activity (why) */
.color-event {
  color: var(--black-darker);
}

.color-head-event {
  color: var(--black-darker);
}

.background-color-event {
  background-color: var(--green-lighter);
}

.background-color-head-event {
  background-color: var(--green-light);
}

/* location (where) */
.color-location {
  color: var(--orange-darker);
}

.color-head-location {
  color: var(--orange-darker);
}

.background-color-location {
  background-color: var(--yellow-light);
}

.background-color-head-location {
  background-color: var(--yellow-main);
}

/* audio */
.color-audio {
  color: DarkSlateGray;
}

.color-head-audio {
  color: var(--black-black);
}

.background-color-audio {
  background-color: MediumAquaMarine;
}

.background-color-head-audio {
  background-color: LightSeaGreen;
}

/* person (who) */
.color-person {
  color: var(--blue-dark);
}

.color-head-person {
  color: var(--blue-darker);
}

.background-color-person {
  background-color: var(--blue-faint);
}

.background-color-head-person {
  background-color: var(--blue-lighter);
}

.color-mainpers {
  color: var(--red-darker);
}

.color-persoptions {
  color: HotPink;
}

/* djs, aes, patten, tied colors */
.color-djs,
.color-aes,
.color-patten,
.color-tied {
  color: var(--blue-darker);
}

.color-head-djs,
.color-head-aes,
.color-head-patten,
.color-head-tied {
  color: var(--blue-darker);
}

.background-color-djs,
.background-color-head-djs {
  background-color: #e1f3ff;
}

.background-color-aes,
.background-color-head-aes {
  background-color: #d5ecff;
}

.background-color-patten,
.background-color-head-patten {
  background-color: #c9e5ff;
}

.background-color-tied,
.background-color-head-tied {
  background-color: #bddeff;
}

/* animal */
.color-animal {
  color: var(--orange-darker);
}

.color-head-animal {
  color: var(--orange-darker);
}

.background-color-animal {
  background-color: var(--orange-faint);
}

.background-color-head-animal {
  background-color: var(--orange-lighter);
}

/* pets */
.color-pets {
  color: var(--orange-darker);
}

.color-head-pets {
  color: var(--orange-darker);
}

.background-color-pets {
  background-color: var(--orange-faint);
}

.background-color-head-pets {
  background-color: var(--orange-lighter);
}

/* guide pups */
.color-guidepups {
  color: var(--orange-darker);
}

.color-head-guidepups {
  color: var(--orange-darker);
}

.background-color-guidepups {
  background-color: var(--orange-faint);
}

.background-color-head-guidepups {
  background-color: var(--orange-lighter);
}

/* general */
.color-general {
  color: var(--purple-darker);
}

.color-head-general {
  color: var(--purple-darker);
}

.background-color-general {
  background-color: var(--purple-lighter);
}

.background-color-head-general {
  background-color: var(--purple-light);
}

/* missing */
.color-missing {
  color: var(--red-darker);
}

.color-head-missing {
  color: var(--red-darker);
}

.background-color-missing {
  background-color: var(--yellow-light);
}

.background-color-head-missing {
  background-color: var(--yellow-light);
}

/* ********************************************************************** */
/* ************* colors for scopes: who/what/where/when/why ************* */
/* ********************************************************************** */
/* who */
.color-who {
  color: var(--blue-darker);
}

.color-head-who {
  color: var(--blue-faint);
}

.background-color-who {
  background-color: var(--blue-faint);
}

.background-color-head-who {
  background-color: var(--blue-main);
}

.border-who {
  border: 2px solid var(--blue-light);
  /* turquoise; */
}

/* what */
.color-what {
  color: var(--red-darker);
}

.color-head-what {
  color: var(--red-faint);
}

.background-color-what {
  background-color: var(--red-lighter);
}

.background-color-head-what {
  background-color: var(--red-main);
}

.border-what {
  border: 2px solid var(--red-light);
  /* hotpink; */
}

/* where */
.color-where {
  color: var(--yellow-darker);
}

.color-head-where {
  color: var(--yellow-faint);
}

.background-color-where {
  background-color: var(--yellow-main);
}

.background-color-head-where {
  background-color: var(--yellow-darker);
}

.border-where {
  border: 2px solid var(--yellow-dark);
  /* gold; */
}

/* when */
.color-when {
  color: var(--purple-darker);
}

.color-head-when {
  color: var(--purple-faint);
}

.background-color-when {
  background-color: var(--purple-lighter);
}

.background-color-head-when {
  background-color: var(--purple-dark);
}

.border-when {
  border: 2px solid var(--purple-main);
  /* mediumorchid; */
}

/* why */
.color-why {
  color: var(--green-darker);
}

.color-head-why {
  color: var(--green-faint);
}

.background-color-why {
  background-color: var(--green-lighter);
}

.background-color-head-why {
  background-color: var(--green-dark);
}

.border-why {
  border: 2px solid var(--green-main);
  /* chartreuse; */
}

/* ********************************************************************** */
/* ********************** standard text formatting ********************** */
/* ********************************************************************** */
.txt {
  font-size: 13px;
  color: var(--steelblue-dark);
  border: none;
}

.txt-black {
  font-size: 13px;
  color: var(--black-darker);
  border: none;
}

.txt-nocolor {
  font-size: 13px;
  border: none;
}

.txt-bold {
  font-weight: bold;
}

.txt-italic {
  font-style: italic;
}

.txt-left {
  text-align: left;
}

.txt-right {
  text-align: right;
}

.txt-center {
  text-align: center;
}

.txt-top {
  vertical-align: top;
}

.txt-nowrap {
  white-space: nowrap;
}

.txt-shadow {
  text-shadow: 1px 1px Silver;
}

.txt-shadow-black {
  text-shadow: 1px 1px var(--black-darker);
}

.txt-glow {
  text-shadow: 0px 0px 4px var(--yellow-main);
}

.txt-msg {
  font-weight: bold;
  font-size: 13px;
  color: var(--blue-dark);
  background-color: var(--blue-faint);
  border: 1px solid var(--blue-faint);
}

.txt-infomsg {
  font-weight: bold;
  font-size: 13px;
  color: var(--green-darker);
  background-color: var(--green-faint);
  border: 1px solid var(--green-faint);
}

.txt-errmsg {
  font-weight: bold;
  font-size: 13px;
  color: var(--red-darker);
  background-color: var(--yellow-faint);
  border: 1px solid var(--yellow-faint);
}

.txt-note {
  font-size: 95%;
  line-height: 1.2;
}

.txt-footnote {
  text-indent: 50px;
  font-size: 95%;
  line-height: 1.2;
}

.squeeze {
  border: none;
  margin: none;
  padding: none;
}

/* ********************************************************************** */
/* ******************* standards for data entry forms ******************* */
/* ********************************************************************** */
.txt-label {
  font-weight: bold;
  font-size: 13px;
  color: var(--steelblue-dark);
  vertical-align: middle;
  border: none;
}

.txt-data {
  font-size: 13px;
  color: var(--steelblue-dark);
  vertical-align: middle;
  border: none;
}

.txt-box-nocolor {
  /*font-weight: bold;*/
  font-size: 13px;
  width: 150px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-nocolor-1 {
  /*font-weight: bold;*/
  font-size: 13px;
  width: 150px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-nocolor-2 {
  font-weight: bold;
  font-size: 13px;
  width: 300px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-nocolor-3 {
  font-weight: bold;
  font-size: 13px;
  width: 400px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-nocolor-4 {
  font-weight: bold;
  font-size: 13px;
  width: 600px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-nocolor-5 {
  font-weight: bold;
  font-size: 13px;
  width: 750px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-label {
  font-weight: bold;
  font-size: 13px;
  color: var(--steelblue-dark);
  width: 150px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-data {
  font-size: 13px;
  color: var(--steelblue-dark);
  width: 150px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-label-small {
  font-weight: bold;
  font-size: 12px;
  color: var(--steelblue-dark);
  width: 100px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-data-small {
  font-size: 12px;
  color: var(--steelblue-dark);
  width: 100px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-label-small-1 {
  font-weight: bold;
  font-size: 12px;
  color: var(--steelblue-dark);
  width: 100px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-data-small-1 {
  font-size: 12px;
  color: var(--steelblue-dark);
  width: 100px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-label-small-2 {
  font-weight: bold;
  font-size: 12px;
  color: var(--steelblue-dark);
  width: 200px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-data-small-2 {
  font-size: 12px;
  color: var(--steelblue-dark);
  width: 200px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-label-small-3 {
  font-weight: bold;
  font-size: 12px;
  color: var(--steelblue-dark);
  width: 300px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-data-small-3 {
  font-size: 12px;
  color: var(--steelblue-dark);
  width: 300px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-label-0 {
  font-weight: bold;
  font-size: 13px;
  color: var(--steelblue-dark);
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-data-0 {
  font-size: 13px;
  color: var(--steelblue-dark);
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-label-1 {
  font-weight: bold;
  font-size: 13px;
  color: var(--steelblue-dark);
  width: 150px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-data-1 {
  font-size: 13px;
  color: var(--steelblue-dark);
  width: 150px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-label-2 {
  font-weight: bold;
  font-size: 13px;
  color: var(--steelblue-dark);
  width: 300px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-data-2 {
  font-size: 13px;
  color: var(--steelblue-dark);
  width: 300px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-label-3 {
  font-weight: bold;
  font-size: 13px;
  color: var(--steelblue-dark);
  width: 450px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-data-3 {
  font-size: 13px;
  color: var(--steelblue-dark);
  width: 450px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-label-4 {
  font-weight: bold;
  font-size: 13px;
  color: var(--steelblue-dark);
  width: 600px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-data-4 {
  font-size: 13px;
  color: var(--steelblue-dark);
  width: 600px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-label-5 {
  font-weight: bold;
  font-size: 13px;
  color: var(--steelblue-dark);
  width: 750px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-data-5 {
  font-size: 13px;
  color: var(--steelblue-dark);
  width: 750px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-label-6 {
  font-weight: bold;
  font-size: 13px;
  color: var(--steelblue-dark);
  width: 900px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-box-data-6 {
  font-size: 13px;
  color: var(--steelblue-dark);
  width: 900px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}

.txt-large {
  font-size: 16px;
}

.txt-medium {
  font-size: 14px;
}

.txt-small {
  font-size: 13px;
  line-height: 1;
}

.txt-xsmall {
  font-size: 11px;
  line-height: 0.8;
}

.txt-tiny {
  font-size: 10px;
  line-height: 0.7;
}

.txt-70pct {
  font-size: 70%;
  line-height: 1.2;
}

.txt-80pct {
  font-size: 80%;
  line-height: 1.2;
}

.txt-85pct {
  font-size: 85%;
  line-height: 1.2;
}

.txt-90pct {
  font-size: 90%;
  line-height: 1.2;
}

.txt-95pct {
  font-size: 95%;
  line-height: 1.2;
}

.txt-125pct {
  font-size: 125%;
  /* line-height: 1.2; */
}

/* ********************************************************************** */
/* *********************** fixed-size text fields *********************** */
/* ********************************************************************** */
.txt-field-20 {
  width: 20px;
}

.txt-field-30 {
  width: 30px;
}

.txt-field-40 {
  width: 40px;
}

.txt-field-60 {
  width: 60px;
}

.txt-field-80 {
  width: 80px;
}

.txt-field-100 {
  width: 100px;
}

.txt-field-120 {
  width: 120px;
}

.txt-field-150 {
  width: 150px;
}

.txt-field-200 {
  width: 200px;
}

.txt-field-250 {
  width: 250px;
}

.txt-field-300 {
  width: 300px;
}

.txt-field-400 {
  width: 400px;
}

.txt-field-450 {
  width: 450px;
}

.txt-field-500 {
  width: 500px;
}

.txt-field-600 {
  width: 600px;
}

.txt-field-750 {
  width: 750px;
}

.txt-field-800 {
  width: 800px;
}

.width-20 {
  width: 20px;
}

.width-40 {
  width: 40px;
}

.width-60 {
  width: 60px;
}

.width-80 {
  width: 80px;
}

.width-100 {
  width: 100px;
}

.width-120 {
  width: 120px;
}

.width-150 {
  width: 150px;
}

.width-200 {
  width: 200px;
}

.width-250 {
  width: 250px;
}

.width-300 {
  width: 300px;
}

.width-400 {
  width: 400px;
}

.width-450 {
  width: 450px;
}

.width-500 {
  width: 500px;
}

.width-600 {
  width: 600px;
}

.width-750 {
  width: 750px;
}

.width-800 {
  width: 800px;
}

.width-50pct {
  width: 50%;
}

.width-100pct {
  width: 100%;
}

.height-20 {
  height: 20px;
}

.height-40 {
  height: 40px;
}

.height-60 {
  height: 60px;
}

.height-80 {
  height: 80px;
}

.height-100 {
  height: 100px;
}

.height-120 {
  height: 120px;
}

.height-150 {
  height: 150px;
}

.height-200 {
  height: 200px;
}

.height-250 {
  height: 250px;
}

.height-300 {
  height: 300px;
}

.height-400 {
  height: 400px;
}

.height-450 {
  height: 450px;
}

.height-500 {
  height: 500px;
}

.height-600 {
  height: 600px;
}

.height-750 {
  height: 750px;
}

.height-800 {
  height: 800px;
}

.picklist {
  line-height: 3;
}

.txt-break-word {
  max-width: 150px;
  white-space: pre;
  /* CSS 2.0 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3.0 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  white-space: -moz-pre-wrap;
  /* Mozilla */
  word-wrap: break-word;
  /* IE 5+ */
}

.columns-2 {
  column-count: 2;
  column-gap: 40px;
}

.columns-3 {
  column-count: 3;
  column-gap: 40px;
}

.columns-4 {
  column-count: 4;
  column-gap: 30px;
}

.txt-comment {
  width: 400px;
  height: 100px;
}

.txt-family-heading {
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  vertical-align: bottom;
}

.clr {
  clear: both;
}

.border-0-none {
  border: 0px solid none;
}

.border-1-silver {
  border: 1px solid silver;
}

.border-1-gray {
  border: 1px solid gray;
}

.border-1-black {
  border: 1px solid black;
}

.border-1-purple {
  border: 1px solid var(--purple-light);
}

.border-1-cyan {
  border: 1px solid cyan;
}

.border-1-dark-green {
  border: 1px solid var(--green-dark);
}

.txt-blink {
  animation: blinker 2s ease infinite alternate;
  animation-delay: 2s;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* ******************************************************************************** */
/* **************************** overall site formatting *************************** */
/* ******************************************************************************** */
body {
  background-color: var(--black-lighter);
  /*  background-image: linear-gradient(var(--black-faint), var(--black-light));*/
  font-family: Arial, Helvetica, Tahoma, sans-serif;
  /* font-size: 14px; */
  line-height: 1.5;
}

.container {
  background-color: var(--black-faint);
  overflow: hidden;
  margin: 0px 8px 0px 8px;
  border: none;
}

.container-header {
  background-color: var(--black-faint);
  overflow: hidden;
  margin: 0px 8px 0px 8px;
  border: none;
}

.container-no-padding {
  background-color: var(--black-faint);
  overflow: hidden;
  margin: none;
  padding: none;
  border: none;
}

.container-hashtag-table {
  background-color: var(--black-faint);
  font-size: 95%;
}

a {
  color: var(--blue-dark);
  text-decoration: none;
  font-weight: bold;
  font-size: 110%;
  font-family: 'Times New Roman', Times, serif;
}

a:hover {
  background-color: var(--blue-darker);
  color: var(--white-white);
  text-decoration: none;
}

.anchor-box {
  text-decoration: none;
  border: 1px solid var(--black-faint);
  cursor: pointer;
}

.anchor-box:hover {
  background-color: var(--white-white);
  border: 1px solid red;
}

hr {
  height: 1px;
  border-width: 0;
  background-color: var(--blue-light);
}

hr.green {
  height: 1px;
  border-width: 0;
  background-color: var(--green-light);
}

hr.purple {
  height: 1px;
  border-width: 0;
  background-color: var(--purple-light);
}

hr.yellow {
  height: 1px;
  border-width: 0;
  background-color: var(--yellow-light);
}

hr.red {
  height: 1px;
  border-width: 0;
  background-color: var(--red-lighter);
}

hr.tan {
  height: 1px;
  border-width: 0;
  background-color: var(--tan-main);
}

hr.white {
  height: 1px;
  border-width: 0;
  background-color: var(--white-white);
}

hr.light-blue {
  height: 1px;
  border-width: 0;
  background-color: var(--blue-lighter);
}

hr.darkgreen {
  height: 1px;
  border-width: 0;
  background-color: var(--green-dark);
}

hr.grey {
  height: 1px;
  border-width: 0;
  background-color: var(--black-light);
}

hr.usermenu {
  height: 1px;
  border-width: 0;
  background-color: var(--green-dark);
  width: 600px;
  text-align: left;
  margin-left: 0;
}

hr.submenu {
  height: 1px;
  border-width: 0;
  background-color: var(--red-light);
  width: 600px;
  text-align: left;
  margin-left: 0;
}

hr.thicker {
  height: 4px;
  background-color: var(--black-lighter);
  margin-top: 0;
  margin-bottom: 0;
}

hr.thicker-small {
  height: 4px;
  background-color: var(--black-lighter);
  margin-top: 0;
  margin-bottom: 0;
  width: 10%;
}

hr.thicker-medium {
  height: 4px;
  background-color: var(--black-lighter);
  margin-top: 0;
  margin-bottom: 0;
  width: 50%;
}

h1 {
  font-family: 'Palatino Linotype', 'Book Antigua', Palatino, serif;
  font-size: 36px;
  /*line-height: 0.3;*/
  letter-spacing: 5px;
  font-variant: small-caps;
  color: var(--blue-darker);
  text-shadow: 5px 5px 6px var(--black-light);
}

h2 {
  font-family: 'Palatino Linotype', 'Book Antigua', Palatino, serif;
  font-size: 22px;
  letter-spacing: 1px;
  margin: 0px;
  border: 0px;
  padding: 0px;
  color: var(--blue-darker);
  text-shadow: 2px 3px 1px lightgray;
}

h3 {
  font-family: 'Palatino Linotype', 'Book Antigua', Palatino, serif;
  font-size: 22px;
  color: var(--blue-dark);
}

h4 {
  font-family: 'Palatino Linotype', 'Book Antigua', Palatino, serif;
  font-size: 18px;
  color: var(--red-darker);
}

h5 {
  font-family: 'Palatino Linotype', 'Book Antigua', Palatino, serif;
  font-size: 17px;
  color: var(--purple-dark);
}

.subtitle {
  font-family: 'Palatino Linotype', 'Book Antigua', Palatino, serif;
  font-size: 16px;
  color: var(--blue-darker);
}

.flexbox-container {
  display: flex;
}

.flexbox-container>div {
  margin: 0px 10px;
  box-sizing: border-box;
  max-width: 800px;
}

.media-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fcfffc;
  padding: 20px;
  border: 2px solid #3eac20;
  box-shadow: 0 0 25px rgba(0, 0, 0, 1);
  z-index: 100000;
  resize: both;
  overflow: auto;
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  background: none;
  cursor: pointer;
  color: darkgreen;
  font-weight: bold;
  border: none;
}

pre {
  font-size: 110%;
  white-space: pre-wrap;
}

/* ********************************************************************** */
/* *********************** index.php (Home Page) ************************ */
/* ********************************************************************** */
@media (min-width: 468px) {
  .container-home-page {
    display: flex;
  }
}

.container-home-page {
  display: flex;
  padding: 0px 50px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.container-home-page div {
  padding: 2px;
}

.index-header {
  display: block;
  background: linear-gradient(to right, var(--blue-dark), var(--white-white), var(--blue-dark));
  color: var(--blue-darker);
  font-family: 'Palatino Linotype', 'Book Antigua', Palatino, serif;
  font-size: 22px;
  font-weight: bold;
  padding: 5px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  margin-top: 20px;
  border: 1px solid var(--purple-darker);
  border-radius: 20px;
}

.index-header:hover {
  background: linear-gradient(to right, var(--blue-faint), var(--blue-light), var(--blue-faint));
  color: var(--red-darker);
}

.index-header-active {
  background: linear-gradient(to right, var(--blue-darker), var(--blue-main), var(--blue-darker));
  color: var(--white-white);
}

.index-content {
  /*flex-basis: 45%*/
  width: 100%;
  padding: 6px;
  display: none;
  overflow: hidden;
}

.collapse-table {
  width: 100%;
}

.collapse-table-cell {
  font-size: 14px;
  vertical-align: middle;
  text-align: left;
  padding: 2px;
}

/* ********************************************************************** */
/* ********************** table for header banner *********************** */
/* ********************************************************************** */
.banner-table {
  width: 100%;
}

.banner-table td {
  font-size: 12px;
  line-height: 0.9;
  padding: 1px;
}

.banner-tooltip {
  position: relative;
  display: inline-block;
}

.banner-tooltip img {
  max-height: 60px;
  width: auto;
}

.banner-tooltip .banner-tooltiptext {
  visibility: hidden;
  width: 80px;
  background-color: var(--blue-dark);
  color: var(--black-faint);
  text-align: center;
  font-family: Arial, Verdana, San Serif;
  font-size: 11px;
  border-radius: 5px;
  padding: 5px 0;
  line-height: 100%;

  /* Position the banner-tooltip */
  position: absolute;
  z-index: 1;
  top: -40px;
  left: 0px;
}

.banner-tooltip:hover .banner-tooltiptext {
  visibility: visible;
}

.banner-images-table {
  border-collapse: collapse;
  width: 100%;
  border: none;
}

.banner-images-table td {
  border-collapse: collapse;
  padding: none;
  border: none;
}

/* ********************************************************************** */
/* ************************ navigation main menu ************************ */
/* ********************************************************************** */
.navbar-menu a {
  color: var(--blue-darker);
  font-size: 15px;
  text-align: center;
  display: block;
  padding: 4px 4px;
  line-height: 1;
}

.navbar-menu a:hover {
  background: linear-gradient(to right, var(--blue-main), var(--blue-darker), var(--blue-main));
  color: var(--white-white);
  font-weight: bold;
}

#main-header {
  float: left;
  width: 88%;
  box-sizing: border-box;
}

#main-banner {
  float: left;
  width: 88%;
  box-sizing: border-box;
}

#article {
  float: left;
  width: 88%;
  box-sizing: border-box;
}

#sidebar {
  background-color: var(--black-faint);
  float: right;
  width: 12%;
  box-sizing: border-box;
  /* position: sticky;
  top: 0;
  right: 0; */
}

#hashtag-table {
  background-color: var(--black-faint);
  float: right;
  width: 12%;
  box-sizing: border-box;
  border: 1px solid gray;
  padding: 5px;
}

#edit-hashtag-table {
  background-color: var(--black-faint);
  width: 15%;
  font-size: 90%;
  box-sizing: border-box;
  border: 1px solid gray;
  padding: 5px;
}

#loginout {
  background-color: var(--black-light);
}

#main-menu {
  background: linear-gradient(var(--black-light), var(--black-faint) 66%, var(--white-white));
}

#system-menu {
  background: linear-gradient(var(--white-white), var(--black-faint) 33%, var(--black-light));
}

#latest-news {
  background-color: var(--black-light);
  color: var(--purple-darker);
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  font-weight: bold;
}

#side-images {
  background-color: var(--black-light);
  text-align: center;
  line-height: 0.1;
}

#website-footer {
  float: left;
  width: 88%;
  box-sizing: border-box;
  font-size: 10px;
}

@media (max-width: 600px) {
  #article {
    width: 100%;
    float: none;
  }

  #sidebar {
    width: 100%;
    float: none;
  }
}

/* ********************************************************************** */
/* ************************* navigation buttons ************************* */
/* ********************************************************************** */
/* save button */
.djs-save-button {
  background: linear-gradient(to right, var(--orange-light), var(--black-faint), var(--orange-light));
  color: var(--red-darker);
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 7px 2px 7px;
  min-width: 125px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--blue-darker);
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1.2;
}

.djs-save-button:hover {
  background: linear-gradient(to right, var(--orange-dark), var(--orange-darker), var(--orange-dark));
  color: var(--white-white);
}

/* save buttons - medium */
.djs-save-button-medium {
  background: var(--orange-faint);
  color: var(--red-darker);
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 0px 2px 0px 2px;
  min-width: 70px;
  text-align: center;
  border-radius: 9px;
  border: 1px solid var(--orange-darker);
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1.2;
}

.djs-save-button-medium:hover {
  background: var(--orange-darker);
  color: var(--white-white);
}

/* save button - small */
.djs-save-button-small {
  background: var(--orange-faint);
  color: var(--red-darker);
  border: 1px solid var(--orange-darker);
  border-radius: 9px;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px 3px 8px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
}

.djs-save-button-small:hover {
  background: var(--orange-darker);
  color: var(--white-white);
}

/* general buttons */
.djs-tab-button {
  font-size: 12px;
  font-weight: bold;
  border: 1px solid var(--purple-light);
  cursor: pointer;
  padding: 4px 8px;
  width: 80px;
  border-radius: 8px 8px 0px 0px;
}

.djs-tab-button.tab-active {
  background-color: var(--orange-light);
  color: var(--blue-darker);
}

.djs-tab-button.tab-inactive {
  background-color: var(--blue-faint);
  color: var(--black-main);
}

.djs-page-button {
  background: linear-gradient(to right, var(--blue-light), var(--black-faint), var(--blue-light));
  color: var(--blue-darker);
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 7px 2px 7px;
  min-width: 125px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--blue-darker);
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1.2;
}

.djs-page-button:hover {
  background: linear-gradient(to right, var(--blue-dark), var(--blue-darker), var(--blue-dark));
  color: var(--white-white);
}

/* general buttons - medium */
.djs-page-button-medium {
  background: var(--blue-lighter);
  color: var(--blue-darker);
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 0px 2px 0px 2px;
  min-width: 70px;
  text-align: center;
  border-radius: 9px;
  border: 1px solid var(--blue-darker);
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1.2;
}

.djs-page-button-medium:hover {
  background: var(--blue-darker);
  color: var(--white-white);
}

/* general buttons - small */
.djs-page-button-small {
  background: var(--blue-lighter);
  color: var(--blue-darker);
  border: 1px solid var(--blue-darker);
  border-radius: 9px;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 0px 4px 0px 4px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1.2;
}

.djs-page-button-small:hover {
  background: var(--blue-darker);
  color: var(--white-white);
}


/* user info buttons */
.djs-user-button {
  background: linear-gradient(to right, var(--green-lighter), var(--green-faint), var(--green-lighter));
  color: var(--green-darker);
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 0px 5px 0px 5px;
  min-width: 125px;
  outline: none;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--green-darker);
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1.2;
}

.djs-user-button:hover {
  background: linear-gradient(to right, var(--green-dark), var(--green-darker), var(--green-dark));
  color: var(--white-white);
}

/* djs player for media */
.djs-player {
  margin: auto;
  width: 1000;
  text-align: center;
  background-color: var(--black-lighter);
}

.djs-player-audio-view {
  width: 33%;
  border: 3px solid gray;
  border-radius: 25px;
}

.djs-player-audio-edit {
  width: 90%;
  border: 3px solid gray;
  border-radius: 25px;
}

.djs-player-audio-thumb {
  width: 100%;
  border: 2px solid gray;
  border-radius: 15px;
}

.djs-player-image-view,
.djs-player-image-edit {
  max-width: 95%;
  max-height: 75vh;
  margin: auto;
  border: 2px solid gray;
  padding: 3px;
  margin-top: 10px;
  text-align: center;
}

.djs-player-image-full {
  width: 98%;
  height: 98%;
}

.djs-player-image-thumb {
  max-width: 95%;
  max-height: 75vh;
  text-align: center;
}

/* media page buttons */
.djs-media-button {
  background: linear-gradient(to right, var(--purple-lighter), var(--purple-faint), var(--purple-lighter));
  color: var(--purple-darker);
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 0px 5px 0px 5px;
  min-width: 125px;
  outline: none;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--purple-darker);
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1.2;
}

.djs-media-button:hover {
  background: linear-gradient(to right, var(--purple-dark), var(--purple-darker), var(--purple-dark));
  color: var(--white-white);
}

/* my life buttons */
.djs-mylife-button {
  background: linear-gradient(to right, var(--yellow-light), var(--yellow-faint), var(--yellow-light));
  color: var(--tan-darker);
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 0px 5px 0px 5px;
  min-width: 125px;
  outline: none;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--yellow-darker);
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1.2;
}

.djs-mylife-button:hover {
  background: linear-gradient(to right, var(--yellow-dark), var(--yellow-darker), var(--yellow-dark));
  color: var(--white-white);
}

/* attribute scope (who/what/where/when/why) buttons */
.djs-scope-button {
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 0px 5px 0px 5px;
  min-width: 85px;
  text-align: center;
  border-radius: 10px;
  display: inline-block;
  cursor: pointer;
  line-height: 1.4;
  border: none;
}

.djs-scope-button:hover {
  background-color: gainsboro;
  color: var(--black-black);
  border: 1px solid gray;
}

/* attribute group heading buttons */
.djs-grp-button {
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 1px 5px 1px 5px;
  min-width: 125px;
  outline: none;
  text-align: center;
  border-radius: 10px;
  border: 1px solid gray;
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1.2;
}

.djs-grp-button:hover {
  background-color: var(--purple-main);
  color: white;
}

/* system - page, menu, etc. buttons */
.djs-system-button {
  background: linear-gradient(to right, var(--tan-lighter), var(--tan-faint), var(--tan-lighter));
  color: var(--tan-darker);
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 0px 5px 0px 5px;
  min-width: 125px;
  outline: none;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--tan-darker);
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1.2;
}

.djs-system-button:hover {
  background: linear-gradient(to right, var(--tan-dark), var(--tan-darker), var(--tan-dark));
  color: var(--white-white);
}

/* ********************************************************************** */
/* ************* navigation buttons in administration pages ************* */
/* ********************************************************************** */
/* administration anchor buttons */
.djs-admin-button {
  background: linear-gradient(to right, var(--red-lighter), var(--black-faint), var(--red-lighter));
  color: var(--red-darker);
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 0px 5px 0px 5px;
  min-width: 75px;
  outline: none;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--red-darker);
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1.2;
}

.djs-admin-button:hover {
  background: linear-gradient(to right, var(--red-dark), var(--red-darker), var(--red-dark));
  color: var(--white-white);
}

/* ********************************************************************** */
/* *********************** css for upload buttons *********************** */
/* ********************************************************************** */
.container-upload-button {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

input[type='file'] {
  position: absolute;
  display: none;
}

.upload-button-wrap {
  position: relative;
}

/* ********************************************************************** */
/* **************************** Media pages ***************************** */
/* ********************************************************************** */
.tab-heading {
  color: var(--steelblue-dark);
  display: inline-block;
  font-weight: bold;
}

.tab-caption {
  color: var(--steelblue-dark);
  text-align: left;
  font-size: 115%;
  padding: 5px;
  font-weight: bold;
}

/* media library search table */
.search-table {
  border-collapse: collapse;
  vertical-align: middle;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

.search-header-line1 {
  background-color: var(--yellow-faint);
  color: var(--green-darker);
  border: 1px solid var(--purple-light);
  display: grid;
  grid-template-columns: 6% 11% 11% 43% 15% 7% 7%;
  grid-template-rows: auto;
  font-weight: bold;
}

.search-header-line2 {
  background-color: var(--yellow-faint);
  color: var(--green-darker);
  border: 1px solid var(--purple-light);
  display: grid;
  grid-template-columns: 6% 11% 11% 13% 30% 15% 7% 7%;
  grid-template-rows: auto;
  font-weight: bold;
  padding: 2px 0px 2px 5px;
}

.search-row {
  color: var(--black-darker);
  text-align: left;
  word-wrap: break-word;
  display: grid;
  grid-template-columns: 6% 11% 11% 13% 30% 15% 7% 7%;
  grid-template-rows: auto;
}

/* albums table */
.albums-table {
  border-collapse: collapse;
  vertical-align: middle;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

.albums-header-line1 {
  background-color: var(--yellow-faint);
  color: var(--green-darker);
  border: 1px solid var(--purple-light);
  width: 100%;
  text-align: center;
  padding: 5px;
  margin: 0px;
  font-weight: bold;
}

.albums-header-line2 {
  background-color: var(--yellow-faint);
  color: var(--green-darker);
  border: 1px solid var(--purple-light);
  display: grid;
  grid-template-columns: 5% 6% 9% 21% 39% 12% 8%;
  grid-template-rows: auto;
  font-weight: bold;
}

.albums-row {
  color: var(--black-darker);
  text-align: left;
  word-wrap: break-word;
  display: grid;
  grid-template-columns: 5% 6% 9% 21% 39% 12% 8%;
  grid-template-rows: auto;
}

.albums-udr-grid {
  display: grid;
  grid-template-columns: 33% 33% 34%;
  grid-template-rows: auto;
  border: none;
  padding: 0px;
  margin: 0px;
}

.albums-udr-grid div {
  border: none;
  padding: 0px;
  margin: 0px;
  text-align: center;
}

.albums-udr-grid button {
  background-color: transparent;
  color: crimson;
  font-size: 120%;
  font-weight: bold;
  border: none;
  cursor: pointer;
  padding: 0px;
  margin: 0px;
}

.albums-udr-buttons:hover {
  background: var(--green-dark);
}

/* up/down/remove buttons on Media Album Maintenance page */
.djs-udr-buttons {
  background-color: white;
  font-size: 90%;
  border: none;
  cursor: pointer;
  padding: 3px 5px 3px 5px;
}

.djs-udr-buttons:hover {
  background: var(--green-light);
}

.row-odd {
  border: 1px solid var(--purple-light);
  background-color: var(--near-white-green);
  padding: 2px;
}

.row-even {
  border: 1px solid var(--purple-light);
  background-color: var(--green-faint);
  padding: 2px;
}

/* search intro box */
.search-intro {
  font-weight: bold;
}

/* latest search settings and selection grid */
.search-container {
  display: grid;
  max-width: 1200px;
  grid-template-columns: 1fr 1fr;
}

.search-box {
  border: 1px solid var(--black-main);
  min-height: 110px;
  border-radius: 7px;
  padding-left: 5px;
}

.search-label {
  display: inline-block;
  width: 50px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid var(--black-darker);
}

.search-box-heading {
  font-weight: bold;
  text-align: center;
  border: 1px solid white;
  color: var(--black-faint);
  background-color: var(--black-darker);
  border-radius: 7px;
}

.djs-search-text {
  color: var(--blue-darker);
  background-color: var(--black-lighter);
}

.djs-search-msg {
  color: var(--blue-darker);
  background-color: var(--orange-faint);
}

.djs-search-errmsg {
  color: var(--red-darker);
  background-color: var(--orange-faint);
}

/* explore box */
.explore-box {
  border: 1px solid var(--purple-light);
  padding: 5px 5px 5px 5px;
  width: 550px;
}

/* explore option box */
.explore-option-box {
  border: 1px solid var(--purple-light);
  margin-bottom: 5px;
  padding: 5px 5px 5px 5px;
}

/* album option current value box */
.album-option-box {
  border: 1px solid var(--purple-light);
  background-color: var(--red-faint);
  margin-bottom: 5px;
  padding: 5px 5px 5px 5px;
}

/* album select box */
.album-select-box {
  border: 1px solid var(--purple-light);
  background-color: var(--red-faint);
  padding: 5px 5px 5px 5px;
}

/* search option current value box */
.album-entry-box {
  border: 1px solid var(--purple-light);
  background-color: var(--red-faint);
  margin-bottom: 5px;
  padding: 5px 5px 5px 5px;
}

/* search option current value box */
.search-option-box {
  border: 1px solid var(--purple-light);
  background-color: var(--yellow-faint);
  margin-bottom: 5px;
  padding: 5px 5px 5px 5px;
  width: 165px;
  min-height: 200px;
  vertical-align: top;
}

/* search data entry box */
.search-entry-box {
  border: 1px solid var(--purple-light);
  background-color: var(--yellow-faint);
  margin-bottom: 5px;
  padding: 5px 5px 5px 5px;
}

/* text search option data entry box */
.textsearch-option-box {
  border: 1px solid var(--purple-light);
  background-color: var(--green-faint);
  margin-bottom: 5px;
  padding: 5px 5px 5px 5px;
}

/* search albums option box */
.search-album-option-box {
  border: 1px solid var(--purple-light);
  margin-top: 7px;
  margin-bottom: 7px;
  padding: 5px 5px 5px 5px;
  vertical-align: top;
  width: 90%;
}

/* top buttons */
.vid-button {
  background: linear-gradient(to right, var(--blue-light), var(--blue-faint), var(--blue-light));
  color: var(--blue-darker);
  font-size: 14px;
  font-weight: bold;
  padding: 1px;
  width: 125px;
  outline: none;
  text-align: center;
  margin: 0px 0px 4px 0px;
  border-radius: 10px;
  border: 1px solid var(--blue-darker);
}

.vid-button:hover {
  background: linear-gradient(to right, var(--blue-faint), var(--blue-light), var(--blue-faint));
  color: var(--blue-darker);
}

.vid-button-active {
  background: linear-gradient(to right, var(--blue-darker), var(--blue-dark), var(--blue-darker));
  color: var(--white-white);
}

/* video options form */
.djs-form-vid {
  background-color: var(--near-white-green);
  border-collapse: collapse;
  padding: 2px;
  border: none;
}

/* table with list of videos found */
.djs-table-vid-list {
  background-color: var(--near-white-green);
  border-collapse: collapse;
  padding: 2px;
  border: 1px solid var(--green-dark);
  vertical-align: middle;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

/* video container */
.djs-video-container {
  box-sizing: border-box;
  position: relative;
  margin: auto;
}

/* video intro */
.djs-video-intro {
  display: block;
}

/* video options */
.djs-video-options {
  display: none;
}

/* video list */
.djs-video-list {
  display: none;
}

/* video play window */
.djs-video-play {
  display: none;
}

.djs-table {
  background-color: var(--near-white-green);
  border-collapse: collapse;
  padding: 4px;
  border: 1px solid var(--green-dark);
  vertical-align: middle;
  font-size: 13px;
  line-height: 1.3;
  font-family: Arial, Helvetica, sans-serif;
}

.djs-table-cell {
  border-collapse: collapse;
  border: 1px solid var(--green-dark);
  vertical-align: middle;
  font-size: 13px;
  line-height: 1.3;
  font-family: Arial, Helvetica, sans-serif;
}

.djs-table-cell-results {
  padding: 2px;
  border-bottom: 1px solid var(--green-dark);
  vertical-align: middle;
  font-size: 13px;
  line-height: 1.3;
  font-family: Arial, Helvetica, sans-serif;
}

.djs-table-sub {
  border-collapse: collapse;
  padding: none;
  vertical-align: middle;
}

.djs-table-sub td {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.djs-table-options {
  min-width: 700px;
  border: 2px solid var(--green-dark);
}

.djs-heading-list {
  font-weight: bold;
  color: navy;
  font-size: 13px;
}

.djs-fixedwidth-checkbox-120 {
  min-width: 120px;
  padding: 1px;
  display: inline-block;
  vertical-align: middle;
}

.djs-fixedwidth-checkbox {
  min-width: 140px;
  padding: 1px;
  display: inline-block;
  vertical-align: middle;
}

.djs-option-all {
  color: darkred;
}

.djs-button-submit {
  background-color: var(--blue-dark);
  color: var(--near-white-blue);
  border: 1px solid var(--blue-dark);
  font-weight: bold;
  font-size: 13px;
  min-width: 70px;
  display: inline-block;
  cursor: pointer;
}

.djs-button-submit:hover {
  background-color: var(--blue-lighter);
  color: var(--red-darker);
  font-weight: bold;
  font-size: 13px;
}

.djs-button-submit-small {
  background-color: var(--blue-dark);
  color: var(--near-white-blue);
  border: 1px solid var(--blue-dark);
  font-weight: bold;
  font-size: 12px;
  display: inline-block;
  cursor: pointer;
}

.djs-button-submit-small:hover {
  background-color: var(--blue-lighter);
  color: var(--red-darker);
  font-weight: bold;
  font-size: 12px;
}

.djs-button-submit-large {
  background-color: var(--blue-dark);
  color: var(--near-white-blue);
  border: 1px solid var(--blue-dark);
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 1px;
}

.djs-button-submit-large:hover {
  background-color: var(--blue-lighter);
  color: var(--red-darker);
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 1px;
}

.djs-button-play {
  background-color: var(--blue-dark);
  color: var(--near-white-blue);
  border: 1px solid var(--blue-dark);
  font-weight: bold;
  font-size: 11px;
  display: inline-block;
  cursor: pointer;
}

.djs-button-play:hover {
  background-color: var(--blue-lighter);
  color: var(--red-darker);
  font-weight: bold;
  font-size: 11px;
}

div.djs-scroll {
  border: 1px solid var(--blue-light);
  max-width: 1200px;
  min-width: 700px;
  max-height: 620px;
  overflow: scroll;
}

/* ********************************************************************** */
/* **************************= Who's Who page *************************** */
/* ********************************************************************** */
/* container for page - image on left, text on right */
.ww-container {
  width: 100%;
  margin: auto;
  padding: none;
}

/* div class for image on left side of page */
.ww-image {
  width: 50%;
  height: auto;
  min-height: 300px;
  float: left;
  font-size: 14px;
  /*background: var(--blue-darker);*/
  background: linear-gradient(var(--blue-darker), var(--blue-main));
  color: var(--near-white-blue);
  text-align: center;
}

/* div class for text on right side of page */
.ww-text {
  font-size: 13px;
  margin-left: 50%;
  padding: 10px;
}

/* class for image element in slideshow */
.ww-img {
  width: 95%;
  max-width: 550px;
  height: auto;
  padding: 5px;
}

/* Show button */
.ww-button-show {
  box-sizing: border-box;
  background-color: var(--blue-dark);
  color: var(--near-white-blue);
  border: 1px solid var(--blue-dark);
  font-size: 12px;
  padding: 1px 10px;
  cursor: pointer;
  opacity: 0.8;
}

.ww-button-show:hover {
  background-color: var(--blue-lighter);
  color: var(--red-darker);
}

.ww-header {
  background: linear-gradient(to right, var(--blue-main), var(--white-white), var(--blue-main));
  color: var(--blue-dark);
  font-size: 16px;
  font-weight: bold;
  padding: 4px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  margin: 0px 0px 10px 0px;
  border-radius: 12px;
  border: 1px solid var(--blue-darker);
}

.ww-header:hover {
  background: linear-gradient(to right, var(--blue-faint), var(--blue-light), var(--blue-faint));
  color: var(--red-darker);
}

.ww-header-active {
  background: linear-gradient(to right, var(--blue-darker), var(--blue-main), var(--blue-darker));
  color: var(--white-white);
}

.ww-content-text {
  width: 100%;
  display: none;
}

/* Person description text */
.ww-person-descr {
  font-weight: bold;
  padding: none;
  display: block;
}

/* Caption text */
.ww-slides-text {
  padding: 2px 2px;
  display: block;
}

/* Next & previous buttons */
.ww-button-prev,
.ww-button-next {
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  width: auto;
  padding: 10px;
  color: var(--blue-darker);
  background-color: var(--yellow-light);
  font-weight: bold;
  font-size: 12px;
  transition: 0.2s ease;
  border-radius: 5px;
  user-select: none;
  border: 1px solid var(--red-dark);
}

/* Position the "prev"  to the left */
.ww-button-prev {
  float: left;
}

/* Position the "next" to the right */
.ww-button-next {
  float: right;
}

/* On hover, add a black background color with a little bit see-through */
.ww-button-prev:hover,
.ww-button-next:hover {
  background-color: var(--red-main);
  color: var(--white-white);
  /*opacity: 0.8;*/
}

/* ********************************************************************** */
/* ************************= User Profile page ************************** */
/* ********************************************************************** */
#user-profile table,
tr,
th,
td {
  font-size: 16px;
  border: 1px;
  border-collapse: collapse;
  text-align: left;
}

/* ********************************************************************** */
/* ********************** User Administration page ********************** */
/* ********************************************************************** */
#user-administration {
  font-size: 14px;
}

.user-admin-label {
  position: fixed;
  left: 100px;
}

.user-admin-data {
  position: fixed;
  left: 250px;
}

.grid-container {
  display: grid;
  grid-template-columns: 180px 400px;
  grid-template-rows: 30px 30px;
  grid-gap: 2px;
  background-color: var(--near-white-green);
  padding: 10px;
}

.grid-container>div {
  background-color: var(--near-white-green);
  text-align: left;
  padding: 5px 0;
  font-size: 16px;
}

.grid-container2 {
  display: grid;
  grid-template-columns: 180px 400px;
  grid-template-rows: 23px 23px 23px 23px 23px 23px 23px;
  grid-gap: 2px;
  background-color: var(--near-white-green);
  padding: 10px;
}

.grid-container2>div {
  background-color: var(--near-white-green);
  text-align: left;
  padding: 5px 0;
  font-size: 16px;
}

.grid-container-tight {
  display: grid;
  grid-template-columns: 180px 400px;
  grid-template-rows: 20px 20px;
  grid-gap: 2px;
  background-color: var(--black-light);
  padding: 10px;
}

.grid-container-tight>div {
  background-color: var(--black-faint);
  text-align: left;
  padding: 5px 0;
  font-size: 14px;
}

.xxxsmall-box {
  width: 50px;
  border: none;
  padding: 1px;
  display: inline-block;
  vertical-align: middle;
}

.xxsmall-box {
  width: 60px;
  border: none;
  padding: 1px;
  display: inline-block;
  vertical-align: middle;
}

.xsmall-box {
  width: 80px;
  border: none;
  padding: 1px;
  display: inline-block;
  vertical-align: middle;
}

.small-box {
  width: 100px;
  border: none;
  padding: 1px;
  display: inline-block;
  vertical-align: middle;
}

.regular-box {
  width: 120px;
  border: none;
  padding: 1px;
  display: inline-block;
  vertical-align: middle;
}

.medium-box {
  width: 140px;
  border: none;
  padding: 1px;
  display: inline-block;
  vertical-align: middle;
}

.mediumlarge-box {
  width: 180px;
  border: none;
  padding: 1px;
  display: inline-block;
  vertical-align: middle;
}

.large-box {
  width: 220px;
  border: none;
  padding: 2px;
  display: inline-block;
  vertical-align: middle;
}

.xlarge-box {
  width: 300px;
  border: none;
  padding: 2px;
  display: inline-block;
  vertical-align: middle;
}

.xxlarge-box {
  width: 420px;
  border: none;
  padding: 1px;
  display: inline-block;
  vertical-align: middle;
}

.xxxlarge-box {
  width: 600px;
  border: none;
  padding: 1px;
  display: inline-block;
  vertical-align: middle;
}

.huge-box {
  width: 800px;
  border: none;
  padding: 1px;
  display: inline-block;
  vertical-align: middle;
}

.flexwidth-box {
  min-width: 400px;
  max-width: 600px;
  border: none;
  padding: 1px;
  display: inline-block;
  vertical-align: middle;
}

.flex-box {
  width: 40%;
  border: none;
  padding: 1px;
  display: inline-block;
  vertical-align: middle;
}

/* ********************************************************************** */
/* *********************** Image Properties page ************************ */
/* ********************************************************************** */
/* Images */
.djs-images-update {
  box-sizing: border-box;
  max-width: 300px;
  display: inline-block;
}

.djs-images-thumbnail {
  box-sizing: border-box;
  max-width: 100px;
  display: inline-block;
}

@media (min-width: 468px) {
  .container-media-properties {
    display: flex;
    flex-wrap: wrap;
  }
}

.container-media-box {
  flex: 1;
  padding: 2px;
}

.container-image-box {
  flex: 1;
  padding: 2px;
}

.container-video-box {
  flex: 1;
  padding: 2px;
}

.container-audio-box {
  flex: 1;
  padding: 2px;
}

.container-properties-box {
  flex: 1;
  flex-grow: 8;
  padding: 2px;
}

/* ********************************************************************** */
/* ************************ Image Slideshow page ************************ */
/* ********************************************************************** */
/* Images Slideshow Options container */
.djs-container-image-slideshow-options {
  background-color: var(--near-white-green);
  box-sizing: border-box;
  position: relative;
  margin: auto;
  display: block;
  border: 1px solid var(--green-dark);
}

/* Images Slideshow container */
.djs-container-image-slideshow {
  box-sizing: border-box;
  max-width: 1000px;
  position: relative;
  margin: auto;
  padding: none;
  background-color: var(--blue-faint);
  color: var(--purple-dark);
  display: none;
}

.djs-slideshow-images {
  box-sizing: border-box;
  max-width: 90%;
  max-height: 600px;
  padding: none;
  margin: none;
  border: none;
}

/* ************************************************** */
/* ***** Next & previous buttons for media show ***** */
/* ************************************************** */
/* base prev/next buttons */
/* ************************************************** */
.show-prev,
.show-next {
  box-sizing: border-box;
  color: var(--red-darker);
  background-color: var(--yellow-main);
  /* opacity: 0.75; */
  font-size: 24px;
  vertical-align: top;
  position: relative;
  cursor: pointer;
  transition: 0.2s ease;
  /*border-radius: 5px;*/
  user-select: none;
  border: 2px solid var(--black-light);
  border-radius: 5px;
  top: 0px;
  height: 300px;
  width: 35px;
}

.show-prev {
  float: left;
}

.show-next {
  float: right;
}

.show-prev:hover,
.show-next:hover {
  color: var(--yellow-main);
  background-color: var(--red-darker);
}

/* ********************************************************************** */
/* ************************ Dan's Blogging page ************************* */
/* ********************************************************************** */
.blog-box {
  background-color: var(--near-white-blue);
  color: var(--purple-darker);
  font-size: 14px;
  line-height: 1.6;
  max-width: 960px;
  display: inline-block;
  vertical-align: middle;
  text-align: middle;
  padding: 15px;
  border: 4px ridge var(--blue-light);
  border-radius: 25px;
  margin: 3px 3px;
}

.djs-blog-button {
  /*  background-color: var(--red-faint);
  color: var(--purple-dark);
  text-decoration: none;
  padding: 1px 8px 1px 8px;
  font-weight: bold;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid var(--purple-dark);
  border-radius: 4px;*/
  background: linear-gradient(to right, var(--blue-lighter), var(--black-faint), var(--blue-lighter));
  color: var(--blue-darker);
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 14px 2px 14px;
  width: 75px;
  outline: none;
  border: none;
  text-align: center;
  margin: none;
  border-radius: 10px;
  border: 1px solid var(--blue-darker);
  box-sizing: border-box;
  line-height: 1.2;
}

.djs-blog-button:hover {
  /*  background-color: var(--purple-main);
  color: var(--red-faint);
  text-decoration: none;
  padding: 1px 8px 1px 8px;
  font-weight: bold;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid var(--purple-dark);
  border-radius: 4px;*/
  background: linear-gradient(to right, var(--blue-dark), var(--blue-darker), var(--blue-dark));
  color: var(--white-white);
}

/* ********************************************************************** */
/* ************************* Message Board page ************************* */
/* ********************************************************************** */
.txt-message-title {
  font-family: 'Palatino Linotype', 'Book Antigua', Palatino, serif;
  line-height: 1.6;
  font-size: 14px;
  font-weight: bold;
}

.message-board-button {
  border-width: 1px;
  border-style: solid;
  padding: 1px 6px 1px 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 11px;
  margin: none;
  cursor: pointer;
  border-radius: 10px;
  box-sizing: border-box;
  line-height: 1.2;
}

.message-board-button:hover {
  background-color: var(--white-white);
  color: var(--blue-darker);
}

.message-create-box {
  background-color: var(--yellow-main);
  font-size: 13px;
  line-height: 1.3;
  width: 314px;
  display: inline-block;
  vertical-align: middle;
  padding: 5px;
  border: 2px solid var(--orange-darker);
  border-radius: 10px;
  margin: 3px 3px;
}

.message-edit-box {
  background-color: var(--green-main);
  font-size: 13px;
  line-height: 1.3;
  width: 314px;
  display: inline-block;
  vertical-align: middle;
  padding: 5px;
  border: 2px solid var(--orange-darker);
  border-radius: 10px;
  margin: 3px 3px;
}

.message-delete-box {
  background-color: var(--red-lighter);
  font-size: 13px;
  line-height: 1.3;
  width: 314px;
  display: inline-block;
  vertical-align: middle;
  padding: 5px;
  border: 2px solid var(--orange-darker);
  border-radius: 10px;
  margin: 3px 3px;
}

.message-box {
  font-size: 13px;
  line-height: 1.3;
  width: 320px;
  display: inline-block;
  vertical-align: middle;
  padding: 5px;
  border: 1px solid var(--black-darker);
  border-radius: 10px;
  margin: 3px 3px;
}

.message-box-small {
  font-size: 13px;
  line-height: 1.3;
  width: 320px;
  display: inline-block;
  vertical-align: middle;
  padding: 5px;
  border: 1px solid var(--black-darker);
  border-radius: 10px;
  margin: 3px 3px;
}

.message-box-medium {
  font-size: 13px;
  line-height: 1.3;
  width: 489px;
  display: inline-block;
  vertical-align: middle;
  padding: 5px;
  border: 1px solid var(--black-darker);
  border-radius: 10px;
  margin: 3px 3px;
}

.message-box-large {
  font-size: 13px;
  line-height: 1.3;
  width: 658px;
  display: inline-block;
  vertical-align: middle;
  padding: 5px;
  border: 1px solid var(--black-darker);
  border-radius: 10px;
  margin: 3px 3px;
}

hr.message-thicker {
  height: 2px;
  background-color: var(--black-darker);
  margin-top: 0.2;
  margin-bottom: 0.2;
}

/* ********************************************************************** */
/* ************************ Message Gallery page ************************ */
/* ********************************************************************** */
.gallery-box {
  border: 6px ridge var(--steelblue-main);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
  width: 275px;
  display: inline-block;
  vertical-align: middle;
  padding: 8px;
  border-radius: 12px;
  margin: 8px 8px;
}

/* ********************************************************************** */
/* *********************** common table formating *********************** */
/* ********************************************************************** */
.djs-table-common {
  background-color: var(--near-white-green);
  border-collapse: collapse;
  padding: 3px;
  border: 1px solid var(--green-dark);
  vertical-align: middle;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

.djs-table-common td {
  color: var(--black-darker);
}

.djs-table-common th {
  background-color: var(--yellow-faint);
  color: var(--green-darker);
}

.djs-table-media {
  background-color: var(--near-white-green);
  border-collapse: collapse;
  padding: 3px;
  border: 1px solid var(--green-dark);
  vertical-align: top;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

.djs-table-media-nocolor {
  border-collapse: collapse;
  padding: 3px;
  border: 1px solid var(--green-dark);
  vertical-align: top;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

/* ********************************************************************** */
/* ********************** Edit Relationships page *********************** */
/* ********************************************************************** */
#current-rels {
  max-width: 900px;
  background-color: var(--green-faint);
  border: 1px solid var(--black-main);
  padding: 6px;
  display: flex;
  align-items: top;
}

#current-rels div {
  flex: 1;
}

#new-rels {
  max-width: 900px;
  background-color: var(--yellow-light);
  border: 2px solid var(--black-main);
  padding: 5px;
  display: flex;
  align-items: top;
}

#new-rels div {
  flex: 1;
}