arrows and css fixes

html.qrc

@@ -11,5 +11,7 @@
         <file>html/newmessage.mp3</file>
         <file>html/svg/arrows.svg</file>
         <file>html/svg/notification.svg</file>
+        <file>html/svg/a-left.svg</file>
+        <file>html/svg/a-right.svg</file>
     </qresource>
 </RCC>

html/style.css

@@ -104,8 +104,9 @@ body {
 }
 
 .main_header__title_airplaine {
-    background: url(/svg/airplane.svg);
+    background-image: url(/svg/airplane.svg);
     background-repeat: no-repeat;
+    background-position: center;
     width: 6%;
     height: 50%;
     border: none;
@@ -118,8 +119,9 @@ body {
 }
 
 .main_header__title_arrows {
-    background: url(/svg/arrows.svg);
+    background-image: url(/svg/arrows.svg);
     background-repeat: no-repeat;
+    background-position: center;
     width: 6%;
     height: 50%;
     border: none;
@@ -132,8 +134,9 @@ body {
 }
 
 .main_header__title_notify {
-    background: url(/svg/notification.svg);
+    background-image: url(/svg/notification.svg);
     background-repeat: no-repeat;
+    background-position: center;
     width: 6%;
     height: 50%;
     border: none;
@@ -177,7 +180,7 @@ body {
 }
 
 .main_header__search_button__img {
-    background: url(/svg/magnifier.svg);
+    background-image: url(/svg/magnifier.svg);
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
@@ -209,10 +212,37 @@ body {
 }
 
 .main_middle__path {
+    display: flex;
     color: #6493bc;
     flex: 77.5%;
 }
 
+.main_middle__path_aright {
+    background-image: url(/svg/a-right.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 3%;
+    opacity: .5;
+    margin: 0 1% 0 1%;
+}
+
+.main_middle__path_aright:hover {
+    opacity: 1;
+}
+
+.main_middle__path_aleft {
+    background-image: url(/svg/a-left.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 3%;
+    opacity: .5;
+    margin: 0 1% 0 1%;
+}
+
+.main_middle__path_aleft:hover {
+    opacity: 1;
+}
+
 .main_middle__online {
     color: #b6c7d6;
     flex: 21.5%;
@@ -271,7 +301,7 @@ body {
 
 .main_payload__block_folder {
     flex: 5%;
-    background: url(/svg/folder.svg);
+    background-image: url(/svg/folder.svg);
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
@@ -279,7 +309,7 @@ body {
 
 .main_payload__block_message {
     flex: 5%;
-    background: url(/svg/message.svg);
+    background-image: url(/svg/message.svg);
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
@@ -351,6 +381,14 @@ body {
     .left_menu__footer {
         font-size: 12px;
     }
+
+    .main_middle__path_aright {
+        width: 5%;
+    }
+
+    .main_middle__path_aleft {
+        width: 5%;
+    }
 }
 
 @media screen and (max-width: 1200px) {

html/svg/a-left.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#6493BC;}
+</style>
+<polygon class="st0" points="256.3,512 256.3,362.8 512,362.8 512,149.7 256.3,149.7 256.3,0.5 0.5,256.3 "/>
+</svg>

html/svg/a-right.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#6493BC;}
+</style>
+<polygon class="st0" points="512,256.3 256.3,0.5 256.3,149.7 0.5,149.7 0.5,362.8 256.3,362.8 256.3,512 "/>
+</svg>