/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : May 15, 2019, 10:35:13 PM
    Author     : jsquared90
*/


/*--------------------------------------------------------------
>>> Pixel Mosaic Color Chart:
----------------------------------------------------------------
pixMoGray:          #363636;
pixMoDarkPink:      #990054;
pixMoLightPink:     #ff0098;
pixMoDarkOrange:    #996d00;
pixMoLightOrange:   #ffcd50;
pixMoDarkBlue:      #001399;
pixMoLightBlue:     #4d6bff;

*/

html
{
    font-size: 1.4em;
    font-family: "kozuka-gothic-pro";
    color:#363636;
    -webkit-text-size-adjust:none;
}

input
{
    height: 1.6em;
}

input,
textarea
{
    font-size: 0.8em;
    font-family: "kozuka-gothic-pro";
    padding: 0.3em;
    -webkit-appearance: none;
    border: solid 0.1em #ffcd50;
}

textarea
{
    height: 5em;
}

input[type="checkbox"]
{
    width: 1.2em;
    height: 1.2em;
    margin: 0.5em 01em 0 1em;
}

input:checked
{
  background-color: #ffcd50;
}

input:focus
{
  outline-color: transparent;
  outline-style: none;
}

input[type="email"],
input[type="password"]
{
    width: 18em;
}

input[type="submit"]
{
    cursor: pointer;
}

input[type="time"]
{
    width:6em;
    text-align: center;
    padding: 0 0 0 1.2em;
}

input[type="number"]
{
    text-align: center;
    width: 2em;
    margin: 0.5em 1em;
    height: 1em;
}

select
{
    font-size: 0.8em;
    font-family: "kozuka-gothic-pro";
    padding: 0.6em 0.5em;
    border: solid 0.1em #ffcd50;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #242424;
    color: #ffcd50;
    text-align-last:center;
}

option
{
    text-align: center;
}

