:root{
    --black: black;
    --white: white;
    --darkGray: darkGray;
    --darkBlue: #005cac;
    --lightBlue: #01aff1;
}

*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    
}

html, body{
    height: 100%;
    width: 100%;
    font-size: 16px;
    overflow: hidden;
    
}

input{
    padding-left: 5px;
}
input:invalid{
    background-color: pink;
}
select{
    border: 1px solid black;
}

table{
    border-collapse: collapse;
    width: 100%;
}

.gNone{
    display: none;
}
.gFrm{
  display: none;
  max-height: 83vh;
  min-width: 500px;
  background-color: white;
  border: solid 1px var(--darkBlue);
  border-radius: 5px;
  box-shadow: 1px 1px 5px black;
  overflow-y: auto;
}
.gFullFrm{
    display: none;
    max-height: 83vh;
    background-color: white;
    border: solid 1px var(--darkBlue);
    border-radius: 5px;
    box-shadow: 1px 1px 5px black;
    overflow-y: auto;
    padding: 10px;
}
.gFrmHeader{
    display: flex;
    position: sticky;
    top: 0px;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    background-color: var(--lightBlue);
    color: white;
    text-shadow: 2px 2px 3px black;
    padding: 5px 10px 5px 10px;
    font-size: 200%;
    width: 100%;
    z-index: 2;
}
.gFrmClose{
    height: 30px;
    cursor: pointer;
}
.gFrmEdit{
  height: 30px;
  cursor: pointer;
}
.gFrmSection{
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 130%;
    color: var(--darkBlue);
    text-decoration: underline;
}

.gBranchCon{
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
}
.gBranchCon .label{
    font-size: 120%;
    color: var(--darkBlue);
    text-decoration: underline;
}
.gBranchCon .itemCon{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    margin-top: 5px;
}
.gBranchCon .itemCon .item{
    margin-left: 10px;
    background-color: white;
    padding: 5px;
    color: var(--lightBlue);
    border: 1px solid var(--darkBlue);
    cursor: pointer;
}
.gBranchCon .itemCon .item.selected{
    color: white;
    background-color: darkBlue;
    border: 1px solid var(--lightBlue);
}

.gDataTbl{
    width: 100%;
    margin-top: 10px;
}
.gDataTbl tr{
    width: 100%;
}
.gDataTbl, .gDataTbl th, .gDataTbl td{
    background-color: white;
    border: 1px solid var(--grey);
    border-collapse: collapse;
}

.gBtnSave{
    background-color: var(--darkBlue);
    color: white;
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    min-width: 80px;
    text-align: center;
}
.gBtnDel{
    background-color: white;
    color: red;
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    border: 1px solid red;
    cursor: pointer;
    text-align: center;
    margin-right: 10px;
}
.gBtnPhoto{
    position: relative;
    height: 30px;
    width: 50px;
    background-image: url('../img/btnPhoto.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border: 1px solid var(--lightBlue);
    margin-top: 10px;
}

.gChkBoxLbl{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-top: 5px;
}
.gChkBoxLbl input{
    height: 25px;
    width: 25px;
    margin-right: 3px;
}

.gAlignCener{
    display: flex;
    width: 100%;
    justify-content: center;
}


.gMask{
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 3;
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    text-align: center;
}
.gLoader{
    position: fixed;
    border: 8px solid var(--darkBrown);
    border-radius: 50%;
    border-top: 8px solid var(--lightBrown);
    border-bottom: 8px solid var(--lightBrown);
    width: 60px;
    height: 60px;
    top: calc(50% - 30px);
    left: calc(50% - 10px);
    margin-left: -30px;
    margin-top: -30px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}
.gFloatView{
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    display: none;
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    text-align: center;
}
.gFloatScreen{
    position: absolute;
    top: 4.4vw;
    z-index: 3;
    height: 83vh;
}

.gLabel{
    display: block;
    margin-top: 5px;
}
.gLabel input{
    height: 30px;
    display: block;
    border: 1px solid black;
    padding-left: 5px;
    width: 100%;

}
.gLabel select{
    height: 30px;
    display: block;
    border: 1px solid black;
    padding-left: 5px;
    width: 100%;
}
.gInput {
    height: 30px;
    display: block;
    border: 1px solid black;
    padding-left: 5px;
    width: 100%;
}
.gLabel .gMInput{
    height: 30px;
    display: block;
    border: 1px solid black;
    padding-left: 5px;
    width: 100px;
}
.gDoubleInputCon{
    display: flex;
    flex-flow: row nowrap;
    gap: 5px;
    justify-content: space-between;
}
.gRowCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 5px;
}
.gChkBoxCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 5px;
}
.gChkBoxCon input{
    height: 30px;
    width: 30px;
    display: block;
    border: 1px solid black;
    margin-top: 5px;
    margin-right: 5px;
}


.gFrmBody{
    padding: 5px 10px 5px 10px;
    width: 100%;
}

.gFrmFooter{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px 10px 10px 10px;
    border-top: 1px solid var(--darkBlue);
    background-color: white;
}

.gjs_textareaCon{
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
.gjs_textareaCon textarea{
  resize: none;
  overflow: hidden;
  width: 100%;
  background-color: var(--white);
  box-sizing: border-box;
  min-height: 30px;
  border: var(--darkBlue) solid 1px;
  border-radius: 3px;
  padding: 7.5px;
}
.gjs_textareaCon span{
    position: absolute;
    right: 10px;
    top: 2px;
    color: black;
    font-size: 8px;
}


#toolTip {
  padding: 5px;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  color: var(--white);
  display: none;
  z-index: 10;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

#infoBox {
  width: 250px;
  color: var(--white);
  background-color: var(--darkBlue);
  border-radius: 15px;
  z-index: 4;
  display: none;
  position: absolute;
  margin: 0;
  padding: 15px;
  text-align: center;
  font-family: montserrat-light;
}
#infoBox header {
  margin-top: 15px;
  font-family: montserrat;
  font-weight: bold;
  font-size: 24px;
}
#infoBox img {
  margin-bottom: 3px;
  height: 50px;
  width: 50px;
}
#infoBox p {
  font-family: montserrat;
  font-weight: bold;
  font-size: 24px;
}
#infoBox .btnBox {
  margin-top: 10px;
  width: 100%;
  clear: both;
}
#infoBox .btnBox div {
  margin-bottom: 10px;
  color: var(--white);
  height: 40px;
  line-height: 37px;
  border-radius: 5px;
  font-size: 24px;
  cursor: pointer;
}

#dataListCon {
  position: absolute;
  display: none;
  background-color: var(--white);
  border: 1px solid var(--darkBlue);
  z-index: 4;
  max-height: 300px;
  overflow-y: scroll;
}
#dataListCon .googleLogo{
    width: 144px;
    height: 18px;
    float: right;
}
#dataList {
  width: 100%;
  height: 100%;
  text-align: left;
  overflow-y: auto;
}
#dataList tr {
  position: relative;
  height: 40px;
}
#dataList td {
  text-align: left;
  border-bottom: 1px solid var(--darkGrey);
  height: 25px;
  cursor: pointer;
  width: 100%;
  padding-left: 5px;
  vertical-align: middle;
}
#dataList td:hover {
    background-color: var(--darkBlue);
    color: white;
}
#dataList img {
  height: 20px;
  width: 20px;
  display: inline-block;
}
#dataList .btnAdd{
    background-color: var(--lightBlue);
    color: black;
    padding: 5px;
    border-radius: 5px;
    max-width: 200px;
    text-align: center;
}

#fullView{
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
#fullView .frmCon {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  padding: 10px;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#fullView .header {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
}
#fullView img{
  width: 120px;
}
#fullView label{
  font-size: 16px;
}
#fullView p {
  display: flex;
  flex-flow: column;
  text-align: center;
  padding: 15px 0 20px 0;
  color: var(--orange);
  font-size: 14px;
}
#fullView .btnBox {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
#fullView .gBtnOrange {
  padding: 7px 14px;
  font-size: 14px;
  border: solid 1px var(--orange);
}
#fullView .btnLoginAlt {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  margin-top: 10px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: underline;
  color: var(--lightBlue);
}
#fullView .btnLoginAlt:hover {
  color: var(--darkBlue);
}


#webView{
    display: grid;
    grid-template-areas:
      'header'
      'body';
    grid-template-rows: 60px auto;
    height: 100%;
}
#webView .webViewHeader{
    grid-area: header;
    display: flex;
    flex-flow: row nowrap;
    justify-content: start;
    align-items: center;
    padding: 0 10px 0 10px;
}
#webView .webViewHeader .logo{
    max-height: 80%;
}
#webView .webViewHeader .webVMenuCon{
    display: flex;
    flex-flow: column nowrap;
    justify-content: end;
    align-items: center;
    height: 100%;
    width: 100%;
}

