:root{
    --yellow: #EBA63F;
    --red: #E40C2B;
    --lightRed: #ff9292;
    --cream: #F7F4E9;
    --green: #438945;
    --lightBlue: #3CBCC3;
    --black: #1D1D2C;
    --white: #FFFDFA;
    --grey: #ABA9A9;
    --lightYellow: #F1BD70;
    --lightGreen: #659266;
    --gradient: linear-gradient(#fff,var(--cream));
    --gradientDown: linear-gradient(var(--cream),#fff);
    --gradientYellowDown: linear-gradient(var(--yellow),var(--lightYellow));
}

html, body{
    margin: 0;
    padding: 0;
    border: 0;
    overscroll-behavior: contain;
    font-family: sans-serif;
}
body{
    width: 100%;
    touch-action: manipulation;
    font-family: sans-serif;
}
table, td{
    border: 0;
    padding: 0;
    margin: 0;
    border: 1px solid black;
    border-collapse: collapse;
}
tr{
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
}
thead, tbody{
    width: 100%;
}

.gFrm{
    top: 60px;
    max-height: calc(100% - 120px);
    background-color: var(--cream);
    display: none;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 18px;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}
.gFullFrm{
    display: none;
    font-family: sans-serif;
    font-size: 18px;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px 20px 20px;
    text-align: center;
    box-sizing: border-box;
}
.gFrmHeader{
    background: var(--gradient);
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 30px;
    color: var(--black);
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 30px;
}
.gFullFrmHeader{
    margin-top: 70px;
}
.gFullFrmHeader img{
    width: 13vh;
    animation: pulseAnimation 2s 1;
}
.gFrmBody{
    position: relative;
    width: 100%;
    padding: 10px;
}
  
  @keyframes pulseAnimation {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
.gFullFrmHeader label{
    margin-top: 2vh;
    margin-bottom: 2vh;
    font-family:  sans-serif;
    font-weight: bold;
    font-size: 30px;
    display: block;
    line-height: 30px;
    color: var(--black);
}
.gFullFrmFooterCon{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 60%;
    color: var(--cream);
    box-sizing: border-box;
    padding-bottom: 5vh;
}
.gFullFrmFooterRow{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
}
.gFullFrmFooterCon img{
    width: 30px;
    margin-right: 2px;
}
.gFullFrmFooterRow img{
    width: 15px;
    margin-right: 2px;
}
.gFrmFieldset{

}
.gFrmFieldset legend{
    font-weight: bolder;
}
.gFrmBackIcon{
    height: 30px;
    margin-bottom: 10px;
}
.gFullFrmBackIcon{
    height: 35px;
    float: left;
    border-radius: 50%;
    margin-left: 15px;
}
.gFrmLabel{
    margin-left: 20px;
    font-weight: bold;
    display: block;
}
.gFrmIputReq{
    font-weight: normal;
    margin-left: 3px;
    font-size: 14px;
}
.gFrmInput{
    height: 50px;
    border-radius: 5px;
    margin-right: 10px;
    padding-left: 10px;
    margin-top: 5px;
    margin-bottom: 12px;
    width: calc(100% - 20px);
    font-size: 18px;
    border: none;
    background-color: white;
    box-sizing: border-box;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.gFullFrmInput{
    height: 50px;
    border-radius: 5px;
    margin-left: 15px;
    margin-right: 15px;
    padding-left: 10px;
    margin-bottom: 20px;
    width: calc(100% - 40px);
    font-size: 18px;
    border: none;
    background-color: white;

}
.gFrmTextArea{
    border-radius: 5px;
    width: calc(100% - 20px);
    margin-top: 5px;
    margin-bottom: 12px;
    font-size: 18px;
    border: none;
    background-color: white;
    display: block;
    box-sizing: border-box;
    padding: 10px;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

.gFrmAddBtn{
    /*Icon X position is done with JS GlobalUtils.docResize*/
    height: 60px;
    width: 60px;
    border-radius: 50%;
    position: fixed;
    bottom: 50px;
    z-index: 2;
    display: none;
}
.gFrmBtnBox{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    position: fixed;
    height: 60px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 2;
}
.gFrmBtnBox .btnSave{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-grow: 1;
    background-color: var(--green);
    color: var(--cream);
    font-size: 18px;
}
.gFrmBtnBox .btnDelete{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-grow: 1;
    background-color: var(--red);
    color: var(--cream);
    font-size: 18px;
}

.gWizBtnBox{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    flex-flow: row;
    align-items: center;
}
.gWizBtnBox .btnSave{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cream);
    margin: 20px 0;
    height: 100%;
    flex-grow: 1;
    background-color: var(--green);
}
.gWizBtnBox .btnDelete{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cream);
    margin: 20px 0;
    height: 100%;
    width: 50%;
    background-color: var(--red);
}

.gFullFrmBtnBox{
    width: 100%;
    margin-top: 5px;
    margin-bottom: 15px;
    position: relative;
    user-select: none;
    text-align: center;
}
.gTblSearch{
    width: calc(100% - 40px);
    background-color: white;
    margin: 0 auto;
    border-radius: 5px;
    border: none;

}
.gTblSearch tr{
    height: 60px;
    border-bottom: 10px solid var(--cream);
    cursor: pointer;
    border-radius: 10px;
    box-sizing: border-box;
}
.gTblSearch tr:active{
    background-color: var(--yellow);
}
.gTblSearch td:nth-child(1){
    padding-left: 10px;
}
.gTblSearch td{
    border: none;
    padding: 10px;
    box-sizing: border-box;
}

.gAsTable{
    margin: 0;
    padding: 0;
    border: 0;
    display: table;
    width: 100%;
    height: 100%;
}
.gAsRow{
    display: table-row;
}
.gAsCell{
    display: table-cell;
    box-sizing: border-box;
}
.gMask{
    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;
}
.gLoader{
    position: fixed;
    border: 16px solid var(--cream);
    border-radius: 50%;
    border-top: 16px solid var(--green);
    border-bottom: 16px solid var(--green);
    width: 60px;
    height: 60px;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
    margin-left: -30px;
    margin-top: -30px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.gFullFrmBtnBox .btnSave{
    height: 50px;
    width: 250px;
    background-color: var(--green);
    border-radius: 5px;
    color: var(--cream);
    font-size: 20px;
    margin-left: 10px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    margin: 0 auto;
}
.gMarginB{
    margin-bottom: 5px;
}
.gMarginR{
    margin-right: 5px;
}
.gMarginL{
    margin-left: 5px;
}
.gAlignL{
    text-align: left;
}
.gAlignR{
    text-align: right;
}
.gAlignC{
    text-align: center;
}
.gPointer{
    cursor: pointer;
}
.gDisplayNone{
    display: none;
}

.gBtnLocker{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    backdrop-filter: blur(1px);
}

.gjs_textareaCon{
    position: relative;
    width: calc(100% - 20px);
    padding-left: 10px;
    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;
}



.appViewCon{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    position: fixed;
    background-color: var(--cream);
    z-index: 1;
    display: none;
}
.fullViewCon{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--gradientYellowDown);
    position: fixed;
    overflow-y: auto;
}

#toolTip{
    padding: 5px;
    position: absolute;
    background-color: rgba(0,0,0,0.6);
    color: 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: 300px;
    background-color: var(--cream);
    border-radius: 15px;
    z-index: 3;
    display: none;
    position: absolute;
    padding: 10px;
    text-align: center;
    font-family: sans-serif;

}
#infoBox header{
    margin-top: 15px;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 24px;
}
#infoBox img{
    margin-bottom: 3px;
    height: 50px;
    width: 50px;
}
#infoBox p{
    font-family: sans-serif;
    font-weight: bold;
    font-size: 24px;
}
#infoBox .btnBox{
    width: 100%;
    clear: both;
}
#infoBox .btnBox div{
    margin-bottom: 10px;
    color: white;
    height: 40px;
    line-height: 37px;
    border-radius: 5px;
    font-size: 24px;
    cursor: pointer;
}

