/**
 * Static CSS styles used in WebCalendar.
 *
 * @author Craig Knudsen <cknudsen@cknudsen.com>
 * @copyright Craig Knudsen, <cknudsen@cknudsen.com>, http://www.k5n.us/cknudsen
 * @license http://www.gnu.org/licenses/gpl.html GNU GPL
 * @package WebCalendar
 */

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* These are to prevent some 'spam site' complaints. */
  background-color: #FFFFFE;
  color: #000001;
}
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}
html,
body {
  position:relative;
  width:100%;
  margin:0;
  padding:0;
  padding-bottom: 0.5em;
}
body{
  background-color: var(--bgcolor);
  color: var(--textcolor);
  font: var(--def-font-size)/1.5 var(--def-font-family);
}
div.container-fluid, div.container, nav.navbar,
  div.dropdown-menu, ul.dropdown-menu, .list-group, .list-group-item,
  .sectioncontent {
  background-color: var(--bgcolor)!important;
  color: var(--textcolor)!important;
}
div.dropdown-divider {
  border-top: 1px solid var(--box-default-color)!important;
}
li.nav-link {
  border-top: 1px solid var(--box-default-color)!important;
}
/*
Can't recall why this was added, but it makes the save button appear too far down
to be seen in some forms.  For now, commenting out.  Probably delete this later...
body, div.container-fluid, div.container {
  min-height: 100%;
  min-height: 100vh;
}
*/
label.text-info {
  color: var(--textcolor)!important;
  font: var(--def-font-size)/1.5 var(--def-font-family)!important;
}
a {
  color: var(--textcolor);
  text-decoration:none;
}
a.weekcell {
  color: var(--weeknumber);
}
abbr {
  cursor:help;
}
div {
  border:0;
}
h2 {
  color: var(--h2color);
  font-size:1.875rem;
}
h3 {
  font-size:1.500rem;
}
fieldset {
  width:96%;
}
label {
  font-weight:bold;
}
textarea {
  /*font-size:.75rem;*/
  overflow:auto;
}
table {
  border:0;
  border-collapse:collapse;
  border-spacing:0;
  table-layout:fixed;
}
th,
td {
  margin:0;
  border:0;
  padding:0;
}
th,
.layertable th {
  background-color: var(--thbg);
  color: var(--thfg);
}
th {
  /*font-size:.8125rem;*/
}
td {
  /*font-size:.6875rem;*/
}
.nav-link, li.nav-item.dropdown.show, li.nav-item.dropdown.show > ul,
  #nav-project-menu > a {
  font-size:.75rem !important;
}
ul,
ul a {
  /*font-size:.75rem;*/
}
.alt {
  background-color: var(--cellbg);
}
.main {
  clear:both;
  width:100%;
  border-right:1px solid var(--tablebg);
  border-bottom:1px solid var(--tablebg);
}
.main th,
.main td {
  width:14%;
  border-top: 1px solid var(--tablebg);
  border-left: 1px solid var(--tablebg);
  vertical-align:top;
}
.minical td.weekend,
#editentry th.weekend {
   background-color: var(--weekendbg);
}
.minical td#today,
#listunapproved .odd {
  background-color: var(--todaycellbg);
}
.underline {
 text-decoration:underline;
}
.fixed {
  width:10rem;
  margin-right:0;
}
.cursoradd a, .clickable {
  cursor:pointer;
}
.task {
  color: var(--textcolor);
}
.warningBox {
  background-color: #FFC0C0;
  border: 1px solid #A04040;
  color: #000;
  margin: 20px;
}
#cat, #day dl.desc {
  display:none;
}
td.weekcell {
  background-color: var(--weeknumber);
  font-size:.625rem;
  text-decoration:none;
}
img {
  border:0;
}
img.color {
  width:.9375rem;
  height:.9375rem;
}
#cat {
  font-size:1.125rem;
}
#dateselector,
#trailer {
  margin:0;
  padding:0;
}
#dateselector form {
  float:left;
  width:33%;
  margin-top:.3125rem;
  margin-bottom:1.5625rem;
  padding-top:.3125rem;
}
#dateselector label,
#trailer label {
  margin:0;
  padding:0;
}
#monthform {
  clear:left;
  margin-bottom:0;
}
#weekform {
  margin-bottom:0;
  text-align:center;
}
#weekmenu,
#monthmenu,
#yearmenu {
  margin-bottom:0;
  /*font-size: small;*/
  text-align:right;
}
#viewr .main th a,
#week .main th a,
#weekdetails .main th a {
  color: var(--thfg);
}
#yearform {
  clear:right;
  margin-bottom:0;
  text-align:right;
}
#menu {
  clear:both;
}
#menu,
#menu a,
.prefix,
.printer {
  color: var(--textcolor);
  font-size:.875rem;
}
.prefix {
  font-weight:bold;
}
a#programname {
  margin-top:.625rem;
  font-size:.625rem;
}
.printer {
  clear:both;
  width:15ex;
  display:block;
  text-decoration:none;
}
.new {
  float:right;
}
.unapprovedentry {
  padding-right:.1875rem;
  color:#800000;
/* Remove comments to set unapproved in italics.
  font-style:italic;
*/
  /*font-size:.75rem;*/
  text-decoration:none;
}
.nounapproved {
  font-weight:bold;
  font-size:.875rem;
}
.entry {
  color: var(--myevents);
}
.entry,
.layerentry {
  padding-right:.1875rem;
  /*font-size:.75rem;*/
  text-decoration:none;
}
.layerentry {
  color:#006060;
}
.entry img,
.layerentry img,
.unapprovedentry img {
  margin-right:.125rem;
  margin-left:.125rem;
}
.dayofmonth {
  color: var(--tablebg);
  border:1px solid var(--tablebg);
  border-width:0 1px 1px 0;
  padding:0 .125rem 0 .1875rem;
  font-weight:bold;
  font-size:.75rem;
  text-decoration:none;
  vertical-align:top;
}
.dayofmonth:hover {
  border-right:1px solid #00F;
  border-bottom:1px solid #00F;
}
.next img,
#activitylog .next {
  float:right;
}
.prev img,
#activitylog .prev {
  float:left;
}
.next img,
.prev img {
  margin-top:.4375rem;
  margin-right:.1875rem;
}
#activitylog .next,
#activitylog .prev {
  border:0;
  font-weight:bold;
  font-size:.875rem;
}
#day .next img,
#day .prev img {
  margin-top:2.3125rem;
}
#day .monthnav .next img,
#day .monthnav .prev img {
  margin:0;
}
.dailymatrix {
  background-color: var(--thbg);
  cursor:pointer;
  font-size:.75rem;
  text-align:right;
  text-decoration:none;
}
.dailymatrix:hover {
  background-color:#CFC;
}
td.matrixappts {
  width:0;
  background-color: var(--cellbg);
  cursor:pointer;
  text-align:left;
  vertical-align:middle;
}
td.matrixappts:hover {
  background-color:#CFC;
}
td.matrix {
  height:1px !important;
  background-color:#000;
}
.matrix img {
  width:100%;
  height:1px;
}
a.matrix img {
  width:100%;
  height:.5rem;
}
.matrixd {
  margin-right:auto;
  margin-left:auto;
  border-right:1px solid var(--tablebg);
  border-left:1px solid var(--tablebg);
  border-bottom:1px solid var(--tablebg);
}
.matrixd td {
  border-bottom: 1px solid var(--tablebg);
}
.matrixledge {
  border-left:1px solid #000;
}
.matrixlegend {
  margin-top:1.5625rem;
  margin-right:auto;
  margin-left:auto;
  border:1px solid #000;
  padding:.3125rem;
  background-color:#FFF;
  text-align:center;
}
.matrixlegend img {
  width:.625rem;
  height:.625rem;
}
.nav {
  color: var(--textcolor);
  font-size:.875rem;
  text-decoration:none;
}
.popup {
  position:absolute;
  top:0;
  left:0;
  color: var(--popupfg);
  border:2px solid var(--popupfg);
  background-color: var(--popupbg);
  padding:1.0rem;
  font-size:.75rem;
  text-decoration:none;
  visibility:hidden;
  z-index:20;
  border-radius:8px;
  -moz-border-radius:8px;
  box-shadow: 5px 5px 5px var(--box-default-color);
}
.popup dl,
.popup dt {
  margin:0;
  padding:0;
}
.popup dt {
  font-weight:bold;
}
.popup dd {
  margin-left:1.25rem;
}
.tooltip,
.tooltipselect {
  cursor:help;
  font-weight:bold;
  font-size:.6875rem;
  text-decoration:none;
}
.tooltip {
  width:7.5rem;
}
.tooltipselect {
  vertical-align:top;
}
.user,
.categories {
  color: var(--h2color);
  font-size:1.125rem;
  text-align:center;
}
.asstmode {
  color: var(--h2color);
  font-weight:bold;
  text-align:center;
}
.help {
  font-weight:bold;
  vertical-align:top;
}
.helpbody {
  margin-bottom:1rem;
  font-weight:normal;
  vertical-align:top;
}
.helpbody div {
  border:1px solid #000;
}
.helpbody label {
  font-size:1.1rem;
  vertical-align:top;
}
.helpbody p {
  margin:1rem;
}
.helplist {
  border:0;
  font-weight:bold;
  font-size:1.2rem;
  text-align:center;
}
.helplist a {
  font-weight:normal;
  text-decoration:underline;
}
.helplist a.current {
  font-weight:bold;
  text-decoration:none;
}
#helpbug form {
  margin-bottom:1rem;
}
#helpbug label {
  clear:left;
  float:left;
  width:32%;
}
#helpbug p {
  margin:0 1rem;
}
img.help {
  cursor:help;
}
.sample {
  text-align:left;
  width:1rem;
}
.standard {
  background-color: var(--cellbg);
  border:1px solid var(--tablebg);
  font-size:.75rem;
}
.standard th {
  border:0;
  border-bottom:1px solid var(--tablebg);
  padding:0;
  font-size:1.125rem;
}
 /* style for week hover highlight */