#webView .webVMenuCon .menu{
    list-style: none;
    color: var(--darkBlue);
    text-align: center;
    width: 100%;
    font-size: 130%;
    z-index: 5;
}
#webView .menu .selecter{
    position: relative;
    height: 1px;
    background-color: var(--darkBlue);
    color: white;
    visibility: hidden;
}
#webView .webVMenuCon .menu li{
    display: inline-block;
    position: relative;
    margin-left: 20px;
    cursor: pointer;
    margin-bottom: 5px;
}
#webView .webVMenuCon .menu li:hover .selecter{
    visibility: visible;
}
#webView .webVMenuCon .menu li:hover .popMenu{
    max-height: 500px;
    
}

#webView .menu .popMenu{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    position: absolute;
    color: black;
    max-height: 0px;
    width: 300px;
    transition: max-height 0.3s;
    overflow: hidden;
    background-color: white;
    
}
#webView .menu .popMenu span{
    border: 1px solid var(--darkBlue);
    padding: 3px 0 3px 0;
}
#webView .menu .popMenu span:hover{
    background: var(--lightBlue);
    color: white;
    text-shadow: 1px 1px 3px black;
}

#webView .webViewHeader .userCon{
    justify-self: end;
    width: 150px;
    height: 100%;
}
#webView .userCon .signUpCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    width: 98%;

}

#webView .webViewBody{
    grid-area: body;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    height: 100%;
    width: 100%;
    padding-bottom: 10px;
}

#frmLogin .footer{
    margin-top: 10px;
    display: flex;
    flex-flow: column nowrap;
}

#frmResetCode .footer{
    margin-top: 10px;
    display: flex;
    flex-flow: column nowrap;
}

#frmDashBOld{
    width: 100%;
    height: 100%;
}
#frmDashBOld iframe{
    width: 100%;
    height: 99%;
    
}

/*FORM WORK FLOW*/
#frmWorkFlow{
    width: 90%;
}
#frmWorkFlow .sectionsCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#frmWorkFlow .secCon{
    width: 30%;
    border: 1px solid black;
}
#frmWorkFlow .secCon .secHeader{
    font-size: 150%;
    font-weight: bold;
    text-align: center;
    background-color: var(--darkBlue);
    color: white;
}
#frmWorkFlow .tableCon{
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
#frmWorkFlow .tableCon table{
    border: 1px solid black;
    width: 95%;
    box-shadow: 2px 2px 5px black;
}
#frmWorkFlow .tableCon table td{
    border: 1px solid var(--lightBlue);
}
#frmWorkFlow .tableCon tbody tr:hover{
    background-color: var(--darkBlue);
    color: white;
    cursor: pointer;
}


#frmWorkFlow .tableCon thead{
    background-color: var(--lightBlue);
    border-bottom: 1px solid black;
}
#frmWorkFlow .tableCon .tTitle{
    font-size: 120%;
    font-weight: bold;
    text-decoration: underline;
    text-shadow: 1px 1px 3px white;
}


/*FORM SEARCH*/
#frmSearch{
    width: 90%;
    height: 90vh;
    overflow: hidden;
    box-sizing: border-box;
}

#frmSearch .frmBody{
    display: flex;
    flex-flow: column nowrap;
    padding: 5px;
    height: calc(100% - 50px);
    overflow: hidden;
    box-sizing: border-box;
}

#frmSearch .addBtnCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
}
#frmSearch .addBtnCon div{
    width: auto;
}
#frmSearch .addBtnCon div:nth-child(n+2){
    margin-left: 10px;
}

#frmSearch .actionBarCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;;
}

#frmSearch .searchCon{
    display: flex;
    flex-flow: row nowrap;
    padding: 5px 0 5px 0;
}
#frmSearch .searchCon input{
    height: 30px;
    width: 300px;
    border: 1px solid black;
}
#frmSearch .searchCon .showDelCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-left: 10px;
}
#frmSearch .searchCon .showDelCon input{
    width: 35px;
}

#frmSearch .js_ItemsCountCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
}
#frmSearch .js_ItemsCountCon span{
    cursor: pointer;
}
#frmSearch .js_ItemsCountCon span:nth-child(2){
    margin-left: 5px;
    text-decoration: underline;
    color: red;
}

#frmSearch .js_ChkActBtnCon{
    display: flex;
    flex-flow: row wrap;
}


#frmSearch .filterCon{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    margin-top: 10px;
    gap: 5px;
}
#frmSearch .filterCon div{
    border: 1px solid var(--darkBlue);
    padding: 5px;
    color: var(--lightBlue);
    cursor: pointer;
}
#frmSearch .filterCon div.selected{
    background-color: darkblue;
    color: white;
}


#frmSearch .searchTotals{
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

#frmSearch .tblCon{
    height: 100%;
    overflow-y: scroll;
}
#frmSearch .tblCon table th{
    background-color: var(--lightBlue);
    height: 25px;
    border: 1px solid black;
    padding: 5px 3px 5px 3px;
}
#frmSearch .tblCon table td{
    border: 1px solid black;
    padding: 5px 3px 5px 3px;
    cursor: pointer;
}

#frmSearch .tblCon thead tr:nth-child(1) th{
    position: sticky;
    top:0px;
}
#frmSearch .tblCon thead tr:nth-child(2) th{
    position: sticky;
    
}

#frmSearch .tblCon table tbody tr:hover{
    color: white;
    background-color: var(--darkBlue);
}

#frmSearch .tblCon table .chkBox{
    width: 25px;
    height: 25px;
}
#frmSearch .tblCon table .linkImg{
    max-width: 100%;
    max-height: 35px;
}

#frmSearch .countCon{
    margin-top: 10px;
}
#frmSearch .countCon select{
    border: 1px solid black;
    height: 25px;
}


/*FORM VIEWS*/
#frmViews{
   max-height: 100%;
   width: 1000px;
   
}
#frmViews .frmBody{
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}


#frmViews .vDetBodCon{
    display: flex;
    flex-flow: row nowrap;
}

#frmViews .vDetails{
    width: 500px;
    padding: 5px;
    border-right: 2px solid var(--darkBlue);
}
#frmViews .vDetails .vDetailBtns{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#frmViews .vDetails .vPrintBtns{
    display: flex;
    flex-flow: row wrap;
}
#frmViews .vDetails .vPrintBtns div{
    padding: 5px;
    background-color: var(--darkBlue);
    color: white;
    border-radius: 25%;
    text-align: center;
    cursor: pointer;
    margin-top: 5px;
}
#frmViews .vDetails .vPrintBtns div:nth-child(n+2){
    margin-left: 5px;
}
#frmViews .vDetails .vDetailCon{
    margin: 5px 0 5px 0;
}
#frmViews .vDetails .dataHeader{
    display: block;
    width: 100%;
    margin-bottom: 5px;
    border-bottom: 2px solid var(--lightBlue);
    font-size: 120%;
    color: var(--darkBlue);

}
#frmViews .vDetails .vDetailCon{
    display: flex;
    flex-flow: column nowrap;
}
#frmViews .vDetails .dataCon{
    display: flex;
    flex-flow: row nowrap;
}
#frmViews .vDetails .dataName{
    width: 40%;
    text-align: right;
    color: var(--lightBlue);
}
#frmViews .vDetails .dataValue{
    width: 60%;
    text-align: left;
    padding-left: 5px;
    color: var(--darkBlue);
}
#frmViews .vDetails .dataValue.selectable:hover{
    background-color: var(--darkBlue);
    color: white;
    cursor: pointer;
}


#frmViews .vBody{
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    padding: 10px;
}
#frmViews .processCon table{
    margin-bottom: 10px;
}
#frmViews .processCon table td{
    border: 1px solid var(--lightBlue);
    text-align: center;
    cursor: pointer;
    width: 16.666%;
}
#frmViews .processCon table td.selected{
    background-color: var(--darkBlue);
    color: white;
}
#frmViews .tabsCon{
    display: flex;
    flex-flow: row nowrap;
    margin-bottom: 10px;
}
#frmViews .tabsCon .tab{
    margin-right: 20px;
    cursor: pointer;
    position: relative;
}

#frmViews .tabsCon .tab.selected{
    border-bottom: 2px solid var(--lightBlue);
}
#frmViews .tabsCon .tab .tabCount{
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    width: 17px;
    height: 17px;
    box-sizing: border-box;
    border-radius: 50%;
    top: -9px;
    right: -10px;
    font-size: 55%;
    background-color: var(--lightBlue);
}