#placesBox{
    position: absolute;
    display: none;
    z-index: 3;
    background-color: white;
    border: 1px solid var(--green);
}
#placesBox td{
    border-bottom: 1px solid var(--green);
    height: 25px;
    cursor: pointer;
    width: 100%;
    padding-left: 5px;
}


/*HEADER*/
.mainHeader{
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    background-color: var(--yellow);
    position: fixed;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-between;
}

.mainHeader .gAsRow{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}
.mainHeader .col1{
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;

}
.mainHeader .notifiBox{
    display: none;
}
.mainHeader .imgMenu{
    height: 45px;
}
.mainHeader .imgLogo{
    height: 45px;
    display: block;
}
.mainHeader .switchBoxCon{
    position: relative;
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    justify-content: flex-end;
    box-sizing: border-box;
    margin: 0 11px;
    height: 40px;
}
.mainHeader .switchCon{
    display: inline-block;
    border-radius: 20px;
    background-color: var(--black);
    position: relative;
    width: 60px;
}
.mainHeader .switch{
    background-color: var(--cream);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    position: relative;
    -webkit-transition:left 0.5s;
    -moz-transition:left 0.5s;
    -o-transition:left 0.5s;
    transition:left 0.5s;
    border: solid 2px var(--black);
}
.mainHeader .switchLbl{
    font-size: 24px;
    font-family: sans-serif;
    font-weight: bold;
    height: 30px;
    display: flex;
    align-items: center;
    margin: 0 5px;

}

#appViewDropMenu{
    max-height: 0px;
    position: absolute;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    background-color: var(--logoLightGreen);
    z-index: 5;
    top: 60px;
    width: 200px;
    box-shadow: 2px 2px 5px black;
    box-sizing: border-box;
    overflow: hidden;
    transition: max-height 0.5s;
    box-sizing: border-box;
}
#appViewDropMenu div{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    width: 50px;
    height: 50px;
    border: 1px solid var(--darkBlue);
    box-shadow: 1px 1px 3px black;
    width: 100%;
    padding: 10px;
    background-color: white;
}
#appViewDropMenu div.disable{
    opacity: 0.4;
}

#appViewDropMenu div img{
    max-height: 30px;
    max-width: 30px;
}
#appViewDropMenu div span{
    font-weight: bold;
    color: var(--logoGreen);
    text-shadow: 0.5px 0.5px 0.5px black;
}

.notiFi{
    background-color: var(--red);
    color: var(--cream);
}
.notiFi .imgLogo{
    display: none;
}
.notiFi .notifiBox{
    position: relative;
    color: var(--cream);
    padding-left: 10px;
    font-size: 80%;
    display: block;
}
.notifiBox a{
    text-decoration: underline;
    font-style: italic;
}

/*FORM CONTAINER*/
#frmCon{
    position: fixed;
    top: 65px;
    max-height: calc(100% - 115px);
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

    /*MAIN MENU*/
.mainMenu{
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 60px;
    background-color: var(--yellow);
    position: fixed;
    bottom: 0px;
    z-index: 1;
}
.mainMenu .gAsTable{
    max-width: 800px;
    margin: 0 auto;
}
.mainMenu .gAsCell{
    width: 20%;
    text-align: center;
    vertical-align: top;
}
.mainMenu .menuBtn{
    text-align: center;
    position: relative;
    vertical-align: top;
    font-size: 12px;
    font-family: sans-serif;
    cursor: pointer;
}
.mainMenu .menuBtn img{
    height: 35px;
    display: block;
    margin: 0 auto;
    margin-top: 5px;
}
.mainMenu .menuBtn .bigBtn{
  height: 60px;
  position: relative;

  top: -35px;
}
.mainMenu .addLbl{
    position: relative;
    top: -35px;
}

/*FORM LOGIN*/
#frmLogin{
    max-width: 400px;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
}
#frmLogin .lblCreate{
    color: var(--cream);
    font-size: 22px;
    display: block;
    margin-top: 15px;
}
#frmLogin .lblRemember{

}
#frmLogin .chkRemember{
    position: relative;
    height: 20px;
    width: 20px;
    margin-bottom: 20px;
    top: 4px;
}

/*FORM REGISTRATION*/
#frmRegistration{
    max-width: 400px;
}

    /*FORM FORGOT PASSWORD*/
#frmForgotPass{
    max-width: 400px;
}
#frmForgotPass .lblHeader{
    color: var(--cream);
    font-size: 22px;
    display: block;
    margin-top: 15px;
    margin-bottom: 15px;
}

    /*FORM RESET PASSWORD*/
