CSS styles arrangement sequence of courses

app/Resources/public/css/base.css

@@ -5832,11 +5832,20 @@ div#chat-remote-video video {
   padding: 5px;
   /* background: url("../../main/img/icons/48/sequence-arrow.png") no-repeat center bottom; */
 }
+#parents .sequence-plus-icon{
+  display: inline-block;
+  font-size: 3em;
+  color: #CCCCCC;
+  padding-right: 10px;
+  padding-left: 10px;
+}
+.border-sequence{
+  background: url("../../main/img/line.png") repeat-x 0 35px;
+}
 .arrow-sequence{
   height: 68px;
   background: url("../../main/img/icons/48/sequence-arrow.png") no-repeat center 15px;
   margin-top: 10px;
-  border-top: 1px dotted #ccc;
   padding-top: 10px;
 }
 #parents .parent .big-icon{

main/template/default/admin/resource_sequence.tpl

@@ -28,7 +28,7 @@
                                 success:function(data){
                                     $('#parents').append(data);
                                     if (index != (count - 1)) {
-                                        $('#parents').append('<div class="sequence-plus-icon">+</div>');
+                                        $('#parents').append('<div class="sequence-plus-icon"><i class="fa fa-plus"></i></div>');
                                     }
                                     parentList.push(value);
                                 }
@@ -205,11 +205,15 @@
                     </h4>
                     <div id="parents">
                     </div>
+                    <div class="border-sequence">
                         <div class="arrow-sequence"></div>
+                    </div>
                     <h4 class="title-sequence">{{ 'Item' | get_lang }}</h4>
                     <div id="resource">
                     </div>
+                    <div class="border-sequence">
                         <div class="arrow-sequence"></div>
+                    </div>
                     <h4 class="title-sequence">{{ 'Dependencies' | get_lang }}</h4>
                     <div id="children">
                     </div>