#frmViews .actTotalsCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#frmViews .actTotalsCon .tblTotals{
    display: flex;
    flex-flow: row nowrap;
}
#frmViews .actTotalsCon .tblTotals .totalItem:nth-child(n + 1){
    margin-left: 5px;
}
#frmViews .actTotalsCon .tblTotals .totalItem{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    border: 1px solid var(--darkBlue);
    box-shadow: 1px 1px 3px black;
    color: var(--darkBlue);
    padding: 3px;
}
#frmViews .actTotalsCon .totalItem .header{
    text-decoration: underline;
}
#frmViews .actTotalsCon .actBtnsCon{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
}
#frmViews .actTotalsCon .actBtnsCon div{
    border-radius: 5px;
    background-color: var(--darkBlue);
    color: white;
    padding: 5px;
    cursor: pointer;
}
#frmViews .actTotalsCon .actBtnsCon img{
    margin-left: 5px;
}

#frmViews .itemsTbl thead{
    background-color: var(--lightBlue);
    color: white;
}
#frmViews .itemsTbl td{
    height: 25px;
    border-bottom: 1px solid var(--lightBlue);
    text-align: center;
}
#frmViews .itemsTbl .tblIcon{
    height: 25px;
}
#frmViews .itemsTbl .clickable:hover{
    cursor: pointer;
}

#frmViews .stdItem{
    display: flex;
    flex-flow: column nowrap;
    padding: 5px;
    margin: 10px 0 10px 0;
    border: 1px solid var(--lightBlue);
    border-radius: 5px;
    box-shadow: 1px 1px 5px var(--darkBlue);
    cursor: pointer;
}
#frmViews .stdItem .con{
    display: flex;
    flex-flow: row nowrap;
}
#frmViews .stdItem .con div{
    width: 50%;
    padding: 5px;
}
#frmViews .stdItem .right{
    text-align: right;
}

/*FORM CLIENT*/

#frmClient{
    width: 800px;
    max-height: 100%;
    overflow-y: auto;
}

#frmClient .frmSecsCon{
    display: flex;
    flex-flow: row nowrap;
}
#frmClient .frmSecsCon .leftSec{
    padding: 10px;
    width: 55%;
    border-right: 1px dashed black;
}
#frmClient .frmSecsCon .rightSec{
    padding: 10px;
    width: 45%;
}


#frmClient .btnAddContactCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    width: 100%;
}
#frmClient .btnAddContactCon .btnAddContact{
    color: var(--darkBlue);
    text-decoration: underline;
    cursor: pointer;
}

#frmClient .contactsCon{
    display: flex;
    flex-flow: column nowrap;
    background-color: darkGray;
    padding: 15px 5px 5px 5px;
    
}
#frmClient .contactsCon .contactCon{
    padding: 20px 5px 5px 5px;
    background-color: white;
    margin-bottom: 5px;
    border-radius: 5px;
    border: 1px solid black;
    position: relative;
}
#frmClient .contactCon .btnDelContact{
    position: absolute;
    top: -3px;
    right: -3px;
    height: 20px;
    cursor: pointer;
}


#frmClient .doubleInput{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#frmClient .contact input{
    display: inline-block;
    border: 1px solid black;
    height: 30px;
    padding-left: 5px;
    width: 49%;
}

#frmClient .phoneCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#frmClient .phoneCon input:first-child{
    width: 100px;
}
#frmClient .phoneCon input:last-child {
    width: 100%;
}

#frmClient .addSearch{
    margin-top: 20px;
}
#frmClient .short{
    width: 20%;
}

#frmEmp .bodyCon{
    display: flex;
    flex-flow: row nowrap;
}
#frmEmp .bodyL{
    padding: 10px;

}
#frmEmp .bodyR{
    padding: 10px;
}

#frmEmp .contactFLName{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#frmEmp .contactFLName input{
    display: inline-block;
    border: 1px solid black;
    height: 30px;
    padding-left: 5px;
    width: 49%;
}

#frmEmp .allowCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-top: 10px;
}
#frmEmp .allowChk{
    width: 30px;
    margin-left: 5px;
}

#frmBranch .contact .doubleInput{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#frmBranch .contact input{
    display: inline-block;
    border: 1px solid black;
    height: 30px;
    padding-left: 5px;
    width: 49%;
}

/*FORM PRODUCT*/
#frmProduct{
    height: auto;
    width: 800px;
}

#frmProduct .js_btnPrice{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--darkBlue);
    box-shadow: 1px 1px 5px black;
    cursor: pointer;
}
#frmProduct .js_btnPrice .price{
    font-size: 110%;
    font-weight: bold;
}
#frmProduct .amounts{
    width: 100px;
    text-align: right;
}



#frmPoint{
    height: auto;
    width: 800px;
}
#frmPoint .amounts{
    width: 100px;
    text-align: right;
}

#frmPoint .estTotals{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#frmPoint .estTotals .estHoursCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
}
#frmPoint .estTotals .totalItemCon{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    border: 1px solid var(--darkBlue);
    box-shadow: 1px 1px 3px black;
    padding: 5px;
}
#frmPoint .totalItemCon span:first-child{
    color: var(--darkBlue);
    text-decoration: underline;
}
#frmPoint .totalItemCon span:nth-child(2){
        color: var(--darkBlue);
}
#frmPoint .totalItemCon input{
    width: 80px;
}

#frmPoint table tr{
    border-bottom: 1px solid var(--darkBlue);
    padding: 3px 0 3px 0;
    background-color: lightgrey;
}
#frmPoint table img{
    height: 30px;
    width: 30px;
    cursor: pointer;
}
#frmPoint table td:nth-child(2){
    width: 80px;
}
#frmPoint table td:nth-child(2) input{
    width: 100%;
    border: 1px solid black;
    height: 25px;
}
#frmPoint table td:last-of-type{
    width: 35px;
    text-align: right;
}



#frmJobcard{
    width: 90vw;

}
#frmJobcard.fullScreen{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}


#frmJobcard .frmDetail{
    display: flex;
    flex-flow: row nowrap;
}

#frmJobcard .sideLabel{
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    margin-top: 3px;
}
#frmJobcard .sideLabel label{
    font-size: 80%;
    text-align: right;
    width: 35%;
}
#frmJobcard .sideLabel input{
    width: 100%;
    height: 25px;
    border: 1px solid black;
    margin-left: 3px;
}

#frmJobcard .clientsCon{
    display: flex;
    flex-flow: column nowrap;
    width: 400px;

}
#frmJobcard .clientsCon .doubleInputCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#frmJobcard .clientsCon .inProj{
    margin-left: 10px;
}

#frmJobcard .clientsCon .priorityCon{
    margin-bottom: 5px;
}

#frmJobcard .clientCon{
    border: 1px solid black;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
}

#frmJobcard .clientInfoHeader{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

#frmJobcard .quoteDetailCon{
    width: 100%;
    padding-left: 10px;
}

#frmJobcard .normalJobCon{
    max-width: 1000px;
}

#frmJobcard .doubleInputCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}


#frmJobcard .projJobCon{
    background-color: white;
    overflow: hidden;
}

#frmJobcard .projJobCon .projHeaderCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
}
#frmJobcard .projJobCon .projHeaderCon img{
    height: 30px;
    width: 30px;
    margin-left: 10px;
    cursor: pointer;
}


#frmJobcard .projJobCon .projTotalsCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
    max-width: 1000px;
}
#frmJobcard .projJobCon .projTotalsCon .projTotalItem{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    border: 1px solid black;
    box-shadow: 1pz 1px 5px black;
    padding: 5px;
    margin-bottom: 5px;
}
#frmJobcard .projJobCon .projTotalsCon .projTotalItem span:first-child{
    color: var(--darkBlue);
    text-decoration: underline;
}
#frmJobcard .projJobCon .projTotalsCon .projTotalItem span:nth-child(2){
    color: var(--darkBlue);
}

#frmJobcard .projJobCon .projLabrour{
    width: 80px;
    margin-bottom: 5px;
}


#frmJobcard .projJobCon .tblProjCon{
    width: 100%;
}

#frmJobcard .projJobCon.expand{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 5;
    background-color: white;
    box-sizing: border-box;
}
#frmJobcard .projJobCon.expand .tblProjCon{
    overflow-y: auto;
    overflow-x: auto;
    max-height: calc(100% - 150px);
    width: 100%;

}

#frmJobcard .projJobCon .tblProjPlan{
    text-align: center;
    width: auto;
    max-width: 90%;
    
}