#frmResetPass{
    max-width: 400px;
}
#frmResetPass .lblHeader{
    color: var(--cream);
    font-size: 22px;
    display: block;
    margin-top: 15px;
    margin-bottom: 15px;
}

    /*FORM REGSELECT
#frmRegSelect .ulContacts{
    list-style: none;
    margin: 0;
    border: 0;
    padding: 0;
    text-align: center;
    width: 100%;
}
#frmRegSelect .ulContacts li{
    margin: 0 auto;
    display: block;
    margin-top: 20px;
    background-color: var(--green);
    color: white;
    font-family: sans-serif;
    font-size: 24px;
    height: 70px;
    width: 80%;
    border-radius: 5px;
    line-height: 70px;
    font-weight: bolder;
    cursor: pointer;
}*/

/*FORM PROFILE VIEW*/
#frmProfileView{
    box-sizing: border-box;
    padding: 0 20px;
}
#frmProfileView .gFrmHeader{
    background: none;
}
#frmProfileView .imgEdit{
    height: 30px;
}
#frmProfileView .frmProViewLbl{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
    margin: 20px 0;
    border-radius: 7px;
    background-color: var(--green);
    color: var(--white);
    box-sizing: border-box;
    font-size: 22px;
}

#frmProfileView .header{
    font-size: 30px;
    text-align: left;
    margin-bottom: 10px;
}

#frmProfileView .infoBox{
    border-radius: 5px;
    background-color: var(--cream);
    color: var(--black);
    margin: 0 auto;
    margin-top: 10px;
    padding-bottom: 5px;
    width: 90%;
    min-height: 40px;
}
#frmProfileView .infoBox .twoColTbl{
    border: none;
    padding: 0;
    margin: 0 auto;
    margin-bottom: 10px;
}
#frmProfileView .infoBox .twoColTbl td:nth-child(1){
    border: none;
    padding-right: 5px;
    border-right: 3px solid var(--cream);
    text-align: right;
}
#frmProfileView .infoBox .twoColTbl td:nth-child(2){
    border: none;
    padding-left: 5px;
}
#frmProfileView .address{
    vertical-align: top;
}

#frmProfileView .infoBox .threeColTbl{
    border: none;
    padding: 0;
    margin: 0 auto;
    margin-bottom: 10px;
    width: 100%;
}
#frmProfileView .infoBox .threeColTbl td:nth-child(1){
    border: none;
    border-right: 3px solid var(--cream);
    text-align: center;
}
#frmProfileView .infoBox .threeColTbl td:nth-child(2){
    border: none;
    border-right: 3px solid var(--cream);
    text-align: center;
}
#frmProfileView .infoBox .threeColTbl td:nth-child(3){
    border: none;
    text-align: center;
}

#frmProfileView .logOut{
    border-radius: 5px;
    background-color: var(--green);
    color: var(--cream);
    margin: 0 auto;
    margin-top: 20px;
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}

/*FORM PROFILE*/
  
#frmProfile .photoFile{
    display: none;
}

#frmProfile .frmProfileImg{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    width: 100%;
}
#frmProfile .photoCon{
    position: relative;
    margin: 0 auto;    

}
#frmProfile .photoCon .photo{
    width: auto;
    max-width: 300px;
    max-height: 300px;
    user-select: none;
    user-drag: none;
    margin-bottom: 10px;
    user-select: none;
    -webkit-user-select: none;
}
#frmProfile .photoCon .cropBox{
    position: absolute;
    display: none;
    z-index: 2;
    background-color: transparent;
    border: 2px solid white;
    box-shadow: 2px 2px 5px black, -2px -2px 5px black;
    cursor: grab;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;

}
#frmProfile .cropBox .flexBox{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90%;
}
#frmProfile .photoCon .cropBox .cropMove{
    user-select: none;
    width: 50%;
    height: 50%;
    margin-top: 10%;
    background-color: rgba(255,255,255,0.3);
    position: relative;

}


/*FORM PAY FUNNEL*/
#frmPayFunnel{
    font-size: 14px;
    position: relative;
    padding-top: 20px;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    max-width: 500px;
    display: none;
    margin: 0 auto;
}
#frmPayFunnel .conPanel{
    padding: 10px;
    padding-bottom: 20px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 50px;
    background-color: var(--cream);
    border-radius: 15px;
    width: 90%;
    display: none;
}
#frmPayFunnel #frmPayFTrailCon{
    height: 500px;
}
#frmPayFunnel #frmPayFUpSaleCon{
    height: 300px;
    font-size: 18px;
}

#frmPayFunnel .redTxt{
    color: var(--red);
}
#frmPayFunnel .greenTxt{
    color: var(--green);
}
#frmPayFunnel .bold{
    font-family: sans-serif;
}
#frmPayFunnel .standOut{
    font-size: 1.1em;
}
#frmPayFunnel .bigText{
    font-size: 180%;
}
#frmPayFunnel .btnSave{
    width: 80%;
    background-color: var(--green);
    border-radius: 5px;
    color: var(--cream);
    text-align: center;
    cursor: pointer;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
}
#frmPayFunnel .btnSave label{
    display: block;
}
#frmPayFunnel .btnSave .secondLine{
    font-weight: none;
}
#frmPayFunnel .header{
    font-family: sans-serif;
    font-size: 1.3em;
}
#frmPayFunnel .packageCon{
    text-align: left;
    margin-left: 20px;
}
#frmPayFunnel .package{
    display: block;
    margin-bottom: 10px;
    font-size: 1.2em;
}
#frmPayFunnel .disabled{
    color: lightGray;
}
#frmPayFunnel .inputCon{
    text-align: left;
    margin-bottom: 20px;
}




/* FORM PEACH*/
#frmPeach{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#frmPeach .gFrmHeader{
    margin-bottom: 0px;
}
#frmPeach .frmCon{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    height: 85vh;
    padding: 10px;
    box-sizing: border-box;
}
#frmPeach .iFrameCon{
    position: relative;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
#frmPeach iframe{
    height: 100%;
    width: 100%;
    padding: 3px;
    overflow-y: auto;
}

/*FORM PROFILE*/

#frmProPassCon{
    overflow-y: hidden;
    margin-bottom: 60px;
}

/* FORM LICENSES */
#frmLicenses{}
#frmLicenses .photoSection{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
#frmLicenses .photoSection .photoCon{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
}

#frmLicenses .photoCon .delPhoto{
    position: absolute;
    top: -5px;
    right: -5px;
    height: 30px;
    width: 30px;
}
#frmLicenses .photoCon .licPhoto{
    max-height: 300px;
    max-width: 80%;
}