.button
{
  font-size: 0.8em;
  font-family: "kozuka-gothic-pro";
  background-color: #363636;
  border: solid 0.1em #ffcd50;
  color: #ffcd50;
  padding: 1em 2.2em 2.2em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.button:disabled
{
  background-color: #dedede;
  border: solid 0.1em #ababab;
}

p
{
    font-weight: bold;
}

a,
a:hover,
a:visited
{
    text-decoration: none;
}

a,
a:visited
{
    color: #363636;
}

a:hover
{
    color: #996d00;
}

body
{
    margin: 0em;
}





#loginFormDIV
{
    padding-top: 2em;
}

#reportDIV
{
    position: absolute;
    width: 100vw;
    height: 100vh;
    padding-top: 0.1em;
}

#loginFormDIV,
#homeDIV,
#adminDIV,
#projectDIV,
#accountDIV,
#changePWDIV,
#entryDIV,
#errorDIV,
#successDIV
{
    position: absolute;
    width: 100vw;
    height: 100vh;
    text-align: center;
}

#adminDIV,
#projectDIV,
#accountDIV,
#entryDIV,
#errorDIV,
#successDIV
{
    color: #ffcd50;
}

#menuDIV,
#projectDIV,
#accountDIV,
#entryDIV,
#errorDIV,
#successDIV
{
    background-color: #363636;
}

#menuDIV a,
#projectDIV a,
#accountDIV a,
#entryDIV a,
#errorDIV a,
#successDIV a
{
    color: #ffcd50;
}

#menuDIV a:hover,
#projectDIV a:hover,
#accountDIV a:hover,
#entryDIV a:hover,
#errorDIV a:hover,
#successDIV a:hover
{
    color: #FFFFFF;
}

#menuDIV3,
#projectDIV3,
#errorDIV3,
#successDIV3
{
    padding: 3em 0 0 0;
    text-align: center;
}

#accountDIV3,
#changePWDIV3,
#entryDIV3
{
    padding: 2em 0 0 0;
    text-align: center;
}

#projectDIV3 div,
#changePWDIV3 div,
.dropDown
{
    margin: 0.7em 0;
}

#exitDIV
{
    float:left;
    margin: 0.5em;
}

#homeDIV2,
#menuDIV2,
#projectDIV2,
#accountDIV2,
#changePWDIV2,
#entryDIV2,
#errorDIV2,
#successDIV2
{
    width: 16em;
    margin:auto;
    height: 100vh;
}

#reportDIV2
{
    width: 100vw;
    margin:auto;
    height: 100vh;
}

#reportDIV3
{
    margin: 0.5em 0.5em;
}

/*
#reportDIV3 div
{
    width: -webkit-fill-available;
}
*/

#reportDIV html
{
    -webkit-text-size-adjust:auto;
}

#reportTitle
{
    text-align: left;
    padding: 0.5em 0;
}

#reportTitle .hDIV
{
    margin: 0 2em;
}

#homeDIV3
{
    padding: 5em 0 0 0;
    font-size: 1.3em;
}

#homeDIV3 div
{
    margin: 0.2em;
}

#loginFormDIV div
{
    padding: 0.2em;
}

#menuIconDIV
{
    float:right;
    font-size: 2em;
    padding: 0.6em 0 0 0;
}

#logoDIV
{
    float:left;
}

#clockInButtonDIV
{
    padding: 0.7em;
    margin: 1.4em !important;
    background-color: #363636;
    border: solid 0.05em #ffcd50;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    cursor: pointer;
}

#clockInButtonDIV a
{
    color: #ffcd50;
}

#recentActivityDIV
{
    text-align: left;
}

.field1DIV
{
    font-size: calc(2.5vw);
    text-align: right;
    padding: 0 0.5em;
    width: 6em;
}

.field2DIV
{
    font-size: calc(2.5vw);
    text-align: left;
    font-weight: bold;
}

.loginField1DIV
{
    text-align: center;
}

.loginField2DIV
{
    text-align: center;
}

.recentActivityProjectDIV
{
    font-size: 0.6em;
    padding: 0.6em 0 0 0;
}

.menuItem
{
  margin: 1.5em auto;
  width: 12em;
  font-size: 0.8em;
  font-family: "kozuka-gothic-pro";
  background-color: #363636;
  border: solid 0.1em #ffcd50;
  color: #ffcd50;
  padding: 0.5em;
  text-align: center;
  text-decoration: none;
}

.menuTitle,
.accountTitle,
.accountSubTitle
{
    color: #FFFFFF;
}

.accountTitle
{
    margin: 0.5em 0;
}

.accountSubTitle
{
    margin: 0.2em 0 0 0;
    font-size: 1.3em;
}

.listTitle
{
    font-size: 0.7em;
    margin: 1.4em 0 0 0;
}

.entryListTitle
{
    font-size: 0.7em;
    margin: 0.8em 0 0 0;
}

.listItem,
.listTitle,
.entryListTile
{
  color: #ffcd50;
}

.listItem
{
    font-weight: bold;
    font-size: 1.1em;
}

.editTitle
{
    font-weight: bold;
    font-size: 0.8em;
}

.editSubTitle
{
    font-size: 0.7em;
}

.reportHeader
{
    font-weight: bold;
}

.reportRow
{
    
}

/***************************
Report Type 1 - General Time Report
***************************/

.dateCell1,
.timeCell1A,
.timeCell1B,
.totalCell1
{
    font-size: calc(3vw);
}

.dateCell1
{
    width: calc(25vw);
}

.timeCell1A
{
    width: calc(25vw);
}

.timeCell1B
{
    width: calc(35vw);
}

.totalCell1
{
    width: calc(15vw);
}

/***************************
Report Type 2 - Onsite/Project Report
***************************/

.dateCell2,
.timeCell2A,
.timeCell2B,
.totalCell2,
.typeCell2,
.hourCell2
{
    font-size: calc(2vw);
    padding: 0.2em 0;
}

.mealsCell2
{
    font-size: calc(1.3vw);
    padding: 0.7em 0;
}

.projectCell2
{
    font-size: calc(1.5vw);
    padding: 0.5em 0.2em;
}

.projectCell2,
.typeCell2
{
    width: calc(32vw);
}

.dateCell2
{
    width: calc(12vw);
}

.timeCell2A
{
    width: calc(12vw);
}

.timeCell2B
{
    width: calc(17vw);
}

.totalCell2
{
    width: calc(20vw);
}

.hourCell2,
.mealsCell2
{
    width: calc(7vw);
}

.reportName
{
    font-size: calc(2vw);
    font-weight: bold;
    padding: 0.2em 0.5em;
    margin: 0 -0.5em 0;
    width: calc(92vw);
    background-color: #ffcd50;
}

.individualTotal
{
    font-size: calc(2vw);
    font-weight: bold;
    margin: 0 0 1em;
    width: calc(77vw);
    text-align: right;
    padding: 0.3em 0 0;
}

/***************************
Report Type 3 - Bonus Report
***************************/

.dateCell3,
.timeCell3A,
.timeCell3B,
.totalCell3,
.typeCell3,
.hourCell3
{
    font-size: calc(1.8vw);
    padding: 0.18em 0;
}

.mealsCell3
{
    font-size: calc(1.2vw);
    padding: 0.6em 0;
}

.projectCell3
{
    font-size: calc(1.4vw);
    padding: 0.4em 0.2em;
}

.projectCell3
{
    width: calc(30vw);
}

.dateCell3
{
    width: calc(11vw);
}

.timeCell3A
{
    width: calc(11vw);
}

.timeCell3B
{
    width: calc(16vw);
}

.moneyCell3
{
    width: calc(9vw);
}

.hourCell3,
.mealsCell3
{
    width: calc(6vw);
}



.mediumData
{
    font-size: 1.4em;
}

.bigData
{
    font-size: 1.8em;
}

.style1
{
    font-size: 0.6em;
    color: #ababab;
}

.style2
{
    font-size: 0.6em;
    padding: 1em;
}

.style3
{
    font-size: 0.5em;
    color: #ababab;
}

.style4
{
    font-size: 0.4em;
    padding: 1em;
}

.style5
{
    font-size: 0.7em;
}

.normal
{
    font-weight: normal;
}

.datepicker
{
    width: 6em;
    height: 1em;
    text-align: center;
    margin: 0 1em;
    padding: 0.5em 0 0.3em;
}

.hDIV
{
    display: inline-flex;
}

.vDIV
{
    
}

.margin2
{
    margin: 2em 0;
}

.odd
{
    background-color: #FFFFFF;
}

.even
{
    background-color: #EFEFEF;
    margin: 0 0 0 -0.5em;
    padding: 0 0 0 0.5em;
}

.entrySelect
{
    font-size: 0.6em;
}

.fName
{
    width: 5em;
    margin-right: 1em;
}

.lName
{
    width: 11em;
}

.addUserEmail
{
    width: 8em ! important;
    text-align: right ! important;
    margin-right: 0.5em;
}

.numericStyle3Digits
{
    width: 3em ! important;
}

.numericStyle6Digits
{
    width: 4em ! important; 
}