* {
    font-family: Calibri;
}

.title {
    text-align: center;
    border: 4px solid;
    margin: 20px;
}

/* Bouton permettant de dérouler et de fermer toute l'arborescence */
.button {
    margin: 20px;
}

#btnOpenAll, #btnCloseAll, .btnOpenTasks {
    display: inline-block;
    padding: 0.35em 1.2em;
    border: 0.1em solid #808080;
    margin: 0 0 0.3em 0;
    border-radius: 0.12em;
    box-sizing: border-box;
    text-decoration: none;
    font-weight: 300;
    text-align: center;
    transition: all 0.2s;
    color: #FFFFFF;
    background-color: #808080;
}

#btnOpenAll:hover {
    cursor: pointer;
    color: #47B228;
    background-color: #eeeeee;
}

#btnCloseAll:hover {
    cursor: pointer;
    color: red;
    background-color: #eeeeee;
}

.btnOpenTasks:hover {
    cursor: pointer;
    color: dodgerblue;
    background-color: #eeeeee;
}

@media all and (max-width:30em) {
     #btnOpenAll, #btnCloseAll, .btnOpenTasks {
        display: block;
        margin: 0.4em auto;
    }
}
/*---*/

/* Tableau */
table, th, td, tr {
    margin: 20px;
    padding: 5px;
    border: 2px solid lightgrey;
    border-collapse: collapse;
    font-size: 15px;
    empty-cells: hide;
    table-layout:fixed;
}

thead th:nth-child(1) {
    width: 4%;
}

thead th:nth-child(2) {
    width: 1%;
}

thead th:nth-child(3) {
    width: 25%;
}

thead th:nth-child(4) {
    width: 4%;
}


.arbo thead th:nth-child(1) {
    width: 3%;
}

.arbo thead th:nth-child(2) {
    width: 26%;
}

.arbo thead th:nth-child(3) {
    width: 5%;
}

.arbo thead th:nth-child(4) {
    width: 66%;
}


thead th:nth-child(5) {
    width: 61%;
}

th {
    color: #fff;
    background-color: #A5022E;
}
/*---*/

/* Mise en forme des différents éléments de l'arborescence */
.level-1.epopee:hover, .level-1.fonctionnalite:hover, .level-2.fonctionnalite:hover {
    cursor: pointer;
}

.level-2.fonctionnalite, .level-2.workitem, .level-3.workitem, .level-4.tache {
    display: none;
}

.arbo .workitem td:nth-child(1), .arbo .workitem td:nth-child(3), .arbo .tache td:nth-child(1), .arbo .tache td:nth-child(3) {
    text-align: center;
}

    .arbo .workitem td:nth-child(1), .arbo .workitem td:nth-child(2), .arbo .workitem td:nth-child(3), .arbo .tache td:nth-child(1),
    .arbo .tache td:nth-child(2), .arbo .tache td:nth-child(3) {
        vertical-align: top;
    }

.epopee {
    background-color: #808080;
    color: white;
    font-weight: bold;
}

.epopee:hover {
    background-color: #969696;
}

.fonctionnalite {
    background-color: lightgrey;
    font-weight: bold;
}

.fonctionnalite:hover {
    background-color: #e5e5e5;
}

.fonctionnalite td {
    padding-left: 30px;
}

.workitem td {
    background-color: #f3f3f3;
}

.tache td {
    border-style: dotted;
}

    .tache td:nth-child(2) {
        background-color: #f3f3f3;
    }

.open, .close {
    font-size: 10px;
}
/*---*/

/* Bouton permettant de retourner en haut de la page */
#btnBackToTop {
    color: white;
    background-color: #A5022E;
    width: 30px;
    height: 30px;
    border-radius: 0.15em;
    border: 0.1em solid #A5022E;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);
}

#btnBackToTop::after {
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: #fff;
}

#btnBackToTop:hover {
    cursor: pointer;
    background-color: #808080;
}

#btnBackToTop:active {
    background-color: #555;
}

#btnBackToTop.show {
    opacity: 1;
    visibility: visible;
}
/*---*/