.simulateur-investissement-container {
border-radius: 0 0 20px 20px; overflow: hidden;
border: 1px solid #000000;
@media (min-width: 1165px) {
padding-block: 0px;
margin: 0px;
display: grid;
grid-template-columns: 2fr 1fr;
border-radius: 0 0 20px 20px;
}
}
.simulateur-investissement-column {
}
.column-1 {
padding: 10px;
box-sizing: border-box;
@media (min-width: 1165px) {
padding: 40px;
border-right: 1px solid black;
}
}
.column-2 {
padding: 10px;
box-sizing: border-box;
@media (min-width: 1165px) {
padding: 40px;
}
}
.display-data {
font-weight: bold;
border-bottom: black 1px solid;
padding-bottom: 10px;
@media (min-width: 1165px) {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
.input-data {
padding-top: 30px;
@media (min-width: 1165px) {
display: grid; box-sizing: border-box;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px 100px;
padding-right: 60px;
column-gap: 60px;
row-gap: 20px;
}
}
.input-data > :nth-child(4) {
align-self: end;
}
.input-data > p {
font-size: 12px;
}
.input-data > :nth-child(4) {
}
.input-data > :nth-child(3) {
grid-column: 1 /  3; }
.input-group label,
.input-group input {
display: block;
}
.input-group label {
margin-bottom: 5px;
color: black !important;
}
.input-group input {
width: 100%;
box-sizing: border-box;
margin-bottom: 5px;
border-radius: 52px !important;
border: 1px solid #000000;
padding-left: 10px;
}
.input-group input[type="number"] {
height: 40px;
-moz-appearance: textfield;
}
.input-group input::-webkit-outer-spin-button,
.input-group input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.input-group {
@media (max-width: 1164px) {
padding-bottom: 20px;
}
}
.input-group p {
width: 100%;
text-align: center;
margin-bottom: 0;
}
.euro {
padding-right: 30px;
background: url(//lmnpinvest.com/wp-content/plugins/simulateur-investissement/assets/euro.svg) no-repeat calc(100% - 15px) center;
background-size: 20px 20px;
}
.percent {
padding-right: 30px;
background: url(//lmnpinvest.com/wp-content/plugins/simulateur-investissement/assets/percent.svg) no-repeat calc(100% - 15px) center;
background-size: 20px 20px;
}
#chart-data span.green {
background-color: #2fa72f;
}
#chart-data span.black {
background-color: black;
}
#chart-data span.grey {
background-color: #F5F5F5;
}
#chart-data span.legend {
display: inline-block;
width: 40px;
height: 20px;
border: 1px solid black;
margin-right: 10px;
border-radius: 30px;
}
#chart-data div {
display: flex;
align-items: center;
justify-content: flex-start;
}
#chart-data {
display: flex;
gap: 15px;
flex-direction: column;
padding-top: 40px;
} input[type=range] {
border: solid 1px black;
border-radius: 8px;
height: 15px;
width: 100%;
outline: none;
transition: background 450ms ease-in;
-webkit-appearance: none;
padding-left: 0px!important;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
background: white;
border: 5px solid #2fa72f;
border-radius: 50%;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
input[type=range]::-moz-range-thumb {
width: 16px;
height: 16px;
background: white;
border: 5px solid #2fa72f;
border-radius: 50%;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
#duree {
background: linear-gradient(to right, #2fa72f 0%, #2fa72f 100%, #f5f5f5 100%, #f5f5f5 100%);
}
#donut-chart {
max-height: 250px;
}