:root {
  --navbarcolor: #004d99;
  --navbarcolort: White;
  
  --h1color: #4da6ff;
  --h1colort: White;
  
  --tableborder: #004d99;
  --tableheader: #93aec9;
  --tableheadert: White;
  
  --tablerow1: #ffffff; /* default */
  --tablerow1t: Black;
  
  --tablerow2: #d7dce0; /* alt */
  --tablerow2t: Black;
  
  --buttondefault: #9999ff;
  --buttondefaultt: White;
  
  --buttonaccept: #85e085;
  --buttonacceptt: White;
  
  --buttondecline: #ff3333;
  --buttondeclinet: White;
  
}

a.plainlink:link {
  text-decoration: none;
  color: White;
  
}

a.plainlink:visited {
  text-decoration: none;
  color: White;
  
  
}

a.novisited:visited {
  text-decoration: none;
  color: #0000EE;
  
}

h1.default {
    color: var(--h1colort);
    background-color: var(--h1color);
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    
}

h1 {
    vertical-align: middle;
    color: var(--h1colort);
    background-color: var(--h1color);
    padding: 0px;
    margin: 0px;
    
}

/* layout */
div.table { display: table; width:100%;}
div.tr { display: table-row; }
div.th { display: table-header-group; }
div.tbody { display: table-row-group; }
div.tfoot { display: table-footer-group; }
div.td, .th { display: table-cell; vertical-align: middle; }

div.togglerow { display: table-row; }
div.togglerow:nth-child(even) { display: table-row; background: lavender; color: black; }

div.tdl { display: table-cell; text-align: left; }
div.tdc { display: table-cell; text-align: center; }
div.tdr { display: table-cell; text-align: right; }
div.tdlm { display: table-cell; text-align: left; vertical-align: middle;}
div.tdcm { display: table-cell; text-align: center; vertical-align: middle;}
div.tdrm { display: table-cell; text-align: right; vertical-align: middle;}
div.tdlt { display: table-cell; text-align: left; vertical-align: top;}
div.tdct { display: table-cell; text-align: center; vertical-align: top;}
div.tdrt { display: table-cell; text-align: right; vertical-align: top;}


.defaultform {
  border-radius: 5px;
  background-color: #E3F2FD;
  padding: 20px;
  outline-style: solid;
  outline-color: black;
  
}

.floatingwindowparent {
  position: relative;
  display: inline;
  border-bottom: 1px dotted black;
}

.floatingwindowparent .floatingwindowchild {
  visibility: hidden;
  width: 100%;          /* width of parent link */
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: -100px;
  left: -50%;           /* to the left of parent link */
  margin-left: -50%;    /* to the left of parent link */
  opacity: 0;
  transition: opacity 0.3s;
  
}

.floatingwindowparent .floatingwindowchild::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 00%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.floatingwindowparent:hover .floatingwindowchild {
  visibility: visible;
  opacity: 1;
}

