/*------------*/
/*----MAIN----*/
/*------------*/
/*
    # - ID's
    . - Classes
*/
html,
body {
  margin: 0;
  padding: 0;
  background-color: #357ec7;
  /*#ADDFFF; /*#3333ff;  /*#000099; /*#c1d8f1;*/
  font-family: Arial;
}

input#showmore {
  color: transparent;
  text-shadow: 0 0 0 #000;
  padding: 2px 2px;
  width: 100px;
  margin-bottom: 11px;
  cursor: pointer;
}

optgroup {
  font-size: 10px;
}

#smInBox {
  font-size: 10px;
}

.totalCell {
  background-color: #99ccff;
  border-left: 1px solid black;
  font-size: 11px;
  font-weight: bold;
  width: 26px;
  max-width: 26px;
}

.totalCellPerDay {
  background-color: #94d152;
  font-size: 11px;
  font-weight: bold;
  width: 26px;
  max-width: 26px;
}

/*--------------------*/
/*----REGISTER.PHP----*/
/*--------------------*/
#regForm {
  font-family: arial;
  font-size: 12px;
  color: #555;
}

#regPortal {
  width: 800px;
  height: auto;
  background-color: #fff;
  border-radius: 6px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.regHead {
  font-family: Arial;
  font-size: 18px;
  color: #555;
}

/*--------------------*/
/*----RESET.PHP----*/
/*--------------------*/
#resetPortal {
  width: 500px;
  height: 600px;
  background-color: #fff;
  border-radius: 6px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

/*-----------------*/
/*----INDEX.PHP----*/
/*-----------------*/
#loginPortal {
  width: 300px;
  height: 300px;
  background-color: #fff;
  border-radius: 6px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#loginPortal:hover {
  box-shadow: 0px 0px 4px #183e68;
}

.cjmtiLogo {
  position: relative;
  width: 200px;
  margin: 8px auto 0;
}

#login td {
  font-family: arial;
  font-size: 16px;
  color: #555;
}

.loginButton {
  transition: all 500ms ease-in-out;
  width: 100px;
  height: auto;
  background-color: #3783d2;
  color: #fff;
  border-radius: 3px;
  border: none;
  padding: 6px;
}

.loginButton:hover {
  background-color: #133253;
}

.hypReg {
  font-size: 11px;
  font-family: arial;
  color: #555;
  text-decoration: underline;
}

.logout {
  font-size: 11px;
  font-family: arial;
  color: #555;
  text-decoration: underline;
}

/*------------------*/
/*-----HOME.PHP-----*/
/*------------------*/
#timeSummPortal {
  max-width: 1280px;
  padding: 1px;
  max-height: 900px;
  background-color: #fff;
  border-radius: 6px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100vw;
  height: auto;
  background-color: #fff;
  border-radius: 6px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#timeSummPortal tr.tiles,
#timeSummPortal tr.tiles input,
#timeRvwPortal tr.tiles,
#timeRvwPortal tr.tiles input,
#timeRvwPortal tr.tiles-areas-completed,
#timeRvwPortal tr.tiles-areas-completed input,
#timeRvwPortal tr.tiles-areas-installed,
#timeRvwPortal tr.tiles-areas-installed input,
#timeSummPortal tr.tiles-areas-completed,
#timeSummPortal tr.tiles-areas-completed input,
#timeSummPortal tr.tiles-areas-installed,
#timeSummPortal tr.tiles-areas-installed input,
#timeSummPortal tr.tiles-lineal-feet-completed,
#timeSummPortal tr.tiles-lineal-feet-completed input,
#timeRvwPortal tr.tiles-lineal-feet-completed,
#timeRvwPortal tr.tiles-lineal-feet-completed input,
#timeRvwPortal tr.tiles-trello-card-completed,
#timeRvwPortal tr.tiles-trello-card-completed input,
#timeSummPortal tr.tiles-slab-cut,
#timeSummPortal tr.tiles-slab-cut input,
#timeRvwPortal tr.tiles-slab-cut,
#timeRvwPortal tr.tiles-slab-cut input {
  background-color: #ddd;
}

