* {
    margin: 0px;
    padding: 0px;
}

html,
body {
    height: 100%;
    font-family: Segoe UI;
}

.template,
.hide {
    display: none;
}

.container {
    height: 100%;
    overflow-y: auto;
}

.forage {
    height: 48px;
    margin: 5px;
    padding: 10px;
}

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

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

    .forage .id_forage {    
        float: left;
        width: 300px;
        height: 100%;
    }

    .forage .depth {
        float: left;
        width: 400px;
        height: 100%;
        background: url("images/profondeur_48_fonce.png") left center no-repeat;
    }

        .forage .number.text,
        .forage .depth .text {
            font-family: 'Segoe UI';
            font-size: 18pt;
            color: #333;            
        }

        .forage .type_forage {
            font-family: 'Segoe UI';
            font-size: 10pt;
            color: #333;            
        }

    .forage .depth .text {
        line-height: 48px;
        padding-left: 60px;
    }

        .forage .depth .progress_bar {
            margin-left: 60px;
            height: 3px;
            background-color: #ddd;
        }

            .forage .depth .progress_bar .bar_done {
                height: 100%;
                background-color: #00796b;
            }

    .forage .state {
        float: left;
        width: 48px;
        height: 100%;
        margin-left: 40px;
    }

        .forage .state.state_todo {
        }

        .forage .state.state_inprogress {
            background: url("images/inprogress_48.png") left center no-repeat;
        }

        .forage .state.state_finished {
            background: url("images/finished_48.png") left center no-repeat;
        }