#frmLicenses .photoSection .js_btnPhoto{
    height: 50px;
    width: 50px;
}

/*FORM SETTINGS*/


/*FORM DASHBOARD*/
#frmDashboard .offBtnCon{
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  background-color: white;
  border: 2px solid var(--green);
  margin: 20px 20px 10px 20px;
  border-radius: 7px;
  padding: 15px 30px;
}
#frmDashboard .dashHeader{
    width: 100%;
    text-align: center;
    padding: 20px 20px 0 20px;
    font-size: 30px;
    font-weight: bold;
    box-sizing: border-box;
}
#frmDashboard .offConHead{
  text-align: center;
  font-size: 110%;
  font-weight: bold;
  margin-bottom: 12px;
}
#frmDashboard .offInfoCon{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 100%;
}
#frmDashboard .offInfoCon span{
  margin-bottom: 5px;
}
#frmDashboard .offBtn{
  margin-top: 10px;
  padding: 5px 10px;
  background-color: var(--green);
  color: white;
  border-radius: 7px;
}
#frmDashboard .frmCaption{
    font-size: 13px;
    margin: 10px;
    text-align: center;
    font-weight: bold;
    color: #666;
}

#frmDashboard .dashSetupCon{
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
}
#frmDashboard .dashStepCon{
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    background-color: var(--white);
    border-radius: 5px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin-bottom: 10px;
}
#frmDashboard .dashSetupHead{
    display: flex;
    flex-flow: column nowrap;
    font-size: 130%;
    font-weight: bold;
    align-items: center;
    width: 100%;
    margin: 20px 0;

}
#frmDashboard .dashSetupMessage{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}
#frmDashboard .dashStepHead{
    font-size: 110%;
    width: 100%;
    box-sizing: border-box;
    font-weight: bold;
    margin-bottom: 5px;
}
#frmDashboard .dashStepInfo{
    font-size: 90%;
    width: 100%;
    box-sizing: border-box;
}
#frmDashboard .dashStepBtn{
    font-size: 90%;
    padding: 5px 8px;
    color: var(--cream);
    border-radius: 5px;
    box-sizing: border-box;
    background-color: var(--yellow);
    margin-top: 20px;
}
#frmDashboard .dashStepDone{
    font-size: 110%;
    font-weight: bold;
    color: var(--green);
    box-sizing: border-box;
    margin-top: 20px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
#frmDashboard .dashStepDone img{
    margin-left: 10px;
    width: 30px;
}

#frmDashboard .dashNotisCon{
    display: flex;
    flex-flow: column nowrap;
}

#frmDashboard .dashNotiCon{
    margin: 20px 20px 0 20px;
    background-color: var(--lightRed);
    border: var(--red) solid 2px;
    border-radius: 7px;
    padding: 20px;
    display: flex;
    flex-flow: column nowrap;
    box-sizing: border-box;
}
#frmDashboard .dashNotiCon img{
    width: 30px;
    height: 30px;
    margin-right: 20px;
}
#frmDashboard .dashNotiHead{
    color: var(--cream);
    width: 100%;
    font-weight: bold;
    font-size: 110%;
    box-sizing: border-box;
    margin-bottom: 5px;
}
#frmDashboard .dashNotiMessage{
    color: var(--cream);
    width: 100%;
    box-sizing: border-box;
}
#frmDashboard .dashNotiBtnCon{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-around;
    margin-top: 20px;
}
#frmDashboard .dashNotiBtn{
    padding: 5px 8px;
    border-radius: 5px;
    color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cream);
    border: var(--red) 2px solid;
    margin-left: 8px;
    cursor: pointer;
}

#frmDashBChartsCon{
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
}
#frmDashBChartsCon .frmDashChart1{
    width: 100%;
    margin-top: 30px;
}
#frmDashBChartsCon .frmDashChart{
    width: 80%;
    padding: 20px;
    border-radius: 7px;
    background-color: var(--white);
    margin-top: 30px;

}

#frmDashboard .grpStatsCon{
  margin: 4vw 4vw;
  border-radius: 7px;
  background-color: white;
  padding: 4vw 4vw;
}
#frmDashboard .grpStatsCon h3{
  margin-bottom: 2vw;
  color: var(--darkBrown);
}
#frmDashboard .grpStatsCon h6{
  margin: 2px 0 2px 0;
}
#frmDashboard .progressBar{
  display: flex;
  align-items: center;
  border-radius: 5px;
  margin-bottom: 2vw;
  width: 100%;


}
#frmDashboard .progressBar span{
  background-color: green;
  color: white;
  padding: 5px 0 5px 2vw;
  position: relative;
  border-radius: 7px;
  transition: width 1s;
}

#frmDashLblHunted{
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    display: block;
    text-align: left;
    color: var(--green);
}
#frmDashLblGoal{
    font-size: 14px;
    color: var(--red);
    font-weight: bold;
    text-align: right;
    display: block;
    width: 100%;
}
#frmDashGoal{
    position: relative;
    height: 10px;
    background-color: var(--red);
    width: 100%;
    display: block;
}
#frmDashGoalDone{
    position: relative;
    height: 10px;
    background-color: var(--green);
}
#frmDashboard .chartCon{
    width: 80%;
    padding: 20px;
    border-radius: 7px;
    background-color: var(--white);
    margin-top: 30px;
}
#frmDashboard .perMonthCanvas{
}
#frmDashChartSpecies{
}