#frmJobcard .projJobCon .tblProjPlan thead tr:first-child th, 
#frmJobcard .projJobCon .tblProjPlan thead tr:first-child td{
    position: sticky;
    top: 0px;
    z-index: 3;
    background-color: lightgray;
}
#frmJobcard .projJobCon .tblProjPlan thead tr:nth-child(2) th, 
#frmJobcard .projJobCon .tblProjPlan thead tr:nth-child(2) td{
    position: sticky;
    top: 40px;
    z-index: 3;
    background-color: lightgray;
}

#frmJobcard .projJobCon .tblProjPlan tbody tr td:first-child{
    position: sticky;
    left: 0px;
    z-index: 2;
    background-color: lightgray;
}


#frmJobcard .projJobCon .tblProjPlan .floorDiv{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    width: 80px;
    height: 40px;
    padding: 3px;
}
#frmJobcard .projJobCon .tblProjPlan .floorDiv input{
    width: 100%;
    text-align: center;
}
#frmJobcard .projJobCon .tblProjPlan .roomDiv{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 80px;
    height: 40px;
    padding: 3px;
}
#frmJobcard .projJobCon .tblProjPlan .roomDiv input{
    width: 100%;
    text-align: center;
}

#frmJobcard .projJobCon .tblProjPlan .addDelCon{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    justify-content: space-between;
}

#frmJobcard .projJobCon .tblProjPlan td{
    width: auto;
    border: 1px solid black;
}
#frmJobcard .projJobCon .tblProjPlan td:first-child{
    width: 200px;
}
#frmJobcard .projJobCon .tblProjPlan .qty{
    border: 1px solid black;
    width: 50px;
}

#frmJobcard .projJobCon .tblProjPlan img{
    width: 20px;
    height: 20px;
    cursor: pointer;
}

#frmJobcard .projJobCon .tblProjPlan .rowTotal{
    font-size: 70%;
    color: var(--darkBlue);
}
#frmJobcard .projJobCon .tblProjPlan .rowTime{
    font-size: 70%;
    color: var(--darkBlue);
}




#frmJobcard .report{
    width: 100%;
    border-radius: 5px;
    border: 1px solid black;
    padding: 3px;
}


#frmJobcard .estHoursCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
#frmJobcard .estHoursCon input{
    width: 100px;
}
#frmJobcard .estHoursCon span{
    margin-left: 10px;
}


#frmJobcard .tblItems td{
    border: 1px solid black;
}

#frmJobcard .tblItems .titleCon{
    display: flex;
    flex-flow: column nowrap;
}
#frmJobcard .tblItems .titleCon input{
    border: solid 1px var(--lightBlue);
}
#frmJobcard .tblItems .titleCon textarea{
    font-size: 80%; 
    border: solid 1px var(--lightBlue);
}

#frmJobcard .tblItems td:nth-child(1){
    text-align: center;
    width: 25px;
}
#frmJobcard .tblItems td:nth-child(1) * {
    user-select: none;
    pointer-events: none;
}
#frmJobcard .tblItems td:nth-child(2){
    padding: 3px;
}
#frmJobcard .tblItems td:nth-child(3){
    width: 35px;
    text-align: right;
}
#frmJobcard .tblItems td:nth-child(3) input{
    text-align: right;
    padding-right: 5px;
    width: 60px;
}
#frmJobcard .tblItems td:nth-child(4){
    width: 80px;
}
#frmJobcard .tblItems td:nth-child(4) input{
    text-align: right;
}
#frmJobcard .tblItems td:nth-child(5){
    width: 80px;
}
#frmJobcard .tblItems td:nth-child(5) input{
    text-align: right;
}
#frmJobcard .tblItems td:nth-child(6){
    width: 70px;
    text-align: right;
    padding-right: 5px;
}

#frmJobcard .tblItems td:nth-child(7){
    width: 35px;
    text-align: center;
}
#frmJobcard tbody img{
    height: 30px;
}
#frmJobcard tbody input{
    height: 25px;
    width: 100%;
}

#frmJobcard .js_addToTblCon{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    justify-content: space-between;
}
#frmJobcard .js_addToTblCon input{
    width: 200px;
}


#frmJobcard tfoot td{
    font-weight: bold;
    font-size: 110%;
    text-align: right;
    padding-right: 5px;
}
#frmJobcard tfoot td:nth-child(1){
    text-align: right;
}

#frmJobcard .js_addToTblCon{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    justify-content: space-between;
}
#frmJobcard .js_addToTblCon input{
    width: 200px;
}


#frmJobcard .frmFooter{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 10px;
    position: sticky;
    bottom: 0px;
    background-color: white;
    border-top: solid 2px var(--darkBlue);
    z-index: 3;
}
#frmJobcard .frmFooter .js_BtnInvoice{
    padding: 5px;
    border: 1px solid var(--darkBlue);
    color: var(--darkBlue);

}
#frmJobcard .frmFooter .delSaveCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
}

#frmQuote{
    width: 90vw;
    overflow: auto;
}
#frmQuote.fullScreen{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#frmQuote .gFrmHeader{
    z-index: 4;
}

#frmQuote .frmDetail{
    display: flex;
    flex-flow: row nowrap;
}

#frmQuote .sideLabel{
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    margin-top: 3px;
}
#frmQuote .sideLabel label{
    font-size: 80%;
    text-align: right;
    width: 35%;
}
#frmQuote .sideLabel input{
    width: 100%;
    height: 25px;
    border: 1px solid black;
    margin-left: 3px;
}

#frmQuote .doubleInputCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}



#frmQuote .clientsCon{
    display: flex;
    flex-flow: column nowrap;
    width: 400px;

}
#frmQuote .clientsCon .inProj{
    margin-left: 10px;
}

#frmQuote .clientCon{
    border: 1px solid black;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
}

#frmQuote .clientInfoHeader{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

#frmQuote .quoteDetailCon{
    width: 100%;
    padding-left: 10px;
}

#frmQuote .normalQuoteCon{
    max-width: 1000px;
}

#frmQuote .timeFrameCon{
    width: 100px;
}

#frmQuote .labourCon{
    min-width: 30%;
    max-width: 150px;
}

#frmQuote .pointLabourCon{
    min-width: 30%;
}

#frmQuote .callOutCon{
    display: flex;
    flex-flow: column nowrap;
    width: 30%;
}
#frmQuote .callOutItems{
    display: flex;
    flex-flow: column wrap;
}
#frmQuote .callOutItems span{
    width: 100%;
}

#frmQuote .projQuoteCon{
    background-color: white;
    overflow: hidden;
}


#frmQuote .projQuoteCon .projHeaderCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
}
#frmQuote .projQuoteCon .projHeaderCon img{
    height: 30px;
    width: 30px;
    margin-left: 10px;
    cursor: pointer;
}


#frmQuote .projQuoteCon .projTotalsCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
    max-width: 1000px;
}
#frmQuote .projQuoteCon .projTotalsCon .projTotalItem{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    border: 1px solid black;
    box-shadow: 1pz 1px 5px black;
    padding: 5px;
    margin-bottom: 5px;
}
#frmQuote .projQuoteCon .projTotalsCon .projTotalItem span:first-child{
    color: var(--darkBlue);
    text-decoration: underline;
}
#frmQuote .projQuoteCon .projTotalsCon .projTotalItem span:nth-child(2){
    color: var(--darkBlue);
}

#frmQuote .projQuoteCon .projLabrour{
    width: 80px;
    margin-bottom: 5px;
}


#frmQuote .projQuoteCon .tblProjCon{
    width: 100%;
}

#frmQuote .projQuoteCon.expand{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 5;
    background-color: white;
    box-sizing: border-box;
}
#frmQuote .projQuoteCon.expand .tblProjCon{
    overflow-y: auto;
    overflow-x: auto;
    max-height: calc(100% - 150px);
    width: 100%;

}

#frmQuote .projQuoteCon .tblProjPlan{
    text-align: center;
    width: auto;
    max-width: 90%;
    
}



#frmQuote .projQuoteCon .tblProjPlan thead tr:first-child th, 
#frmQuote .projQuoteCon .tblProjPlan thead tr:first-child td{
    position: sticky;
    top: 0px;
    z-index: 3;
    background-color: lightgray;
}
#frmQuote .projQuoteCon .tblProjPlan thead tr:nth-child(2) th, 
#frmQuote .projQuoteCon .tblProjPlan thead tr:nth-child(2) td{
    position: sticky;
    top: 40px;
    z-index: 3;
    background-color: lightgray;
}

#frmQuote .projQuoteCon .tblProjPlan tbody tr td:first-child{
    position: sticky;
    left: 0px;
    z-index: 2;
    background-color: lightgray;
}