#timeSummPortal tr.tiles.num-tiles,
#timeSummPortal tr.tiles.num-full-tiles td.totalCell,
#timeSummPortal tr.tiles.size-full-tiles td.totalCell,
#timeSummPortal tr.tiles.num-cut-tiles td.totalCell,
#timeSummPortal tr.tiles.size-original-full-tiles td.totalCell,
#timeSummPortal tr.tiles.crew-size td.totalCell,
#timeSummPortal tr.tiles.num-tiles td.totalCell,
/*#timeSummPortal tr td.empty-work-id, */
#timeSummPortal tr td.total-lineal-feet-completed,
#timeRvwPortal tr.tiles.num-tiles,
#timeRvwPortal tr.tiles.square-foot,
#timeSummPortal tr.tiles.square-foot,
#timeSummPortal tr.tiles.square-foot td.totalCell,
#timeRvwPortal tr.tiles.num-full-tiles td.totalCell,
#timeRvwPortal tr.tiles.size-full-tiles td.totalCell,
#timeRvwPortal tr.tiles.num-cut-tiles td.totalCell,
#timeRvwPortal tr.tiles.size-original-full-tiles td.totalCell,
#timeRvwPortal tr.tiles.crew-size td.totalCell,
#timeRvwPortal tr.tiles.num-tiles td.totalCell,
#timeRvwPortal tr.tiles.square-foot td.totalCell,
/* #timeRvwPortal tr td.empty-work-id, */
#timeRvwPortal tr td.total-lineal-feet-completed,
#timeRvwPortal tr td.total-slab-cut {
  background-color: #94d152;
}

#timeSummPortal .time-entry-line.work-id-401 tr td.empty-work-id,
#timeSummPortal .time-entry-line.work-id-401 tr:first-child td.totalCell,
/* #tblTimeSumm .time-entry-line.work-id-401 tr td.empty-work-id, */
#tblTimeSumm .time-entry-line.work-id-401 tr:first-child td.totalCell {
  background-color: #90A9DF;
}

td.empty-work-id-210,
td.empty-work-id-211,
td.empty-work-id-220,
td.empty-work-id-221,
td.empty-work-id-222,
td.empty-work-id-223,
td.empty-work-id-224,
td.empty-work-id-225,
#tblTimeSumm .time-entry-line.work-id-210 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-210 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-211 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-211 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-220 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-220 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-221 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-221 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-222 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-222 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-223 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-223 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-224 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-22xi43 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-225 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-225 tr:first-child td.totalCell,
#timeSummPortal .time-entry-line.work-id-221 tr td.empty-work-id,
#timeSummPortal .time-entry-line.work-id-224 tr td.empty-work-id,
#timeSummPortal .time-entry-line.work-id-222 tr td.empty-work-id,
#tblTimeSumm .time-entry-line.work-id-221 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-222 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-224 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-221 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-222 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-224 tr:first-child td.totalCell {
  background-color: #ffc100;
}

.total-lineal-feet-completed.empty-work-id-224 {
  background-color: #ffc100 !important;
}

td.empty-work-id-303,
td.empty-work-id-304,
td.empty-work-id-305,
td.empty-work-id-306,
td.empty-work-id-307,
td.empty-work-id-308,
td.empty-work-id-309,
td.empty-work-id-310,
td.empty-work-id-315,
td.empty-work-id-400,
td.empty-work-id-401,
td.empty-work-id-402,
#tblTimeSumm .time-entry-line.work-id-303 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-304 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-305 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-306 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-307 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-308 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-309 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-310 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-315 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-400 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-410 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-402 tr:first-child td.totalCell {
  background-color: #99CCFF;
}

td.empty-work-id-102,
td.empty-work-id-103,
td.empty-work-id-600,
td.empty-work-id-602,
#tblTimeSumm .time-entry-line.work-id-102 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-103 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-600 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-602 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-102 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-103 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-600 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-602 tr:first-child td.totalCell {
  background-color: #FFFF00;
}

td.empty-work-id-200,
td.empty-work-id-201,
td.empty-work-id-202,
td.empty-work-id-300,
td.empty-work-id-301,
td.empty-work-id-910 {
  /* background-color: #6CBB3C;  */
  background-color: #94d152;
}

#tblTimeSumm .time-entry-line.work-id-700 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-700 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-801 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-801 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-802 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-802 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-920 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-920 tr:first-child td.totalCell,
td.empty-work-id-700,
td.empty-work-id-801,
td.empty-work-id-802,
td.empty-work-id-920 {
  background-color: #FFFFFF;
}