tr.highlight td {
  background-color:#ffb !important;
}
.minical {
  margin:0 0 .3125rem 0;
  font-size:.625rem;
}
.minical caption a {
  color: var(--captions);
  font-weight:bold;
}
.minical caption {
  caption-side: top;
  text-align: center;
}
.minical th {
  border:0 solid var(--bgcolor);
  padding:0 .125rem;
}
.minical th,
.minical td.empty {
  background-color: var(--bgcolor) !important;
  color: var(--textcolor);
  text-align:center;
}
.minical th.empty {
  background-color:transparent !important;
}
.minical td {
  background-color: var(--cellbg);
  border:1px solid var(--bgcolor);
  padding:0 .125rem;
}
.minical td a {
  margin:0;
  padding:.1875rem;
  display:block;
  text-align:center;
}
.minical td.hasevents {
  font-weight:bold;
}
.minitask {
  width:98%;
  margin-left:1px;
  border:1px solid #000;
}
.minitask tr.header th,
.minitask tr.header td {
  background-color: var(--cellbg);
  border-bottom:.125rem solid #000;
  padding:0;
  font-size:.75rem;
  text-align:center;
}
.minitask tr.header td {
  margin:0;
  border-bottom:0;
  text-align:right;
}
.sorter {
  margin:0;
  border-bottom:0;
  cursor:pointer;
  text-align:left !important;
}
.sorterbottom {
 border-bottom:1px solid #000 !important;
}
.minitask td {
  color: var(--textcolor);
  border-bottom:1px solid #000;
  padding:0;
  font-size:.75rem;
  text-align:center;
}
.minitask td.filler {
  border-bottom:0;
  padding:0;
}