#frmQuote .projQuoteCon .tblProjPlan .floorDiv{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    width: 80px;
    height: 40px;
    padding: 3px;
}
#frmQuote .projQuoteCon .tblProjPlan .floorDiv input{
    width: 100%;
    text-align: center;
}
#frmQuote .projQuoteCon .tblProjPlan .roomDiv{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 80px;
    height: 40px;
    padding: 3px;
}
#frmQuote .projQuoteCon .tblProjPlan .roomDiv input{
    width: 100%;
    text-align: center;
}

#frmQuote .projQuoteCon .tblProjPlan .addDelCon{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    justify-content: space-between;
}

#frmQuote .projQuoteCon .tblProjPlan td{
    width: auto;
    border: 1px solid black;
}
#frmQuote .projQuoteCon .tblProjPlan td:first-child{
    width: 200px;
}
#frmQuote .projQuoteCon .tblProjPlan .qty{
    border: 1px solid black;
    width: 50px;
}

#frmQuote .projQuoteCon .tblProjPlan img{
    width: 20px;
    height: 20px;
    cursor: pointer;
}

#frmQuote .projQuoteCon .tblProjPlan .rowTotal{
    font-size: 70%;
    color: var(--darkBlue);
}
#frmQuote .projQuoteCon .tblProjPlan .rowTime{
    font-size: 70%;
    color: var(--darkBlue);
}




#frmQuote .estHoursCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
#frmQuote .estHoursCon input{
    width: 100px;
}
#frmQuote .estHoursCon span{
    margin-left: 10px;
}

#frmQuote .report{
    width: 100%;
    border-radius: 5px;
    border: 1px solid black;
    padding: 3px;
}


#frmQuote .tblItems td{
    border: 1px solid black;
}

#frmQuote .tblItems .titleCon{
    display: flex;
    flex-flow: column nowrap;
}
#frmQuote .tblItems .titleCon input{
    border: solid 1px var(--lightBlue);
}
#frmQuote .tblItems .titleCon textarea{
    font-size: 80%; 
    border: solid 1px var(--lightBlue);
}

#frmQuote .tblItems td:nth-child(1){
    text-align: center;
    width: 25px;
}
#frmQuote .tblItems td:nth-child(1) * {
    user-select: none;
    pointer-events: none;
}
#frmQuote .tblItems td:nth-child(2){
    padding: 3px;
}
#frmQuote .tblItems td:nth-child(3){
    width: 35px;
    text-align: right;
}
#frmQuote .tblItems td:nth-child(3) input{
    text-align: right;
    padding-right: 5px;
    width: 60px;
}
#frmQuote .tblItems td:nth-child(4){
    width: 80px;
}
#frmQuote .tblItems td:nth-child(4) input{
    text-align: right;
}
#frmQuote .tblItems td:nth-child(5){
    width: 80px;
}
#frmQuote .tblItems td:nth-child(5) input{
    text-align: right;
}
#frmQuote .tblItems td:nth-child(6){
    width: 70px;
    text-align: right;
    padding-right: 5px;
}

#frmQuote .tblItems td:nth-child(7){
    width: 35px;
    text-align: center;
}
#frmQuote tbody img{
    height: 30px;
}
#frmQuote tbody input{
    height: 25px;
    width: 100%;
}

#frmQuote .js_addToTblCon{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    justify-content: space-between;
}
#frmQuote .js_addToTblCon input{
    width: 200px;
}


#frmQuote tfoot td{
    font-weight: bold;
    font-size: 110%;
    text-align: right;
    padding-right: 5px;
}
#frmQuote tfoot td:nth-child(1){
    text-align: right;
}

#frmQuote .frmFooter{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 10px;
    position: sticky;
    bottom: 0px;
    background-color: white;
    border-top: solid 2px var(--darkBlue);
    z-index: 2;
}
#frmQuote .frmFooter .js_BtnJob{
    padding: 5px;
    border: 1px solid var(--darkBlue);
    color: var(--darkBlue);
    cursor: pointer;
}
#frmQuote .frmFooter .actionBtnsCon{
    display: flex;
    flex-flow: row nowrap;
}
#frmQuote .actionBtnsCon div:nth-child(n + 2){
    margin-left: 5px;
}
#frmQuote .frmFooter .delSaveCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
}

#frmInvoice{
    width: 90vw;
    overflow: auto;
}
#frmInvoice.fullScreen{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}


#frmInvoice .frmDetail{
    display: flex;
    flex-flow: row nowrap;
}

#frmInvoice .doubleInputCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}


#frmInvoice .sideLabel{
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    margin-top: 3px;
}
#frmInvoice .sideLabel label{
    font-size: 80%;
    text-align: right;
    width: 35%;
}
#frmInvoice .sideLabel input{
    width: 100%;
    height: 25px;
    border: 1px solid black;
    margin-left: 3px;
}

#frmInvoice .clientsCon{
    display: flex;
    flex-flow: column nowrap;
    width: 400px;
}
#frmInvoice .clientsCon .typePriorityCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#frmInvoice .clientsCon .inProj{
    margin-left: 10px;
}

#frmInvoice .clientsCon .priorityCon{
    margin-bottom: 5px;
}

#frmInvoice .clientsCon .doubleInputCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}


#frmInvoice .clientCon{
    border: 1px solid black;
    width: 100%;
    padding: 10px;
    margin-top: 10px;

}

#frmInvoice .clientInfoHeader{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

#frmInvoice .quoteDetailCon{
    width: 100%;
    padding-left: 10px;
}

#frmInvoice .estHoursCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
#frmInvoice .estHoursCon input{
    width: 100px;
}
#frmInvoice .estHoursCon span{
    margin-left: 10px;
}

#frmInvoice .report{
    width: 100%;
    border-radius: 5px;
    border: 1px solid black;
    padding: 3px;
}

#frmInvoice .tblLabour{
    border: 1px solid black;
    width: 300px;
    font-size: 80%;
}
#frmInvoice .tblLabour td:nth-child(n+4){
    text-align: right;
}

#frmInvoice .tblLabour tfoot td:nth-child(1){
    text-align: right;
}
#frmInvoice .tblLabour tfoot td:nth-child(n+2){
    text-align: right;
    
}

#frmInvoice .tblItems td{
    border: 1px solid black;
}
#frmInvoice .tblItems .titleCon{
    display: flex;
    flex-flow: column nowrap;
}
#frmInvoice .tblItems .titleCon input{
    border: solid 1px var(--lightBlue);
}
#frmInvoice .tblItems .titleCon textarea{
    font-size: 80%; 
    border: solid 1px var(--lightBlue);
}
#frmInvoice .tblItems td:nth-child(1){
    text-align: center;
}

#frmInvoice .tblItems td:nth-child(2){
    padding: 3px;
}
#frmInvoice .tblItems td:nth-child(3){
    width: 35px;
    text-align: right;
}
#frmInvoice .tblItems td:nth-child(3) input{
    text-align: right;
}
#frmInvoice .tblItems td:nth-child(4){
    width: 80px;
}
#frmInvoice .tblItems td:nth-child(4) input{
    text-align: right;
}
#frmInvoice .tblItems td:nth-child(5){
    width: 80px;
    text-align: center;
}
#frmInvoice .tblItems td:nth-child(5) input{
    text-align: right;
}

#frmInvoice .tblItems td:nth-child(6){
    width: 70px;
    text-align: right;
    padding-right: 5px;
}
#frmInvoice .tblItems td:nth-child(7){
    width: 35px;
    text-align: center;
}

#frmInvoice tbody img{
    height: 30px;
}
#frmInvoice tbody input{
    height: 25px;
    width: 100%;
}
#frmInvoice .tblItems tfoot td{
    font-weight: bold;
    font-size: 110%;
    text-align: right;
    padding-right: 5px;
}
#frmInvoice .tblItems tfoot td:nth-child(1){
    text-align: right;
}

#frmInvoice .js_addToTblCon{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    justify-content: space-between;
}
#frmInvoice .js_addToTblCon input{
    width: 200px;
}

#frmInvoice .projJobCon{
    background-color: white;
    overflow: hidden;
}

#frmInvoice .projJobCon .projHeaderCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
}
#frmInvoice .projJobCon .projHeaderCon img{
    height: 30px;
    width: 30px;
    margin-left: 10px;
    cursor: pointer;
}


