* {
    box-sizing: border-box;
}

input[type=text], input[type=password],input[type=email],select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

.buttonAnchor {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
    width: 100%;
    text-align:center;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
    width: 100%;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-50 {
    float: left;
    width: 50%;
    margin-top: 6px;
}


.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.errorClass {
    color: #D8000C;
}
.titreFiche {
    text-align:center; font-size:4vw;
    margin: auto;
}
.centered {
/*    position: fixed;
    top: 50%;
    left: 50%;
    !* bring your own prefixes *!
    transform: translate(-50%, -50%);*/
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}
/*--------------------------------------------------------------------------------------------------------------------*/
/*                                                      Table Responsive                                              */
/*--------------------------------------------------------------------------------------------------------------------*/
/*
Generic Styling, for Desktops/Laptops
*/
table {
    width: 100%;
    border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
    background: #eee;
}
th {
    background: #333;
    color: white;
    font-weight: bold;
}
td, th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
}

/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 1440px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
        font-size:3vw;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr { border: 1px solid #ccc; }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-size:3vw;
    }

    /*
    Label the data
    */

    td:nth-of-type(1):before { content: "identifiant"; font-size: 4vw; }
    td:nth-of-type(2):before { content: "nom"; font-size: 4vw; }
    td:nth-of-type(3):before { content: "prenom"; font-size:4vw;}
    td:nth-of-type(4):before { content: "age"; font-size:4vw;}
    td:nth-of-type(5):before { content: "dateNaissance"; font-size:4vw;}
    td:nth-of-type(6):before { content: "lieu_naissance"; font-size:4vw;}
    td:nth-of-type(7):before { content: "nationalite"; font-size:4vw;}
    td:nth-of-type(8):before { content: "adresse"; font-size:4vw;}
    td:nth-of-type(9):before { content: "code_postal"; font-size:4vw;}
    td:nth-of-type(10):before { content: "ville"; font-size:4vw;}
    td:nth-of-type(11):before { content: "numTelephone"; font-size:4vw;}
    td:nth-of-type(12):before { content: "email"; font-size:4vw;}

}