@import url('https://fonts.googleapis.com/css2?family=Fasthand&family=Hanuman:wght@100;300;400;700;900&family=Noto+Serif+Khmer:wght@800&family=Poppins:wght@400;600;700;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root {
  --font-hunuman: "Hanuman", serif;
  --border-color-grey: rgba(128, 128, 128, 0.442);
  --bg-card: #d4d4d440;
  --bg-sale: #3CB043;
  --color-grey: rgba(128, 128, 128, 0.442);
  --bg-header: #F6F9F5;
  --active-box: #E3EBF9;
  --text-black: #06150A;
  --bg-hover-card: #bfc1be;

}


* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family:"Poppins", sans-serif  ,  "Fasthand", cursive;
}



/* 
.section-profile{
  width: 1280px;
  height: 950px;
  margin: auto;
  display: flex;

} */
/* .conatainer >.row{
  width: 1280px;
  height: 950px;
  display: flex;
} */

form .text-title {
  font-size: 30px;
  color: var(--bg-sale);
}

/* ====================================================section1======================================= */
/* .col-4 {
  width: 500px;
  height: 100%;

} */
/* .col-4>.container {
  width: 100%;
  height: 100%;
  padding: 10px 20px;

} */



.navbar-brand img {
  width: 100%;
  object-fit: cover;
}

.col-4 > span {
  font-size: 1.2rem;
  display: flex;
  gap: 1rem;

}
.col-4 > span >p>a {
  font-size: 1.2rem;
  display: flex;
  display: block;
  text-decoration: none;
  list-style: none;
  gap: 1rem;
  color: var(--bg-sale);
}
 .col-4 > .text-title {
  font-size: 2rem;
  color: var(--text-black);
}
#active-color {
  color:var(--bg-sale);
}
.active-box{
  background-color: #9ea5ad;
}

.col-4> .box-profile-item {
  width: 100%;
  padding: 0 10px;
  height: 70px;
}
 .box-profile-item > .my-profile {
  width: 100%;
  height: 60px;
  border-radius: 7px;
  overflow: hidden;

}
#active-box {
  color: var(--bg-sale);
  background:  var(--bg-header);


}
.box-profile-item > .my-profile >a {
  display: block;
  width: 100%;
  height: 60px;
  transition: 0.4s;
  text-decoration: none;
  color: var(--bg-sale);


}

 .box-profile-item > .my-profile:hover >a {
    color: var(--bg-sale);
    background:  var(--bg-header);
}

 .box-profile-item > .my-profile >a> span {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
 .box-profile-item > .my-profile > a>span > i {
  width: 15%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
 .box-profile-item > .my-profile > a>span > p {
  width: 85%;
  height: 100%;
  display: flex;
  font-size: 1.2rem;
  align-items: center;
}
/*  */
/* .col-8{
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: whitesmoke;
} */



.col-8 > .form-profile {
  width: 100%;
  padding: 10px;
  height: 100%;
  background-color: var(--bg-header);
  border-radius: 7px;
}
.col-8 form > .profile-form{
  width: 100%;
  height: 200px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;

}
.col-8 form > .profile-form img{
   object-fit: cover;
   width: 200px;
   height: 100%;
   object-position: top;
   border-radius: 50%;
  }
.col-8> form >.profile-form >.fa-pen-to-square{
  position: absolute;
  margin-top: 90px;
  margin-left: 90px;
  font-size: 2rem;
  cursor: pointer;
}
.col-8>  form > .profile-form> img {
  width: 120px;
  height: 120px;
  object-fit: cover;
}
.col-8> form > .mb-6 {
  width: 100%;
  height: 80px;
  display: flex;
  gap: 1.2rem;
}
.col-8 > form > .mb-6 > .mb-3 {
  padding: 7px;
  width: 50%;
  height: 100%;
}
.col-8>  form > .mb-3 {
  padding: 7px;
  width: 100%;
  height: 80px;
}
/* =================================form-contral================================ */
.from-contral {
  border: none;
  background-color: var(--active-box);
  margin-top: 7px;
  width: 100%;
  height: 40px;
  outline: none;
  padding: 7px;
  border-radius: 7px;
}

.form-label {
  font-size: 1.2rem;
}


form > .box-form {
  position: relative;
}

.mb-12 {
  width: 100%;
  height: 40px;
  display: flex;
  outline: none;
  border-radius: 7px;
  background-color: var(--active-box);
}
.mb-12 > span > .eye{
  margin: 13px 10px 5px 0px;
}
.toggle-password {
  cursor: pointer;
}

.mb-12 .password-input {
  border: none;
  width: 99.5%;
  outline: none;
  background-color: transparent;
  height: 100%;
  margin-left: 10px;
}

/* =========================================================payment================================ */
 .col-8 >.payment-history{
  width: 100%;
  height: 100%;
}
.col-8>.payment-history > .text-title{
  font-size: 30px;
  color: var(--bg-sale);
}
.col-8>.payment-history >.box-btn{
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 2rem;
} 
.col-8>.payment-history >.box-btn>a{
  display: block;
  text-decoration:none;  
  list-style: none;
}
#color-org{
  color: orange;
}
#color-red{
  color: red;
}
#color-green{
  color: var(--bg-sale);
}
/* .conatiner >.row> .col-8> .payment-history >.box-btn>a>.btn{
  width: 100px;
  height: 35px;
  border-radius: 10px;
  padding: 3px;
  cursor: pointer;
  font-size: 1rem;
  border: none;
  background-color: var(--border-color-grey);
  
} */

