.xlink {cursor:crosshair}
.hlink {cursor:help}
.plink {cursor:pointer}

body
{
  Font-family: Century Gothic, sans-serif;
/*  font-family: Verdana, Arial, Helvetica;  */
  font-size: 14px;
  margin: 0px;
  padding: 0px;
}

h2
{
  font-size: 18px;
  margin: 0px 0px 0px 0px;
//  vertical-align: ;
}

h3
{
  font: bold 14px;
  color: #F00;
  margin: 0px;
  padding: 0px 0px 0px 0px;
}

h4
{
  Font-size: 64px;
  font-weight:normal;
  Font-family: Century Gothic, sans-serif;
  text-shadow: 2px 2px 2px #222;
  color:#EFF;
//  color:#F4F2EC;
}

h5
{
  Font-size: 24px;
  Font-family: Century Gothic, sans-serif;
//  text-shadow: 2px 2px 3px #222;
  text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
//  color:#EFF;
//  color:#EEE9DF;
  color: #C6B392;
  margin: 0px;
}

input
{
  Font-family: Century Gothic, sans-serif;
/*  font-family: Verdana, Arial, Helvetica;  */
  font-size: 18px;
}

img
{
  border: none;
}

div.SameLine
{
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

/*- Menu Tabs--------------------------- */
#TaBZ
{
  float:left;
  width:100%;
  background:#ffffff;
  font-size:100%;
  line-height:normal;
//  border-bottom:1px solid #EEE9DF;
}

#TaBZ ul
{
  margin:0;
  padding:10px 10px 0 50px;
  list-style:none;
}

#TaBZ li
{
  display:inline;
  margin:0;
  padding:0;
}

#TaBZ a
{
  float:left;
  background:url("images/tableft6.gif") no-repeat left top;
//  margin:1;
  padding:0 0 0 4px;
  text-decoration:none;
}

#TaBZ a span
{
  float:left;
  display:block;
  background:url("images/tabright6.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  color:#000;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#TaBZ a span {float:none;}
/* End IE5-Mac hack */

#TaBZ a:hover span
{
  color:#000;
  background:#EEE9DF;
}

#TaBZ a:hover
{
  background-position:0% -42px;
  background:#EEE9DF;
}

#TaBZ a:hover span
{
  background-position:100% -42px;
}

#TaBZ #current a
{
  font-size:16px;
  background-position:0% -42px;
  background:#EEE9DF;
}

#TaBZ #current a span
{
  color:#000;
  font-size:16px;
//  font: bold 10px/1.2em Verdana;
  background-position:100% -42px;
  background:#EEE9DF;
}

.mainscroll
{
  max-height:740px;
/*
  // Firefox
  max-height: -moz-calc(100% - 230px);

  // WebKit
  max-height: -webkit-calc(100% - 230px);

  // Opera
  max-height: -o-calc(100% - 230px);

  // Standard
  max-height: calc(100% - 230px);
*/
  overflow: auto;
  width: 100%;
//  display:block;
}

table.mainlist
{
  width: 100%;
  border: "0";
  border-padding:"2";
//  cellspacing:"1";
}

table.detail
{
  background-color: #EEE9DF;
  border: 0px solid #8DA9C0;
/*
  // Firefox
  height: -moz-calc(100% - 115px);

  // WebKit
  height: -webkit-calc(100% - 115px);

  // Opera
  height: -o-calc(100% - 115px);

  // Standard
  height: calc(100% - 115px);
*/
//  box-shadow: 3px 3px 5px #888;
}

table.ClientInfo, td.ClientName, td.ClientInfo
{
  padding:"2";
  background-color: #EEE9DF;
  border: 0px solid #8DA9C0;
  font-size:32px;
  text-align: center;
}

td.ClientName
{
  font-size:48px;
}

table.LoginTable
{
  width:350;
  margin-left:auto;
  margin-right:auto;
}

table.Password
{
  border-spacing: 4px;
  border-collapse: separate;
//  cellpadding="2" cellspacing="4" 
  background-color: #EEE9DF;
  background:
    linear-gradient(180deg,
                    #FCFAF8 0%,
                    #EEE9DF 100%);

  border: 0px solid #8DA9C0;
  box-shadow: 4px 4px 6px #888;
  margin: 0 auto;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-border-radius: 8px; //edit :D
}

.LoginForm
{
  /*background-color: #EEF2FB; /*#ECF5FA;*/
//  background-color: #FAF9F6; /*#ECF5FA;*/
  background-color: #FFFFFF; /*#ECF5FA;*/
//  border: 1px dashed #A39374;
  padding: 8px;
  box-shadow: 4px 4px 6px #888;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-border-radius: 8px; //edit :D
}

td
{
  font-size: 18px;
}

td.pages
{
//  background-color: #F8F5F1;
//  color: #ff0000;
  color: #695D46;
  font-weight: bold;
  font-size: 18px;
}

td.menu
{
  background-color: #F8F5F1;
}

td.menuhead
{
  background-color: #F8F5F1;
  padding-top: 10px;
//  color: #ff0000;
  color: #695D46;
  font-weight: bold;
  font-size: 18px;
  text-transform: uppercase;
}

td.menucell
{
  font-size: 14px;
  background-color: #FAF9F6; /*#ECF5FA;*/
  /*font-size: 11px;*/
}

td.menucell a
{
  text-decoration: none;
  /*font-weight: bold;*/
  display: block;
}

td.menucell a:hover
{
  text-decoration: underline;
  color: black;
}

td.grid
{
  background-color: #EEE9DF;
  border: 0px solid #8DA9C0;
}

td.grid2
{
  background-color: #EAEAEA;
}

td.gridhead, td.gridhead
{
  background-color: #EEE9DF;
/*
  background:
    -webkit-linear-gradient(180deg,
                            rgb(6, 145, 232) 0%,
                            rgb(3, 121, 195) 50%,
                            rgb(0,  94, 159) 100%);
  background:
    -o-linear-gradient(180deg,
                       rgb(6, 145, 232) 0%,
                       rgb(3, 121, 195) 50%,
                       rgb(0,  94, 159) 100%);
  background:
    linear-gradient(180deg,
                    rgb(6, 145, 232) 0%,
                    rgb(3, 121, 195) 50%,
                    rgb(0,  94, 159) 100%);
*/

  color: #695D46;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
}

td.gridcell, td.gridcell
{
  background-color: #FAF9F6; /*#ECF5FA;*/
  font-size: 14px;
}

td.gridcellalt, td.gridcellalt
{
  background-color: white; /*#F4FAFD;*/
  font-size: 14px;
}

td.gridcellmore, td.gridcellmore
{
  background-color: transparent; /*#ECF5FA;*/
  font-size: 14px;
  color: #505050;
}

td.gridcellmorealt, td.gridcellmorealt
{
  background-color: transparent; /*#F4FAFD;*/
  font-size: 14px;
  color: #505050;
}

td.gridcellmain
{
  background-color: #ECF5FA;
  /*font-weight: bold; */
}

td.gridcellstat
{
//  background-color: #FAF9F6; /*#F4FAFD;*/
/*
  background:
    -webkit-linear-gradient(180deg,
                            rgb(6, 145, 232) 0%,
                            rgb(3, 121, 195) 50%,
                            rgb(0,  94, 159) 100%);
*/
  background:
    -o-linear-gradient(180deg,
                       rgb(6, 145, 232) 0%,
//                       rgb(3, 121, 195) 50%,
                       rgb(0,  94, 159) 100%);

  background:
    linear-gradient(180deg,
                    #FCFAF8 0%,
                    #EEE9DF 50%,
                    #C6B392 100%);


  font-size: 18px;
  font-weight: bold;
}

td.gridcellstat_num
{
  background-color: white; /*#F4FAFD;*/
  /*color: #3C719B;*/
  font-size: 14px;
  text-align: left;
  cursor: hand;
}

td.grid2cell
{
  background-color: #FAFAFA;
}

.LoginTitle
{
//  Font-family: Century Gothic, sans-serif;
//  font-family: Verdana, Arial, Helvetica;  
  font-weight: bold;
  font-size: 24px;
//  margin: 0px;
//  padding: 0px;
}

form.box, div.box
{
  /*background-color: #EEF2FB; /*#ECF5FA;*/
  background-color: #FAF9F6; /*#ECF5FA;*/
  border: 1px dashed #A39374;
  padding: 8px;
}

#togglemenu
{
  font-weight: bold;
  display: block;
  padding: 2px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: #A39374;
  border: 1px solid #A39374;
}

#sidestrip
{
  background: #F8F5F1;
/*
    background:
       -webkit-linear-gradient(180deg,
 *                                   rgb(6, 145, 232) 0%,
 *                                                               rgb(3, 121, 195) 50%,
 *                                                                                           rgb(0,  94, 159) 100%);
 *                                                                                             background:
 *                                                                                                 -o-linear-gradient(180deg,
 *                                                                                                                        rgb(6, 145, 232) 0%,
 *                                                                                                                                               rgb(3, 121, 195) 50%,
 *                                                                                                                                                                      rgb(0,  94, 159) 100%);
 *                                                                                                                                                                        background:
 *                                                                                                                                                                            linear-gradient(180deg,
 *                                                                                                                                                                                                rgb(6, 145, 232) 0%,
 *                                                                                                                                                                                                                    rgb(3, 121, 195) 50%,
 *                                                                                                                                                                                                                                        rgb(0,  94, 159) 100%);
 *                                                                                                                                                                                                                                        */
//  padding: 3px;
  line-height: 7px;
  cursor: pointer;
}

#sidebar
{
  background: #F8F5F1;
//  background-color: #F8F5F1;
/*
 *   background:
 *       -webkit-linear-gradient(180deg,
 *                                   rgb(6, 145, 232) 0%,
 *                                                               rgb(3, 121, 195) 50%,
 *                                                                                           rgb(0,  94, 159) 100%);
 *
 *                                                                                             background:
 *                                                                                                 -o-linear-gradient(180deg,
 *                                                                                                                        rgb(6, 145, 232) 0%,
 *                                                                                                                                               rgb(3, 121, 195) 50%,
 *                                                                                                                                                                      rgb(0,  94, 159) 100%);
 *                                                                                                                                                                        background:
 *                                                                                                                                                                            linear-gradient(180deg,
 *                                                                                                                                                                                                rgb(6, 145, 232) 0%,
 *                                                                                                                                                                                                                    rgb(3, 121, 195) 50%,
 *                                                                                                                                                                                                                                        rgb(0,  94, 159) 100%);
 *
 *                                                                                                                                                                                                                                        */
  border-right: 5px solid #F8F5F1;
}


button
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  border: 1px outset #CC3300;
  border-radius: 5px;
//  background-color: #CC3300;
  background-image: linear-gradient(-180deg, #F88 0%, #C30 100%);
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 3px 3px 5px #888;
}

.button
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  border: 1px outset #CC3300;
  border-radius: 5px;
//  background-color: #CC3300;
  background-image: linear-gradient(-180deg, #F88 0%, #C30 100%);
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
}

.button_nav
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  border: 1px outset gray;
//  background-color: #EEE9DF;
  background-image: linear-gradient(-180deg, #FFF 0%, #EEE9DF 100%);
  color: #CC3300;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 3px 3px 5px #888;
}

.LoginButton
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  border: 1px outset #CC3300;
  border-radius: 5px;
//  background-color: #CC3300;
  background-image: linear-gradient(-180deg, #F88 0%, #C30 100%);
  color: white;
  font-weight: bold;
  cursor: pointer;
}

.Notes
{
  max-height: 580px;
  // Firefox
//  max-height: -moz-calc(100% - 430px);

  // WebKit
//  max-height: -webkit-calc(100% - 430px);

  // Opera
//  max-height: -o-calc(100% - 430px);

  // Standard
//  max-height: calc(100% - 430px);
  overflow: auto;
}

textarea
{
  Font-family: Century Gothic, sans-serif;
  resize: none;
}

textarea.Show
{
  font-size: 18px;
}


// Custom select CSS
// -- from https://freefrontend.com/css-select-boxes/
.MySelect
{
// Must be here to work
}

.MySelect select
{
//  background-color: #0563af;
//  background-color: #F8F5F1;
  background:
    -o-linear-gradient(180deg,
                       rgb(6, 145, 232) 0%,
//                       rgb(3, 121, 195) 50%,
                       rgb(0,  94, 159) 100%);

  background:
    linear-gradient(180deg,
                    #FCFAF8 0%,
                    #EEE9DF 50%,
                    #C6B392 100%);

  color: black;
  padding: 1px;
  width: 150px;
  border: 1px solid #FFF;
//  border: 1px;
//  border-color: #FFF;
  font-size: 18px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  -webkit-appearance: button;
  appearance: button;
  outline: none;
}

.MySelect select option:nth-child(odd) {
  background-color: #EEE9DF; /* Light gray background */
}

fieldset
{
  border:1px solid #999;
  -moz-border-radius: 8px;  
  border-radius: 8px;  
  -webkit-border-radius: 8px; //edit :D
//  border-radius:8px;
  box-shadow:0 0 10px #999;
//  border: 1px red solid;
}

legend
{
  background: #EEE9DF;
  box-shadow: 1 1 2px #222;
  border: 1px solid #fff;
//  margin-left: 1em;
  padding: 0.3em;
}

.msg
{
  color: darkgreen;
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
//  margin-bottom: 5px;
}

.err
{
  color: #F20;
  font-size: 16px;
  font-weight: bold;
//  margin-bottom: 5px;

  animation:2s blinker linear infinite;
  -webkit-animation:2s blinker linear infinite;
  -moz-animation:2s blinker linear infinite;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

@-moz-keyframes blinker
{
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blinker
{
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@keyframes blinker
{
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

.CurrentTime
{
  Font-size: 64px;
  Font-family: Century Gothic, sans-serif;
  text-shadow: 3px 3px 5px #222;
//  color:#EFF;
  color:#EEE9DF;
}

.CurrentDate
{
  Font-size: 40px;
  Font-family: Century Gothic, sans-serif;
  text-shadow: 2px 2px 3px #222;
//  color:#EFF;
  color:#EEE9DF;
}

.CurrentDay
{
  Font-family: Century Gothic, sans-serif;
  font-weight: bold;
//  text-shadow: 1px 1px 1px #222;
//  color:#EFF;
//  color:#EEE9DF;
}

.inputfile
{
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.inputfile + label
{
  font-size: 18px;
  font-weight: Bold;
  color: white;
//  background-color: black;
  display: inline-block;
  cursor: pointer;
  background:
    linear-gradient(180deg,
                    #FFF 0%,
                    #000 100%);
//  box-shadow: 2px 2px 3px #888;
  -moz-border-radius: 2px;
  border-radius: 5px;
  -webkit-border-radius: 2px; //edit :D
  display: block; /* add this */
  padding: 5px;
}

.inputfile:focus + label, .inputfile + label:hover
{
//  background-color: red;
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
  background:
    linear-gradient(180deg,
                    #F88 0%,
                    #C30 100%);
}



#calModal
{
//  width: 80%;           /* Sets a relative width */
//  max-width: 600px;     /* Prevents it from getting too large on big screens */
//  max-height: 80vh;     /* Limits the height to 80% of the viewport height */
  overflow: auto;       /* Enables scrolling if content exceeds max-height */

  width: 468px;           /* Sets a relative width */
  height: 570px;           /* Sets a relative width */
  left: 677px; /* Override default centering margin */
  top: 90px;    /* Align to the top of the viewport */
  padding: 4;
}

#noteModal
{
//  width: 80%;           /* Sets a relative width */
//  max-width: 600px;     /* Prevents it from getting too large on big screens */
//  max-height: 80vh;     /* Limits the height to 80% of the viewport height */
  overflow: auto;       /* Enables scrolling if content exceeds max-height */

  width: 830px;           /* Sets a relative width */
  height: 400px;           /* Sets a relative width */
  left: 718px; /* Override default centering margin */
  top: 142px;    /* Align to the top of the viewport */
  padding: 4;
}

.my-custom-modal .modal-dialog {
  max-width: 900px; /* Set your desired width */
  width: 90%; /* Use percentages for responsiveness */
}

#modalTable
{
}

table.NoteTable
{
  width: 100%;
  margin-left:auto;
  margin-right:auto;
}