/*FORM DASH FEED*/
#frmDashFeedCon{
  display: flex;
  flex-flow: column nowrap;
  box-sizing: border-box;
  width: 100%;
}
#frmDashFeedCon .feedItemCon{
  background-color: var(--white);
  display: flex;
  flex-flow: column nowrap;
  box-sizing: border-box;
  width: 90%;
  margin: auto;
  border-radius: 7px;
  margin-top: 20px;
}
#frmDashFeedCon .postHead{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  height: 50px;
  margin: 10px 10px 5px 10px;
}
#frmDashFeedCon .postProfilePic{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
#frmDashFeedCon .postNamesCon{
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  padding: 0 5px;
  height: 100%;
}
#frmDashFeedCon .postPHName{
  color: var(--black);
  font-size: 16px;
  font-weight: bold;
}
#frmDashFeedCon .postHOName{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
}
#frmDashFeedCon .postHOName img{
  width: 14px;
  height: auto;
}
#frmDashFeedCon .postHOName span{
  font-size: 14px;
}
#frmDashFeedCon .postMedal{
  height: 30px;
}
#frmDashFeedCon .postPhoto{
  width: 100%;
}
#frmDashFeedCon .postInfo{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  margin: 10px 5px;
  width: 100%;
}
#frmDashFeedCon .postInfoSec{
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 20%;
}
#frmDashFeedCon .postSecTop{
  color: var(--black);
  font-size: 20px;
  font-weight: bold;
  height: 20px;
  display: flex;
  align-items: center;
}
#frmDashFeedCon .postInfoSec span{
  font-size: 14px;
}
#frmDashFeedCon .postInfoSec img{
  width: 20px;
}
#frmDashFeedCon .postActions{
  width: 100%;
  height: 40px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
}
#frmDashFeedCon .postActCon{
  width: 30%;
  height: 30px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
#frmDashFeedCon .postActImg{
  width: 20px;
}
#frmDashFeedCon .postActCon span{
  margin-left: 3px;
}

.showMore{
    width: 100%;
    text-align: center;
    margin: 20px 0 60px 0;
}
.showMore span{
    background-color: var(--black);
    color: var(--cream);
    border-radius: 7px;
    padding: 5px 8px;
}

/*FORM HO COMPANY DETAILS*/


/*FORM CONTACTS*/
#frmContacts .ulContacts{
    list-style: none;
    margin: 0;
    border: 0;
    padding: 0;
    text-align: center;
    width: 100%;
}
#frmContacts .ulContacts li{
    margin: 0 auto;
    display: block;
    margin-top: 20px;
    background-color: var(--green);
    color: white;
    font-family: sans-serif;
    font-size: 24px;
    height: 70px;
    width: 80%;
    border-radius: 5px;
    line-height: 70px;
    font-weight: bolder;
    cursor: pointer;
}

    /*FORM CREATE HUNT*/

/* FORM MESURE */
#frmMeasure .frmMeasureCon{
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: 100%;
}
#frmMeasure .gFrmHeader{
    margin: 0;
}
#frmMeasure .frmMeasureSec{
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: 80%;
}
#frmMeasure .frmMeasureSec img{
  margin: 10px 0;
}
#frmMeasure .frmMeasureSecItems{
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: 10px;
  margin: 5px 0;
  width: 100%;
  border-radius: 7px;
  border: 2px solid var(--black);
}

#frmMeasure .frmMeasureSecItems h2{
  margin:0 0 10px 0;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 100%;
  width: 100%;
  text-align: left;
}
#frmMeasure .frmMeasureSecItems .gFrmInput{
  margin: 0;
  width: 100px;
}
#frmMeasure .frmMeasureSecItems .gFrmLabel{
  margin: 0;
  font-size: 80%;
}
#frmMeasure .frmMeasureSecItem{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 100%;
}

/* FORM WEIGHT MESURE */
#frmMeasureWeight{
  width: 90%;
}
#frmMeasureWeight .frmMeasureSec{
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
#frmMeasureWeight .frmMeasureWeightCon{
  width: 100%;
  border-bottom: 1px solid var(--black);
  margin: 0 0 10px 0;
  padding: 0 0 10px 0;
}
#frmMeasureWeight .frmMeasureWeightCon h2{
  margin:20px 0 10px 0;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 110%;
  width: 100%;
  text-align: left;
}
#frmMeasureWeight .frmMeasureWeightCon .purchaser{
  margin: 0;
  width: 100%;
  font-size: 80%;
}
#frmMeasureWeight .frmMeasureWeightCon .weight{
  margin: 0;
  width: 45%;
  font-size: 80%;
}
#frmMeasureWeight .frmMeasureWeightCon .price{
  margin: 0;
  width: 35%;
  font-size: 80%;
}
#frmMeasureWeight .frmMeasureWeightCon .gFrmInput{
  margin: 0;
  width: 100%;
}
#frmMeasureWeight .frmMeasureWeightlogBtn{
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: var(--green);
  border-radius: 7px;
  padding: 10px 0;
  margin: 20px 0 10px 0;
  color: white;
}
#frmMeasureWeight .frmMeasureWeightInfo{
  display: flex;
  position: relative;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
}
#frmMeasureWeight .weightTbl{
    border: none;
    width: 100%;
}
#frmMeasureWeight .weightTbl tr{
    border: none;
    padding: 10px 0px 10px 0px;
    border-bottom: solid 8px var(--cream);
    border-radius: 7px;
    background-color: white;
}
#frmMeasureWeight .weightTbl td{
    border: none;

    font-size: 60%;
}
#frmMeasureWeight .weightTbl img{
    width: 30px;
    height: 30px;
}
#frmMeasureWeight .weightTbl td:nth-child(1){
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;

}

#frmMeasureWeight .weightTbl td:nth-child(4){
    width: 40px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    text-align: center;
}
#frmMeasureWeight .btnSave{
    margin-left: -110px;
}

#frmHunt .gTblSearch div{
    display: inline-block;
    position: relative;
    top: -2px;
    margin-right: 10px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--red);
    color: var(--cream);
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
    width: 30px;
    height: 30px;
}
#frmHunt .frmHuntInpLbl{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    margin-bottom: 20px;

}
#frmHunt .datesCon{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row nowrap;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 30px;
}
#frmHunt .dateCon{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    width: 48%;
    box-sizing: border-box;

}
#frmHunt .frmHuntInput{
    height: 40px;
    border-radius: 5px;
    width: 100%;
    font-size: 18px;
    border: none;
    background-color: white;
    box-sizing: border-box;
    margin-top: 5px;
    padding: 0 10px;
    font-family: sans-serif;
}
#frmHunt .addBtn{
    width: 30px;
    height: 30px;
}
#frmHunt .gTblSearch .icoCell{
    width: 45px;
    text-align: center;
}
#frmHunt .icoCell img{
    width: 30px;
    height: 30px;
}
#frmHunt .frmHuntLbl{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-flow: row nowrap;
    font-size: 20px;
    font-weight: bold;
}
#frmHunt .addClient{
    margin: 15px 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}
#frmHunt .addPH{
    margin: 15px 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/*FORM TROPHY WIZARD*/
#frmWizard{
    max-width: 500px;
    background-color: var(--cream);
    height: calc(100% - 60px);
    overflow-y: auto;
}