#frmInvoice .projJobCon .projTotalsCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
    max-width: 1000px;
}
#frmInvoice .projJobCon .projTotalsCon .projTotalItem{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    border: 1px solid black;
    box-shadow: 1pz 1px 5px black;
    padding: 5px;
    margin-bottom: 5px;
}
#frmInvoice .projJobCon .projTotalsCon .projTotalItem span:first-child{
    color: var(--darkBlue);
    text-decoration: underline;
}
#frmInvoice .projJobCon .projTotalsCon .projTotalItem span:nth-child(2){
    color: var(--darkBlue);
}

#frmInvoice .projJobCon .projLabrour{
    width: 80px;
    margin-bottom: 5px;
}


#frmInvoice .projJobCon .tblProjCon{
    width: 100%;
}

#frmInvoice .projJobCon.expand{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 5;
    background-color: white;
    box-sizing: border-box;
}
#frmInvoice .projJobCon.expand .tblProjCon{
    overflow-y: auto;
    overflow-x: auto;
    max-height: calc(100% - 150px);
    width: 100%;

}

#frmInvoice .projJobCon .tblProjPlan{
    text-align: center;
    width: auto;
    max-width: 90%;
    
}


#frmInvoice .projJobCon .tblProjPlan thead tr:first-child th, 
#frmInvoice .projJobCon .tblProjPlan thead tr:first-child td{
    position: sticky;
    top: 0px;
    z-index: 3;
    background-color: lightgray;
}
#frmInvoice .projJobCon .tblProjPlan thead tr:nth-child(2) th, 
#frmInvoice .projJobCon .tblProjPlan thead tr:nth-child(2) td{
    position: sticky;
    top: 40px;
    z-index: 3;
    background-color: lightgray;
}

#frmInvoice .projJobCon .tblProjPlan tbody tr td:first-child{
    position: sticky;
    left: 0px;
    z-index: 2;
    background-color: lightgray;
}


#frmInvoice .projJobCon .tblProjPlan .floorDiv{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    width: 80px;
    height: 40px;
    padding: 3px;
}
#frmInvoice .projJobCon .tblProjPlan .floorDiv input{
    width: 100%;
    text-align: center;
}
#frmInvoice .projJobCon .tblProjPlan .roomDiv{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 80px;
    height: 40px;
    padding: 3px;
}
#frmInvoice .projJobCon .tblProjPlan .roomDiv input{
    width: 100%;
    text-align: center;
}

#frmInvoice .projJobCon .tblProjPlan .addDelCon{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    justify-content: space-between;
}

#frmInvoice .projJobCon .tblProjPlan td{
    width: auto;
    border: 1px solid black;
}
#frmInvoice .projJobCon .tblProjPlan td:first-child{
    width: 200px;
}
#frmInvoice .projJobCon .tblProjPlan .qty{
    border: 1px solid black;
    width: 50px;
}

#frmInvoice .projJobCon .tblProjPlan img{
    width: 20px;
    height: 20px;
    cursor: pointer;
}

#frmInvoice .projJobCon .tblProjPlan .rowTotal{
    font-size: 70%;
    color: var(--darkBlue);
}
#frmInvoice .projJobCon .tblProjPlan .rowTime{
    font-size: 70%;
    color: var(--darkBlue);
}


#frmInvoice .frmFooter{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 10px;
    position: sticky;
    bottom: 0px;
    background-color: white;
    border-top: solid 2px var(--darkBlue);
}
#frmInvoice .frmFooter .actionBtnsCon{
    display: flex;
    flex-flow: row nowrap;
}
#frmInvoice .actionBtnsCon div:nth-child(n + 2){
    margin-left: 5px;
}


#frmDevice{
    width: 500px;
}

#frmTime{
    width: 600px;
    height: auto;
}

#frmTime .dateCon{
    display: flex;
    flex-flow: row nowrap;
    
}

/*FORM PACAGE*/
#frmPackage .searchCon{
    width: 48%;
    
}

#frmPackage table tr{
    border-bottom: 1px solid var(--darkBlue);
    padding: 3px 0 3px 0;
}
#frmPackage table img{
    height: 30px;
    width: 30px;
    cursor: pointer;
}
#frmPackage table td:nth-child(2){
    width: 80px;
}
#frmPackage table td:nth-child(2) input{
    width: 100%;
    border: 1px solid black;
    height: 25px;
}
#frmPackage table td:last-of-type{
    width: 35px;
    text-align: right;
}


/*FORM SETTINGS*/
#frmSettings{
    width: 80%;

}

#frmSettings .tabCon{
    list-style: none;

}
#frmSettings .tabCon li{
    display: inline-block;
    color: var(--lightBlue);
    font-size: 120%;
    cursor: pointer;
}
#frmSettings .tabCon li:nth-child(n+2){
    margin-left: 10px;
}
#frmSettings .tabCon li:hover{
    border-bottom: 1px solid var(--darkBlue);
}
#frmSettings .tabCon li.selected{
    border-bottom: 1px solid var(--darkBlue);
}

#frmSettings .js_mailTempCon{
    
}
#frmSettings .js_mailTempCon .codeList{
    margin-top: 10px;
}

#frmSettings .js_invInsCon table{
    width: 350px;
    border: 1px solid black;
}
#frmSettings .js_invInsCon table td{
    height: 25px;
    border: 1px solid black;
}
#frmSettings .js_invInsCon table td:nth-child(n + 2){
    width: 80px;
    text-align: center;
}
#frmSettings .js_invInsCon table input{
    width: 100%;
    height: 100%;
}

#frmSettings .js_BtnAddPrice{
    cursor: pointer;
    border: 1px solid var(--lightBlue);
    padding: 5px;
    color: var(--darkBlue);
}
#frmSettings .js_prodPriceCon .prodPriceTblCon{
    margin-top: 10px;
}
#frmSettings .js_prodPriceCon table{
    width: 300px;
}
#frmSettings .js_prodPriceCon table td{
    height: 25px;
    border: 1px solid black;
}
#frmSettings .js_prodPriceCon tbody tr td:first-child{
    background-color: var(--lightBlue);
}
#frmSettings .js_prodPriceCon table input{
    width: 100%;
    height: 100%;
}
#frmSettings .js_prodPriceCon table img{
    width: 25px;
    height: 25px;
    cursor: pointer;
}

/*FORM MAIL VIEW*/
#frmMailView{
    width: 80%;
    max-height: 80%;
    overflow: hidden;
}
#frmMailView .gFrmBody{
    height: 100%;
    box-sizing: border-box;
}

#frmMailView .headerTabs{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

#frmMailView .headerTabs .tabCon{
    display: flex;
    flex-flow: row nowrap;
}
#frmMailView .headerTabs .tabCon div{
    border: 1px solid var(--darkBlue);
    background-color: white;
    color: var(--darkBlue);
    margin-right: 10px;
    padding: 5px;
    cursor: pointer;
}
#frmMailView .headerTabs .tabCon div.selected{
    color: white;
    background-color: var(--darkBlue);
}

#frmMailView .headerTabs .btnCopyLink{
    padding: 5px;
    background-color: green;
    color: white;
}

#frmMailView .contactsCon {
    display: flex;
    flex-flow: row nowrap;
}
#frmMailView .contactsCon div{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    border: 1px solid var(--darkBlue);
    background-color: white;
    color: var(--darkBlue);
    margin-right: 10px;
    padding: 5px;
    cursor: pointer;
}
#frmMailView .contactsCon div.selected{
    color: white;
    background-color: var(--darkBlue);
}

#frmMailView .mailPanel{
    margin-top: 10px;
    width: 100%;
   
}
#frmMailView .mailPanel .mailsCon{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}
#frmMailView .mailPanel .mailsCon div:nth-child(n+1){
    margin-left: 5px;
}
#frmMailView .mailPanel .contactMail{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--lightBlue);
    color: var(--lightBlue);
    cursor: pointer;
    padding: 5px;
}


#frmMailView .js_btnCon{
    display: flex;
    flex-flow: row nowrap;
    margin-top: 10px;
    gap: 10px;
}
#frmMailView .js_btnCon div{
    color: white;
    background-color: var(--darkBlue);
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}
#frmMailView iframe{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/*FORM REPORTS*/
#frmReports{
    width: 80%;
}

#frmReports .reportTypes{
    display: flex;
    flex-flow: row nowrap;
    padding: 10px;
}
#frmReports .reportTypes .typeCon{
    display: flex;
    flex-flow: column nowrap;
    border: 1px solid var(--darkBlue);
    box-shadow: 1px 1px 5px black;
    padding: 5px;
}
#frmReports .reportTypes .typeCon:nth-child(n + 2){
    margin-left: 10px;
}
#frmReports .reportTypes .typeCon.selected{
    background-color: var(--darkBlue);
    color: white;
}

#frmReports .typeCon img{
    height: 80px;
}
#frmReports .typeCon span{
    font-size: 120%;
    font-weight: bold;
}

