.modal-moncompte {
  background-color: transparent;
}
.modal-moncompte .box {
  width: 270px;
  padding: 15px 20px 10px 20px;
  right: 44px;
  top: 26px;
  background-color: var(--color-whitegray);
  border: 0.5px solid var(--color-rparts);
  position: absolute;
}
.modal-moncompte .box .compte_title {
  font-size: 18px;
  color: var(--color-black);
  margin-bottom: 15px;
  font-family: 'Arial-Bold';
}
.modal-moncompte .box input[type='text'],
.modal-moncompte .box input[type='password'] {
  height: 30px;
  width: 95%;
  margin-bottom: 5px;
  background-color: var(--color-white);
  background-image: none;
  padding-left: 10px;
  border: none;
  outline: none;
  line-height: 30px;
  border-bottom-right-radius: 0px ;
  border-bottom-left-radius: 0px ;
  border-top-right-radius: 0px ;
  border-top-left-radius: 0px ;
  font-family: 'Arial-Regular';
  color: var(--color-gray);
  font-size: 12px;
  font-weight: normal;
}

.modal-moncompte .box input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset; <!-- Remplace White par la couleur que tu veut -->
}


.modal-moncompte .text-xs {
    font-size: 9px;
}

.modal-moncompte .text-gray {
    color: var(--color-gray);
    text-decoration: none;
}

.modal-moncompte .button-green {
    margin: 10px 0;
    padding: 10px;
    background-color: var(--color-rparts);
    width: 95%;
    
    a {
    	color: var(--color-black);
    	text-decoration: none;
    	font-family: 'Arial-Bold';
    	font-size: 12px;
    	margin-left: 5px;
	}
	
    .arrow-right-white {
       position: absolute;
       left: 0;

       &::before {
           position: absolute;
           content: '';
           left: 20px;
           bottom: -5px;
           width: 10px;
           height: 10px;
           background-image: url('../img/fleche-black.svg');
           background-repeat: no-repeat;
       }
   }
}

.modal-moncompte .button-gray {
	margin: 10px 0;
    padding: 10px;
    background-color: transparent;
    width: 95%;
    
    a {
    	color: var(--color-black);
    	font-family: 'Arial-Regular';
    	font-size: 12px;
    	text-decoration: none;
    	margin-left: 20px;
    }
    
    .arrow-right-white {
       position: absolute;
       left: 0;

       &::before {
           position: absolute;
           content: '';
           left: 30px;
           bottom: -5px;
           width: 10px;
           height: 10px;
           background-image: url('../img/fleche-black.svg');
           background-repeat: no-repeat;
       }
   }
}

.modal-moncompte .connect-container {
	a:hover {
		text-decoration: none;
		color: var(--color-rparts) !important;		
	}
}

.modal-moncompte .box .mdp_oublie,
.modal-moncompte .box .register {
  display: block;
  position: relative;
}
.modal-moncompte .box .mdp_oublie i,
.modal-moncompte .box .register i {
  position: absolute;
  top: 3px;
  left: 9px;
  font-size: 5px;
}
.modal-moncompte .box .mdp_oublie {
  color: var(--color-gray);
  font-weight: 600;
  font-size: 9px;
  padding-left: 17px;
  margin-bottom: 5px;
}
/* non utilise .modal-moncompte .box .register {
  color: #086bb0;
  font-weight: bold;
  font-size: 12px;
  padding-left: 19px;
}
.modal-moncompte .box .register i {
  top: 5px;
  left: 8px;
  font-size: 7px;
}
.modal-moncompte .span-oeil {
	position: absolute;
    top: 93px;
    left: 210px
}*/
.modal-motdepasseoublie {
  z-index: 1300!important;
  background-color: transparent;
}
.modal-motdepasseoublie .box {
  width: 460px;
  padding: 35px 20px 30px 20px;
  left: 50%;
  margin-left: -230px;
  background-color: var(--color-lightgray);
  border: 1px solid var(--color-rparts);
  position: absolute;
  top: 50%;
  margin-top: -122px;
}
.modal-motdepasseoublie .box .mdp-title {
  font-size: 18px;
  color: var(--color-black);
  margin-bottom: 15px;
  text-align: center;
  font-family: 'Arial-Bold';
}
.modal-motdepasseoublie .box .mdp-entete {
  font-size: 13px;
  color: var(--color-black);
  margin-bottom: 15px;
  text-align: center;
  font-weight: normal;
  font-family: 'Arial-Regular';
}
.modal-motdepasseoublie .box input[type='email'] {
  margin-bottom: 7px;
  background-color: var(--color-white);
  padding-left: 10px;
  line-height: 30px;
}
.modal-motdepasseoublie .box input,
.modal-motdepasseoublie .box button {
  margin-left: auto;
  margin-right: auto;
  width: 228px;
  height: 30px;
  border: none;
  outline: none;
  background: none;
  background-color: var(--color-white);
  font-family: 'Arial-Regular';
  font-size: 12px;
  color: var(--color-lightgray);
  font-weight: normal;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.modal-motdepasseoublie .box form {
  text-align: center;
}
.modal-motdepasseoublie .box button[type='submit'] {
  font-size: 12px;
  color: white;
  font-weight: bold;
  background-color: black;
  border: none;
  text-align: left;
  position: relative;
  padding-left: 20px;
}
.modal-motdepasseoublie .box button[type='submit'] i {
  position: absolute;
  top: 12px;
  left: 9px;
  font-size: 7px;
}
.modal-motdepasseoublie .box .btn_mdp_oublie {
	font-family: 'Arial-Regular';
	color: var(--color-black);
	font-weight: normal;
	text-decoration: none;
	margin-left: 10px;
}