/*Indemnité kilometrique*/

#calcul_ind_km caption{
text-align: left;
font-size: 1em;
font-style: italic;
margin: 0 0 15px 15px;
}
	
#calcul_ind_km table {
margin-top: 15px;
}
	
#calcul_ind_km th, 
#calcul_ind_km td {
border: 0px black solid;
}	
	
#calcul_ind_km th, #calcul_ind_km th[for="siren"] {
text-align: left ;
min-width: 155px;
}

#calcul_ind_km label{
padding-left: 15px;
}

#calcul_ind_km input, #calcul_ind_km select {
margin: 5px;
padding-left: 5px;
}

#calcul_ind_km textarea {
padding: 5px;
margin: 5px;
}

#calcul_ind_km th {
padding-right: 10px;
}

#calcul_ind_km th[colspan="4"] {
text-align: center;
padding: 10px;
}

#calcul_ind_km #ongletIndKm {
width: 850px;    
margin-top: 25px;
border-bottom: 1px solid grey; 
}

#calcul_ind_km #ongletIndKm input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
}

#calcul_ind_km #ongletIndKm label {
position: relative;
top: -3px;
cursor: pointer;
padding: 5px 15px 3px 15px;
background: rgba(73, 130, 180, 0.3);
border-top-left-radius: 10px;
border-top-right-radius: 5px;
}

#calcul_ind_km #ongletIndKm label[for="voiture"] {
margin-left: 20px;
}

#calcul_ind_km #ongletIndKm input[checked] + label {
background: rgb(73, 130, 180);
box-shadow: 0px 5px 5px #204d74;
color: aliceblue;
}

#calcul_ind_km #ongletIndKm .inf1150,
#calcul_ind_km #ongletIndKm .sup1150 {
cursor: pointer;
}

#calcul_ind_km #ongletIndKm input[checked] + label .inf1150,
#calcul_ind_km #ongletIndKm input[checked] + label .sup1150,
#calcul_ind_km #ongletIndKm input[checked] + label .inf1150 sup,
#calcul_ind_km #ongletIndKm input[checked] + label .sup1150 sup {
color: aliceblue;
}

#calcul_ind_km #ongletIndKm .inf1150 {
display: none;
}

#calcul_ind_km #ongletIndKm .sup1150 {
display: inherit;
}

@media all and (max-width: 1150px){

    #calcul_ind_km #ongletIndKm {
    width: 750px;
    }
    
    #calcul_ind_km #ongletIndKm .inf1150 {
    display: inherit;
    }

    #calcul_ind_km #ongletIndKm .sup1150 {
    display: none;
    }
}

#resultat {
margin-top: 25px;
}

#resultat #tableau {
border-collapse: collapse; /* Les bordures du tableau seront collées */
margin-top: 20px;
font-size: 0.8em;
}

#resultat #tableau tr, #resultat #tableau td{
border: 1px grey solid;
padding: 10px 20px;
}

#resultat #tableau th{
padding: 10px 20px;
}

#resultat #tableau #colonneCV td:first-child{
background: rgb(73, 130, 180);
color: aliceblue;
}

#resultat #tableau thead{
background: rgb(73, 130, 180);
color: aliceblue;
}

#resultat .indSurbrillance{
background: grey;
}

#bouton button{
margin: 15px;
}

@media only screen and (max-device-width: 850px) { /*Media smartphone mode portrait*/

    #outils.p_outils article{
        padding: 0 5px 25px 5px;
    }
    
    #calcul_ind_km {
        max-width: 100vw;
    }
    
    #calcul_ind_km h1{
        top: 0;
    }
    
    #calcul_ind_km #ongletIndKm{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        border-bottom: 0px;
        width: 100%;
    }
    
    #calcul_ind_km #ongletIndKm label{
        text-align: center;
        margin: 0;
        border-radius: 0;
        padding: 15px;
        width: calc(50vw - 40px);
        border: 1px solid #204d74;
    }
    
    #calcul_ind_km #ongletIndKm label[for="voiture"]{
        margin: 0;
    }
    
    #calcul_ind_km input{
        margin: 5px 0;
    }
    
    #calcul_ind_km tr{
        display: flex;
        flex-direction: column;
    }
    
    #calcul_ind_km td input{
        max-width: calc(100vw - 32px);
    }
    
    #resultat{
        margin: 0;
    }
    
    #resultat h1{
        display: none;
    }
    
    #resultat #tableau td{
        padding: 10px;
    }
    
    #bouton{
        display: flex;
        justify-content: space-around;
    }

    #bouton button{
        margin: 15px 0 0 0;
    }
}

@media only screen and (max-device-width: 374px) { /*Media smartphone mode portrait*/

    #calcul_ind_km #ongletIndKm label{
        font-size: 0.8em;
    }
}