td.empty-work-id-100,
#tblTimeSumm .time-entry-line.work-id-100 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-100 tr:first-child td.totalCell,
td.empty-work-id-101,
#tblTimeSumm .time-entry-line.work-id-101 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-101 tr:first-child td.totalCell,
td.empty-work-id-110 #tblTimeSumm .time-entry-line.work-id-110 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-110 tr:first-child td.totalCell {
  background-color: #D9DADC;
}

#tblTimeSumm .time-entry-line.work-id-500 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-500 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-550 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-550 tr:first-child td.totalCell,
td.empty-work-id-500,
td.empty-work-id-550 {
  color: white;
  background-color: #7030A0;
}

#tblTimeSumm .time-entry-line.work-id-900 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-900 tr:first-child td.totalCell,
td.empty-work-id-900 {
  background-color: #FE0002;
}

#tblTimeSumm .time-entry-line.work-id-300 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-300 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-301 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-301 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-200 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-200 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-201 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-201 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-910 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-910 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-202 tr:first-child td.totalCell,
#timeRvwPortal .time-entry-line.work-id-202 tr:first-child td.totalCell,
#tblTimeSumm .time-entry-line.work-id-202 tr td.totalCell-slab-cut,
#timeRvwPortal .time-entry-line.work-id-202 tr td.totalCell-slab-cut {
  background-color: #94d152;
}

#tblTimeSumm {
  background-color: #fff;
  padding: 12px;
  border-radius: 8px;
  font-size: 11px;
  color: #000;
  margin-top: 12px;
  width: 98%;
  margin: 0 auto;
}

#tblTimeSumm tr {
  height: 12px;
}

#timeSummPortalLG {
  max-width: 1280px;
  max-height: 900px;
  background-color: #fff;
  border-radius: 6px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100vw;
  padding: 1px;
}

#tblTimeSummLG {
  background-color: #fff;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #555555;
  margin-top: 12px;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  /*border-collapse:collapse;*/
}

#tblTimeSummLG tr {
  height: 12px;
}

.pieces_stats {
  text-align: center;
  margin: 0 auto 10px;
  max-width: 90%;
  background: lightgray;
  border: 1px solid black;
  border-collapse: collapse;
  font-size: 10px;
}

.pieces_stats td,
.pieces_stats th {
  border: 1px black solid;
  padding: 6px !important;
  text-align: center;
}

.pieces_stats td {
  min-width: 138px;
}

.pieces_stats td.last-year {
  min-width: 178px;
}

.pieces_stats .result {
  font-weight: bold;
}

table.weekly-average {

  background: lightgray;
}

#weekly-average {
  width: 520px !important;
}

#pieces_stats_total {
  width: 520px !important;
}

#pieces_stats_alone {
  width: 520px !important;
}

#pieces_stats_with_help {
  width: 520px !important;
}

.weekly-average {
  text-align: center;
  margin: 0 auto 10px;
  max-width: 90%;
  border: 1px solid black;
  border-collapse: collapse;
  font-size: 10px;
}

.weekly-average td,
.weekly-average th {
  border: 1px black solid;
  padding: 6px !important;
  text-align: center;
}

.weekly-average td {
  min-width: 138px;
}

.day {
  text-align: center;
  border-left: 5px solid #99ccff;
}

.totalCell {
  text-align: right;
}

#tblTimeSumm .time-entry-line tr.tiles,
#tblTimeSumm .time-entry-line tr.tiles .hidden-input,
#tblTimeSumm .time-entry-line tr.tiles-lineal-feet-completed,
#tblTimeSumm .time-entry-line tr.tiles-lineal-feet-completed .hidden-input,
#tblTimeSumm .time-entry-line tr.tiles-areas-installed,
#tblTimeSumm .time-entry-line tr.tiles-areas-installed .hidden-input,
#tblTimeSumm .time-entry-line tr.tiles-areas-completed,
#tblTimeSumm .time-entry-line tr.tiles-areas-completed .hidden-input,
#tblTimeSumm .time-entry-line tr.tiles-slab-cut,
#tblTimeSumm .time-entry-line tr.tiles-slab-cut .hidden-input,
#tblTimeSumm .time-entry-line tr.num-tiles .hidden-input,
#timeRvwPortal .time-entry-line tr.tiles,
#timeRvwPortal .time-entry-line tr.tiles .hidden-input,
#timeRvwPortal .time-entry-line tr.tiles-lineal-feet-completed,
#timeRvwPortal .time-entry-line tr.tiles-lineal-feet-completed .hidden-input,
#timeRvwPortal .time-entry-line tr.tiles-trello-card-completed .hidden-input,
#timeRvwPortal .time-entry-line tr.tiles-areas-installed,
#timeRvwPortal .time-entry-line tr.tiles-areas-installed .hidden-input,
#timeRvwPortal .time-entry-line tr.tiles-areas-completed,
#timeRvwPortal .time-entry-line tr.tiles-areas-completed .hidden-input,
#timeRvwPortal .time-entry-line tr.tiles-slab-cut,
#timeRvwPortal .time-entry-line tr.tiles-slab-cut .hidden-input,
#timeRvwPortal .time-entry-line tr.num-tiles .hidden-input 
{
  display: none;
}

