.web-title .web-brand{
  float: left;
  margin-right: 10px;
  padding: 10px 20px;
  height: 50px;
  width: 230px;
  font-weight: 100;
  font-size: 18px;
  line-height: 30px;
  text-decoration: none;
}
.web-brand{
  display: inline-block;
  padding-top: .3125rem;
  padding-bottom: .3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}


/* =================btn group condition button ni marco====================== */

.btn-group-vertical > button{
    margin-bottom:5px;
    height: auto;
    border-style: none;
    width: auto
  }


.or {
  position: relative;
  float: left;
  height: 2.57142em;
  z-index: 1;
  margin-top: 5px;
}

.or:before {
  
  position: absolute;
  text-align: center;
  border-radius: 500rem;
  content: 'or';
  top: 50%;
  left: 50%;
  background-color: #fff;
  text-shadow: none;
  margin-top: -.892855em;
  margin-left: -.892855em;
  width: 1.78571em;
  height: 1.78571em;
  line-height: 1.78571em;
  color: rgba(0,0,0,.4);
  font-style: normal;
  font-weight: 700;
  box-shadow: 0 0 0 1px transparent inset;
  z-index: 1;
}

/* ===================ADD button ni marco=========== */
.bttnADD {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnADD:hover{
   width: 70px;
}
.bttnADD span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnADD span:after {
  content: 'Add';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnADD:hover span {
  padding-right: 28px;
}

.bttnADD:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnADD:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}

/*======================Approver new employee buttons by marco======================= */

.bttnADDApprover {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnADDApprover:hover{
  width: 150px;
}
.bttnADDApprover span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnADDApprover span:after {
  content: 'Add Approver';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnADDApprover:hover span {
  padding-right: 100px;
}

.bttnADDApprover:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnADDApprover:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}

/* ===================new button ni marco=========== */
.bttnnew {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnnew:hover{
  width: 70px;
}
.bttnnew span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnnew span:after {
  content: 'New';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnnew:hover span {
  padding-right: 34px;
}

.bttnnew:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnnew:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ===================new button ni marco=========== */
.bttnOK {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnOK:hover{
  width: 75px;
}
.bttnOK span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnOK span:after {
  content: 'Submit';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnOK:hover span {
  padding-right: 45px;
}

.bttnOK:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnOK:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}


/* ===================review button ni marco=========== */
.bttnreview {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnreview:hover{
  width: 70px;
}
.bttnreview span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnreview span:after {
  content: 'Review';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnreview:hover span {
  padding-right: 45px;
}

.bttnreview:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnreview:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ===================Select button ni marco=========== */
.bttnSelect {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnSelect:hover{
  width: 70px;
}
.bttnSelect span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnSelect span:after {
  content: 'Select';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnSelect:hover span {
  padding-right: 45px;
}

.bttnSelect:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnSelect:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}


/* ===================review button ni marco=========== */
.bttnremove {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnremove:hover{
  width: 80px;
}
.bttnremove span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnremove span:after {
  content: 'Remove';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnremove:hover span {
  padding-right: 60px;
}

.bttnremove:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnremove:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ===================Denied button ni marco=========== */
.bttnrDenied {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnrDenied:hover{
  width: 80px;
}
.bttnrDenied span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnrDenied span:after {
  content: 'Denied';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnrDenied:hover span {
  padding-right: 60px;
}

.bttnrDenied:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnrDenied:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}

/* ===================Approve button ni marco=========== */
.bttnrApprove {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnrApprove:hover{
  width: 80px;
}
.bttnrApprove span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnrApprove span:after {
  content: 'Approve';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnrApprove:hover span {
  padding-right: 60px;
}

.bttnrApprove:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnrApprove:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/*======================add buttons by marco======================= */

.bttngenreport {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  padding: 7px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttngenreport:hover{
  width: 150px;
}
.bttngenreport span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  
}
.bttngenreport span:after {
  content: 'Generate Report';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.bttngenreport:hover span {
  padding-right: 100px;
}

.bttngenreport:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttngenreport:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
  
}


/*======================view buttons by marco======================*/

.bttnview {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnview:hover{
  width: 80px;
}
.bttnview span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnview span:after {
  content: 'View';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
  
}
.bttnview:hover span {
  padding-right: 30px;
}

.bttnview:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnview:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}

/* ==================back button ni marco=================== */
.bttnback {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnback:hover{
  width: 70px;
}
.bttnback span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnback span:after {
  content: 'Back';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
  
}
.bttnback:hover span {
  padding-right: 40px;
}

.bttnback:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnback:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ==================export button ni marco=================== */
.bttnexport {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnexport:hover{
  width: 100px;
}
.bttnexport span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  margin-top: 8px;

}
.bttnexport span:after {
  content: 'Export';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
}
.bttnexport:hover span {
  padding-right: 30px;
}

.bttnexport:hover span:after {
  opacity: 1;
  right: -10px; 
} */
.bttnexport:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ==================selectAll button ni marco=================== */
.bttnselectAll {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnselectAll:hover{
  width: 150px;
}
.bttnselectAll span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnselectAll span:after {
  content: 'Select All';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnselectAll:hover span {
  padding-right: 90px;
}

.bttnselectAll:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnselectAll:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}
/* ==================removeAll button ni marco=================== */
.bttnremoveAll {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnremoveAll:hover{
  width: 150px;
}
.bttnremoveAll span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnremoveAll span:after {
  content: 'Remove All';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnremoveAll:hover span {
  padding-right: 90px;
}

.bttnremoveAll:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnremoveAll:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}


/* =============== a buttons view ni marco======================*/

.bttna {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  padding: 10px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttna:hover{
  width: 80px;
}
.bttna span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttna span:after {
  content: 'View';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttna:hover span {
  padding-right: 35px;
}

.bttna:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttna:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ==================deduction button ni marco=================== */
.bttndeduc {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttndeduc:hover{
  width: 150px;
}
.bttndeduc span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttndeduc span:after {
  content: 'Add Deduction';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -200px;
  transition: 0.5s;
  
}
.bttndeduc:hover span {
  padding-right: 90px;
}

.bttndeduc:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttndeduc:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}

/* ===================retro button ni marco=========== */
.bttnretro {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnretro:hover{
  width: 160px;
}
.bttnretro span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnretro span:after {
  content: 'Add Retro | Earnings';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -150px;
  transition: 0.5s;
  
}
.bttnretro:hover span {
  padding-right: 125px;
}

.bttnretro:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnretro:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}
/* ===================generate payroll report button ni marco=========== */
.bttnpayroll {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnpayroll:hover{
  width: 90px;
}
.bttnpayroll span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnpayroll span:after {
  content: 'Generate';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnpayroll:hover span {
  padding-right: 60px;
}

.bttnpayroll:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnpayroll:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}
/* ===================generate payroll report button ni marco=========== */
.bttnclose {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnclose:hover{
  width: 70px;
}
.bttnclose span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnclose span:after {
  content: 'Close';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnclose:hover span {
  padding-right: 35px;
}

.bttnclose:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnclose:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}

/* ===================submit payroll profile button ni marco=========== */
.bttnsub {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnsub:hover{
  width: 80px;
}
.bttnsub span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnsub span:after {
  content: 'Submit';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnsub:hover span {
  padding-right: 50px;
}

.bttnsub:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnsub:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ===================cancel payrollprofile button ni marco=========== */
.bttncan {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttncan:hover{
  width: 90px;
}
.bttncan span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttncan span:after {
  content: 'Cancel';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttncan:hover span {
  padding-right: 45px;
}

.bttncan:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttncan:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ===================add retro deduction button ni marco=========== */
.bttnadd {
  border-radius: 4px;
  border-style: dashed;
  border-color: #6c757d;
  color: #6c757d;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnadd:hover{
  width: 90px;
}
.bttnadd span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnadd span:after {
  content: '\271A';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -1px;
  transition: 0.5s;
  
}
.bttnadd:hover span {
  padding-right: 25px;
}

.bttnadd:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnadd:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}

/* ===================add retro deduction button ni marco=========== */
.bttnadd {
  border-radius: 4px;
  border-style: dashed;
  border-color: #6c757d;
  color: #6c757d;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnadd:hover{
  width: 90px;
}
.bttnadd span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnadd span:after {
  content: 'Add';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -1px;
  transition: 0.5s;
  
}
.bttnadd:hover span {
  padding-right: 30px;
}

.bttnadd:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnadd:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ===================add retro deduction button ni marco=========== */
.bttngrp {
  border-radius: 4px;
  color: #fff;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttngrp:hover{
  width: 90px;
}
.bttngrp span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 90px;
}
.bttngrp span:after {
  content: 'Add';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -1px;
  transition: 0.5s;
  
}
  .bttngrp:hover span {
    padding-right: 25px;
  }

.bttngrp:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttngrp:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}

/* ===================add holiday button ni marco=========== */

.bttnhol {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnhol:hover{
  width: 150px;
}
.bttnhol span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnhol span:after {
  content: 'Add Holiday';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnhol:hover span {
  padding-right: 80px;
}

.bttnhol:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnhol:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}

/*======================add new employee buttons by marco======================= */

.bttnemp {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
.bttnemp:hover{
  width: 100px;
}
.bttnemp span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.99s;
}
.bttnemp span:after {
  content: 'Employee';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnemp:hover span {
  padding-right: 60px;
}

.bttnemp:hover span:after {
  opacity: 1;
  right: 0; 
}
.bttnemp:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}

/*======================details buttons by marco======================= */

.bttndetails {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttndetails:hover{
  width: 70px;
}
.bttndetails span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttndetails span:after {
  content: 'Details';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -30px;
  transition: 0.5s;
  
}
.bttndetails:hover span {
  padding-right: 43px;
}

.bttndetails:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttndetails:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}

/*======================Delete employee buttons by marco======================= */

.bttndelete {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 13px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttndelete:hover{
  width: 80px;
}
.bttndelete span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttndelete span:after {
  content: 'Delete';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -30px;
  transition: 0.5s;
  
}
.bttndelete:hover span {
  padding-right: 45px;
}

.bttndelete:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttndelete:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}

/*======================create buttons by marco======================= */

.bttncreate {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 13px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
.bttncreate:hover{
  width: 80px;
}
.bttncreate span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttncreate span:after {
  content: 'Create';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -30px;
  transition: 0.5s;
  
}
.bttncreate:hover span {
  padding-right: 45px;
}

.bttncreate:hover span:after {
  opacity: 1;
  right: 0; 
}
.bttncreate:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}
/* ===================edit button ni marco=========== */
.bttnedit {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnedit:hover{
  width: 70px;
}
.bttnedit span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnedit span:after {
  content: 'Edit';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnedit:hover span {
  padding-right: 30px;
}

.bttnedit:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnedit:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}

/* ===================back red button ni marco=========== */
.bttnbred {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnbred:hover{
  width: 70px;
}
.bttnbred span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnbred span:after {
  content: 'Cancel';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnbred:hover span {
  padding-right: 40px;
}

.bttnbred:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnbred:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}

/* ===================update button ni marco=========== */
.bttnupdate {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnupdate:hover{
  width: 70px;
}
.bttnupdate span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnupdate span:after {
  content: 'Save';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnupdate:hover span {
  padding-right: 35px;
}

.bttnupdate:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnupdate:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}

/* ===================Schedule buttons ni marco=========== */
.bttnsched {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnsched:hover{
  width: 70px;
} */
/* .bttnsched span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  padding: 10px;
  /* transition: 0.5s; */
/* }
.bttnsched span:after {
  content: 'Save';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
} */ */
/* .bttnsched:hover span {
  padding-right: 30px;
}

.bttnsched:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnsched:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}

/* ===================edit button ni marco=========== */
.bttnschededit {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnschededit:hover{
  width: 70px;
}
.bttnschededit span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnschededit span:after {
  content: 'Edit';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnschededit:hover span {
  padding-right: 30px;
}

.bttnschededit:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnschededit:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ===================delete employee button ni marco=========== */
.bttndelemp {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
.bttndelemp:hover{
  width: 70px;
}
.bttndelemp span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttndelemp span:after {
  content: 'Delete';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttndelemp:hover span {
  padding-right: 40px;
}

.bttndelemp:hover span:after {
  opacity: 1;
  right: 0; 
}
.bttndelemp:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ===================CANCEL DELETE EMPLOYEE button ni marco=========== */
.bttncande {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
.bttncande:hover{
  width: 75px;
}
.bttncande span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttncande span:after {
  content: 'Cancel';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -30px;
  transition: 0.5s;
  
}
.bttncande:hover span {
  padding-right: 45px;
}

.bttncande:hover span:after {
  opacity: 1;
  right: 0; 
}
.bttncande:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ===================bttnbttn button ni marco=========== */
.bttnbutton {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnbutton:hover{
  width: 70px;
}
.bttnbutton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnbutton span:after {
  content: 'Save';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnbutton:hover span {
  padding-right: 30px;
}

.bttnbutton:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnbutton:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}

/* ===================bttncalendar button ni marco=========== */
.bttncalendar {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttncalendar:hover{
  width: 130px;
}
.bttncalendar span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttncalendar span:after {
  content: 'Date Range';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
}
.bttncalendar:hover span {
  padding-right: 80px;
}

.bttncalendar:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttncalendar:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ===================depedents button ni marco=========== */
.bttndependent {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttndependent:hover{
  width: 150px;
}
.bttndependent span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttndependent span:after {
  content: 'Add Dependents';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
  
}
.bttndependent:hover span {
  padding-right: 100px;
}

.bttndependent:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttndependent:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ===================siblings button ni marco=========== */
.bttnsiblings {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnsiblings:hover{
  width: 150px;
}
.bttnsiblings span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnsiblings span:after {
  content: 'Add Row';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
  
}
.bttnsiblings:hover span {
  padding-right: 100px;
}

.bttnsiblings:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnsiblings:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ===================export button ni marco=========== */
.bttnexpo {
  border-radius: 4px;
  border: none;
  /* color: #FFFFFF; */
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  padding: 5px;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnexpo:hover{
  width: 75px;
}
.bttnexpo span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnexpo span:after {
  content: 'Export';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnexpo:hover span {
  padding-right: 40px;
}

.bttnexpo:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnexpo:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}

/* ===================export OB button =========== */
.bttnexpoOB {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  padding: 5px;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnexpoOB:hover{
  width: 75px;
}
.bttnexpoOB span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnexpoOB span:after {
  content: 'Export OB';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnexpoOB:hover span {
  padding-right: 40px;
}

.bttnexpoOB:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnexpoOB:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}


/* ==================prev button ni marco=================== */
.bttnprev {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnprev:hover{
  width: 100px;
}
.bttnprev span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnprev span:after {
  content: 'Previous';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
  
}
.bttnprev:hover span {
  padding-right: 60px;
}

.bttnprev:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnprev:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ==================next1 button ni marco=================== */
.bttnnxt {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  border-radius: 10%;
  transition: all 0.5s;
  cursor: pointer;
  padding: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnnxt:hover{
  width: 70px;
}

.bttnnxt a span{
  color: white!important;
  text-decoration: none!important;
}
.bttnnxt span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;

}
.bttnnxt span:after {
  content: 'Next';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
  
}
.bttnnxt:hover span {
  padding-right: 35px;
}

.bttnnxt:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnnxt:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}


/*====================== submit in dashboard by marco======================= */

.bttnsubdash {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnsubdash:hover{
  width: 120px;
}
.bttnsubdash span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnsubdash span:after {
  content: 'Generate';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
}
.bttnsubdash:hover span {
  padding-right: 70px;
}

.bttnsubdash:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnsubdash:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
  
}

/*======================field audit button in dashboard by marco======================= */

.bttnfoa {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnfoa:hover{
  width: 120px;
}
.bttnfoa span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnfoa span:after {
  content: 'Field Audit';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.bttnfoa:hover span {
  padding-right: 80px;
}

.bttnfoa:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnfoa:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}

/*======================dashboard details button in dashboard by marco======================= */

.bttndet {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttndet:hover{
  width: 90px;
}
.bttndet span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttndet span:after {
  content: 'Details';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.bttndet:hover span {
  padding-right: 45px;
}

.bttndet:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttndet:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}
/*======================meter submit by marco======================= */

.bttnmsub {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnmsub:hover{
  width: 90px;
}
.bttnmsub span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnmsub span:after {
  content: 'Submit';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.bttnmsub:hover span {
  padding-right: 55px;
}

.bttnmsub:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnmsub:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}
/*======================meter DL accomplishment by marco======================= */

.bttndlacom {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttndlacom:hover{
  width: 150px;
}
.bttndlacom span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttndlacom span:after {
  content: 'Accomplishment';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.bttndlacom:hover span {
  padding-right: 120px;
}

.bttndlacom:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttndlacom:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}

/*======================open apps by marco======================= */

.bttnopen {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnopen:hover{
  width: 90px;
}
.bttnopen span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnopen span:after {
  content: 'Open';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.bttnopen:hover span {
  padding-right: 55px;
}

.bttnopen:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnopen:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}
/*======================list of navigation button by marco======================= */

.bttnlnav {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnlnav:hover{
  width: 120px;
}
.bttnlnav span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnlnav span:after {
  content: 'Navigations';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -40px;
  transition: 0.5s;
}
.bttnlnav:hover span {
  padding-right: 85px;
}

.bttnlnav:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnlnav:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}
/*======================list of application button by marco======================= */

.bttnlapp {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnlapp:hover{
  width: 120px;
} */
/* .bttnlapp span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnlapp span:after {
  content: 'Applications';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -25px;
  transition: 0.5s;
}
.bttnlapp:hover span {
  padding-right: 85px;
}

.bttnlapp:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnlapp:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}
/*======================add form button by marco======================= */

.bttnaform {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnaform:hover{
  width: 120px;
}
.bttnaform span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnaform span:after {
  content: 'New Form';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -25px;
  transition: 0.5s;
}
.bttnaform:hover span {
  padding-right: 75px;
}

.bttnaform:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnaform:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}
/*======================branch button by marco======================= */

.bttnbranch {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnbranch:hover{
  width: 80px;
}
.bttnbranch span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnbranch span:after {
  content: 'Branch';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -25px;
  transition: 0.5s;
}
.bttnbranch:hover span {
  padding-right: 50px;
}

.bttnbranch:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnbranch:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}
/*======================view privilege button by marco======================= */

.bttnview2 {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnview2:hover{
  width: 90px;
}
.bttnview2 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnview2 span:after {
  content: 'Privilege';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -25px;
  transition: 0.5s;
}
.bttnview2:hover span {
  padding-right: 60px;
}

.bttnview2:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnview2:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}
/*======================list of employee button by marco======================= */

.bttnlemp {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnlemp:hover{
  width: 120px;
}
.bttnlemp span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnlemp span:after {
  content: 'Employee';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -25px;
  transition: 0.5s;
}
.bttnlemp:hover span {
  padding-right: 70px;
}

.bttnlemp:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnlemp:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}
/*======================import button by marco======================= */

.bttnimport {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnimport:hover{
  width: 90px;
}
.bttnimport span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnimport span:after {
  content: 'Import';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -25px;
  transition: 0.5s;
}
.bttnimport:hover span {
  padding-right: 50px;
}

.bttnimport:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnimport:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}
/* ===================remove import button ni marco=========== */
.bttnundo {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnundo:hover{
  width: 70px;
}
.bttnundo span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnundo span:after {
  content: 'Undo';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnundo:hover span {
  padding-right: 40px;
}

.bttnundo:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnundo:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ===================recover button ni marco=========== */
.bttnrecover {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnrecover:hover{
  width: 90px;
}
.bttnrecover span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnrecover span:after {
  content: 'Recover';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnrecover:hover span {
  padding-right: 55px;
}

.bttnrecover:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnrecover:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ===================comment disable button ni marco=========== */

.bttncommentdis {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttncommentdis:hover{
  width: 90px;
}
.bttncommentdis span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttncommentdis span:after {
  content: 'Disable';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttncommentdis:hover span {
  padding-right: 50px;
}

.bttncommentdis:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttncommentdis:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}
/* ===================comment disable button ni marco=========== */

.bttncommentena {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttncommentena:hover{
  width: 90px;
}
.bttncommentena span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttncommentena span:after {
  content: 'Enable';
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttncommentena:hover span {
  padding-right: 50px;
}

.bttncommentena:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttncommentena:active {
  box-shadow: 0 0px #c7c3c7;
  transform: translateY(4px);
}
/* ===================post post button ni marco=========== */
.bttnpost {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
/* .bttnpost:hover{
  width: 75px;
}
.bttnpost span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.bttnpost span:after {
  content: 'POST';	
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
  
}
.bttnpost:hover span {
  padding-right: 45px;
}

.bttnpost:hover span:after {
  opacity: 1;
  right: 0; 
} */
.bttnpost:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}
/* ===================select audience ni marco=========== */
.audience {
  border-radius: 4px;
  border: none;
  color: #67abe9;
  text-align: center;
  font-size: 12px;
  padding: 7px;
  width: 140px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;

}
/* .audience:hover{
  width: 140px;
}
.audience span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;}

}
.audience:hover span {
  padding-right: 100px;
}

.audience:hover span:after {
  opacity: 1;
  right: 0; 
}

.audience:active span{
  color: white;

} */
.audience:active {
  box-shadow: 0 2px #c7c3c7;
  transform: translateY(4px);
}


/* ==================cards ni marco================= */
.acards{
  text-decoration: none !important;
  cursor: default;
  color: white;
}

/* ===========flex ni marco==================== */
.flex-container {
  display: flex;
  margin-top: -30px;
  flex-direction: row;
  align-content: flex-start;
  flex-wrap: nowrap;
  border-style: none;
  /* background-color: DodgerBlue; */
  
}

.flex-container > a {
  background-color: #f1f1f1;
  text-align: center;
  margin-left: 40px;
  font-size: 15px;
  color: black;
  border-style: none;
  padding: 10px;
  text-decoration: none;
  background-color: #ffffff;
}
/* 
.flex-container a:hover{
  border-bottom: 1px solid green;
} */
/* 

.flex-container a:active{
  border-bottom: 1px solid green;
} */


.flex-container label{
  font-weight: 600;
}

.finput{
  border: 1px solid #67abe9; 
    padding: 15px;
    background: rgba(255,255,255,0.5);
  margin-left: 5px;
    }

.row.no-pad {
  margin-right:0;
  margin-left:0;
}
.row.no-pad > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

ul.tagit {
  padding: 1px 5px;
  overflow: auto;
  margin-left: inherit;
  margin-right: inherit;
}
ul.tagit li {
  display: block;
  float: left;
  margin: 2px 5px 2px 0;
}
ul.tagit li.tagit-choice {    
  position: relative;
  line-height: inherit;
}
input.tagit-hidden-field {
  display: none;
}
ul.tagit li.tagit-choice-read-only { 
  padding: .2em .5em .2em .5em; 
} 

ul.tagit li.tagit-choice-editable { 
  padding: .2em 18px .2em .5em; 
} 

ul.tagit li.tagit-new {
  padding: .25em 4px .25em 0;
}

ul.tagit li.tagit-choice a.tagit-label {
  cursor: pointer;
  text-decoration: none;
}
ul.tagit li.tagit-choice .tagit-close {
  cursor: pointer;
  position: absolute;
  right: .1em;
  top: 50%;
  margin-top: -8px;
  line-height: 17px;
}

ul.tagit li.tagit-choice .tagit-close .text-icon {
  display: none;
}

ul.tagit li.tagit-choice input {
  display: block;
  float: left;
  margin: 2px 5px 2px 0;
}
ul.tagit input[type="text"] {
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;

  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;

  border: none;
  margin: 0;
  padding: 0;
  width: inherit;
  background-color: inherit;
  outline: none;
}


.btnmis {
  border-radius: 4px;
  background-color: #0f9e3e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  width: 90px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  box-shadow: 0 4px #c7c3c7;
}
section{
  background: none!important;
  border: none!important;
  padding-top: 0!important;
}


.hrs{
  border: 0!important;
  height: 1px!important;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0))!important;
}


.category{
  text-decoration: none;
  text-decoration-line: none;

}

.shadow{
  box-shadow: 0 8px 6px -6px black;
}

/* =================================flex atbp in the home 2============================ */
.sideicon{
  display: flex;
  flex-direction: row;
}


.bottomicon{
  display: flex;
  flex-direction: row
}

.socialinput{
  width: 60%;
      height: 30px;
      margin: auto;
      border: auto;
      border-radius: 10px;
      border-style: none;
}

.limiter{
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
}

.introjs-fixParent, #modal--composer.introjs-fixParent {
  position: absolute!important;
}



/* ======================================== li interaction ================================== */


.iliot{
  transition: 0.99s;
}

.iliot:hover{
  color: white;
   color:#77c8e0;
}


.ulliot:hover{
  background-color: #77c8e0;
  color: white;
}






.ulliut:hover{
  background-color: #f8b553;
  color: white;
}

.ulliob:hover{
  background-color: #67abe9;
  color: white;
}

.ullilv:hover{
 background-color:  #ff8481;
 color: white;
}

.flexing{
  display: flex;
  flex-direction: row;
}

.flexing2{
  display: flex;
  flex-wrap: nowrap;
}
  .flexing div:nth-of-type(1) {flex-grow: 5;flex-basis: 100px;}
  .flexing div:nth-of-type(2) {flex-grow: 5;flex-basis: 100px;}
  .flexing div:nth-of-type(3) {flex-grow: 5;flex-basis: 100px;}
  .flexing div:nth-of-type(4) {flex-grow: 5;flex-basis: 100px;}
  .flexing div:nth-of-type(5) {flex-grow: 5;flex-basis: 100px;}

/* ============================card attendance list ni marco ============================== */

.pluses {
  padding: 30px;
  width: 250px;
  float: left;
  border: 1.5px solid;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(226, 226, 226, 1) 48%, rgba(255, 255, 255, 0) 100%);
  border-image-slice: 1;
}

.pluses1 {
  padding: 30px;
  width: 130px;
  float: left;
  border: 1.5px solid;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(226, 226, 226, 1) 48%, rgba(255, 255, 255, 0) 100%);
  border-image-slice: 1;
  font-size: 40px;
  color: white;
}
.pluses2 {
  padding: 30px;
  width: 130px;
  float: left;
  border: 1.5px solid;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(226, 226, 226, 1) 48%, rgba(255, 255, 255, 0) 100%);
  border-image-slice: 1;
  font-size: 40px;
  color: white;
}
.notifflow{
  height: 10px;
  overflow: visible;
}


.cards:hover{
  background-color: white!important;
  opacity: 1;
  color: #267f26;
}

.cards{
  transition: 0.5s;
  background-color: #ffffff4d!important;
}


.attendancecard{
  transition: 0.9s;
  background-color: #ffffff4d!important;
}

.attendancecard:hover{
  background-color: white!important;
  color: white!important;
}


.updatecard {
  border-radius: 5px 60px 5px;
  background-color: #67abe9;
  color: white!important;
}


.textwhite{
  color: white!important;
}


.clickme{
  border-style:  solid ;
  background-color: white;
  color:  #67abe9;
  padding: 10px;
  cursor: pointer;
  margin-top: -15px;
  transition: 0.99s;
}

.clickme:hover{
  background-color: #67abe9;
  color:  white;
  border-color: white;
}

.circle{
border-top-left-radius: 100px;

}

.selectcompany{
  padding-right: 30%;
  padding-left: 30%;
  padding-top: 3%;
  padding-bottom: 3%;
  border-radius: 12px;
  transition: 0.99s;
  margin-bottom: 2%;
  color: black;
}

.selectcompany:hover{
  background-color: #77c8e0;
  /* background-color: #67abe9; */
  border: none;
  color: white;
}

.selectbranch{
  padding-right: 30%;
  padding-left: 30%;
  padding-top: 3%;
  padding-bottom: 3%;
  border-radius: 12px;
  transition: 0.99s;
  margin-bottom: 2%;
  color: black;
}

.selectbranch:hover{
  background-color: #ff8481;
  /* background-color: #67abe9; */
  border: none;
  color: white;
}

.selectemployee{
  padding-right: 30%;
  padding-left: 30%;
  padding-top: 3%;
  padding-bottom: 3%;
  border-radius: 12px;
  transition: 0.99s;
  margin-bottom: 2%;
  color: black;
}

.selectemployee:hover{
  background-color: #67abe9;
  border: none;
  color: white;
}


.predetails{
  border-radius: 50%; 
  width: 100px;
  position: absolute;
  border-style: solid;
  border-width: 5px;
  border-color: white;
  top: 18%;
}



.predetailsbot{
  border-top-style: none;
  border-left-style: solid;
  border-bottom-style: solid;
  border-right-style: solid;
  border-color: rgba(182,194,201,.5);
  border-width: 1px;
}


.registerbox{
  border-top-style: none;
  border-left-style: none;
  border-right-style: none;
  border-radius: 0%!important;
  background-color: transparent!important;
  border-color: #00000033;
}
.form-control:focus {
  border-color: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none!important; 
  margin: 0; 
}




.navbar{
  /* border-color: #32a932e6; */
  /* border-style: solid; */
  /* color:#32a932e6; */
  /* border-left: none; */
  /* padding: 15px; */
  /* color: black; */
  border-width: 1px;
}

/* .navbar:hover{
  background-color: rgba(50,169,50,.9);
  color: white;
  border-style: solid;
  border-color: white;
  transition: 0.99s;
} */

.map-container-3{
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
  margin-left: 2%;
  }
  .map-container-3 iframe{
  height:92%;
  width:98%;
  position:absolute;
  margin-top: 2%;

  }


  .navhover{
    padding: 5px!important; 
    border-radius: 12px!important;
    border: none!important;
    transition: 0.99s!important;
    font-size: 14px!important;
    text-decoration: none!important;
    cursor: pointer;
    margin-left: 1%;
    background-color: #ededed;
  }

  .navhover a{
    text-decoration: none!important;
    color: black;
    padding: 10px!important;
    border-radius: 12px;

  }
  .navhover a:hover{
    text-decoration: none!important;
    color: white;
    background-color: #404040;
    transition: 0.99s;
  }

  .mapnav{
    padding: 5px!important;
    border-radius: 12px!important;
    border: none!important;
    transition: 0.99s!important;
    font-size: 14px!important;
    text-decoration: none!important;
    cursor: pointer;
    margin-left: 1%;
    background-color: white;
    width: 20%;
  }

  .mapnav a{
    text-decoration: none!important;
    /* color: black; */
    padding-top: 6px!important;
    padding-bottom: 6px!important;
    padding-left: 20px!important;
    padding-right: 20px!important;
    border-radius: 12px;
  }
  .mapnav a:hover{
    text-decoration: none!important;
    color: white!important;
    background-color: #404040;
    transition: 0.99s;
    padding-left: 20px!important;
    padding-right: 20px!important;
  }
  /* .mapnav a:focus{
    color: white;
    background-color: #404040;
  }
  .mapnav:active{
    color: white;
    background-color: #404040;
    outline: none;
  } */


  .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  .sidenav a:hover {
    color: #f1f1f1;
  }
  
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }


  .tablehover{
    background-color: white;
  }
  .tablehover:hover{
    background-color: #eee;
  }

  .modal-backdrop{
    z-index: 800;
  }



  .attendnav{
    /* padding: 5px!important; */
    /* border-radius: 12px!important; */
    transition: 0.99s!important;
    font-size: 14px!important;
    text-decoration: none!important;
    cursor: pointer;
    margin-left: 1%;
    margin-top: 3%;
    background-color: transparent;
  }
  .attendnav a{
    text-decoration: none!important;
    padding-top: 6px!important;
    padding-bottom: 6px!important;
    padding-left: 20px!important;
    padding-right: 20px!important;
    border-radius: 12px;
    color: black;
    border: solid!important;
    border-color: #404040!important;
  }

  .attendnav a:hover{
    text-decoration: none!important;
    color: white!important;
    background-color: #404040!important;
    transition: 0.99s!important;
    padding-left: 20px!important;
    padding-right: 20px!important;
  }


  @media screen and (min-device-width: 800px) and (max-device-width: 1920px) {
    .navmedia{
      display: flex;
      justify-content: space-between;
    }

    .navmedia .navtitle{
      display: flex;
      justify-content: space-between;
      flex-direction: column;
    }

    .navmedia .navnav{
      display: flex;
      justify-content: space-around;
      flex-direction: row;
      /* width: 43%; */
    }
    .navmedia .navnav .div{
      /* width: 100%; */
    }
  }


  @media screen and (min-device-width: 400px) and (max-device-width: 400px) {
    .navmedia{
      display: flex;
      justify-content: space-between;
    }

    .navmedia .navtitle{
      display: flex;
      justify-content: space-between;
      flex-direction: column;
    }

    .navmedia .navnav{
      display: flex;
      justify-content: center;
      flex-direction: column;
    } 

  }

  @media screen and (min-device-width: 800px) and (max-device-width: 1920px) {
    .position-user-image{
      position: absolute;
      top: -20px;
      width: 50px;
      height: 50px;
      left: 0;
      border-radius: 50%;
    }
    .position-user-dets{
      margin-top: 5%;
      margin-left: 5%;
    }
    .homepost{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    .homepost .home-name-company{
      display: flex;
      justify-content: space-between;
      flex-direction: column;
    }

    .homepost .home-tag-time{
      display: flex;
      justify-content: space-around;
      flex-direction:  column;
      align-items: flex-end
      ;
    }
  }

  @media only screen and (max-width: 800px) {
    .position-user-image{
      position: absolute;
      /* margin: auto; */
      width: 80px;
      height: 80px;
      left: 38%!important;
      top: -10%!important;
      border-radius: 50%;
    }
    .position-user-dets{
      margin-top: 40px;
      margin-left: 0;
    }
    .homepost{
      margin-top: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction:  column;
    }

    .homepost .home-name-company{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .homepost .home-tag-time{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    } 

  }

.comment-main{
  display: flex;
  flex-direction: row;
  /* margin: 5%; */
  background-color: white;
  margin: 7px;
}

 .comment-pic{
  display: flex;
  justify-content: flex-start;
  width: 50px;
  height: 50%;
  border-radius: 50%;
}

.comment-comment{
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
}