#frmWizard .frmWizHeader{
    width: 100%;
    text-align: left;
    color: var(--black);
    background-color: var(--cream);
    position: sticky;
    top: 0px;
    border-bottom: 1px solid var(--black);
    margin-bottom: 20px;
    padding-top: 20px;
}
#frmWizard .headImgCon{
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}
#frmWizard .headBackIcon{
    height: 30px;
}
#frmWizard .headCloseIcon{
    height: 30px;
}
#frmWizard .headDesc{
    font-family: sans-serif;
    font-weight: bold;
    margin-left: 10px;
    margin-bottom: 5px;
    font-size: 24px;
    width: 80%;
    display: inline-block;

}
#frmWizard .headQ{
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    font-family: sans-serif;
    font-size: 18px;
    width: 80%;
    display: inline-block;

}

#frmWizard .btnContinue{
    margin-top: 50px;
    display: inline-block;
    position: relative;
    width: 200px;
    height: 40px;
    text-align: center;
    background-color: var(--green);
    color: var(--cream);
    line-height: 2;
}

#frmWizSCon{
    position: relative;
    width: 100%;
    text-align: center;
}
#frmWizard .searchInput{
    border: solid 1px var(--yellow);
    border-radius: 7px;
    height: 50px;
    position: relative;
    font-size: 18px;
    background-color: white;
    width: calc(100% - 30px);
    display: inline-block;
    box-sizing: border-box;
    padding: 0 8px;
    margin-bottom: 20px;
}

#frmWizard .searchTable{
    background-color: var(--cream);
    width: calc(100% - 20px);
    margin-top: 10px;
    margin-left: 10px;
    border: none;
}
#frmWizard .searchTable td{
    height: 50px;
    padding: 15px;
    text-align: left;
    border: none;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: white;
    border-bottom: solid 8px var(--cream);
    font-family: sans-serif;
    font-weight: bold;
    box-sizing: border-box;
}
#frmWizard .searchTable td .multiLine{
    font-weight: normal;
    font-size: 70%;
    display: block;
}
#frmWizard .searchTable .rowSelected{
    background-color: var(--yellow);
    color: var(--cream);
}
#frmWizard .searchTable .wizSwitch{
    display: inline-block;
    border-radius: 20px;
    background-color: var(--black);
    position: relative;
    width: 50px;
    height: 25px;
    top:3px;
    float: right;
    margin-right: 10px;
}
#frmWizard .searchTable .wizSwitch div{
    background-color: var(--cream);
    border-radius: 50%;
    width: 25px;
    height: 25px;
    top: -3px;
    position: relative;
    -webkit-transition:left 0.5s;
    -moz-transition:left 0.5s;
    -o-transition:left 0.5s;
    transition:left 0.5s;
    border: solid 2px var(--black);
}
#frmWizard .searchTable .wizSwitch .rowSelected{
    background-color: pink;
}
#frmWizard .viewTbl td{
    height: 30px;
    border-bottom: none;
    vertical-align: top;
    background-color: var(--cream);
}
#frmWizard .viewTbl td:nth-child(1){
    display: flex;
    flex-flow: row;
    align-items: center;
    text-align: right;
    width: 80px;
    font-weight: normal;
    padding: 0;
    padding-right: 5px;
    box-sizing: border-box;
}
#frmWizard .viewTbl td:nth-child(2){
    border-bottom: none;
    font-weight: bold;
    padding-left: 5px;
    box-sizing: border-box;
    text-align: left;
}

#frmWizard .tblsCon{
    max-height: 100%;
}
#frmWizard #frmWizTbl2 td{
    border: none;
}
#frmWizard .viewTblQuote{
    display: none;
    background-color: var(--cream);
    width: calc(100% - 20px);
    margin-left: 10px;
    border: none;
    border-top: solid 3px var(--green);
    border-bottom: solid 3px var(--green);
}
#frmWizard .viewTblQuote td:nth-child(1){
    text-align: left;
    padding-bottom: 3px;
}
#frmWizard .viewTblQuote td:nth-child(2){
    width: 50px;
    text-align: center;
    padding-bottom: 3px;
}
#frmWizard .viewTblQuote td:nth-child(3){
    width: 80px;
    text-align: center;
    padding-bottom: 3px;
}
#frmWizard .viewTblQuote .colHeader{
    font-weight: bolder;
}
#frmWizard .viewTblQuote .itemHeader{
    height: 35px;
    font-style: italic;
    vertical-align: bottom;
}
#frmWizard .viewTblQuote .item{
    font-weight: bold;
}
#frmWizard #frmWizTbl2 .qty{
    width: 95%;
    text-align: center;
}
#frmWizard #frmWizTbl2 .price{
    width: 95%;
    text-align: right;
}
#frmWizard #frmWizTbl2 .totalRow{
    font-weight: bold;
}
#frmWizard #frmWizTbl2 .totalRow .lblTotal{
    float: left;
}
#frmWizard #frmWizTbl2 .totalRow .lblPrice{
    float: right;
}

#frmWizard .btnSave, #frmWizard .btnDelete{
    bottom: 30px;
}

#frmWizard .dateCon{
    text-align: center;
    margin-top: 10px;
}
#frmWizard .dateCon label{
    margin-top: 10px;
    display: block;
}
#frmWizard .dateCon input{
    width: 200px;
    margin: 0 auto;
    display: block;
    margin-top: 10px;
}
#frmWizard .btnNextCon{
    width: 100%;
    position: relative;
    height: 70px;
    text-align: right;
}
#frmWizard .nextBtn{
    height: 60px;
    background-color: var(--green);
    color: var(--cream);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    z-index: 2;
}

#frmWizPartsCon{
  width: 100%;
  flex-flow: column nowrap;
  align-items: center;
}
#frmWizPartsBtnCon{
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
    max-width: 310px;
}
#frmWizPartsBtnCon .partsBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    min-width: 90px;
    height: 40px;
    color: var(--black);
    border-radius: 5px;
}
#frmWizPartsCon .partSelected{
    background-color: var(--yellow);
    color: var(--cream);
}
#frmWizPartsCon .otherDesc{
    margin: 0 auto;
    width: 300px;
    margin-top: 20px;
    display: none;
    color: var(--black);
    font-size: 16px;
    font-family: sans-serif;
    padding: 10px;
}