tr.num-tiles {
  /*border-bottom: 1px solid #fff;*/
}

#tblTimeSumm .time-entry-line.work-id-300 tr.tiles,
#timeRvwPortal .time-entry-line.work-id-300 tr.tiles,
#tblTimeSumm .time-entry-line.work-id-301 tr.tiles,
#timeRvwPortal .time-entry-line.work-id-301 tr.tiles,
#tblTimeSumm .time-entry-line.work-id-224 tr.tiles-lineal-feet-completed,
#timeRvwPortal .time-entry-line.work-id-224 tr.tiles-lineal-feet-completed,
#tblTimeSumm .time-entry-line.work-id-200 tr.tiles-lineal-feet-completed,
#timeRvwPortal .time-entry-line.work-id-200 tr.tiles-lineal-feet-completed,
#tblTimeSumm .time-entry-line.work-id-401 tr.tiles-areas-installed,
#timeRvwPortal .time-entry-line.work-id-401 tr.tiles-areas-installed,
#tblTimeSumm .time-entry-line.work-id-202 tr.tiles-slab-cut,
#timeRvwPortal .time-entry-line.work-id-202 tr.tiles-slab-cut,
#tblTimeSumm .time-entry-line.work-id-221 tr.tiles-areas-installed,
#timeRvwPortal .time-entry-line.work-id-221 tr.tiles-areas-installed,
#tblTimeSumm .time-entry-line.work-id-201 tr.tiles-lineal-feet-completed,
#timeRvwPortal .time-entry-line.work-id-201 tr.tiles-lineal-feet-completed {
  display: table-row;
}

#tblTimeSumm td,
#timeRvwPortal td {
  padding: 0 1px 1px;
}

#tblTimeSumm td input,
#timeRvwPortal td input {
  width: 100%;
  max-width: 40px;
  border: 1px solid #bfbfbf;
}

#tblTimeSumm td .crew-size,
#timeRvwPortal td .crew-size {
  font-size: 11px;
  width: 100%;
  max-width: 40px;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: "";
}

#tblTimeSumm .work-id,
#timeRvwPortal .work-id {
  text-align: center;
}

#tblTimeSumm tr.hours,
#timeRvwPortal tr.hours {
  border-bottom: 1px dotted #999;
  height: 22px;
}

#tblTimeSumm select.size-full-tiles,
#tblTimeSumm select.size-original-full-tiles,
#timeRvwPortal select.size-full-tiles,
#timeRvwPortal select.size-original-full-tiles {
  width: 100%;
  max-width: 40px;
  font-size: 12px;
  padding: 2px;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: "";
}

#timeRvwPortal span.multi-lines,
#timeRvwPortal span.multi-lines {
  display: inline;
  margin: 0 0 0 7px;
  position: relative;
  right: 5px;
}

.defaultButton {
  transition: all 500ms ease-in-out;
  width: 112px;
  height: auto;
  background-color: blue;
  /*#3783d2;*/
  color: #fff;
  border-radius: 3px;
  border: none;
  padding: 6px;
  margin: auto;
}

.defaultButton:hover {
  background-color: #133253;
}

.submitButton {
  transition: all 500ms ease-in-out;
  width: 200px;
  height: auto;
  background-color: red;
  color: #fff;
  border-radius: 3px;
  border: none;
  padding: 6px;
  margin: auto;
}

.submitButton:hover {
  background-color: #133253;
}

.submitButtonDisabled {
  transition: all 500ms ease-in-out;
  width: 200px;
  height: auto;
  background-color: black;
  color: #fff;
  border-radius: 3px;
  border: none;
  padding: 6px;
  margin: auto;
}

.submitButtonDisabled:hover {
  background-color: #133253;
}

