:root {
    --electric-blue: #226fd7;
    --dark-blue: #211D42;
    --salmon: #F29B9B;
    --grey: #a09fa5;
    --mid-grey: #C6CDD7;
    --light-grey: #f2f7fd;
    --bg-bloc: white;
    --text-light: white;
    --text-dark: black;

}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 0.9em;
    background-color: var(--light-grey);
}

main {
    flex: 1;
    margin: 0 auto 4em auto;
    width: 100%;
}

.pwd {
    position: relative;
}

.pwd .password {
    width: 100%;
}

.pwd #eye-icon,
.pwd #eye-icon2,
.pwd #eye-icon3 {
    position: absolute;
    right: 0.7em;
    margin-bottom: 2.05em;

}

a.link-basic {
    color: var(--text-dark);
    text-decoration: underline;
}

a.link-basic:hover {
    color: var(--electric-blue);
}


.pagination li {
    background-color: var(--light-grey);
    color: var(--text-dark);
    padding: 0.2em 0.5em;
    margin: 0 0.2em;
    border-radius: 5px;
}

.pagination a,
.pagination input {
    text-decoration: none;
    color: var(--text-dark);
}

.pagination li.disabled a {
    color: var(--mid-grey)
}

.pagination li.active {
    background-color: var(--salmon);
}

.pagination li.active a {
    color: var(--text-light);
}

.pagination input {
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-weight: normal;
}


.main-container {
    width: 80%;
    max-width: 1361px;
    margin: 0 auto;
}

section {
    width: 100%;
}

.main-container .bloc {
    margin-top: 2em;
    background-color: var(--text-light);
    border-radius: 15px;
    padding: 2em;
}

.shadow {
    -webkit-box-shadow: 0px 3px 20px -3px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 3px 20px -3px rgba(0, 0, 0, 0.12);
}

.convert>div {
    width: 49%
}

.bloc.bienvenue {
    display: flex;
    align-items: center;
    background-color: var(--dark-blue);
    background-image: url('/img/fond_bienvenue.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    color: var(--text-light);
    padding: 5em 2.5em;
}

.bloc.bienvenue img {
    margin-right: 1.5em;
}

.bloc.bienvenue h3 {
    color: var(--text-light);
    margin-bottom: 0.5em;
}

.text-light-weight {
    font-weight: 200;
}

.text-grey {
    color: var(--grey);
    font-style: oblique;
}

.text-white {
    color: var(--text-light);
}

.points-valeur>div>div {
    font-size: 2em;
    font-weight: 600;
}


.points-valeur .equal {
    border: 2px solid #ebebeb;
    border-radius: 30px;
    padding: 0 0.35em;
    margin: 0 0.5em;
    color: var(--salmon);
}

.bloc.bg-dark-blue {
    background-color: var(--dark-blue);
}

.bloc.bg-salmon {
    background-color: var(--salmon);
}

.bloc-title-1 {
    font-size: 1.3em;
    padding: 0.3em 0;
}

.button-white {
    border: 0;
    background-color: var(--text-light);
    font-weight: 600;
    border-radius: 30px;
    font-size: 0.8em;
    padding: 0.7em 1.5em;
    color: var(--text-dark);
}

.button-white:hover {
    text-decoration: none;
    color: var(--text-dark)
}

h1 {
    color: var(--dark-blue);
    font-weight: 700;
    font-size: 1.8em;
    text-align: center;
    margin: 0;
}

h3 {
    color: var(--dark-blue);
    font-weight: 700;
    font-size: 1.5em;
    margin: 0;
}

h4 {
    font-size: 1em;
    font-weight: 800;
    color: var(--text-light);
    background-color: var(--salmon);
    padding: 0.3em 0.5em;
    border-radius: 10px;
}


.input:not(table.converter .input) {
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
}

.admin-nav {
    width: 23%;
}

.admin {
    width: 75%;
}

.admin-nav ul {
    padding: 0 0 0 1em;
}

.admin-nav ul li {
    padding-bottom: 1em;
    /* list-style: none; */

}

.admin-nav ul li a {
    color: var(--text-dark);
}

.admin-nav ul li a:hover,
.admin-nav .nav-ro {
    color: var(--salmon);
}


.admin table .input {
    margin: 0 !important;
}

.input label {
    font-weight: 700;
    margin-bottom: 0.2em;
}

.input input,
.input textarea,
select {
    padding: 0.8em;
    border: 1px solid #a3a2aa;
    border-radius: 7px;
    font-family: 'Poppins', sans-serif;
}

.admin select,
.admin input {
    padding: 0.4em !important;
}

.admin .filter-active {
    background-color: var(--salmon);
    border-radius: 30px;
    padding: 0.2em 0.5em;
    font-size: 0.9em;
}


button[type=submit]:not(.button-login, .search-button),
.button-general {
    /* width: 100%; */
    font-family: 'Poppins', sans-serif;
    background-color: var(--text-light);
    color: var(--electric-blue);
    text-decoration: none;
    border: 2px solid var(--electric-blue);
    border-radius: 30px;
    padding: 0.7em 1em;
    text-align: center;
    font-weight: 600;
}

button.flat {
    padding: 0.3em 1em !important;
}

.admin table button,
.admin table a {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    background-color: var(--text-light);
    color: var(--electric-blue);
    border: 2px solid var(--electric-blue);
    border-radius: 30px;
    text-align: center;
    font-weight: 600;
    padding: 0.2em 0.5em !important;
    font-size: 1.2em !important;
    line-height: normal;
}


button[type=submit]:not(.button-login, .search-button, button:disabled):hover,
.button-general:hover,
.admin table a:hover,
a.button:hover {
    background-color: var(--electric-blue);
    color: var(--text-light);
    text-decoration: none;
}

button[type=submit]:disabled,
button[type=submit]:disabled:hover {
    color: #c3d3e3;
    border: 2px solid #c3d3e3;
}

.convert-wrapper>div {
    width: 48%;
}

table.converter th {
    background-color: var(--salmon);
    border: 1px solid var(--text-light);
    width: 50%;
}

table.block-dark th:not(tbody th) {
    background-color: var(--dark-blue);
    color: var(--text-light);
}

table tr.block-secondary {
    background-color: var(--salmon);
}


table.converter td {
    background-color: #F5f5f5;
    border: 1px solid var(--text-light);
    width: 50%;
}

table.converter .input {
    display: flex;
    flex-direction: column;
}

table.converter .input,
table.converter select {
    width: 100px;
}

table.converter .card-error {
    color: red;
}

table.converter .card-ok {
    color: green;
}


.cart-liv form {
    width: 50%;
    margin: 0 auto;
}

.mention-tel {
    font-size: 0.8em;
    font-weight: 300;
    margin-top: -0.5em;
}

.panier-verif {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.panier-verif>div:first-child {
    width: 58%;
}

.panier-verif>div:last-child {
    width: 38%;
}

@media screen and (max-width: 910px) {
    .main-container {
        width: 95%;
    }

    .convert-wrapper>div,
    .cart-liv form,
    .panier-verif>div {
        width: 100%;
    }
}

@media screen and (max-width: 750px) {
    .convert>div {
        width: 100%
    }

    .bloc.bienvenue {
        background-image: none;
    }

    .points-valeur>div:first-child {
        flex-direction: column;
    }
}