/*------------------- developed by JJD front-end developer ------------------*/
/*-------------------------------Apr 2022--------------------------------*/
/*------------------- developed by JJD front-end developer ------------------*/
/*-------------------------------Dec 2020--------------------------------*/
.beforeHover {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 0.3s;
}
.afterHover {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.transition {
  transition: all 0.3s;
}
.myacWrap {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.myacL {
  width: 25%;
  border: 1px solid #E2EFE4;
  border-radius: 15px;
  background-color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 105px;
}
.myacR {
  width: calc( 75% - 25px);
  border: 1px solid #E2EFE4;
  border-radius: 15px;
  background-color: #fff;
}
.myacUsrHead {
  width: 100%;
  padding: 20px;
  border-bottom: 1px solid #F2F5F3;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #1C311E;
  gap: 15px;
}
.myacUsrHead .proIcon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border: 1px solid #0E8E39;
  display: flex;
  color: #0E8E39;
}
.myacUsrHead .proIcon [class^="tl_"] {
  font-size: 26px;
  padding: 5px;
}
.myacUsrHead .proIcon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.myacUsrIn {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 14px;
  color: #1C311E;
  font-weight: 500;
}
.myacUsrIn li {
  width: 100%;
  display: flex;
}
.myacUsrIn li.isActive a,
.myacUsrIn li:hover a,
.myacUsrIn li:focus a {
  background-color: #ECFAF0;
  color: #0E8E39;
}
.myacUsrIn a {
  width: 100%;
  display: flex;
  padding: 15px;
  border-radius: 10px;
  transition: all 0.3s;
}
.myacDtHead {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 30px;
  min-height: 55px;
  border-bottom: 1px solid #F2F5F3;
  font-size: 16px;
  font-weight: 600;
  color: #1C311E;
}
.myacDtSubH {
  width: 100%;
  padding: 15px 0;
  border-bottom: 1px solid #F2F5F3;
  font-size: 16px;
  font-weight: 600;
  color: #1C311E;
}
.myacDtBody {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 30px;
}
.myacDtForm {
  width: 100%;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.myacDtFormG {
  width: calc( (100% - 20px) / 2);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  color: #425147;
  gap: 10px;
  font-weight: 500;
}
.myacDtFoot {
  width: 100%;
  display: flex;
  padding: 20px 30px;
  gap: 15px;
  border-top: 1px solid #F2F5F3;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #0E8E39;
  font-weight: 400;
}
.myacDtFoot .btnTwo {
  margin-left: auto;
}
.myacOrSrch {
  width: auto;
  display: flex;
  min-width: 20%;
  border: 1px solid #CCD3C7;
  padding: 10px;
  font-size: 12px;
  font-weight: 400;
  color: #7E8E84;
  border-radius: 5px;
}
.myacOrSrch input {
  border: none;
}
.myacOrSrch span {
  top: 1px;
  font-size: 16px;
  margin-right: 5px;
}
.myacOrTb {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 500;
  color: #18251C;
}
.myacOrTb .ordrRow {
  width: 100%;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 0;
  border-bottom: 1px solid #F2F5F3;
}
.myacOrTb .ordrRow:last-child {
  border-bottom: 0;
}
.myacOrTb .ordrRow.headTb {
  font-size: 14px;
}
.myacOrTb .ordrCol {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.myacOrTb .ordrCol.ProBlock {
  flex: 4;
  justify-content: flex-start;
  gap: 20px;
}
.myacOrTb .ordrCol.Status {
  flex: 2;
}
.myacOrTb .ordrCol [class^="btn"] {
  flex: 0 0 auto;
}
.myacOrTb .proImg {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background-color: #F3F8F4;
  flex: 0 0 auto;
}
.myacOrTb .proImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.myacOrTb .contstSec {
  font-size: 12px;
  font-weight: 400;
  color: #425147;
}
.myacOrSts {
  flex: 0 0 auto;
  width: auto;
  padding: 10px 30px;
  font-size: 12px;
  font-weight: 400;
  border-radius: 5px;
}
.myacOrSts.completed {
  color: #0E8E39;
  background-color: rgba(14, 142, 57, 0.1);
}
.myacOrSts.pending {
  color: #FF9500;
  background-color: rgba(255, 149, 0, 0.1);
}
.myacOrAdrs {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.myacOrAdrsIn {
  width: 100%;
  display: flex;
  border-bottom: 1px solid #F2F5F3;
  padding-top: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #425147;
  flex-wrap: wrap;
}
.myacOrAdrsIn.isEdit .myacOrAdrsCont {
  filter: grayscale(1);
  opacity: 0.6;
}
.myacOrAdrsIn.isEdit .chOutForm {
  display: flex;
}
.myacOrAdrsIn:last-child {
  border-bottom: 0;
}
.myacOrAdrsIn .actionBtnBlock {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  gap: 15px;
}
.myacOrAdrsCont {
  width: 100%;
  display: flex;
  padding-right: 90px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  flex: 1;
  padding-bottom: 20px;
}
.myacOrAdrsEdt {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background-color: #EAFBF0;
  color: #0E8E39;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.myacOrAdrsDlt {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background-color: #EAFBF0;
  color: #0E8E39;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.myacOrAdrs .locationLabel {
  width: auto;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #E2EAE5;
  color: #425147;
  font-size: 12px;
}
.myacOrAdrs .headBlock {
  width: auto;
  display: flex;
  gap: 15px;
  align-items: center;
  font-size: 16px;
  color: #18251C;
  font-weight: 600;
}
.myacOrAdrs .locatIcon {
  width: auto;
  font-size: 18px;
  top: 3px;
  margin-right: 10px;
  color: #0E8E39;
}
.myacWhishWrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.myacWhishIn {
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid #F2F5F3;
  display: flex;
  align-items: center;
  gap: 15px;
}
.myacWhishIn:last-child {
  border-bottom: 0;
}
.myacWhishCnt {
  width: auto;
  flex: 1;
  display: flex;
  gap: 25px;
}
.myacWhishCnt .proImg {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #F3F8F4;
  padding: 10px;
  flex: 0 0 auto;
}
.myacWhishCnt .proImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.myacWhishCnt .datBlock {
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.myacWhishCnt .proName {
  font-size: 12px;
  font-weight: 400;
  color: #425147;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.myacWhishCnt .proNameM {
  font-size: 16px;
  font-weight: 600;
  color: #18251C;
}
.myacWhishCnt .pricerate {
  display: flex;
  gap: 10px;
  align-items: center;
}
.myacWhishCnt .pricerate .priceBlock {
  color: #0E8E39;
  font-size: 18px;
  font-weight: 600;
}
.myacWhishCnt .pricerate .proRating {
  gap: 5px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #18251C;
}
.myacWhishCnt .pricerate .proRating .ratingStyle {
  color: #18251C;
}
.myacWhishCnt .pricerate .proRating > span {
  color: #425147;
}
.myacWhishAct {
  width: auto;
  max-width: 20%;
  flex: 0 0 auto;
  display: flex;
  gap: 15px;
  font-size: 12px;
  font-weight: 400;
  color: #66726A;
  flex-direction: column;
}
.myacWhishAct .trashBtn {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background-color: #EAFBF0;
  color: #0E8E39;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  transition: all 0.3s;
}
.myacWhishAct .trashBtn:hover {
  background-color: rgba(14, 142, 57, 0.2);
}