/*FROM SUPPLIER*/
#frmSupplier{
    width: 800px;
    max-height: 100%;
    overflow-y: auto;
}

#frmSupplier .frmSecsCon{
    display: flex;
    flex-flow: row nowrap;
}
#frmSupplier .frmSecsCon .leftSec{
    padding: 10px;
    width: 55%;
    border-right: 1px dashed black;
}
#frmSupplier .frmSecsCon .rightSec{
    padding: 10px;
    width: 45%;
}


#frmSupplier .btnAddContactCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    width: 100%;
}
#frmSupplier .btnAddContactCon .btnAddContact{
    color: var(--darkBlue);
    text-decoration: underline;
    cursor: pointer;
}

#frmSupplier .contactsCon{
    display: flex;
    flex-flow: column nowrap;
    background-color: darkGray;
    padding: 15px 5px 5px 5px;
    
}
#frmSupplier .contactsCon .contactCon{
    padding: 20px 5px 5px 5px;
    background-color: white;
    margin-bottom: 5px;
    border-radius: 5px;
    border: 1px solid black;
    position: relative;
}
#frmSupplier .contactCon .btnDelContact{
    position: absolute;
    top: -3px;
    right: -3px;
    height: 20px;
    cursor: pointer;
}


#frmSupplier .doubleInput{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#frmSupplier .contact input{
    display: inline-block;
    border: 1px solid black;
    height: 30px;
    padding-left: 5px;
    width: 49%;
}

#frmSupplier .phoneCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#frmSupplier .phoneCon input:first-child{
    width: 100px;
}
#frmSupplier .phoneCon input:last-child {
    width: 100%;
}

#frmSupplier .addSearch{
    margin-top: 20px;
}
#frmSupplier .short{
    width: 20%;
}

/*FORM SUPPLIER INVOICE*/
#frmSuppInvoice{
    width: 500px;
}

#frmSuppInvoice .gjs_textareaCon{
    margin-top: 5px;
}


#frmSuppInvoice .photoCon{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
#frmSuppInvoice .photoCon .photoImg{
    max-height: 300px;
    max-width: 300px;
}

#frmSuppInvoice .btnPhoto{
    width: 50px;
    height: 50px;
}


/*FORM FUEL*/
#frmFuel{
    width: 500px;
}

#frmFuel .photoCon{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
#frmFuel .photoCon .photoImg{
    max-height: 300px;
    max-width: 300px;
}

#frmFuel .btnPhoto{
    width: 50px;
    height: 50px;
}

/*FORM ATTATCHMENT INVOICE*/
#frmAttachment{
    width: 500px;
}

#frmAttachment .photoCon{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
#frmAttachment .photoCon .photoImg{
    max-height: 300px;
    max-width: 300px;
}

#frmAttachment .btnPhoto{
    width: 50px;
    height: 50px;
}

#frmTV .screensCon{
    display: flex;
    flex-flow: row nowrap;
    padding: 5px;
}
#frmTV .screensCon div{
    border: 1px solid black;
    padding: 2px 3px 2px 3px;
}
#frmTV .screensCon div:nth-child(n+2){
    margin-left: 5px;
}
#frmTV .screensCon div.selected{
    background-color: var(--darkBlue);
    color: white;
}

/*FORM PHOTO*/
#frmPhoto .imgCon{
    display: flex;
    justify-content: center;
    padding-top: 10px;
}
#frmPhoto .img{
    max-height: 300px;
    max-width: 80%;
}

#frmPayment .tabsCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    margin-bottom: 10px;
}
#frmPayment .tabsCon div{
    padding: 5px;
    border: 1px solid var(--darkBlue);
    cursor: pointer;
}
#frmPayment .tabsCon div.selected{
    background-color: var(--darkBlue);
    color: white;
}

/*FORM WHATSAPP*/
#frmWhatsapp{
    overflow: hidden;
    height: 100%;
    width: 600px;
}
#frmWhatsapp .gFrmBody{
    overflow: hidden;
    height: 100%;
}
#frmWhatsapp .mainCon{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    height: calc(100% - 50px);
    overflow: hidden;
    
}
#frmWhatsapp .mainCon .leftCon{
    width: 300px;
    font-size: 80%;
    height: 100%;
    overflow-y: scroll;
}

#frmWhatsapp .contactCon{
    border-bottom: 1px solid black;
    cursor: pointer;
    padding: 5px 0 5px 0;
}
#frmWhatsapp .contactCon.selected{
    background-color: var(--darkBlue);
    color: white;
}

#frmWhatsapp .contactCon .top{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
}
#frmWhatsapp .contactCon .tLeft{
    width: 80%;

}
#frmWhatsapp .contactCon .tRight{

}
#frmWhatsapp .contactCon .cName{
    font-weight: bold;
}

#frmWhatsapp .mainCon .rightCon{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    width: 100%;
    overflow-y: scroll;
}

#frmWhatsapp .rightCon .sendCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    width: 100%;
    margin: 5px 0 5px 0;
}
#frmWhatsapp .rightCon .receiveCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    width: 100%;
    margin: 5px 0 5px 0;
}
#frmWhatsapp .rightCon .msgBox{
    padding: 5px;
    border: 1px solid black;
    box-shadow: 1px 1px 5px black;
    border-radius: 5px;
    width: 80%;
}
#frmWhatsapp .msgBox .timeAndUser{
    font-size: 70%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
}

#frmWhatsapp .msgBox .msgImgCon{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
#frmWhatsapp .msgBox .btnGetWa{
    display: none;
    padding: 5px;
    color: white;
    background-color: var(--darkBlue);
    border-radius: 5px;
    text-align: center;
}
#frmWhatsapp .msgBox .media{
    max-width: 100%;
}

#frmWhatsapp .promoCon{
    width: 300px;
    padding: 5px;
}
#frmWhatsapp .promoCon .promoPhoto{
    max-height: 100px;
}
#frmWhatsapp .promoCon .tagsCon{
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin: 10px 0 10px 0;
}
#frmWhatsapp .promoCon .tagBtn{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--lightBlue);
    border-radius: 3px;
    padding: 3px;
}
#frmWhatsapp .promoCon .tagBtn.selected{
    background-color: var(--lightBlue);
    color: white;
}



#frmWhatsapp .msgBox .msgBody{
    white-space: pre-line;
}
#frmWhatsapp .msgBox .imgStatus{
    height: 15px;
}
#frmWhatsapp .msgBox .msgStatusCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
}
#frmWhatsapp .msgBox .error{
    width: 100%;
}

#frmWhatsapp .sendMsgCon{
    position: sticky;
    bottom: 0px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 100%;
}
#frmWhatsapp .sendMsgCon textarea{
    width: 100%;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
    margin-left: 5px;
}
#frmWhatsapp .sendMsgCon .btnSend{
    height: 50px;
    width: 50px;
    margin-left: 5px;
}

#dashBoardCon{
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#dashBoardCon .dashFrmsCon{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


#mainDashMenu{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    width: 100%;
}
#mainDashMenu div{
    border: 1px solid black;
    padding: 2px 5px 2px 5px;
    background-color: white;
    cursor: pointer;
}
#mainDashMenu div.selected{
    background-color: var(--darkBlue);
    color: white;
}

#frmDashB{
    height: 100%;
    width: 100%;
    padding-bottom: 10px;
}
#frmDashB .headerCon{
    display: flex;
    flex-flow: row nowrap;
    font-size: 16px;
}
#frmDashB .zoom{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    border: 1px solid blue;
    padding: 3px;
    cursor: pointer;
}
#frmDashB .jobTypeCon{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    justify-content: center;
    
}
#frmDashB .jobTypeCon div{
    border: 1px solid black;
    color: black;
    font-size: 130%;
    padding: 5px 10px 5px 10px;
    cursor: pointer;
}
#frmDashB .jobTypeCon div:nth-child(n+2){
    margin-left: 20px;
}
#frmDashB .jobTypeCon div.selected{
    color: white;
    background-color: var(--darkBlue);
}

#frmDashB .categoryCon{
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  justify-content: center;
  margin-top: 5px;
}
#frmDashB .categoryCon div{
  border: 1px solid black;
  color: black;
  font-size: 110%;
  padding: 3px 5px 3px 5px;
  cursor: pointer;
}
#frmDashB .categoryCon div:nth-child(n+2){
  margin-left: 20px;
}
#frmDashB .categoryCon div.selected{
  color: white;
  background-color: var(--darkBlue);
}


#frmDashB .jobsCon{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding: 10px 20px 10px 0;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

