<div class="container">
<div class="container-appDragScroll" appDragScroll>
<div class="container-appMouseWheelZoom" appMouseWheelZoom>
<div class="container-scenario-main">
<div class="container-scenario-main-gamePieces" [style.z-index]="4">
<app-game-educationnal-objective></app-game-educationnal-objective>
<app-game-context [style.z-index]="2"></app-game-context>
</div>
<div class="container-scenario-main-missions">
<div class="container-scenario-main-missions-mission">
<div class="container-scenario-chronologie">
<div class="container-scenario-chronologie-title">Chronologie générale de la mission</div>
<div class="container-scenario-chronologie-steps">
<app-step [style.z-index]="2"></app-step>
<app-step [style.z-index]="1"></app-step>
</div>
</div>
<div class="container-scenario-chronologie">
<div class="container-scenario-chronologie-title">Chronologie du rôle</div>
<div class="container-scenario-chronologie-steps">
<app-step [style.z-index]="2"></app-step>
<app-step [style.z-index]="1"></app-step>
</div>
</div>
<div style="display: flex;">
<div class="container-scenario-main-missions-mission-missionPieces" [style.z-index]="3">
<app-educational-objective></app-educational-objective>
<app-mission-context [style.z-index]="2"></app-mission-context>
</div>
<div class="container-scenario-main-missions-mission-roles" [style.z-index]="2">
<div class="container-scenario-main-missions-mission-roles-role">
<app-role [style.z-index]="10"></app-role>
<div class="container-scenario-main-missions-mission-roles-role-tasks"
[style.z-index]="1">
<div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
[style.z-index]="2">
<app-task [style.z-index]="3"></app-task>
<app-task [style.z-index]="2"></app-task>
<app-repeat-task [style.z-index]="1"></app-repeat-task>
</div>
<div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
[style.z-index]="2">
<app-annexe-task [style.z-index]="3"></app-annexe-task>
<app-optionnal-task [style.z-index]="2"></app-optionnal-task>
<app-final-task [style.z-index]="1"></app-final-task>
</div>
<div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
[style.z-index]="2">
<app-random-event [style.z-index]="2"></app-random-event>
</div>
</div>
</div>
<div class="container-scenario-main-missions-mission-roles-role">
<app-role [style.z-index]="10"></app-role>
<div class="container-scenario-main-missions-mission-roles-role-tasks"
[style.z-index]="1">
<div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks" [style.z-index]="2">
<app-task [style.z-index]="3"></app-task>
<app-annexe-task [style.z-index]="2"></app-annexe-task>
<app-random-event [style.z-index]="1"></app-random-event>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-scenario-main-missions-mission">
<div class="container-scenario-chronologie">
<div class="container-scenario-chronologie-title">Chronologie générale de la mission</div>
<div class="container-scenario-chronologie-steps">
<app-step [style.z-index]="2"></app-step>
<app-step [style.z-index]="1"></app-step>
</div>
</div>
<div class="container-scenario-chronologie">
<div class="container-scenario-chronologie-title">Chronologie du rôle</div>
<div class="container-scenario-chronologie-steps">
<app-step [style.z-index]="2"></app-step>
<app-step [style.z-index]="1"></app-step>
</div>
</div>
<div style="display: flex;">
<div class="container-scenario-main-missions-mission-missionPieces" [style.z-index]="3">
<app-educational-objective></app-educational-objective>
<app-mission-context [style.z-index]="2"></app-mission-context>
</div>
<div class="container-scenario-main-missions-mission-roles" [style.z-index]="2">
<div class="container-scenario-main-missions-mission-roles-role">
<app-role [style.z-index]="10"></app-role>
<div class="container-scenario-main-missions-mission-roles-role-tasks"
[style.z-index]="1">
<div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
[style.z-index]="2">
<app-task [style.z-index]="2"></app-task>
<app-task [style.z-index]="1"></app-task>
</div>
<div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
[style.z-index]="2">
<app-annexe-task [style.z-index]="2"></app-annexe-task>
</div>
<div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
[style.z-index]="2">
<app-random-event [style.z-index]="2"></app-random-event>
</div>
</div>
</div>
<div class="container-scenario-main-missions-mission-roles-role">
<app-role [style.z-index]="10"></app-role>
<div class="container-scenario-main-missions-mission-roles-role-tasks"
[style.z-index]="1">
<div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
[style.z-index]="2">
<app-task [style.z-index]="3"></app-task>
<app-annexe-task [style.z-index]="2"></app-annexe-task>
<app-random-event [style.z-index]="1"></app-random-event>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-sider">
<app-rules class="container-sider-element"></app-rules>
<app-role-occurence class="container-sider-element"></app-role-occurence>
<app-supplementary-task class="container-sider-element"></app-supplementary-task>
<app-repeat class="container-sider-element"></app-repeat>
<app-interupt class="container-sider-element"></app-interupt>
<app-characters class="container-sider-element"></app-characters>
<app-comments class="container-sider-element"></app-comments>
</div>
<div class="container-settings">
<div class="container-settings-mode">
<input name="unity" type="checkbox" />
<label for="unity">Intégrer le jeu sous Unity</label>
</div>
<button mat-mini-fab color="white"><mat-icon fontIcon="download_file"></mat-icon></button>
<button mat-mini-fab color="white"><mat-icon fontIcon="upload-file"></mat-icon></button>
</div>
</div>