.preApproveButton {
  transition: all 500ms ease-in-out;
  width: 124px;
  height: auto;
  background-color: cyan;
  color: #fff;
  border-radius: 3px;
  border: none;
  padding: 6px;
  margin: 12px auto 0 auto;
  color: black;
}

.preApproveButton:hover {
  background-color: darkcyan;
}

.approveButton {
  transition: all 500ms ease-in-out;
  width: 124px;
  height: auto;
  background-color: red;
  color: #fff;
  border-radius: 3px;
  border: none;
  padding: 6px;
  margin: 12px auto 0 auto;
}

.approveButton:hover {
  background-color: darkred;
}

.btnAdd {
  transition: all 500ms ease-in-out;
  width: 100px;
  height: auto;
  background-color: gray;
  color: white;
  border-radius: 3px;
  border: none;
  padding: 6px;
  margin: auto;
}

.btnAdd:hover {
  background-color: #133253;
}

.btnSaveAndKeepStatus {
  transition: all 500ms ease-in-out;
  width: 69px;
  height: auto;
  background-color: limegreen;
  color: white;
  border-radius: 3px;
  border: none;
  padding: 6px;
  margin: 10px auto;
  position: relative;
  left: 16px;
}

.btnSaveAndKeepStatus:hover {
  background-color: darkgreen;
}

button.btnPrint {
  transition: all 500ms ease-in-out;
  height: auto;
  background-color: rebeccapurple;
  color: white;
  border-radius: 3px;
  border: none;
  padding: 6px;
  margin: 10px auto;
  position: relative;
  left: 16px;
  margin-left: 16px;
  background-image: none;
}

button.btnPrint:hover:not(.disabled) {
  transition: all 500ms ease-in-out;
  height: auto;
  color: white;
  border-radius: 3px;
  border: none;
  padding: 6px;
  margin: 10px auto;
  position: relative;
  left: 16px;
  margin-left: 16px;
  background-image: none;
  background-color: mediumpurple;
}

.btnOverview {
  transition: all 500ms ease-in-out;
  width: 100px;
  height: auto;
  background-color: black;
  /*#3783d2;*/
  color: white;
  border-radius: 3px;
  border: none;
  padding: 6px;
  margin: auto;
}

.btnOverview:hover {
  background-color: #133253;
}

.btnExport {
  transition: all 500ms ease-in-out;
  width: 100px;
  height: auto;
  background-color: #4cc417;
  /*#3783d2;*/
  color: white;
  border-radius: 3px;
  border: none;
  padding: 6px;
  margin: auto;
}

.btnExport:hover {
  background-color: #133253;
}

.btnRescue {
  transition: all 500ms ease-in-out;
  width: 100px;
  height: auto;
  background-color: red;
  /*#3783d2;*/
  color: white;
  border-radius: 3px;
  border: none;
  padding: 6px;
  margin: auto;
}

.btnRescue:hover {
  background-color: #133253;
}

.btnRestore {
  transition: all 500ms ease-in-out;
  width: 120px;
  height: auto;
  background-color: red;
  /*#3783d2;*/
  color: white;
  border-radius: 3px;
  border: none;
  padding: 6px;
  margin: auto;
}

.btnRestore:hover {
  background-color: #133253;
}

#btnDelete {
  background-color: #ce0000;
  color: #ffffff;
  text-decoration: none;
  padding: 2px 4px 2px 4px;
  border-radius: 2px;
}

#btnReview {
  background-color: yellow;
  /*#33cc00;*/
  color: black;
  width: 100%;
  text-decoration: none;
  padding: 2px 24px 2px 24px;
  border-radius: 2px;
}

/*--------------------*/
/*----QUICKADD.PHP----*/
/*--------------------*/
#quickaddPortal {
  width: 300px;
  height: auto;
  background-color: #fff;
  border-radius: 6px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

/*---------------*/
/*----ADD.PHP----*/
/*---------------*/
#timeAddPortal {
  width: 700px;
  height: auto;
  background-color: #fff;
  border-radius: 6px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#tblTimeAdd {
  background-color: #fff;
  padding: 12px;
  border-radius: 8px;
  font-size: 11px;
  color: #555555;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

#timeAddPortalLG {
  width: 800px;
  height: 700px;
  background-color: #fff;
  border-radius: 6px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#timeAddPortalLG:hover {
  box-shadow: 0px 0px 4px #183e68;
}

#tblTimeAddLG {
  background-color: #fff;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #555555;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