#pref form-group {
  text-align: left;
}
/* Settings/Preferences month preview for color.
 * We have to override the values set in styles.php for
 * some of these in the preview month since styles.php doesn't
 * use variables because of the gradient functions in use.
 */
#admin table#month_main td.today,
#pref table#month_main td.today {
  background-color: var(--todaycellbg) !important;
}
#admin table#month_main td.weekend,
#pref table#month_main td.weekend {
  background-color: var(--weekendbg) !important;
}
#admin table#month_main td.othermonth,
#pref table#month_main td.othermonth {
  background-color: var(--othermonthbg) !important;
}
#admin table#month_main th,
#admin table#month_main th.weekend,
#pref table#month_main th,
#pref table#month_main th.weekend {
  background-color: var(--thbg) !important;
}
#admin table#month_main td,
#pref table#month_main td {
  background-color: var(--cellbg) !important;
}
#admin table#month_main td.hasevents,
#pref table#month_main td.hasevents {
  background-color: var(--haseventsbg) !important;
}
#admin table#month_main td.weekcell,
#pref table#month_main td.weekcell {
  background-color: var(--weeknumber) !important;
}

#admin table,
#pref table {
  vertical-align:top;
}
#admin input,
#admin select,
#pref input,
#pref select {
  margin:0 .1875rem;
}
#admin .main td,
#pref .main td {
  height:1.875rem;
}
#admin .main td,
#admin .main th,
#pref .main td,
#pref .main th {
  font-size:.75rem;
}
#admin #month_main, #monthtitle {
  width: 45%;
  float: right;
}
#admin .empty,
#pref .empty {
  border-top:transparent !important;
  border-left:transparent !important;
}
#admin .main td.weekcell,
#pref .main td.weekcell {
  color: var(--h2color);
  margin:0;
  text-align:center;
  text-decoration:none;
  vertical-align:middle;
}
#admin #em_smtp { font-size:.85rem; }
#admin #default-user-settings { font-size:.85rem; }
#admin .main th.weekcell,
#pref .main th.weekcell {
  background-color:transparent;
}
#admin .main td.empty,
#admin .main td.weekcell,
#admin .main th.empty,
#admin .main th.weekcell,
#pref .main td.empty,
#pref .main td.weekcell,
#pref .main th.empty,
#pref .main th.weekcell {
  width:1%;
}
#admin #saver {
  clear:both;
  margin-top:1rem;
}
#example_month {
  float:right;
  width:45%;
  background-color: var(--bgcolor);
  margin:3rem 1rem 0;
}
#example_month p {
  color: var(--h2color);
  font-weight:bold;
  text-align:center;
}
#pref .tooltip {
  width:14.6875rem;
  vertical-align:top;
}
.embactlog {
  width:100%;
  border-right:1px solid var(--tablebg);
  border-bottom:1px solid var(--tablebg);
  border-spacing:0;
}
.embactlog tr {
  background-color:#FFF;
}
.embactlog .odd {
  background-color:#EEE;
}
.embactlog th {
  width:14%;
  border-top:1px solid var(--tablebg);
  border-bottom:1px solid var(--tablebg);
  border-left:1px solid var(--tablebg);
  padding:.0625rem .1875rem;
}
.embactlog th.action,
.embactlog th.cal,
.embactlog th.usr {
  width:7%;
}
.embactlog td {
  border-left:1px solid var(--tablebg);
  padding:.0625rem .1875rem;
}
#day div.minicalcontainer {
  border:1px solid #000;
  padding:.1875rem;
  vertical-align:top;
}
#day table.minical {
  margin-right:auto;
  margin-left:auto;
}
#day .minical caption {
  background-color: var(--thbg);
  color: var(--thfg);
  margin-right:auto;
  margin-left:auto;
  font-weight:bold;
  font-size:2.9375rem;
}
#day .minical td.selectedday {
  border:.125rem solid var(--tablebg);
}
#day .monthnav th {
  border:0;
  padding:.1875rem;
  text-align:center;
}
.menuhref {
  font-family:arial, verdana, sans-serif;
}
#datesel td.field {
  font-size:.75rem;
}
.glance {
  width:100%;
  border-right:1px solid var(--tablebg);
  border-bottom:1px solid var(--tablebg);
}
.glance th.empty {
  background-color: var(--bgcolor) !important;
  border-top:1px solid var(--bgcolor) !important;
  border-left:1px solid var(--bgcolor) !important;
}
.glance th.row {
  width:14%;
  height:2.5rem;
  border-top:1px solid var(--tablebg);
  border-left:1px solid var(--tablebg);
  vertical-align:middle;
}
.glance td {
  border-top:1px solid var(--tablebg);
  border-left:1px solid var(--tablebg);
  padding-left:.1875rem;
  vertical-align:top;
}
#day .glance td {
  width:86%;
  height:2.5rem;
}
#day dl.desc {
  margin:0;
  padding:0;
}
#day dl.desc dt {
  font-weight:bold;
}
#day dl.desc dd {
  margin:0;
  padding-left:1.25rem;
}
#year #monthgrid td {
  padding:0 .3125rem;
  vertical-align:top;
}
#year .minical tr {
  vertical-align:top;
}
#pref .main th,
#viewv .main th,
#viewl .main th,
#month .main th {
  width:14%;
}
#vieww .main th,
#week .main th {
  width:12%;
}
#viewr th.small {
  background-color:none;
  font-size:.5rem;
}
#viewd .main th {
  border-right:1px solid var(--tablebg);;
  padding:.0625rem;
}
#day .main th.empty,
#month .main th.empty,
#pref .main th.weekcell,
#viewl .main th.empty {
  width:1%;
  border-top:0;
  border-left:0;
  background-color:transparent !important;
}
#month .main td.weekcell,
#pref .main td.weekcell,
#viewl .main td.weekcell {
  width:1%;
  color: var(--h2color);
  margin:0;
  font-size:.75rem;
  text-align:center;
  text-decoration:none;
  vertical-align:middle;
}
#pref .main td.empty,
#pref .main th.empty {
  width:1%;
  border-top-color:transparent !important;
  border-left-color:transparent !important;
}
#pref .main td.weekcell,
#pref .main th.weekcell {
  width:1%;
}
#viewv .main th.empty,
#viewm .main th.empty,
#vieww .main th.empty,
#viewr .main th.empty,
#week .main th.empty {
  width:5%;
  border-top:1px solid var(--bgcolor) !important;
  border-left:1px solid var(--bgcolor) !important;
  background-color:transparent !important;
  background: none;
}
#week .main th.row {
  width:5%;
  height:2.5rem;
  vertical-align:top;
}
#viewt.main {
  margin:0;
  padding:0;
}
#vieww .main th.row,
#viewv .main th.row,
#viewm .main th.row,
#viewt .main th {
  width:10%;
  vertical-align:top;
}
#viewv .main th.row {
  padding:0 .3125rem;
  text-align:left;
}
#viewd .main th.row {
  border-right-width:0;
  text-align:left;
}
#viewr th.row {
  height:2.5rem;
  vertical-align:top;
}
#vieww .main th.today,
#viewm .main th.today,
#viewv .main th.today {
  width:10%;
}
#pref .main th.today,
#viewr .main th.today,
#week .main th.today {
  width:14%;
}
#year .minical td {
  text-align:center;
  vertical-align:top;
}
#pref .main td {
  height:1.875rem;
  font-size:.75rem;
}
#viewl .main td,
#contentMonth .main td,
#month .main td {
  height:6.0rem;
  font-size:.75rem;
  vertical-align:top;
}
#vieww .main td,
#week .main td,
#viewr .main td,
#viewm .main td,
#viewv .main td {
  font-size:.75rem;
  padding-left:.1875rem;
}
#viewl #prevmonth {
  float:left;
}
#viewl #nextmonth {
  float:right;
}
#month .minical caption,
#viewl .minical caption {
  margin-left:4ex;
}
#year .minical {
  display:block;
}
#year .minical caption {
  margin:0 auto;
}
#viewl .minical,
#month .minical {
  margin:0 .25rem;
  border:0;
}
#combo div.headerinfo, #month2 div.headerinfo {
  margin:.9375rem;
  border:1px solid #000;
  padding:.625rem;
  background-color:#FFF;
  color:#000;
}
#combo div.headerinfo .username, #month2 div.headerinfo .username {
  font-weight:bold;
  font-size:16pt;
}
#combo div.headerinfo #categoryselection, #month2 div.headerinfo #categoryselection {
  padding-left:1.875rem;
  font-weight:normal;
  font-size:12pt;
}
#combo div.headerinfo #selectedcategories, #month2 div.headerinfo #selectedcategories {
  font-weight:normal;
  font-size:12pt;
}
#combo #categorylist, #month2 #categorylist {
  border:1px solid #CCC;
  background-color:#FFA;
}
#contentMonth #monthstatus {
  margin-left:1.25rem;
}
#month2 td.displayYear { font-size: 1.2rem !important; }
#contentMonth .monthtitle,
#contentYear .yeartitle,
#contentDay .daytitle {
  margin:0 0 0 .3125rem;
  padding:0;
  font-size:18pt;
  text-align:center;
}
#combo #contentMonth #month_main, #month2 #contentMonth #month_main {
  margin-top: 10px;
}
#combo #contentMonth #month_main td, #month2 #contentMonth #month_main td {
  height:90px;
}
#combo .event, #month2 .event {
  margin-top:.0625rem;
  overflow:hidden;
}
#combo #contentMonth .eventname, #month2 #contentMonth .eventname {
  vertical-align: top;
}
#combo #contentMonth .event, #month2 #contentMonth .event {
  vertical-align: middle;
}
#contentYear #year_main,
#contentYear .monthblock {
  background-color: #FFF;
  border: 0;
}
#contentYear .monthtable {
  margin-bottom: 10px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}