.ch-btn{
  background-color: var(--bg-sale);
  width: 100px;
  height: 40px;
  border-radius: 2px;
  padding: 3px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--bg-header);
border: none;
margin-bottom : 15px;
}
.ch-1{
  font-size: 1rem;
  width: 100px;
  height: 40px;
  padding: 3px;
  border: 1.5px solid var(--bg-sale);
  cursor: pointer;
  margin-bottom : 15px;
}

.col-8>.payment-history >.box-title{
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 50px;
  color: var(--bg-header);
  align-items: center;
  padding: 10px;
  font-size: 0.9rem;
  background-color: var(--bg-sale);
}
.col-8>.payment-history >.box-title>.Order-ID{
  width: 20%;

}
.col-8>.payment-history >.box-title>.Ammount{
margin-left: 90px;  
}
.col-8>.payment-history >.box-item{
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 50px;
  color: var(--text-black);
  align-items: center;
  margin-top: 20px;
  padding: 10px;
font-size: .8rem;
  border-radius: 7px;
  background-color: var(--bg-header);
}
.col-8>.payment-history >#color{
background-color: var(--bg-sale);
}

.col-8>.payment-history >.box-item>.box>img{
  width: 70px;
  height: 60px;
  margin-left: 90px;
  object-fit: cover;
}
.col-6> .payment-history >.box-item>.box{
  width: 130px;
  height: 50px;
  gap: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.payment-history >.box-item>.number{
width: 4%;
}
.payment-history >.page{
width: 100%;
display: flex;
padding: 10px;
justify-content: space-between;
}
.payment-history >.page >.box-page1{

  display: flex; align-items: center;
  gap: 1rem;
 
}
.payment-history >.page >.box-page2{

  display: flex; align-items: center;
  gap: 1rem;
 
}
.payment-history >.page >.box-page1>.box-num{
  /* background-color: rgb(144, 140, 134); */
  width: 50px;
  font-size: 0.2rem;
  border-radius: 7px;
  color: var(--text-black);
  font-size: 1.2rem;
  display: flex; align-items: center;
  justify-content: center;
  padding: 4px;
  height: 30px;
}
/* ==========================================================Feedback=================================================== */
/* .col-8>.col-8{
  width: 100%;
  height: 100%;
} */
/* .col-8 >.conatiner{
  width: 100%;
  height: 100%;
} */
.col-8 > form >.mb-3{
  width: 100%;
  height: 40px;
  /* background-color: aqua; */
  display: flex;
  flex-wrap: wrap;
}
.col-8 > form >.mb-3 >.form-contral{
  border: none;
  background-color: var(--active-box);
  margin-top: 7px;
  width: 100%;
  height: 40px;
  outline: none;
  padding: 7px;
  border-radius: 7px;
}
.col-8 > form >.mb-3 >.form-contral-1{
  border: none;
  background-color: var(--active-box);
  margin-top: 7px;
  width: 100%;
  height: 150px;
  outline: none;
  padding: 7px;
  border-radius: 7px;
}
.col-8 > form >.mb-3 >.form-label{
  font-size: 20px;

}

.edit-btn {
  width: 200px;
  padding: 6px;
  cursor: pointer;
  background-color: var(--bg-sale);
  color: var(--bg-header);
  border: none;
  font-size: 17px;
  margin-left: 7px;
  margin-bottom: 15px;
  margin-top : 15px;
}