#tblWorkRef {
  background-color: #fff;
  padding: 12px;
  border-radius: 8px;
  font-size: 9px;
  color: #555555;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

/*----------------*/
/*----EDIT.PHP----*/
/*----------------*/
#timeEditPortal {
  width: 800px;
  height: 500px;
  background-color: #fff;
  border-radius: 6px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#timeEditPortal:hover {
  box-shadow: 0px 0px 4px #183e68;
}

#tblTimeEdit {
  background-color: #fff;
  padding: 12px;
  border-radius: 10px;
  font-size: 11px;
  color: #555555;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  /*border-collapse:collapse;*/
}

#tblTimeEdit td {
  font-family: arial;
  font-size: 10px;
  color: #555;
}

/*------------------*/
/*----REVIEW.PHP----*/
/*------------------*/
#timeRvwPortal {
  width: 100vw;
  background-color: #fff;
  border-radius: 6px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 5px auto;
  max-width: 1280px;
  padding: 1px;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: "";
}

#tblTimeRvw {
  background-color: #fff;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #555555;
  margin-top: 12px;
  width: 96%;
  margin: 0 auto;
}

#tblTimeRvw td {
  font-family: arial;
  font-size: 11px;
  color: #555;
}

#tblWorkRefLg {
  background-color: #fff;
  padding: 12px;
  border: 0;
  font-size: 12px;
  width: 90%;
  margin: 0;
  color: #000;
  border-spacing: 0;
  margin: 0 auto;
}

#tblWorkRefLg td {
  padding: 3px;
}

/*-----------------------*/
/*----EXPORT_TIME.PHP----*/
/*-----------------------*/
#exportPortal {
  width: 750px;
  height: auto;
  background-color: #fff;
  /*border-radius:6px;*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#exportPortal:hover {
  box-shadow: 0px 0px 4px #183e68;
}

#tblExport {
  background-color: #fff;
  padding: 12px;
  border-radius: 10px;
  font-size: 12px;
  color: #555555;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  /*border-collapse:collapse;*/
}

#tblExport td {
  font-family: arial;
  font-size: 11px;
  color: #555;
}

#btnSubTime {
  background-color: red;
  /*#33cc00;*/
  color: black;
  width: 100%;
  text-decoration: none;
  padding: 2px 24px 2px 24px;
  border-radius: 2px;
}

#btnDownload {
  background-color: forestgreen;
  /*#33cc00;*/
  color: white;
  width: 100%;
  text-decoration: none;
  padding: 2px 24px 2px 24px;
  border-radius: 2px;
}

#btnExDownload {
  background-color: darkorange;
  /*#33cc00;*/
  color: black;
  width: 100%;
  text-decoration: none;
  padding: 2px 24px 2px 24px;
  border-radius: 2px;
}

#ApprTimePortal {
  width: 800px;
  height: 700px;
  background-color: #fff;
  border-radius: 6px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#table {
  animation-duration: 3s;
}

.ui-menu.ui-widget-content {
  text-align: left;
}

.day-column {
  /* min-width: 40px; */
  width: 6.5%;
}

#total-column {
  width: 7%;

}

.blue-background {
  /* background-color: #99ccff; */
}

/* Print section */

@media screen and (max-width: 961px) {

  html,
  body {
    background-color: white;
  }

  #timeSummPortalLG,
  #exportPortal,
  #timeAddPortalLG,
  #timeSummPortal {
    width: 100vw;
    height: 100%;
    max-width: 1280px;
    padding: 1px;
  }

  input[type="button"],
  input[type="submit"] {
    display: block;
    margin-bottom: 5px;
  }

  select {
    width: 100%;
    max-width: 60px;
  }

  #tblTimeRvw {
    padding: 12px 0;
    width: 100vw;
    margin-left: 0;
    margin-right: 0;
  }

  #tblTimeAddLG {
    margin: 0;
    width: 100%;
  }

  select[name="cbxChangeDate[]"] {
    width: 108px;
  }

  form {
    margin: 0;
  }

  .cjmtiLogo {
    position: relative;
    width: 100px;
    margin: 5px auto;
  }

  /* th#workid-column,
  th#customer-column {
  min-width: 17%;
  }
  th#room-column {
    min-width: 15%;
  } */
  #timeRvwPortal {
    width: 100vw;
  }
}

.invalid {
  background-color: red !important;
  color: white;
}

th#workid-column,
th#customer-column {
  width: 17%;
}

th#room-column {
  width: 15%;
}