/* en-tête des colonnes */
.header_logs {
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1px;
}

.header_column {
    font-size: 10pt;
    text-align: center;
    color: #fff;
    background-color: #4c4c4c;
    height: 19px;
    line-height: 19px;
    border-right: solid 1px #fff;
    overflow: hidden;
}

.group_header_column {
    display: -ms-flexbox;
    display: flex;
}

.header_passe {
    width: 3cm;
}

    .header_passe.header_recuperation {
        width: 4.2cm;
    }

    .header_passe .column1 {
        flex: auto;
    }

    .header_passe .column2 {
        width: 0;
    }

    .header_passe.header_recuperation .column2 {
        width: 2.2cm;
    }

.header_lithologie {
    flex: auto;
}

    .header_lithologie .column1 {
        flex: auto;
    }

    .header_lithologie .column2 {
        width: 2cm;
    }

.header_fluide {
    width: 1.5cm;
}

.header_niveau_eau {
    width: 2.5cm;
}

.header_rqd {
    width: 1.5cm;
}

.header_caisse {
    width: 9cm;
}



/* conteneur des colonnes */
.logsContainer {
    display: -ms-flexbox;
    display: flex;
}

/* colonnes */
.column_passe {
    flex-shrink: 0;
    width: 2cm;
    height: 100%;
}

.column_recuperation {
    flex-shrink: 0;
    width: 1.2cm;
    height: 100%;
}

.column_profondeur {
    flex-shrink: 0;
    width: 1cm;
    height: 100%;
}

.column_link {
    flex-shrink: 0;
    width: 0.3cm;
    height: 100%;
}

.column_lithologie {
    flex-grow: 1;
    overflow: hidden; /* cette colonne prend la place restante au milieu */
    height: 100%;
}

.column_fluide {
    flex-shrink: 0;
    width: 1.5cm;
    height: 100%;
}

.column_niveauEau {
    flex-shrink: 0;
    width: 2.5cm;
    height: 100%;
}

.column_rqd {
    flex-shrink: 0;
    width: 1.5cm;
    height: 100%;
}

.column_caisse {
    flex-shrink: 0;
    width: 9cm;
    height: 100%;
}


/* PASSE */
.passe {
    position: relative;
    text-align: center;
    color: #fff;
    border-bottom: 1px dotted #eee;
    background-color: #009385;
}

    .passe:hover {
        cursor: pointer;
        background-color: #00796b;
    }

    .passe:active {
        cursor: pointer;
        background-color: #004d40;
    }

    .passe .numero {
        font-size: 16pt;
    }

    .passe .date,
    .passe .outil,
    .passe .tubage {
        font-size: 8pt;
    }

    .passe .val_meter {
        position: absolute;
        bottom: 0;
        margin-left: 2px;
        font-size: 7pt;
    }

/* RECUPERATION */
.recuperation {
    text-align: center;
    font-size: 10pt;
    color: #333;
}

/* PROFONDEUR */
.meter {
    position: relative;
    height: 1cm;
}

    .meter .text {
        position: absolute;
        bottom: 0px;
        width: 0.8cm;
        margin-right: 0.2cm;
        font-size: 10pt;
        text-align: right;
        color: #333;
    }

    .meter .line {
        float: right;
        width: 0.2cm;
        height: calc(100% - 1px);
        border-right: 1px dotted #555;
        border-bottom: 1px solid #555;
    }

/* LINK PROFONDEUR - LITHOLOGIE */
canvas.link {
    /*display: block; */
    /* don't set size hear otherwise the ratio will not be respected => do it by js code*/
}

/* LITHOLOGIE */
.lithologie {
    display: -ms-flexbox;
    display: flex;
    border-bottom: 1px dotted #999;
}

    .lithologie:hover {
        cursor: pointer;
        color: #fff;
        background-color: #7fc9c2;
    }

    .lithologie:focus,
    .lithologie:active {
        cursor: pointer;
        color: #fff;
        background-color: #00796b;
    }

    .lithologie .symbol {
        flex-shrink: 0;
        width: 64px;
        background-repeat: repeat-y;
    }

    .lithologie .description {
        position: relative;
        flex-grow: 1;
        display: flex;
        overflow: hidden;
    }

        .lithologie .description p {
            margin: auto; /* Important */
            text-align: center;
            font-size: 12px;
        }

        .lithologie .description .val_meter {
            position: absolute;
            bottom: 0;
            margin-left: 2px;
            font-size: 7pt;
        }

    .lithologie .echantillons {
        width: 76px;
        display: -ms-flexbox;
        display: flex;
        flex-direction: column;
    }

        .lithologie .echantillons .echantillon {
            display: -ms-flexbox;
            display: flex;
            flex-grow: 1;
        }

            .lithologie .echantillons .echantillon p {
                margin: auto; /* Important */
                text-align: center;
            }


/* FLUIDE */
.fluide {
    position: relative;
}

    .fluide:hover {
        cursor: pointer;
        color: #fff;
        background-color: #7fc9c2;
    }

    .fluide:focus,
    .fluide:active {
        cursor: pointer;
        color: #fff;
        background-color: #00796b;
    }

    .fluide .val_meter {
        position: absolute;
        bottom: 0px;
        width: 100%;
        text-align: center;
        border-bottom: 1px dotted #555;
    }

    .fluide .description {
        position: absolute;
        font-size: 10pt;
        text-align: center;
        top: 50%;
        transform-origin: 50% 50%;
        transform: translateY(-50%) rotate(90deg);
    }


