#center {
    margin: auto;
    width: 60%;
    padding: 10px;
}

table { /* forcing unclassed is a bad idea? */
    width: 100%;
    border-collapse: collapse;
}

td.min {
    width: 1px;
    white-space: nowrap;
}

th.min {
    width: 1px;
    white-space: nowrap;
}

th.nb {
    border: None;
}

th {
    border: 2px ridge;
    font-size:120%;
}

.unselectable {
    user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

th.pad {
    white-space: nowrap;    /* just better? */
    padding-left: 0.33ch;
    padding-right: 0.33ch;

    user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

tr.hidden {
    display: None;
}

.trtarget {
    background-color: #a0d0a0;
}
.trsource {
    background-color: #f0a0a0;
}

td.pad {
    white-space: nowrap;    /* could be problematic */

    padding-left: 0.33ch;
    padding-right: 0.33ch;

    user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

td.bordered {
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
}

tr.topborder {
    border-top: 2px ridge;
}
tr.lrborder {
    border-left: 2px ridge;
    border-right: 2px ridge;
}
tr.bottomborder {
    border-bottom: 2px ridge;
}

tr.bordered {
    border: 2px ridge;
}
td.padded {
    padding-right:10px
}

tbody.greenbar
    tr:nth-child(6n-2)
{
    border-top: 1px solid lightgray;
    background-color: #F8FFF8;
}
tbody.greenbar
    tr:nth-child(6n-1)
{
    background-color: #F8FFF8;
}
tbody.greenbar
    tr:nth-child(6n-0)
{
    border-bottom: 1px solid lightgray;
    background-color: #F8FFF8;
}

.red
{
    background-color: #FFC0C0;
}

span.red
{
    color: #FF0000;
    background-color: inherit;
}

.darkred
{
    background-color: #FF80A0;
}
.lightgray
{
    background-color: #f0f0f0;
}
.lightblue
{
    background-color: #e0e0ff;
}
.green
{
    background-color: #C0FFC0;
}
.yellow
{
    background-color: #FFFFC0;
}
.brown  /* actually, tan */
{
    background-color: #D2B48C;
}


.inherit-bc
{
    background-color: inherit;
}

th.today
{
    background-color: #C0C0FF;
}

td.today
{
    background-color: #C0C0FF;
}

tr.si5
    td.sd5:nth-of-type(5n+1)
{
    border-right: 1px solid lightgray;
}

img.needs_refresh {
    background-color: #FFA0A0;
    /*border:#CCC thin solid;*/
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
}

body {
    margin: 0;  /*2em;*/
    line-height: 1.2;
    font-family: sans-serif;
}

body.progress_cursor * {
    cursor: progress;
}

body.wait_cursor * {
    cursor: wait;
}

h1, h2, h3, h4 {
    font-family: Arial, Helvetica, sans-serif;
    border-style: none;
}

a, label, #welcome {
    font-size: 110%;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.highlighter {
    font-weight: bold;
    background-color: #FFFF80;
}

form, fieldset, legend, label, input {
    margin: 0;
    padding: 0;
}

/*input#project-text {}*/

a.noline:link {
    text-decoration: none;
}


span, .text {
    /*font-size: 120%;*/
    /*font-weight: bold;*/
    font-family: Arial, Helvetica, sans-serif;
}

.plain {
    font-size: 90%;
    font-style: normal;
    font-family: Arial, Helvetica, sans-serif;
}

.italic {
    font-size: 90%;
    font-weight: normal;
    font-style: italic;
    font-family: Arial, Helvetica, sans-serif;
}

.header {
    text-align:left;
    vertical-align:bottom
}

.left {
    float:left
}

.right {
    float:right
}

.cwd {
    clear:both
}

.container {
    display: flex;
    display: 100%;
}

.flexcontainer {
    display: flex;
}

.flex1 {
    flex: 1;
    overflow: auto;
}
.flex2 {
    flex: 2;
    overflow: auto;
}

.leftbox {
    width: 50%;
}

.rightbox {
    flex-grow: 1;
}

.directories {
    margin: auto;
    width: 100%;
    padding: 10px;
    border-style:ridge;
}

/* .directories-:-moz-drag-over {*/

.directories_over {
    margin: auto;
    width: 100%;
    padding: 10px;
    border-style: solid;
    border-color: green;
}

/* experiments with column stuff
    can't wrap well without specifying some constraints
*/
.files {
    margin: auto;
    width: 100%;
    padding: 10px;
    border-style:ridge;

    /* this works, but we don't know how many columns we should use
    column-count: 2;
    column-gap: 0;
    flex-direction: column;
    display: flex;
    flex-wrap: wrap;
    */
}
.onefile {
    display: block;
    /*
    border-style:ridge;
    white-space:nowrap;
    display: flex;
    */
}

.ridge {
    border-style:ridge;
    padding: 2px;
}

span.ridge {
    display: block;
    font-size: 120%;
    border-style:ridge;
    margin: 2px;
    padding: 2px;
}

.smaller {
    font-size: 80%;
}

input[type="button"], input[type="submit"], .button {
    font-size: 120%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    background-color: #EEEEEE;
    color: #333333;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
}

/*ALL pseudo-buttons?
button class is only applied to <a>
*/
input[type="button"]:hover, input[type="submit"]:hover, .button:hover {
    box-shadow: inset 0 0 0 2px #C0C0C0, 0 0 1px rgba(0, 0, 0, 0);
}

input[type="button"]:active, input[type="submit"]:active {
    transform: scale(.875)
}

a.button {
    font-size: inherit;
    font-weight: inherit;
}

a.button:active {
    display: inline-block;
    transform: scale(.875)
    /*transform: translate(2px, 2px)*/
}


tr.doubleclickable:hover {
    background-color:#f5f5f5;
}

.hidden {
    visibility: hidden;
}

div.hidden {
    display: None;
}

div.bordered {
    border: 2px ridge;
}

.default {
    font-weight: bold;
    /*border: 3px solid #80C0FF;*/
}

.disable_cursor {
    pointer-events: none;
    cursor: wait;
}


.vscroll {
    overflow-x: visible; /* no x clip */
    overflow-y: auto;   /* Add vertical scrollbar if needed */
}

 /* The Modal (background) */
 .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    top: 10%;
    padding: 20px;
    border: 1px solid #888;
    width: 65%; /* Could be more or less, depending on screen size */
    max-height: 85%;
    overflow-y: auto;   /* Add vertical scrollbar if needed */
  }

  /* Modal Content/Box */
  .modal-content-2 {
    background-color: #fefefe;
    margin: 10vh auto; /* 10% from the top and centered */
    padding: 1vh;
    border: 1px solid #888;
    width: 65%; /* Could be more or less, depending on screen size */
    max-height: 85%;
    overflow-y: auto;   /* Add vertical scrollbar if needed */
    display: flex;
    flex-direction: column;
  }

  /* The Close Button */
  .modalbutton {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .modalbutton:hover,
  .modalbutton:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  .dropbtn {
    /*background-color: #4CAF50;
    color: white;
    padding: 2px 8px;*/
    /*font-size: 16px;*/
    /*height: 100%;
    width: 100%;*/
    /*border: none;*/

    width: 100%;
    font-size: 120%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    background-color: #EEEEEE;
    color: #333333;
    /* top right bottom left */
    /*padding: 2px 6px 2px 6px; */
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
}

.dropdown {
    /*position: relative;*/
    /*display: inline-block;*/
    text-align: center
}

.dropdown-content {
    text-align: left;
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    /*min-width: 160px;*/
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    padding: 16px 8px 16px 8px;
}

.dropdown-content a {
    color: black;
    padding: 2px 8px;
    text-decoration: none;
    display: block;
    font-size: 100%;
    font-style: normal;
    font-family: Arial, Helvetica, sans-serif;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #dddddd;
}

.dropdown:hover .dropbtn2 {
    background-color: #dddddd;
}

.noselect {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

 /* Style the tab */
 .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

.subtab {
    display: block;
    overflow: hidden;
    border: 1px solid #ddd;
    background-color: #e0e0f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    /*float: left;*/
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Change background color of buttons on hover */
.subtab button:hover {
    background-color: #ccd;
}

/* Create an active/current tablink class */
.subtab button.active {
    background-color: #bbc;
}

img.clickable:hover {
    background-color: #ddd;
}

/* Style the tab content */
.tabcontent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    display: none;
    padding: 6px 12px;
    border: none;   /*1px solid #ccc;*/
    border-top: none;
}

html {
    height: 100%;   /* required! */
}

.fullscreen {
    margin: 0;  /*2em;*/
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;   /* required! */
}

div.top-section {
    flex: 0 1 auto;
}
div.bottom-section {
    flex: 0 1 auto;
    border-style: ridge;
    background-color:#d0e0ff;
}

div.outer-content {
    overflow: hidden;
    flex-grow: 1;
    position: relative;
}

div.inner-content { /* where is this referenced? */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

div.flex-top {
    /*flex: 0 1 auto*/
    height: 200px;
}

div.flex-content {
    /*flex: 0 1 auto;*/
    overflow: scroll;
    max-height: calc(50%-200px);
}

div.flex-fill {
    flex: 1 1 auto;
}

dev.flex-bottom {
    flex: 0 0 40px;
    overflow: auto;
}

button.image {
    background: transparent;
    border: none;
    outline: none;
    padding: 1px 1px 1px 1px;
}

button.image:hover {
    background-color: #F0F0F0;
}

button.image:active {
    background-color: #F0F0F0;
    border: none;
    outline: none;
    transform: scale(.875)
    /*transform: translate(2px, 2px)*/
}

button.text {
    /*
    border-radius: 2px;
    */
    user-select: none;
}

button.text:hover {
    box-shadow: inset 0 0 0 2px #C0C0C0, 0 0 1px rgba(0, 0, 0, 0);
}

button.text:active {
    transform: scale(.875)
}

a.image:hover img {
    background-color: #D0F0F0;
}

a.image:active img {
    background-color: #F0F0F0;
    border: none;
    outline: none;
    transform: scale(.875)
    /*transform: translate(2px, 2px)*/
}


.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
}

/* firefox uses inset/outset BY DEFAULT and it looks good
    chrome doesn't
*/

button.show-table-button {
    border-style: outset;
    border-radius: 2px;
    user-select: none;
}

button.show-table-button:hover {
    box-shadow: inset 0 0 0 2px #C0C0C0, 0 0 1px rgba(0, 0, 0, 0);
}

button.show-table-button:active {
    transform: scale(.875)
    /*transform: translate(2px, 2px)*/
    /*border-style: inset*/
}

/* hoverable drop
.hoverdrop-btn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}
*/
.hoverdrop-btn {
    padding: unset;
}

.hoverdrop {
    position: relative;
    display: inline-block;
}

/* given box button source
    if it goes up, we want it to be from the side
    if it goes down, we want it to be from the bottom
    for middle left or right, again from the side
    for center down, again from the bottom
*/
.pop-up-left {
    right: 100%;
    bottom: 0px;
}

.pop-up-right {
    left: 100%;
    bottom: 0px;
}

.pop-mid-left {
    right: 100%;
    top: 50%;
    transform:translateY(-50%);
}

.pop-mid-right {
    left: 100%;
    top: 50%;
    transform:translateY(-50%);
}

.pop-down-left {
    top: 100%;
    right: 0px;
}

.pop-down-right {
    top: 100%;
    left: 0px;
}

.pop-down-center {
    top: 100%;
    left: 50%;
    transform:translateX(-50%);
}


/* two problem cases; too near the top and too near the bottom */

.hoverdrop-content {
    display: none;
    /* with relative positioning, the ancestor containers must get larger
        to contain the new item
    position: relative;
    */
    /* with absolute the immediate ancestors don't grow; we're out of the flow */
    position: absolute;
    /* now requires one of the pop- settings from above */
    background-color: #f1f1f1;
    /*min-width: 160px;*/
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.hoverdrop-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.hoverdrop-content span {
    border: none;
    background-color: white;
    width: 100%;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    white-space: nowrap;
}

button.smaller {
    font-size: 80%;
    color: black;
    padding: 0.5ch 0.5ch;
    text-decoration: none;
}

.hoverdrop-content button {
    border: none;
    width: 100%;
    color: black;
    padding: 0.5ch 0.5ch;
    text-decoration: none;
    display: block;
}

.hoverdrop-content button:hover {background-color: #ddd;}

.hoverdrop:hover .hoverdrop-content {display: block;}

.hoverdrop:hover .hoverdrop-btn {background-color: #c0c0c0;}

/* for nesting */

.hoverdrop2 {
    position: relative;
    display: inline-block;
}

.hoverdrop2-content {
    display: none;
    font-weight: normal;    /*ugh*/
    position: absolute;
/*
    left: 0%;
    top: 100%;
*/
    background-color: #f1f1f1;
    /*min-width: 160px;*/
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.hoverdrop2-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.hoverdrop2-content span {
    border: none;
    background-color: white;
    width: 100%;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    white-space: nowrap;
}

/* are we using this?
.hoverdrop2-content button {
    border: none;
    width: 100%;
    color: black;
    padding: 1px 6px;
    text-decoration: none;
    display: block;
}
*/

.hoverdrop2-content button:hover {background-color: #ddd;}

.hoverdrop2:hover .hoverdrop2-content {display: block;}

.hoverdrop2:hover .hoverdrop2-btn {background-color: #c0c0c0;}


td.center {
    text-align: center
}

td.right {
    text-align: right
}

button.normal {
    box-shadow: inset 0 0 0 2px #C0C0C0, 0 0 1px rgba(0, 0, 0, 0);
}

th.dsp {
    font-size: unset;
    font-weight: bold;
    text-align: right;
    border: none;
}

.flddiv {
    width: 100%;
}
.fldblock {
    width: 71%;
    display: inline-block;
}

.fldlabel {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */

   vertical-align: top;
    text-align: right;
    width: 25%;
}
.inline-block {
    display: inline-block
}

.fldinput {
    vertical-align: middle;
    width: 71%;
}
.fldinputhalf {
    vertical-align: middle;
    width: 35%;
}

.fldcombo {
    width: 100%;
    cursor: default;
}
.fldselect {
    width: 100%;
}

.inputicon {
    display: inline-block;
    width: 1ch;
    position: absolute;
    top: 0;
    right: 1ch;
    user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}
.inputicon2 {
    display: inline-block;
    width: 1ch;
    position: absolute;
    top: 0;
    right: 2ch;
    user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

.picker-div {
    overflow: visible;  /* not helping yet */
    background-color: #f1f1f1;
    /*border: #000000*/
    /*min-width: 160px;*/
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    z-index: 1;
}

button:disabled {
    background: #90a0b0;
    color: #555;
    cursor: not-allowed;
}

/* this doesn't work
tr.fixed {
    display: block;
}

tbody.scrollable {
    display: block;
    overflow: auto;
    max-height: 500px;
}
*/

/* css example
    i think this cheats by setting the column widths
.fixed_header{
    width: 400px;
    table-layout: fixed;
    border-collapse: collapse;
}

.fixed_header tbody{
    display:block;
    width: 100%;
    overflow: auto;
    height: 100px;
}

.fixed_header thead tr {
    display: block;
}

.fixed_header thead {
    background: black;
    color:#fff;
}

.fixed_header th, .fixed_header td {
    padding: 5px;
    text-align: left;
    width: 200px;
}
*/

tr.selected {
    background-color: #B0A0ff;
}

div.current_message {
    border: 2px ridge;
}

td.unread {
    font: bold 101% sans-serif;
}

div.message_header {
    /*width: 100%;*/
    background: #eef;
    padding: .5ch;
}
table.message_header {
    width: auto;
    background: none;
}

td.message_label {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */

    font: bold 101% sans-serif;
    padding-left: 0.33ch;
    padding-right: 0.66ch;
    text-align: right;
}

div.message_body {
    /*width: 100%;*/
    background: white;
    padding: .5ch;
}

/*
table.message_buttons {
}
*/

div.detail-bordered {
    width: 97%;
    border: 2px ridge;
    padding-top: 2px;
    margin-bottom: 3px;
}

td.hilite {
    background-color: #B0A0ff;
}
tr.hilite {
    border: 2px ridge;
}

nowrap {
    white-space: nowrap;
}

.edit_record_form {
    background: #F0F0ff;
    border: 2px ridge;
}

.create_dispatch_form {
    background: #F0F0ff;
    border: 2px ridge;
}

table.topic_table { /* forcing unclassed is a bad idea? */
    display: block;
    max-height: 35vh;
    overflow: auto;
}

table.message_table {
    display: block;
    max-height: 35vh;
    overflow: auto;
}

table.vscroll_table {
    display: block;
    max-height: 35vh;
    overflow: auto;
}

tr.top {
    border: 2px ridge;
    background-color: white;
    position: sticky;
    top: 0;
}

th.sticky {
    background-color: white;
    position: sticky;
    top: 0;
}

span.heading {
    font-weight: bold;
    font-size: 120%;
}

input:disabled {
    /* safari is pretty sticky here */
    -webkit-text-fill-color: #400000;
    color: #400000; /* inherit, other? */
    opacity: 1;
    -webkit-opacity: 1;
    background: #F0F0F0;
}

.dispatchviewer {
    border: 2px ridge;
}