#frmWizKill{
    display: none;
}
#frmWizKill div{
    margin: 0 auto;
    width: 150px;
    height: 40px;
    line-height: 35px;
    margin-top: 50px;
    color: var(--cream);
    text-align: center;
    border-radius: 5px;

}
#frmWizKill .dead{
    background-color: var(--green);
}
#frmWizKill .wounded{
    background-color: var(--red);
}

#frmWizCountCon{
    margin-top: 20px;
}
#frmWizCountCon img{
    height: 50px;
    width: 50px;
    vertical-align: center;
}
#frmWizCountCon .counterCell{
    font-size: 80px;
}

#frmWizNoPhotoCon{
    text-align: center;
    display: none;
}
#frmWizPhoto{
    margin: 0 auto;
    max-height: 355px;
    max-width: 355px;
    margin-bottom: 10px;
}
#frmWizNoPhotoCon p{
    font-weight: bold;
}
#frmWizNoPhotoCon .emptyIcon{
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
}

#frmWizBtnAddBPhoto{
    position: relative;
    height: 50px;
    width: 250px;
    border-radius: 5px;
    margin: 0 auto;
    background-color: var(--green);
    color: var(--cream);
    font-family: sans-serif;
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 15px;
}
#frmWizBtnAddBPhoto .addBtnIcon{
    height: 40px;
    position: relative;
    top: 5px;

}
#frmWizBtnAddBPhoto label{
    color: var(--cream);
    position: relative;
    top: -7px;
}

#frmWizAddDPhotoCon div{
    position: relative;
    line-height: 50px;
    height: 50px;
    width: 250px;
    border-radius: 5px;
    margin: 0 auto;
    background-color: var(--green);
    color: var(--cream);
    font-family: sans-serif;
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 15px;
}

#frmWizQExtras{
    margin-top: 10px;
    display: none;
    text-align: left;
}


    /*FORM VIEWS*/

#frmViews .viewDetails{
    background: var(--gradient);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    color: var(--black);
    font-family: sans-serif;
    font-size: 24px;
    padding: 20px 20px 0 20px;
    border-bottom: 0.5px solid var(--grey);
}
#frmViews .tabCon{
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-evenly;
    display: flex;
    flex-flow: row nowrap;
    margin-top: 20px;
}
#frmViews .tabCon span{
    color: var(--black);
    padding-bottom: 5px;
    font-size: 70%;
}
#frmViews .tabCon span:hover{
    border-bottom: var(--green) 4px solid;
}
#frmViews .tabCon span.selected{
    border-bottom: var(--green) 4px solid;
}

#frmViews .copyUpdateLinkCon{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
#frmViews .copyLink{
    padding: 5px 7px;
    background-color: var(--green);
    border-radius: 5px;
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
#frmViews .copyLink img{
    width: 15px;
    margin-right: 3px;
}


#frmViews .viewDetBtnCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
#frmViewsHeaderDesc{
    margin: 10px 0;
    font-weight: bold;
    font-size: 26px;
}
#frmViews .viewDetails .btnBack{
    height: 30px;
}
#frmViews .viewDetails .btnEdit{
    font-size: 18px;
    color: var(--yellow);
}

#frmViews .trophyHeader{
    background-color: var(--cream);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    font-size: 24px;
    padding: 20px 20px;
    box-sizing: border-box;
}
#frmViews .trophyHeader .actionBtnsCon img{
    height: 30px;
    width: 30px;
}

#frmViews .tHeaderLbl{
    font-weight: bold;
}
#frmViews .tHeaderBtn{
    height: 30px;
}
#frmViews .trophyHeader .chkDelInc{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    height: 20px;
    width: 20px;
}
#frmViews .trophyHeader .chkDelIncLbl{
    display: inline-block;
    font-family: sans-serif;
    font-size: 14px;
    position: relative;

    left: -5px;
}
#frmViews .killDotRed{
    position: relative;
    font-size: 28px;
    top: 3px;
    color: red;
}
#frmViews .killDotGreen{
    position: relative;
    top: 3px;
    font-size: 28px;
    color: green;
}

#frmViews .frmViewNoteCon{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    background-color: var(--white);
    border-radius: 5px;
    box-sizing: border-box;
}
#frmViews .frmViewNoteTitle{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
    white-space: pre;
    box-sizing: border-box;
}
#frmViews .frmViewNoteDisc{
    font-size: 14px;
    display: inline-block;
    max-width: 100%;
    word-wrap: break-word;
}

#frmViews .licenseItem{
    box-sizing: border-box;
}
#frmViews .licenseItem .header{
    font-weight: bold;
}
#frmViews .licenseItem .dateCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    margin-top: 8px;
}
#frmViews .licenseItem .icoArrow{
    height: 15px;
}
#frmViews .licenseItem .dates{
    font-size: 14px;
    color: var(--grey);
}



#frmViews .infoTbl{
    width: 100%;
    border: none;
}
#frmViews .infoTbl tr{

}
#frmViews .infoTbl  td{
    line-height: 1.5;
    font-size: 14px;
    font-family: sans-serif;
    border: none;

}
#frmViews .infoTbl tbody tr td:nth-child(1){
    text-align: left;
    padding-right: 5px;
    width: 40%;
    vertical-align: top;
}
#frmViews .infoTbl tbody tr td:nth-child(2){
    text-align: right;
    padding-left: 5px;
}

#frmViews .filterCon{
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 0px;
    height: 0px;
    overflow: hidden;
    transition: height 0.5s;
}
#frmViews .filterCon .gAsTable{
  width: calc(100% - 8px);
}
#frmViews .filterCon .gFrmLabel{
    margin: 0px;
}
#frmViews .filterCon .gFrmInput{
    width: 95%;
    display: block;
    margin-left: 0px;
}

#frmViews .gTblSearch label{
    display: block;
    font-size: 14px;
}
#frmViews .gTblSearch label span{
    font-weight: bold;
}