/* NIVEAU D'EAU */
.niveauEau {
    position: relative;
}

    .niveauEau:hover {
        cursor: pointer;
        color: #fff;
        background-color: #7fc9c2;
    }

    .niveauEau:focus,
    .niveauEau:active {
        cursor: pointer;
        color: #fff;
        background-color: #00796b;
    }

    .niveauEau .val_meter {
        position: absolute;
        bottom: 0px;
        width: 100%;
        text-align: center;
    }

    .niveauEau img {
        position: absolute;
        bottom: -48px;
        margin-left: 23px;
    }

/* RQD */
.rqd {
    position: relative;
    border-left: 1px solid #aaa;
    border-bottom: 1px dotted #555;
    width: 1.5cm;
    height: calc(100% - 1px);
}

    .rqd .val_pourcent {
        font-size: 10pt;
        text-align: right;
        padding-right: 5px;
    }

    .rqd .val_meter {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 16px;
        padding-left: 3px;
        font-size: 10pt;
        text-align: left;
        color: #555;
    }


/* CAISSE */
.caisse {
    display: -ms-flexbox;
    display: flex;
    border-left: 1px solid #aaa;
    border-bottom: 1px dotted #555;
}

    .caisse:hover {
        cursor: pointer;
        color: #fff;
        background-color: #7fc9c2;
    }

    .caisse:focus,
    .caisse:active {
        cursor: pointer;
        color: #fff;
        background-color: #00796b;
    }

    .caisse .caisseLeft {
        position: relative;
    }

    .caisse .numero {
        width: 1.5cm;
        height: calc(100% - 1px);
        font-size: 14pt;
        text-align: center;
    }

    .caisse .val_meter {
        position: absolute;
        bottom: 0;
        height: 16px;
        padding-left: 3px;
        font-size: 10pt;
        text-align: left;
        color: #555;
    }


    .caisse .photo {
        flex: auto;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }


/* Observations */
.container_note {
    margin-top: 40px;
}


/* Piézomètre */
.piezometre_dessin .content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.piezometre_photos .content {
    display: flex;
    flex-wrap: wrap;
}

    .piezometre_photos .content .piezometre_photo {
        margin: 10px 0 0 10px;
    }

.piezometre_dessin .content .piezoResume {
    margin-top: 20px;
}
    .piezometre_dessin .content .piezoResume .informations {
        /*width: 330px;*/
        /*height: 500px;*/
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 20px;
        padding-left: 20px;
        border-left: 1px dashed #ddd;
    }

.piezometre_option {

    width: 100%;
}

.piezometre_information {
    min-width: 140px;   /* permet alignement vertical */
    height: 75px;
    margin-right: 20px;
    margin-bottom: 20px;
}

    .piezometre_information .piezoLeft {
        float: left;
    }

    .piezometre_information .piezoRight {
        float: left;
        margin-left: 10px;
    }

    .piezometre_dessin .content .piezoResume .piezometre_information .title {
        font-family: 'Segoe UI';
        font-size: 12pt;
        border-bottom: 1px solid #333;
        margin-bottom: 0px;
    }

    .piezometre_information .image {
        width: 26px;
        height: 75px;
        background-repeat: repeat;
        background-position: center center;
    }

    .piezometre_information .content {
        float: left;
        margin-top: 10px;
    }

.piezometre_mesure {
    margin-right: 20px;
}

    .piezometre_mesure .icone {
        float: left;
        width: 32px;
        height: 32px;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .piezometre_mesure .valeur {
        float: left;
        height: 32px;
        line-height: 32px;
        margin-left: 10px;
    }

.piezometre_information_mortier {    
    background-image: url("images/mortier_ciment_1.png");
}

.piezometre_information_sobranite {    
    background-image: url("images/sobranite_1.png");
}

.piezometre_information_gravier {    
    background-image: url("images/gravier_1.png");
}

.piezometre_information_eau {    
    background-image: url("images/eau_3.jpg");
}

.piezometre_information_forage {
    background-image: url("images/forage_2.png");
}

.piezometre_information_PVClisse {    
    background-image: url("images/PVC_lisse_1.png");
}

.piezometre_information_PVCcrepine {
    background-image: url("images/PVC_crepine_1.png");
}

.piezometre_mesure_height {
    background-image: url("images/height_32.png");
}

.piezometre_mesure_level {
    background-image: url("images/niveau_32.png");
}

.piezometre_mesure_diameter {
    background-image: url("images/diameter_32.png");
}


/* LOGS MACHINE */
.logs_machine_header {
    display: flex;
}

    .logs_machine_header .header_column {
        flex-shrink: 0;
        width: 3cm;
    }

.column_logs_machine {
    display: flex;
}

    .column_logs_machine .logs_machine_content {
        flex-shrink: 0;
        width: 3cm;
        height: 100%;
    }
        .column_logs_machine .logs_machine_content canvas {
            margin: 0;
            padding: 0;
            border: none;
            display: block;
            vertical-align: top;
        }