.overtime-warning {
   background-color: #f7eb00 !important;
   color: white !important;
}

body{
   margin:0;
   padding:0;
   color:#000;
   background:#3D3D3D;
   color: white;
   font: 14px helvetica,arial,sans-serif
}

h1{
   margin:0;
   font-size:1.5em;
   font-weight:500
}

h2,h3{
   margin:0 0 1em;
   font-size:1.3em;
   font-weight:500
}

p{
   margin:0 0 1.5em;
   line-height:1.5
}

.header{
   background-color: #0000DD;
   color: black;
   padding:1em;
}

.nav-bar{
   color:#fff;
   background-color:#000;
   border-bottom: 1px solid black;
   line-height: 1.2em;
   padding: 0.2em 0.5em 0.8em 0.5em;
   font-size: 0.9em;
}

.content{
   padding:1em;
   background-color: #222222;
}

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

th,td {
   border: 1px solid black;
   padding: 3px;
   background-color: #333333;
   font-size: 14px;
}

.done td {
   background-color: #338833;
}

.todays td {
   background-color: #007700;
}

.future td {
   background-color: #FF9900;
}

.tithing td {
   background-color: #FF0000;
}

.inactive td {
   background-color: #663333;
   color: #AAAAAA;
}

.critical td {
   background-color: #AA0000;
}

.warning td {
   background-color: #774400;
}

th {
   background-color: #111111;
}

.light {
   background-color: #555;
}

.headertable {
   border: 0px;
   background-color: #0000DD;
}

.main{
   margin-bottom:1em;
}

.aside{
   margin-bottom:1em;
   background-color: #111;
}

.footer{
   clear:both;
   padding:1em;
   background-color:#000;
}

.navs{
   margin:0;
   padding:0;
   list-style:none;
}

.navs li{
   display:inline;
   margin:0;
}

.navs a{
   display:block;
   padding:0.7em 1.25em;
   color:#fff;
   text-decoration:none;
   border-bottom:1px solid gray
}

.navs a:link{
   color:#fff
}

.navs a:visited{
   color:#fff
}

.navs a:focus{
   color:#000;
   background-color:#fff
}

.nav{
   margin:0;
   padding:0;
   list-style:none;
   vertical-align: top;
}

.nav li{
   display:inline;
   margin:0;
}

.nav a{
   display:block;
   padding:0.7em 1.25em;
   color:#fff;
   text-decoration:none;
   border-bottom:1px solid gray;
}

.nav a:link{
   color:#fff
}

.nav a:visited{
   color:#fff
}

.nav a:focus{
   color:#000;
   background-color:#fff
}

a {
   color: white;
}

.nav a:hover{
   color:#fff;
   background-color: #0000DD;
   padding: 4px;
}

.nav a:active{
   color:#fff;
   background-color:red
}

/*
@media (
   min-width:700px
) */

.header{
   padding:2px 10px;
   font-size: 0.6em;
}

.nav li{
   display:inline;
   margin:0 8px 0 0
}

.navs li{
   display:block;
   width: 120px;
   margin: 0px 8px 0 0
}

ul.navs {
   padding: 0 0 0 10px;
   margin: 0;
}

.nav a{
   display:inline;
   padding:0;
   border-bottom:0
}

.navs a{
   display:block;
   padding:5px;
   border-bottom:0
}

.content{
   /* overflow:hidden; */
   padding: 2em 0 1em
}

.main{
   /* overflow:hidden; */
   margin:0 0.5em 1em 0.5em
}

.aside{
   float:left;
   width:130px;
   margin-left:0px;
   margin-right:0px;
   margin-bottom:0em
}
pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.footer{
   padding:1em 5%
}

.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 5px;
  cursor: pointer;
  background-color: #111;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #111111;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

input[type=number]{
    width: 60px;
} 

.small input[type=number]{
    width: 50px;
} 

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  font-size: 14px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.emoji {
    font-family: "Segoe UI Emoji";
}

/***
div.emojis {
   font-size: 40px;
   display: inline-block;
}

div.emojis_inverted {
  filter: invert(100%);
  font-size: 40px;
  display: inline-block;
}

div.emojis_highlighted {
   font-size: 40px;
   display: inline-block;
   filter: saturate(150%);
}

div.emojis_disabled {
   font-size: 40px;
   display: inline-block;
   filter: saturate(50%);
}

***/

.div-table {
   display: table;         
   width: 500px;         
   background-color: #000;         
   border: 1px solid #000;         
 }
 .div-table-row {
   display: table-row;
   width: auto;
   clear: both;
 }
 .div-table-col {
   float: left; /* fix for  buggy browsers */
   display: table-column;         
   width: 100px;         
   background-color: #333;  
 }