:root {
  --a: #040DBF;
  --b: #0F9BF2;
  --c: #5E728C;
  --d: #EBEDF2;
  --e: #F2275D; 
  --f: #fff;
  --g: #D8E4EE;
  --h: #f2f2f2;
}
body{
  background-color: var(--h);
  margin: none;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  
}
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

header {
  background: var(--d);
}
header a{
  text-decoration: none;
  color: var(--c);
  padding: 10px;
}

.containerHeader1 {
  background: var(--d);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}

.logo {
  height: 50px;      
  width: auto;
  display: block;
}
div.InscrireConnect{
  display: flex;
  justify-content: center;
  align-items: center;
}

div.InscrireConnect a{
  margin-right: 10px;
}


.btn {
  background: var(--b);
  color: var(--d);
  text-decoration: none;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 2px;
  border: 2px solid transparent;
  transition: 150ms ease;
}
.btn:hover { opacity: 0.9; }

.containerHeader2 {
  height: 28px;
  background: linear-gradient(360deg, #0F9BF2, #0d84cf);
}
div.content{
  height: 800px;
  display: flex;
}

div.column1{  
  background-image: url(../img/Rectangle\ 15.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 686.33px;
}
div.column1.img2{  
  background-image: url(../img/Rectangle\ 16.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 686.33px;
}
section.login{
  background-image: url(../img/Rectangle\ 17.jpg);  
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 1200px;

}
div.boite_semiBlanche{
  margin-top: 50px;
  background-color: rgba(235, 237, 242, 0.8);
  width: 400px;
  height: 450px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.column2{
  width: 790.9px;
}
div.column2 input{
  height: 30px;
}
div.column3{
  width: 529.95px;
  background-color: var(--g);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.inputWLabel{
  position: relative;
}
div.inputWLabel label{
  position: absolute;
  z-index: 1;
  top: 55%;
  left: 5%;
}
div.hideLabel label{
  display: none;
}

.miseDeFondBoitierGentil{
  width: 529.95px;
display: flex;
justify-content: space-between;
align-items: center;
}
.DollarOuPourcentage{
  margin-top: 23px;
  display: flex;
}
.DollarOuPourcentage img{
  height: 60px;
  width: 60px;
}

.tauxAnnuelInput{
  width: 48%;
  margin: 0;
}

#amortissement{
  width: 44%;
  height: 50px;
  margin-top: 23px;
}


.doubled#amortissement{
  width: 95%;
  height: 30px;
  margin-top: 15px;
}

.spaceBetweenInput{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.frequence img{
  height: 80px;
}

form {
  background: var(--h);
  color: var(--c);
  padding: 20px;
  max-width: 700px;
}
form.boite_semiBlanche{
  background-color: rgba(0, 0, 0, 0);
}

form#frominvestir{
max-width: 20px;
}

a{
  text-decoration: none;
  color: var(--c);
}

form select{
  background-color: var(--h);
}

form label {
  display: block;
  margin-top: 15px;
  font-weight: 600;
  color: var(--c);
}

form input{
  background-color: var(--h);
}

form input.doubled{
  width: 100%;

}form div.inputWLabel label.doubled{
  position: absolute;
  z-index: 1;
  top: 47%;
  left: 5%;
  pointer-events: none;
}

form input[type="text"],
form select {
  width: 95%;
  padding: 10px 12px;
  margin-top: 6px;
  border: 1px solid #ccc;
  border-radius: 2px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

form input[type="text"]:focus,
form select:focus {
  border-color: var(--b); 
  outline: none;
  box-shadow: 0 0 0 2px rgba(39, 178, 242, 0.2);
}

form .radio-group {
  margin-top: 10px;
}
form .radio-group label {
  display: inline-block;
  margin-right: 20px;
  font-weight: 400;
}

form button,
#boutonSubmit {
  display: inline-block;
  margin-top: 20px;
  background: var(--b);  
  color: #fff;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  text-align: center;
}

#calculateButton{
  display: inline-block;
  margin-top: 20px;
  background: var(--b);  
  color: #fff;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  text-align: center;
  margin: 20px;

}

form button:hover,
#boutonSubmit:hover {
  opacity: 0.9;
}