#contentYear .empty {
  background-color: #E0E0E0;
}
#contentYear th {
  font-size: 70%;
  padding: 2px;
}
#contentYear .dom {
  font-size: 70%;
  text-align: center;
}
#contentAgenda #agendastatus {
  margin-left:1.25rem;
}
#contentAgenda td {
  background-color:#E0E0E0;
  font-size:10pt;
}
#contentAgenda td.even {
  background-color:#FFFFFF;
}
#contentDay #daystatus {
  margin-left:1.25rem;
}
#contentDay .timeofday {
  float:right;
  margin-right:.125rem;
  font-size:.5625rem;
}
#contentDay #daydiv {
  height:25rem;
  scrollTop:400;
  overflow:auto;
}
#contentDay #dayuntimed {
  background-color:#FFFFFF;
  color: var(--myevents);
  margin-top:.25rem;
  margin-bottom:.25rem;
  margin-left:3.125rem;
  border:1px solid;
  border-color:#A0A0A0 #E0E0E0 #E0E0E0 #A0A0A0;
  font-size:.625rem;
}
#contentDay .daytimedevent {
  width:15.625rem;
  background-color: var(--haseventsbg);
  color: var(--myevents);
  border:1px solid;
  border-color:#E0E0E0 #A0A0A0 #A0A0A0 #E0E0E0;
  font-size:.625rem;
}
#contentDay #dayinnerdiv {
  position:relative;
  height:75rem;
}
#contentDay .hourblockleft {
  position:absolute;
  left:0;
  width:3.125rem;
  height:3.125rem;
  margin:0;
  border:1px solid #E0E0E0;
  padding:0;
}
#contentDay .hourblockright {
  position:absolute;
  left:3.125rem;
  width:100%;
  height:3.125rem;
  margin:0;
  border-right:1px solid #E0E0E0;
  border-left:1px solid #E0E0E0;
  padding:0;
  background-image:url( images/hour_in_day.gif );
  /*overflow:auto;*/
}
#combo #contentTasks #tasktable th {
  background-color: #000080;
  border: 2px outset #000060;
  color: #ffffff;
  font-size: 1.0rem;
  padding: 4px;
  padding-left: 20px;
}
#combo #contentTasks #tasktable td.odd {
  background-color: #C0C0C0;
  border: 2px outset #C0C0C0;
  color: #000000;
  font-size: 1.0rem;
  padding: 4px;
}
#combo #contentTasks #tasktable td.even {
  background-color: #D8D8D8;
  border: 2px outset #D8D8D8;
  color: #000000;
  font-size: 1.0rem;
  padding: 4px;
}
#combo #viewEventDiv table, #month2 #viewEventDiv table {
  padding: 10px;
  margin: 10px;
}
#combo #taskAddDiv .fakebutton,
#combo #quickAddDiv .fakebutton, #month2 #quickAddDiv .fakebutton {
  padding: 0;
}
.dateselIcon {
  cursor: pointer;
  margin-left: 5px;
}
.topnav {
  border:0;
}
.title {
  width:99%;
  text-align:center;
}
#day .title {
  margin-top:.1875rem;
  text-align:center;
}
.title .date,
#day .title .date {
  color: var(--h2color);
  font-weight:bold;
  font-size:1.5rem;
  text-align:center;
}
.title .titleweek {
  color: var(--h2color);
  font-size:1.25rem;
}
.title .viewname,
.title .user,
#day .title .user {
  color: var(--h2color);
  font-weight:bold;
  font-size:1.125rem;
  text-align:center;
}
#weekdetails .main {
  width:90%;
}
#weekdetails .main th {
  width:100%;
  padding:.125rem;
}
#weekdetails .main td {
  height:4.6875rem;
}
#viewt table.timebar {
  width:100%;
}
#viewt td.timebar {
  width:90%;
  background-color:#FFF;
  color:#999;
  font-size:.625rem;
  text-align:center;
}
#viewt .yardstick td {
  border:1px solid #999;
  padding:0;
}
#viewt td.entry {
  padding:0;
}
#viewt table.timebar a {
  text-align:inherit !important;
}
.viewnav {
  width:99%;
  border:0;
}
#login table,
#register table {
  border:1px solid var(--tablebg);
  font-size:.75rem;
}
#login #save-cookies {
  font-size:.66rem;
  font-weight: normal;
}
.cookies {
  font-size:.8125rem;
}
.strikethrough {
  text-decoration:line-through;
}
.pub {
  background-color:#80FF80;
  text-align:center;
}
.conf {
  background-color:#FFFF80;
  text-align:center;
}
.priv {
  background-color:#FF5050;
  text-align:center;
}
.boxtop {
  border-top:1px solid var(--box-default-color);
}
.boxright {
  border-right:1px solid var(--box-default-color);
}
.boxbottom {
  border-bottom:1px solid var(--box-default-color);
}
.boxleft {
  border-left:1px solid var(--box-default-color);
}
.boxall {
  border:1px solid var(--box-default-color);
  padding-left:.1875rem;
}
.leftpadded {
  padding-left:3.125rem;
  text-align:left;
}
.location {
 font-size:.625rem;
}
.byxxx th,
.byxxx td {
  text-align:center;
}
.icon_text {
  width:.625rem;
  height:.625rem;
  border:0;
}
.alignbottom {
  vertical-align:bottom;
}
.aligncenter {
  text-align:center;
}
.alignleft,
.minitask td.name {
  text-align:left;
}
.alignmiddle {
  vertical-align:middle;
}
.alignright,
.minitask td.pct {
  text-align:right;
}
.aligntop {
  vertical-align:top;
}
.bold {
  font-weight:bold;
}
#about p {
  margin:.0625rem;
}
#scroller {
  position:absolute;
  width:100%;
}
.layers {
  float:left;
  background-color: var(--cellbg);
  margin:.125rem .0625rem;
  padding:.3125rem;
}
.layers h4 {
  margin:0 0 .3125rem;
}
.layers p {
  margin:0;
  padding-left:.3125rem;
  font-size:.75rem;
}
.layers p label {
  font-size:.8125rem;
}
#securityAudit {
  border:1px solid #c0c0c0;
}
#securityAudit th {
  background-color:#d0d0d0;
}
#securityAudit tr.odd td {
  background-color:#e0e0e0;
}
#securityAuditNotes {
  margin:1.25rem;
  border:1px solid var(--tablebg);
}
#securityAuditNotes li {
  margin-top:.25rem;
  margin-bottom:.25rem;
}
#accountiframe,
#useriframe {
  width:90%;
  border:0;
}
#accountiframe {
  height:13.125rem;
}
#useriframe {
  height:17.5rem;
}
.note {
  color: var(--tablebg);
  margin:0 1.5625rem;
  border:1px solid var(--tablebg);
  padding:.625rem;
}
.rightsidetip {
  float:right;
  width:15.625rem;
  margin-top:.625rem;
  margin-right:1.5625rem;
  border:1px solid var(--tablebg);
  padding:.3125rem;
  font-size:.6875rem;
  text-align:center;
}
.layertable {
   text-align:center;
}
.layertable td {
  background-color: var(--cellbg);
}
.layertable th,
.layertable td {
  padding:.3125rem 1.25rem;
}
#layers #layertable th {
  background-color: #000080;
  border: 2px outset #000060;
  color: #ffffff;
  font-size: 1.0rem;
  padding: 4px;
  /*padding-left: 20px;*/
}
#layers #layertable td.odd {
  background-color: #c0c0c0;
  border: 2px outset #c0c0c0;
  color: #000000;
  font-size: 1.0rem;
  padding: 4px;
  cursor:pointer;
}
#layers #layertable td.even {
  background-color: #d8d8d8;
  border: 2px outset #d8d8d8;
  color: #000000;
  font-size: 1.0rem;
  padding: 4px;
  cursor:pointer;
}
#layers #layertable .colorsample {
  margin-left: 5px;
  padding-left: 10px;
  width: 20px;
  height: 20px;
  border: 1px solid #000000;
}
.fakebutton {
   border:2px #d0d0d0 outset;
   /*border-color:#e0e0e0 #808080 #808080 #e0e0e0;*/
   padding-right:.3125rem;
   padding-left:.3125rem;
   padding:.25rem;
   background-color:#d0d0d0;
   color:#000;
   font-size:11pt;
}
.fakebutton:hover {
   background-color:#a0a0a0;
   border:2px #c0c0c0 outset;
}
#combo #nextmonth,
#combo #refresh,
#combo #nextyear,
#combo #nextday,
#combo #nextmonthdayview,
#month2 #nextmonth,
#month2 #refresh,
#month2 #nextyear,
#month2 #nextday,
#month2 #nextmonthdayview {
  margin-right:.1875rem;
}
#month2 #nextmonth, #month2 #prevmonth { font-size: 0.7rem; }
#combo .monthnavlinks td, #month2 .monthnavlinks td {
  background-color: #e0e0e0;
  border: 2px #e0e0e0 outset;
  font-size: .80rem;
}
#combo .monthnavlinks .currentMonthLink, #month2 .monthnavlinks .currentMonthLink {
  background-color: #c0c0c0;
}
#combo #quickAddDiv, #month2 #quickAddDiv {
  border:1px solid;
  border-color:#e0e0e0 #808080 #808080 #e0e0e0;
  background-color:#ffffff;
  padding: 5px;
}
#combo #viewEventDiv, #month2 #viewEventDiv {
  border:1px solid;
  border-color:#e0e0e0 #808080 #808080 #e0e0e0;
  background-color:#ffffff;
}
#combo .event, #month2 .event {
  /*background-color: #a00;*/
}
#combo #contentMonth div.event, #month2 #contentMonth div.event {
  margin-bottom: 2px;
  padding-left: 2px;
}
#combo #contentMonth div.event img, #month2 #contentMonth div.event img {
  float: left;
}
#combo .participant, #month2 .participant {
  font-size: 80%;
  background-color: #d0d0d0;
  border: 1px solid #b0b0b0;
  padding: 2px;
}
#combo #quickAddDiv #quickAddParticipantList .partX,
#month2 #quickAddDiv #quickAddParticipantList .partX {
  padding: 0;
  cursor:pointer;
}
#combo #quickAddDiv #quickAddParticipantList .partX img,
#month2 #quickAddDiv #quickAddParticipantList .partX img {
  vertical-align: top;
  margin-top: 3px;
  margin-left: 2px;
}
.eventattachment {
  background-color: var(--cellbg);
  border:1px solid var(--tablebg);
  padding:.25rem;
}
.eventcomment {
  background-color: var(--cellbg);
  border:1px solid var(--tablebg);
  padding:.25rem;
}
#adminhome table,
#adminhome td a {
  background-color: var(--cellbg);
}
#adminhome table {
  border:1px solid #000;
  padding:.3125rem;
}
#adminhome table td {
  padding:1.25rem;
}
#adminhome table td,
#adminhome td a {
  text-align:center;
}
#adminhome td a {
  border:1px solid;
  border-color:#EEE #777 #777 #EEE;
  padding:.625rem;
}
#adminhome td a:hover {
  border-color:#777 #eee #eee #777;
  background-color:#aaa;
}
#login label,
#login textarea,
#login tr,
#login td {
  font-size:1rem;
}
a:hover {
  color:#00f;
}
table.ThemeMenubar {
  table-layout:auto;
  font-size: 80% !important;
}
#editCatsDiv #innerDiv {
  border:1px solid;
  border-color:#E0E0E0 #808080 #808080 #E0E0E0;
  background-color:#ffffff;
  padding: 5px;
  font-size: 80%;
}