#frmDashB .jobCon{
    width: 150px;
    margin: 5px 0 5px 5px;
}
#frmDashB .jobCon.size20{
  width : 80px;
}
#frmDashB .jobCon.size40{
  width: 100px;
}
#frmDashB .jobCon.size60{
  width : 120px;
}
#frmDashB .jobCon.size80{
  width : 140px;
}
#frmDashB .jobCon.size100{
  width : 160px;
}
#frmDashB .jobCon.size120{
  width : 180px;
}



#frmDashB .jobCon .jobHead{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    border: 1px solid black;
    padding: 5px 2px 2px 2px;
    border-radius: 5px 5px 0 0;
}
#frmDashB .jobHead .topRow{
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;

}
#frmDashB .jobHead .secondRow{
  font-size: 80%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;

    
}

#frmDashB .jobHead .topRow .floatHeader{
    position: absolute;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    top: -20px;
    left: 0;
    width: 100%;
}
#frmDashB .jobHead .topRow .floatHeader .otherHeader{
    visibility: hidden;
}
#frmDashB .jobHead .topRow .floatHeader .priority{
    border-radius: 50%;
    aspect-ratio: 1/1;
    text-align: center;
}

#frmDashB .jobHead span{
  background-color: white;
  border: 1px solid black;
  padding: 0 2px 0 2px;
}

#frmDashB .jobCon .jobBody{
  font-size: 80%;
  border: 1px solid black;
  border-radius: 0 0 5px 5px;
}
#frmDashB .jobBody .title{
    font-weight: bold;
}
#frmDashB .jobBody .tecEmpCon{
    border-top: 1px dashed black;
}

/*FORM EMPLOYEE PROFIT DASH BOARD*/
#frmEmpProfit{
    width: 100%;
    height: 100%;
}

#frmEmpProfit .frmBody{
    padding: 10px 10px 30px 10px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

#frmEmpProfit .datesCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#frmEmpProfit .datesCon select{
    border: 1px solid black;
    height: 30px;
    width: 80px;
}
#frmEmpProfit .datesCon div{
    border: 1px solid black;
    padding: 5px 10px 5px 10px;
    cursor: pointer;
}
#frmEmpProfit .datesCon div.selected{
    background-color: blue;
    color: white;
}

#frmEmpProfit .chartCon{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    height: 100%;
    position: relative; 
    box-sizing: border-box;
}

#frmEmpProfit .chartCon .tblLine{
    position: absolute;
    width: 100%;
    height: 1px;
    
}

#frmEmpProfit .chartCon .hoursLevel{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    height: 100%;
} 

#frmEmpProfit .chartCon .empsChartCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
}

#frmEmpProfit .empsChartCon .empCon{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    height: 100%;
}

#frmEmpProfit .empsChartCon .empDetails{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
   
    
}
#frmEmpProfit .empDetails .empName{
    font-size: 150%;
    font-weight: bold;
}

#frmEmpProfit .empsChartCon .hoursCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    height: auto;
    text-align: center;
}

#frmEmpProfit .hoursCon .jobHoursCon{
  width: 50%;
}
#frmEmpProfit .hoursCon .jobHours{
    position: relative;
    border: 1px solid black;
    width: 100%;
    transition: height 2s ease-in-out 0.5s;

}


#frmEmpProfit .hoursCon .empHoursCon{
  width: 50%;
}
#frmEmpProfit .hoursCon .empHours{
    position: relative;
    border: 1px solid black;
    width: 100%;
    transition: height 2s ease-in-out 0.5s;

}
#frmEmpProfit .hoursCon .colHeader{
    text-decoration: underline;
    font-weight: bold;
}

#frmEmpProfit .hoursCon .paidHours{
    position: relative;
    border: 1px solid black;
    width: 100%;
    transition: height 2s ease-in-out 0.5s;
}

#frmEmpProfit .empDetails .incentive{
    font-weight: bold; 
    background-color: gold;
}

/*FORM QNOTE*/
#frmQNote{
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    top: 0;
    z-index: 3;
}
#frmQNote .disArea{
    max-height: 80vh;
    width: 500px;
    display: flex;
    flex-flow: column nowrap;
}

#frmQNote .frmBody{
    background-color: white; 
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
    width: 100%;
    padding: 10px;
}

#frmQNote .notesCon{
    display: flex;
    flex-flow: column nowrap;
    gap: 5px;
    width: 100%;
    max-height: 100%;
    overflow-y: scroll;
}
#frmQNote .noteItem{
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 1xp 1px 3px black;
    padding: 5px;
}
#frmQNote .noteItem .noteHead{
    font-weight: bold;
    border-bottom: 1px solid var(--lightBlue);
    color: var(--darkBlue);
}

/*FORM  EMPLOYEE CALANDAR*/
#frmEmpCal{
    width: 100%;
}
#frmEmpCal .rightHeaderCon{
    display: flex;
    flex-flow: row nowrap;
    gap: 5px;
}

#frmEmpCal .formSettings{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#frmEmpCal .formSettings .empSelectCon{
    display: flex;
    flex-flow: column nowrap;
    gap: 5px;
}
#frmEmpCal .formSettings .weeksCon{
    display: flex;
    flex-flow: row nowrap;
    gap: 10px;
}
#frmEmpCal .formSettings .weekCon{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid black;
    padding: 3px;
}
#frmEmpCal .weekCon span{
    text-decoration: underline;
    font-weight: bold;
}
#frmEmpCal .weekCon .btnPrint{
    border: 1px solid var(--lightBlue);
    padding: 3px;
    cursor: pointer;
}

#frmEmpCal .weekCon .btnLock{
    border: 1px solid red;
    padding: 3px;
    cursor: pointer;
}
#frmEmpCal .weekCon .btnLock.selected{
    color: white;
    background-color: red;
}

#frmEmpCal .projsCon{
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    gap: 10px;
}
#frmEmpCal .projsCon .projItem{
    width: 200px;
    border: 1px solid black;
    box-shadow: 1px 1px 5px black;
    background-color: white;
    font-size: 80%;
    padding: 3px;
}
#frmEmpCal .projsCon .projItem .projName{
    width: 100%;
    background-color: var(--blue);
    color: white;
    cursor: pointer;
}
#frmEmpCal .projsCon .dItemsCon{
    display: flex;
    flex-flow: column nowrap;
    gap: 5px;
}
#frmEmpCal .projsCon .dItemsCon .dItem{
    border-bottom: 1px solid var(--lightBlue);
    padding: 5px;
}

#frmEmpCal .tblMonth{
    margin-top: 10px;
    margin-bottom: 10px;
}
#frmEmpCal .tblMonth td{
    text-align: center;
    padding: 5px;
    border: 1px solid var(--darkBlue);
    cursor: pointer;
    background-color: white;
}
#frmEmpCal .tblMonth td.selected{
    color: white;
    background-color: var(--darkBlue);
}

#frmEmpCal .tblCal th{
    font-size: 120%;
}
#frmEmpCal .tblCal td{
    padding: 5px;
    width: 14.28%;
}
#frmEmpCal .tblCal .calDayCon{
    display: flex;
    flex-flow: column nowrap;
    gap: 5px;
    border: 1px solid black;
    box-shadow: 1px 1px 3px black;
    width: 100%;
    min-height: 100px;
    background-color: white;
    padding: 3px;
    font-size: 70%;
    
}
#frmEmpCal .calDayCon .lblDate{
    font-size: 200%;
    font-weight: bold;
}

#frmEmpCal .calDayCon .actBtnCon{
    display: flex;
    flex-flow: row wrap;
    gap: 5px;
}
#frmEmpCal .calDayCon .btnAction{
    background-color: var(--darkBlue);
    color: white;
    border-radius: 5px;
    padding: 3px;
    cursor: pointer;
}
#frmEmpCal .calDayCon table{
    display: none;
}
#frmEmpCal .calDayCon table img{
    max-width: 20px;
    max-height: 20px;
    cursor: pointer;
}
#frmEmpCal .calDayCon table thead th{
    background-color: var(--lightBlue);
    color: white;
}

#frmEmpCal .calDayCon table tbody tr:hover{
    cursor: pointer;
    background-color: var(--darkBlue);
    color: white;
}


#frmEmpCal .popUpTimeFrm{
    display: none;
    position: absolute;
    width: 300px;
    z-index: 4;
    border: 1px solid black;
    background-color: white;
    padding: 10px;
}

#frmEmpCal .popUpTimeFrm .btnBox{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin-top: 10px;
}
#frmEmpCal .popUpTimeFrm .btnSubmitTimes{
    background-color: var(--darkBlue);
    color: white;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 1px 1px 5px black;
    cursor: pointer;
}