#frmViews .gTblSearch .tblCellHeader{
    font-size: 20px;
    font-family: sans-serif;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 5px;
}
#frmViews .gTblSearch .cellKill{
    position: relative;
    display: inline-block;
    height: 22px;
    width: 22px;
    margin-left: 5px;
    top: 3px;
    display: none;
}
#frmViews .gTblSearch .genderIcon{
    width: 14px;
    height: 14px;
    position: absolute;
    left: -20px;
    top: 2px;
}
#frmViews .gTblSearch .viewBtn{
    float: right;
    width: 60px;
    text-align: center;
    margin-right: 10px;
    background-color: var(--green);
    border-radius: 5px;
    height: 30px;
    line-height: 30px;
    color: white;
}
#frmViews .gTblSearch .imgBtn{
    width: 50px;
    height: 50px;
    margin-right: 5px;
}
.frmViewsTPhotoCon{
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px 50px 20px;
}
#frmViewsTPhoto{
    width: 100%;
}
#frmViews #frmViewsNoPhoto{
    text-align: center;
    display: none;
}

#frmViews #frmWizNoPhotoCon p{
    font-weight: bold;
}
#frmViews #frmWizNoPhotoCon .emptyIcon{
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
}
#frmViews #frmViewsBtnAddPhoto{
    position: relative;
    height: 50px;
    width: 250px;
    border-radius: 5px;
    margin: 0 auto;
    background-color: var(--green);
    color: var(--cream);
    font-family: sans-serif;
    font-weight: bold;
    font-size: 24px;
    margin-top: 15px;
}
#frmViews #frmViewsBtnAddPhoto .addBtnIcon{
    height: 40px;
    position: relative;
    top: 5px;
}
#frmViews #frmViewsBtnAddPhoto label{
    color: var(--cream);
    position: relative;
    top: -7px;
}

    /*FORM SEARCH*/

#frmViews .viewMeasureBtnCon{
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  padding-right: 15px;
  box-sizing: border-box;
}
#frmViews .viewMeasureBtnCon .viewMeasureBtnTop{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  background-color: var(--green);
  color: white;
  padding: 5px;
  margin: 5px 0 5px 0;
  border-radius: 7px;
}
#frmViews .viewMeasureBtnCon .viewMeasureBtnBot{
  display: flex;
  flex-flow: column nowrap;
  align-items: right;
  background-color: var(--green);
  color: white;
  padding: 5px;
  margin: 5px 0 5px 0;
  border-radius: 7px;

}
#frmViews .viewMeasureBtnCon .btnTop{
  width: 45%;
  display: flex;
  flex-flow: column nowrap;
  align-items: right;
}
#frmViews .viewMeasureBtnCon .measureHead{
  font-size: 7px;
}
#frmViews .viewMeasureBtnCon .measureDis{
  font-size: 12px;
  font-weight: bold;
}

#frmSearch{
  width: 100%;
  height: 100%;
}
#frmSearch .frmSrcHeader{
    width: 100%;
    position: sticky;
    top: 0px;
    z-index: 1;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: center;
    border-bottom: var(--black) solid 1px;
    padding: 20px;
    box-sizing: border-box;
    background: var(--gradient);
    box-shadow: 0 0 7px grey;
    margin-bottom: 20px;
}
#frmSearch .frmSrcHeader img{
    width: 30px;
}
#frmSearch .copyLink{
    padding: 5px 7px;
    background-color: var(--green);
    border-radius: 5px;
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
#frmSearch .copyLink img{
    width: 15px;
    margin-right: 3px;
}
#frmSearch .frmSrcTitleCon{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 10px 0;
}
#frmSearch .frmSrcTitle{
    color: var(--black);
    text-align: left;
    font-weight: bold;
    font-size: 24px;
}
#frmSearch .frmSrcCheckCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
}
#frmSearch .chkIncludeLbl{
    color: var(--black);
    font-size: 14px;
}
#frmSearch .gFrmHeader .chkInclude{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    height: 20px;
    width: 20px;
}
#frmSearch .gFrmHeader .chkIncludeLbl{
    display: inline-block;
    font-family: sans-serif;
    font-size: 14px;
    position: relative;
    left: -5px;
}

#frmSearch .gTblSearch .huntItem{
    box-sizing: border-box;
}
#frmSearch .gTblSearch .huntItem .huntHead{
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}
#frmSearch .huntItem .hoDetailsCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--grey);
}
#frmSearch .huntItem .logo{
    height: 40px;
    margin-right: 5px;
}
#frmSearch .huntItem .hoName{
    
}

#frmSearch .huntItem .huntName{
    font-weight: bold;
}
#frmSearch .huntItem .huntState{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
    font-size: 60%;
    padding: 4px 6px;
    background-color: var(--lightYellow);
    color: var(--white);
    border-radius: 3px;
    
}
#frmSearch .huntItem .huntDateCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    margin-top: 8px;
}
#frmSearch .huntItem .icoArrow{
    height: 15px;
}
#frmSearch .huntItem .dates{
    font-size: 14px;
    color: var(--grey);
}

#frmSearch .gTblSearch .icon{
    height: 30px;

}

#frmSearch .gTblSearch .licenseItem{
    box-sizing: border-box;
}
#frmSearch .gTblSearch .licenseItem .header{
    font-weight: bold;
}
#frmSearch .gTblSearch .licenseItem .dateCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    margin-top: 8px;
}
#frmSearch .gTblSearch .licenseItem .icoArrow{
    height: 15px;
}
#frmSearch .gTblSearch .licenseItem .dates{
    font-size: 14px;
    color: var(--grey);
}
#frmSearch .gTblSearch img{
    max-width: 30px;
    max-height: 30px;
}


#frmSearch .gTblSearch .doubleLine{
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
}
#frmSearch .gTblSearch .doubleLine span:nth-child(1){
    font-weight: bold;
}
#frmSearch .gTblSearch .doubleLine span:nth-child(2){
    font-size: 14px;
    margin-top: 3px;
    color: var(--grey);
}

#frmSearch .searchLbl{
    font-family: sans-serif;
    font-weight: bold;
    font-size: 18px;
}
#frmSearchSCon{
    width: 100%;
}
#frmSearchSCon .searchInput{
    height: 40px;
    border-radius: 5px;
    font-size: 18px;
    border: none;
    background-color: white;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
}



#frmSearchEmptyTbl{
    display: none;
    flex-flow: column nowrap;
    align-items: center;
    padding: 30px;
}
#frmSearchEmptyMsg{
    font-weight: bold;
    text-align: center;
}
#frmSearchEmptyTbl .emptyIcon{
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
}
#frmSearchBtnCreateNew{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: var(--green);
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    ;
    font-weight: bold;
}
#frmSearchBtnCreateNew .addBtnIcon{
    height: 30px;
    margin-right: 10px;
}
#frmSearchCreateNewLbl{
    color: var(--cream);
}