/*date selection "popup"*/
#dateselOverlay {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10001;
/*
  background-color: #fff;
  opacity: 0.50;
*/
}

#dateselDiv {
  display: none;
  width: 150px;
  /*height: 300px;*/
  /*background-color: #d0d0d0;*/
  /*padding: 10px;*/
  padding: 0;
  z-index: 11000; /* modalbox uses 10000 */
}

#dateselDiv #cancelImage {
  position: relative;
  left: -20px;
  top: 10px;
}

.dateselTable #dateselMonthName {
  font-size: 10pt;
  text-align: center;
  font-weight: bold;
  background-color: #000080;
  color: #ffffff;
}
.dateselTable #dateselMonthName img.clickable {
  padding-left: 5px;
  padding-right: 5px;
}

.dateselTable td {
  text-align: center;
  font-size: 10pt;
  background-color: #c0c0c0;
  padding: 1px;
}

.dateselTable td.today {
  background-color: #ffff88;
}
.dateselTable td.selected {
  background-color: #00ff00;
}
.dateselTable td.wdayname {
  font-size: 8pt;
  padding-left: 2px;
  padding-right: 2px;
}

.button-icon {
  width: 14px;
  height: 14px;
  filter: invert(1);
  margin-right: 10px;
}
.button-icon-inverse {
  width: 14px;
  height: 14px;
  margin-right: 10px;
}

.bullet {
  width: 0.3em;
  height: 0.3em;
}

<?php
// No 2nd level submenu built into Bootstrap v4.
// Got this from here: https://ricard.dev/bootstrap-4-second-level-menu-nav/
?>

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}