:root {
    --color-primary: #87ab63;
    --color-background: #383c4a;
    --color-text-primary: #ccc;
}

body {
    display: flex;
    width: 99vw;
    height: 97vh;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    align-items: center;
    justify-content: center;
}

.main {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 95%;
    border: solid 1px var(--color-primary);
    border-radius: 15px;
}

h1 {
    flex: 1;
    background-color: var(--color-primary);
    width: 100%;
    color: white;
    text-align: center;
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
    margin-top: 0px;
    font-size: 3rem;
}
.save {
    position: absolute;
    top: 6%;
}
.save button {
    margin-left: 10px;
    border: solid 1px #fff4;
    border-radius: 5px;
    background-color: #6495ed;
    width: 25px;
    height: 25px;
}
.save button:hover {
    background-color: #5379c0;
}
.save button > i {
    color: white;
}

.primary {
    display: flex;
    flex-direction: column;
    flex: 12;
    align-items: center;
    justify-content: center;
}

.salaryLine {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
}

.salary{
    display: flex;
    border-radius: 15px;
    border: solid 1px var(--color-primary);
    background-color: var(--color-primary);
    margin-right: -20px;
    justify-content: center;
    align-items: center;
    height:min-content;
}
.salary > input[type=number]::-webkit-inner-spin-button{
    opacity: 0;
}
.salary > input {
    -moz-appearance: textfield;
    background-color: var(--color-background);
    border: none;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    padding-left: 7px;
    color: var(--color-text-primary);
    font-size: 1.2rem;
}
.salary > span {
    color: black;
    margin-right: 5px;
    margin-left: 5px;
    font-size: 1.3rem;
}

.tab {
    flex: 10;
    width: 75%;
}
.lines {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.2rem;
}
.lines thead, .lines tfoot {
    background-color: var(--color-primary);
    color: black;
    border: solid 1px var(--color-primary)
}
.lines tbody > tr:nth-child(2n){
    background-color: #0002;
}
.lines tr > td {
    text-align: left;
    padding-left: 10px;
    border-left: solid 1px var(--color-primary);
}
.lines tr > td:nth-child(2) {
    text-align: right;
}
.lines tr > td:last-child {
    width: 15%;
    padding-right: 10px;
    border-right: solid 1px var(--color-primary);
    text-align: center;
}
.lines th, .lines td {
    padding: 5px;
}
.lines tr:last-child {
    border-bottom: solid 1px var(--color-primary);
}

.resultLine {
    display: flex;
    flex: 1;
    width: 50%;
    justify-content: space-between;
    font-size: 1.2rem;
}
.resultLine .salary {
    position: absolute;
    margin-left: 27%;
}
.resultLine .salary > input {
    width: 35px;
    padding-left: 10px;
}

div.btn {
    border: solid 1px #fff2;
    border-radius: 5px;
    padding: 2px;
    width: 20px;
    height: 20px;
}
.remove {
    background-color: #db2828;
}
.remove:hover {
    background-color: #a31f1f;
}
.add {
    background-color: #6495ed;
}
.add:hover {
    background-color: #5379c0;
}




.infobulle {
    position: relative;  /*les .picto-item deviennent référents*/
    cursor: help;
    border-radius: 50%;
}

.infobulle:hover:after,
.infobulle:focus:after {
    content: attr(aria-label);  /* on affiche aria-label */
    position: absolute;
    top: -2.4em;
    left: 50%;
    transform: translateX(-50%); /* on centre horizontalement  */
    z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
    white-space: nowrap;  /* on interdit le retour à la ligne*/
    padding: 5px 14px;
    background: var(--color-primary);
    color: black;
    border-radius: 4px;
    font-size: 1.2rem;
}

/* on génère un second élément en :before pour la flèche */

[aria-label]:hover:before,
[aria-label]:focus:before {
    content: "▼";
    position: absolute;
    top: -1em;
	left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
    font-size: 20px;
    color: var(--color-primary);
}

/* pas de contour durant le :focus */
[aria-label]:focus {
    outline: none;
}