table.defaulttable {
  border: 2px solid var(--tableborder);
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

table.defaulttable tr {
  background: var(--tablerow1);
  color: var(--tablerow1t);
}

table.defaulttable td, table.defaulttable th {
  padding: 3px 4px;
}
table.defaulttable tbody td {
  font-size: 16px;
  text-align: left;
  border-bottom: 2px solid var(--tableborder);
}

table.defaulttable tr:nth-child(even) {
  background-color: var(--tablerow2);
  color: var(--tablerow2t);
}

/* dont alternate rows in the header section */
table.defaulttable thead tr:nth-child(even) {
  background: var(--tableheader);
  color: var(--tableheadert);
  border: 2px solid var(--tableborder);
}

table.defaulttable thead {
  background: var(--tableheader);
  xborder-bottom: 4px solid var(--tableborder);
}

table.defaulttable th { /* th not in a thead */
  border: 2px solid var(--tableborder);
  background: var(--tableheader);
  color: var(--tableheadert);
  text-align: left;
  
}

table.defaulttable thead th {
  font-size: 18px;
  font-weight: bold;
  background: var(--tableheader);
  color: var(--tableheadert);
  text-align: left;
  border-left: 2px solid var(--tableborder);
}


    
table.defaulttable thead th:first-child {
  border-left: none;
}

table.defaulttable tfoot {
  font-size: 14px;
  font-weight: bold;
  border-top: 4px solid var(--tableborder);
  
}

table.defaulttable tfoot td {
  font-size: 14px;
  
}

table.sortablecolumns th {
  cursor: pointer;
  
}

button.default {
    border: 1px solid #006633;
    background-color: #9B59B6;
    color: #ffffff;
    border-radius: 5px;
    padding: 2px;
    margin: 2px;
    
    width: calc(100% - 10px);
    max-width: 120px;
    min-width: 60px;
    /* text-align: right; */
    
}

button.default:hover {
    border: 1px solid #006633;
    background-color: #A569BD;
    color: #ffffff;
    cursor: pointer;

}

input[type="submit"], button.accept {
    border: 1px solid #006633;
    background-color: #009966;
    color: #ffffff;
    border-radius: 5px;
    padding: 2px;
    margin: 2px;
    
    width: calc(100% - 10px);
        
    max-width: 120px;
    min-width: 60px;
    /* text-align: right; */
    
}

input[type="submit"]:hover, button.accept:hover {
    border: 1px solid #006633;
    background-color: #00cc33;
    color: #ffffff;
    cursor: pointer;

}

button.decline {
    border: 1px solid #006633;
    background-color: red;
    color: #ffffff;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    
    width: calc(100% - 10px);
    height: 32px;
    
    /* text-align: right; */
    
}

button.decline:hover {
    border: 1px solid #006633;
    background-color: red;
    color: #ffffff;
    cursor: pointer;

}

.pagination{
    display:inline-block;
    padding-left:0;
    margin:20px 0;
    border-radius:4px}

.pagination>li{
    display:inline}

.pagination>li>a,.pagination>li>span{
    position:relative;
    float:left;
    padding:6px 12px;
    margin-left:-1px;
    line-height:1.42857143;
    color:#337ab7;
    text-decoration:none;
    background-color:#fff;
    border:1px solid #ddd}
.pagination>li:first-child>a,.pagination>li:first-child>span{
    margin-left:0;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px}
.pagination>li:last-child>a,.pagination>li:last-child>span{
    border-top-right-radius:4px;
    border-bottom-right-radius:4px}
.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{
    z-index:2;color:#23527c;background-color:#eee;border-color:#ddd}
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{
    z-index:3;color:#fff;
    cursor:default;
    background-color:#337ab7;
    border-color:#337ab7}
.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{
    color:#777;
    cursor:not-allowed;
    background-color:#fff;
    border-color:#ddd}
.pagination-lg>li>a,.pagination-lg>li>span{
    padding:10px 16px;
    font-size:18px;
    line-height:1.3333333}
.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{
    border-top-left-radius:6px;border-bottom-left-radius:6px}
.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{
    border-top-right-radius:6px;
    border-bottom-right-radius:6px}
.pagination-sm>li>a,.pagination-sm>li>span{
    padding:5px 10px;
    font-size:12px;line-height:1.5}
.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{
    border-top-left-radius:3px;
    border-bottom-left-radius:3px}
.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{
    border-top-right-radius:3px;
    border-bottom-right-radius:3px}
.pager{padding-left:0;
      margin:20px 0;
      text-align:center;
      list-style:none}

ul.flatlist {
    padding-left: 0;
}

ul.flatlist>li {
  cursor: pointer;
  position: relative;
  padding: 12px 10px 12px 10px;
  list-style-type: none;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
  
  /* make the list items unselectable */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
ul.flatlist>li:nth-child(odd) {
  background: #f9f9f9;
}

/* Darker background-color on hover */
ul.flatlist>li:hover {
  background: #ddd;
}

div.navcontainer {
    float: right; 
    vertical-align: middle;
   
}

div.navtitlebox {
    display: inline-block;
    width: auto;
    min-width: 300px;
    text-align: center;
    
}

div.navarrowbox {
    display: inline-block;
    width: 50px;
    text-align: center;
            
}