.simulateur-investissement-container {
border-radius: 20px; overflow: hidden;
border: 1px solid #000000;
@media (min-width: 1165px) {
padding-block: 0px;
margin: 0px;
display: grid;
border-radius: 25px;
}
}
.container-1 {
@media (min-width: 1165px) {
grid-template-columns: 1fr 1fr;
grid-template-rows: 2fr 3fr;
padding-block: 0px;
padding-inline: 0px;
height: 100%; margin-bottom: 0 !important;
}
margin-bottom: 20px !important;
padding-block: 20px;
padding-inline: 10px;
}
.container-1 > :nth-child(1),
.container-1 > :nth-child(2) {
grid-row: 1;
}
.container-1 > :nth-child(3) {
grid-row: 2;
}
.double-column-container {
margin-bottom: 20px;
box-sizing: border-box;
@media (min-width: 1165px) {
display: grid;
grid-template-columns: 3fr 2fr;
justify-content: space-between;
grid-gap: 20px; margin-inline: 10px;
}
}
.green-wraper {
@media (min-width: 1165px) {
border-radius: 35px;
border-left: 10px solid #2fa72f;
border-bottom: 10px solid #2fa72f;
}
} .simulateur-investissement-column {
box-sizing: border-box;
@media (min-width: 1165px) {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.column-1 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 90px 90px 90px;
align-items: flex-start;
@media (min-width: 1165px) {
border-right: black 1px solid;
border-bottom: black 1px solid;
padding-inline: 50px;
padding-block: 20px;
}
}
.column-2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 90px 90px 90px;
align-items: flex-start;
@media (min-width: 1165px) {
padding-inline: 40px;
padding-block: 20px;
border-bottom: black 1px solid;
}
}
.column-3 {
display: grid;
row-gap: 20px; @media (min-width: 1165px) {
grid-column: 1 /  3;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
justify-content: center;
padding-inline: 20px;
padding-block: 30px;
row-gap: 40px; column-gap: 30px; }
} .input-group label,
.input-group input {
display: block;
}
.input-group label {
margin-bottom: 5px;
font-weight: bold !important;
color: black !important;
}
.input-group input,
.input-group select {
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: 50px;
-moz-appearance: textfield;
}
.input-group select {
height: 50px;
}
.input-group input::-webkit-outer-spin-button,
.input-group input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.input-group {
}
.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;
}
.arrow-down {
padding-right: 30px;
background: url(//lmnpinvest.com/wp-content/plugins/simulateur-investissement/assets/arrow-down.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;
} .data-table {
border-collapse: collapse;
min-width: 100%;
box-sizing: border-box;
border-radius: 20px !important;
margin-bottom: 0 !important;
tr:first-child {
background-color: #2fa72f;
color: white;
}
th {
padding: 10px;
text-align: left;
}
td {
padding: 10px;
text-align: left;
}
tr:nth-last-child(-n+2) {
background-color: rgba(47, 167, 47, 0.5);
color: black;
font-weight: bold;
}
td:first-child {
font-weight: bold;
}
tr:nth-child(n+3):nth-child(-n+8) td:nth-child(3) {
background-color: #f5f5f5;
}
td, th {
border: 1px solid #000000;
}
@media (min-width: 1165px) {
td:first-child {
width: 250px;
}
th:first-child {
width: 250px;
}
th, td {
padding: 20px;  }
}
}
.data-table tr:nth-last-child(2) td {
box-shadow: inset 0 10px 5px -5px rgba(0, 0, 0, 0.1);
} .data-table {
border-collapse: collapse; }
.data-table th, .data-table td {
border: 1px solid #000000; }
.data-table tr:first-child th {
border-top: none;
}
.data-table tr:last-child td {
border-bottom: none;
}
.data-table tr td:first-child,
.data-table tr th:first-child {
border-left: none;
}
.data-table tr td:last-child,
.data-table tr th:last-child {
border-right: none;
} input[type=range] {
border: solid 1px black !important;
border-radius: 8px !important;;
height: 15px !important;;
width: 100% !important;;
outline: none !important;;
transition: background 450ms ease-in !important;;
-webkit-appearance: none !important;;
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 !important;
height: 16px !important;;
background: white !important;;
border: 5px solid #2fa72f !important;;
border-radius: 50% !important;;
cursor: pointer !important;;
transition: background 0.3s ease-in-out !important;;
}
#duree {
background: linear-gradient(to right, #2fa72f 0%, #2fa72f 100%, #f5f5f5 100%, #f5f5f5 100%);
}
#taux {
background: linear-gradient(to right, #2fa72f 0%, #2fa72f 61.67%, #f5f5f5 61.67%, #f5f5f5 100%);
}
#assurance {
background: linear-gradient(to right, #2fa72f 0%, #2fa72f 40%, #f5f5f5 40%, #f5f5f5 100%);
}
input[readonly] {
background-color: #F5F5F5;
}
.table-title {
@media (min-width: 1165px) {
font-size: 1.2rem;
}
}
::placeholder {
color: #D0D0D0;
}