From 3fdb5aba455be10ecd3e0e58f4af6dabbf0d49a1 Mon Sep 17 00:00:00 2001
From: Igor Zhukov <igor.beatle@gmail.com>
Date: Thu, 15 Jan 2015 23:11:01 +0300
Subject: [PATCH] Style fixes

Fancy animations for main menu
Added primary md button
Minor fixes
---
 app/css/app.css                               |  21 +++-
 app/css/desktop.css                           |  67 +++++++++-
 app/partials/desktop/chat_create_modal.html   |   2 +-
 app/partials/desktop/chat_edit_modal.html     |   2 +-
 app/partials/desktop/confirm_modal.html       |   2 +-
 app/partials/desktop/contacts_modal.html      |   6 +-
 app/partials/desktop/edit_contact_modal.html  |   2 +-
 .../desktop/import_contact_modal.html         |   2 +-
 app/partials/desktop/profile_edit_modal.html  |   2 +-
 app/partials/desktop/settings_modal.html      | 114 +++++++++---------
 app/partials/desktop/username_edit_modal.html |   2 +-
 11 files changed, 151 insertions(+), 71 deletions(-)

diff --git a/app/css/app.css b/app/css/app.css
index 6bde250d..46afe936 100644
--- a/app/css/app.css
+++ b/app/css/app.css
@@ -173,15 +173,22 @@ input[type="number"] {
   text-transform: uppercase;
   font-size: 13px;
   padding: 6px 10px;
+  font-weight: bold;
 }
 .btn-md,
 .btn-md:focus,
 .btn-md:hover {
-  color: #3a6d99;
+  color: #72a0c7;
+  /*color: #4680b3;*/
 }
 .btn-md:hover {
   background: #f2f6fa;
 }
+.btn-md-primary,
+.btn-md-primary:focus,
+.btn-md-primary:hover {
+  color: #4680b3;
+}
 
 .btn-md-danger,
 .btn-md-danger:focus,
@@ -278,6 +285,7 @@ a.md_modal_action {
   float: right;
   color: #dde8f1;
   padding: 19px 15px 5px;
+  font-weight: bold;
 }
 a.md_modal_action:hover {
   color: #FFF;
@@ -767,11 +775,14 @@ a.tg_radio_on:hover i.icon-radio {
 .login_head_submit_progress {
   float: right;
 }
+.login_head_submit_wrap {
+  font-weight: bold;
+}
 .login_head_submit_btn,
 .login_head_submit_progress {
   font-size: 13px;
   line-height: 20px;
-  padding: 26px 15px 29px;
+  padding: 27px 15px 28px;
   display: inline-block;
   color: #FFF;
 }
@@ -1108,9 +1119,10 @@ a.im_dialog_selected .im_dialog_message_text {
   background: #64c270;
   font-size: 11px;
   padding: 5px;
-  border-radius: 10px;
+  border-radius: 11px;
   min-width: 21px;
   text-align: center;
+  margin-top: 4px;
 }
 .active .im_dialog_badge {
   color: #428bca;
@@ -2446,7 +2458,8 @@ a.peer_photo_init:focus {
 .im_dialogs_contacts_wrap h5 {
   color: #999;
   font-size: 13px;
-  margin-left: 8px;
+  margin-left: 20px;
+  font-weight: bold;
 }
 
 /* Gif documents */
diff --git a/app/css/desktop.css b/app/css/desktop.css
index 5b878186..023c40ca 100644
--- a/app/css/desktop.css
+++ b/app/css/desktop.css
@@ -31,6 +31,11 @@
   background: #497799;
 }
 
+/*.dropdown.open .tg_head_btn {
+  position: relative;
+  z-index: 5;
+}*/
+
 .tg_head_logo_dropdown .dropdown-toggle {
   color: #FFF;
   padding: 17px 20px 15px 22px;
@@ -52,6 +57,7 @@
   display: inline-block;
   width: 18px;
   height: 14px;
+  -webkit-transform: translate3d(0,0,0);
 }
 .tg_head_logo_dropdown .icon-hamburger-wrap {
   margin: 0 40px 0 0;
@@ -64,11 +70,51 @@
   background: #fff;
   display: block;
   height: 2px;
+  margin: 0;
+}
+.icon-hamburger-wrap .icon-bar:nth-child(2) {
   margin-bottom: 4px;
+  margin-top: 4px;
 }
-.icon-hamburger-wrap .icon-bar:last-child {
-  margin-bottom: 0;
+
+.tg_head_logo_dropdown .icon-bar {
+  opacity: 1;
+  -webkit-transition: -webkit-transform .1s ease-in;
+  -o-transition: -o-transform .1s ease;
+  -ms-transition: -ms-transform .1s ease;
+  -moz-transition: -moz-transform .1s ease;
+  transition: transform .1s ease-in;
+  -webkit-transform-origin: 50% 50%;
+  -o-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
+  -moz-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+}
+.tg_head_logo_dropdown:not(.open) .dropdown-toggle:hover .icon-bar:nth-child(1) {
+  -webkit-transform: translateY(-1px);
+}
+.tg_head_logo_dropdown:not(.open) .dropdown-toggle:hover .icon-bar:nth-child(3) {
+  -webkit-transform: translateY(1px);
+}
+
+.tg_head_logo_dropdown.open .icon-bar:nth-child(1) {
+  -webkit-transform: translate3d(0,-6px,0) rotate(-45deg);
+  -moz-transform: translate3d(0,-6px,0) rotate(-45deg);
+  -ms-transform: translate3d(0,-6px,0) rotate(-45deg);
+  -o-transform: translate3d(0,-6px,0) rotate(-45deg);
+  transform: translate3d(0,6px,0) rotate(45deg);
+}
+.tg_head_logo_dropdown.open .icon-bar:nth-child(2) {
+  opacity: 0;
 }
+.tg_head_logo_dropdown.open .icon-bar:nth-child(3) {
+  -webkit-transform: translate3d(0,-6px,0) rotate(-45deg);
+  -moz-transform: translate3d(0,-6px,0) rotate(-45deg);
+  -ms-transform: translate3d(0,-6px,0) rotate(-45deg);
+  -o-transform: translate3d(0,-6px,0) rotate(-45deg);
+  transform: translate3d(0,-6px,0) rotate(-45deg);
+}
+
 
 .tg_head_logo_dropdown .dropdown-menu {
   border-radius: 0;
@@ -81,7 +127,24 @@
   -webkit-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
   -moz-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
   box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
+  overflow: hidden;
+}
+
+/*@-webkit-keyframes rollIn {
+    from { transform: translateY(-220px); }
+      to { transform: translateY(0); }
+}
+
+@keyframes rollIn {
+    from { transform: translateY(-220px); }
+      to { transform: translateY(0); }
 }
+
+.tg_head_logo_dropdown.open .dropdown-menu {
+  -webkit-animation: rollIn 0.2s cubic-bezier(0,2,1,0.5);
+  animation: rollIn 0.2s cubic-bezier(0,2,1,0.5);
+  z-index: 4;
+}*/
 .tg_head_logo_dropdown .dropdown-menu > li > a {
   font-size: 12px;
   line-height: 21px;
diff --git a/app/partials/desktop/chat_create_modal.html b/app/partials/desktop/chat_create_modal.html
index d9c1ddf9..39c0c65c 100644
--- a/app/partials/desktop/chat_create_modal.html
+++ b/app/partials/desktop/chat_create_modal.html
@@ -17,7 +17,7 @@
 
   <div class="md_simple_modal_footer">
     <button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
-    <button class="btn btn-md" ng-class="{disabled: group.creating}" ng-click="createGroup()" ng-bind="group.creating ? 'group_create_submit_active' : 'group_create_submit' | i18n" ng-disabled="group.creating"></button>
+    <button class="btn btn-md btn-md-primary" ng-class="{disabled: group.creating}" ng-click="createGroup()" ng-bind="group.creating ? 'group_create_submit_active' : 'group_create_submit' | i18n" ng-disabled="group.creating"></button>
   </div>
 
 </div>
\ No newline at end of file
diff --git a/app/partials/desktop/chat_edit_modal.html b/app/partials/desktop/chat_edit_modal.html
index c8dc9aa0..0e53517f 100644
--- a/app/partials/desktop/chat_edit_modal.html
+++ b/app/partials/desktop/chat_edit_modal.html
@@ -17,7 +17,7 @@
 
   <div class="md_simple_modal_footer">
     <button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
-    <button class="btn btn-md" ng-class="{disabled: group.updating}" ng-click="updateGroup()" ng-bind="group.updating ? 'group_edit_submit_active' : 'group_edit_submit' | i18n" ng-disabled="group.updating"></button>
+    <button class="btn btn-md btn-md-primary" ng-class="{disabled: group.updating}" ng-click="updateGroup()" ng-bind="group.updating ? 'group_edit_submit_active' : 'group_edit_submit' | i18n" ng-disabled="group.updating"></button>
   </div>
 
 </div>
\ No newline at end of file
diff --git a/app/partials/desktop/confirm_modal.html b/app/partials/desktop/confirm_modal.html
index 5fb0a993..6e1ec48f 100644
--- a/app/partials/desktop/confirm_modal.html
+++ b/app/partials/desktop/confirm_modal.html
@@ -50,7 +50,7 @@
     <button class="btn btn-md" ng-click="$dismiss()">
       <span my-i18n="modal_cancel"></span>
     </button>
-    <button class="btn btn-md" ng-switch="type" ng-click="$close()" my-focused >
+    <button class="btn btn-md btn-md-primary" ng-switch="type" ng-click="$close()" my-focused >
       <span ng-switch-when="LOGOUT" my-i18n="confirm_modal_logout_submit"></span>
       <span ng-switch-when="HISTORY_FLUSH" my-i18n="confirm_modal_history_flush_submit"></span>
       <span ng-switch-when="FILES_CLIPBOARD_PASTE" my-i18n="confirm_modal_clipboard_files_send_submit"></span>
diff --git a/app/partials/desktop/contacts_modal.html b/app/partials/desktop/contacts_modal.html
index 38bb4dd6..9b147d2f 100644
--- a/app/partials/desktop/contacts_modal.html
+++ b/app/partials/desktop/contacts_modal.html
@@ -66,10 +66,10 @@
 
     <div ng-switch-when="new_group" class="pull-right">
       <button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
-      <button class="btn btn-md" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit" my-i18n="modal_next"></button>
+      <button class="btn btn-md btn-md-primary" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit" my-i18n="modal_next"></button>
     </div>
 
-    <button ng-switch-when="select" class="btn btn-md pull-right" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit" my-i18n="modal_next"></button>
+    <button ng-switch-when="select" class="btn btn-md btn-md-primary pull-right" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit" my-i18n="modal_next"></button>
 
     <button ng-switch-when="edit" class="btn btn-md btn-md-danger pull-right"  ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="deleteSelected()">
       <my-i18n msgid="contacts_modal_edit_delete"></my-i18n>
@@ -77,7 +77,7 @@
     </button>
 
     <div ng-switch-default class="text-center">
-      <button class="btn btn-md" ng-click="importContact()" my-i18n="contacts_modal_new_contact"></button>
+      <button class="btn btn-md btn-md-primary" ng-click="importContact()" my-i18n="contacts_modal_new_contact"></button>
     </div>
 
   </div>
diff --git a/app/partials/desktop/edit_contact_modal.html b/app/partials/desktop/edit_contact_modal.html
index f866b678..c93a7f26 100644
--- a/app/partials/desktop/edit_contact_modal.html
+++ b/app/partials/desktop/edit_contact_modal.html
@@ -27,7 +27,7 @@
 
   <div class="md_simple_modal_footer">
     <button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
-    <button class="btn btn-md" ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'contact_edit_modal_submit_active' : 'contact_edit_modal_submit'| i18n" ng-disabled="progress.enabled"></button>
+    <button class="btn btn-md btn-md-primary" ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'contact_edit_modal_submit_active' : 'contact_edit_modal_submit'| i18n" ng-disabled="progress.enabled"></button>
   </div>
 
 </div>
\ No newline at end of file
diff --git a/app/partials/desktop/import_contact_modal.html b/app/partials/desktop/import_contact_modal.html
index bfaa06f1..f89e550e 100644
--- a/app/partials/desktop/import_contact_modal.html
+++ b/app/partials/desktop/import_contact_modal.html
@@ -27,7 +27,7 @@
 
   <div class="md_simple_modal_footer">
     <button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
-    <button class="btn btn-md" ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'contact_import_modal_submit_active' : 'contact_import_modal_submit' | i18n" ng-disabled="progress.enabled"></button>
+    <button class="btn btn-md btn-md-primary" ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'contact_import_modal_submit_active' : 'contact_import_modal_submit' | i18n" ng-disabled="progress.enabled"></button>
   </div>
 
 </div>
\ No newline at end of file
diff --git a/app/partials/desktop/profile_edit_modal.html b/app/partials/desktop/profile_edit_modal.html
index 6bf01880..505613a7 100644
--- a/app/partials/desktop/profile_edit_modal.html
+++ b/app/partials/desktop/profile_edit_modal.html
@@ -22,7 +22,7 @@
 
   <div class="md_simple_modal_footer">
     <button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
-    <button class="btn btn-md" ng-class="{disabled: profile.updating}" ng-click="updateProfile()" ng-bind="profile.updating ? 'profile_edit_submit_active' : 'profile_edit_submit' | i18n" ng-disabled="profile.updating"></button>
+    <button class="btn btn-md btn-md-primary" ng-class="{disabled: profile.updating}" ng-click="updateProfile()" ng-bind="profile.updating ? 'profile_edit_submit_active' : 'profile_edit_submit' | i18n" ng-disabled="profile.updating"></button>
   </div>
 
 </div>
diff --git a/app/partials/desktop/settings_modal.html b/app/partials/desktop/settings_modal.html
index 1f22e2a1..8aef6440 100644
--- a/app/partials/desktop/settings_modal.html
+++ b/app/partials/desktop/settings_modal.html
@@ -34,81 +34,85 @@
 
   <div class="md_modal_body">
 
-    <div class="md_modal_iconed_section_wrap md_modal_iconed_section_number">
-      <i class="md_modal_section_icon md_modal_section_icon_phone"></i>
+    <div class="md_modal_sections">
 
-      <div class="md_modal_section_param_wrap">
-        <div class="md_modal_section_param_value" ng-bind="profile.phone | phoneNumber"></div>
-        <div class="md_modal_section_param_name" my-i18n="user_modal_phone"></div>
-      </div>
+      <div class="md_modal_iconed_section_wrap md_modal_iconed_section_number">
+        <i class="md_modal_section_icon md_modal_section_icon_phone"></i>
+
+        <div class="md_modal_section_param_wrap">
+          <div class="md_modal_section_param_value" ng-bind="profile.phone | phoneNumber"></div>
+          <div class="md_modal_section_param_name" my-i18n="user_modal_phone"></div>
+        </div>
 
-      <div class="md_modal_section_param_wrap">
-        <div class="md_modal_section_param_value" ng-switch="profile.username.length > 0">
-          <a ng-switch-when="true" class="settings_modal_username_link" ng-click="changeUsername()" ng-bind="'@' + profile.username"></a>
-          <a ng-switch-default ng-click="changeUsername()" my-i18n="settings_modal_empty_username_set"></a>
+        <div class="md_modal_section_param_wrap">
+          <div class="md_modal_section_param_value" ng-switch="profile.username.length > 0">
+            <a ng-switch-when="true" class="settings_modal_username_link" ng-click="changeUsername()" ng-bind="'@' + profile.username"></a>
+            <a ng-switch-default ng-click="changeUsername()" my-i18n="settings_modal_empty_username_set"></a>
+          </div>
+          <div class="md_modal_section_param_name" my-i18n="user_modal_username"></div>
         </div>
-        <div class="md_modal_section_param_name" my-i18n="user_modal_username"></div>
       </div>
-    </div>
 
-    <div class="md_modal_iconed_section_wrap md_modal_iconed_section_toggle">
-      <i class="md_modal_section_icon md_modal_section_icon_notification"></i>
+      <div class="md_modal_iconed_section_wrap md_modal_iconed_section_toggle">
+        <i class="md_modal_section_icon md_modal_section_icon_notification"></i>
 
-      <a class="md_modal_section_toggle_wrap tg_checkbox" ng-click="toggleDesktop()" ng-class="notify.desktop ? 'tg_checkbox_on' : ''">
-        <span class="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
-        <span class="tg_checkbox_label" my-i18n="settings_modal_notifications"></span>
-      </a>
+        <a class="md_modal_section_toggle_wrap tg_checkbox" ng-click="toggleDesktop()" ng-class="notify.desktop ? 'tg_checkbox_on' : ''">
+          <span class="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
+          <span class="tg_checkbox_label" my-i18n="settings_modal_notifications"></span>
+        </a>
 
-      <a class="md_modal_section_toggle_wrap tg_checkbox" ng-click="toggleSound()" ng-class="notify.volume ? 'tg_checkbox_on' : ''">
-        <span class="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
-        <span class="tg_checkbox_label" my-i18n="settings_modal_sound"></span>
-      </a>
+        <a class="md_modal_section_toggle_wrap tg_checkbox" ng-click="toggleSound()" ng-class="notify.volume ? 'tg_checkbox_on' : ''">
+          <span class="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
+          <span class="tg_checkbox_label" my-i18n="settings_modal_sound"></span>
+        </a>
+
+        <div class="md_modal_section_range_wrap tg_range_wrap" ng-show="notify.volume > 0">
+          <div my-slider slider-model="notify.volume"></div>
+        </div>
 
-      <div class="md_modal_section_range_wrap tg_range_wrap" ng-show="notify.volume > 0">
-        <div my-slider slider-model="notify.volume"></div>
       </div>
 
-    </div>
+      <div class="md_modal_iconed_section_wrap md_modal_iconed_section_radio">
+        <i class="md_modal_section_icon md_modal_section_icon_keyboard"></i>
 
-    <div class="md_modal_iconed_section_wrap md_modal_iconed_section_radio">
-      <i class="md_modal_section_icon md_modal_section_icon_keyboard"></i>
+        <div class="tg_radios_wrap">
+          <a class="md_modal_section_radio_wrap tg_radio" ng-click="toggleCtrlEnter(1)" ng-class="send.enter == 1 ? 'tg_radio_on' : ''">
+            <span class="icon icon-radio-outer"><i class="icon-radio"></i></span>
+            <span my-i18n="settings_modal_enter_send_description_md"></span>
+          </a>
 
-      <div class="tg_radios_wrap">
-        <a class="md_modal_section_radio_wrap tg_radio" ng-click="toggleCtrlEnter(1)" ng-class="send.enter == 1 ? 'tg_radio_on' : ''">
-          <span class="icon icon-radio-outer"><i class="icon-radio"></i></span>
-          <span my-i18n="settings_modal_enter_send_description_md"></span>
-        </a>
+          <a class="md_modal_section_radio_wrap tg_radio" ng-click="toggleCtrlEnter(0)" ng-class="send.enter == 0 ? 'tg_radio_on' : ''">
+            <span class="icon icon-radio-outer"><i class="icon-radio"></i></span>
+            <span my-i18n="settings_modal_ctrl_enter_send_description_md"></span>
+          </a>
+        </div>
 
-        <a class="md_modal_section_radio_wrap tg_radio" ng-click="toggleCtrlEnter(0)" ng-class="send.enter == 0 ? 'tg_radio_on' : ''">
-          <span class="icon icon-radio-outer"><i class="icon-radio"></i></span>
-          <span my-i18n="settings_modal_ctrl_enter_send_description_md"></span>
-        </a>
       </div>
 
-    </div>
+      <div class="md_modal_iconed_section_wrap  md_modal_iconed_section_link">
+        <i class="md_modal_section_icon md_modal_section_icon_more"></i>
+
+        <div class="md_modal_section_select_wrap" ng-controller="AppLangSelectController">
+          <div class="dropdown md_modal_section_select" dropdown>
+            <button class="btn btn-link dropdown-toggle" dropdown-toggle ng-bind="langNames[curLocale]"></button>
+            <ul class="dropdown-menu dropdown-menu-to-up">
+              <li ng-repeat="locale in ::supportedLocales">
+                <a ng-click="localeSelect(locale)" ng-bind="langNames[locale]"></a>
+              </li>
+            </ul>
+          </div>
 
-    <div class="md_modal_iconed_section_wrap  md_modal_iconed_section_link">
-      <i class="md_modal_section_icon md_modal_section_icon_more"></i>
-
-      <div class="md_modal_section_select_wrap" ng-controller="AppLangSelectController">
-        <div class="dropdown md_modal_section_select" dropdown>
-          <button class="btn btn-link dropdown-toggle" dropdown-toggle ng-bind="langNames[curLocale]"></button>
-          <ul class="dropdown-menu dropdown-menu-to-up">
-            <li ng-repeat="locale in ::supportedLocales">
-              <a ng-click="localeSelect(locale)" ng-bind="langNames[locale]"></a>
-            </li>
-          </ul>
+          <div class="md_modal_section_param_name" my-i18n="settings_modal_language"></div>
         </div>
 
-        <div class="md_modal_section_param_name" my-i18n="settings_modal_language"></div>
-      </div>
+        <div class="md_modal_section_link_wrap">
+          <a class="md_modal_section_link" ng-click="terminateSessions()" my-i18n="settings_modal_terminate_sessions"></a>
+        </div>
 
-      <div class="md_modal_section_link_wrap">
-        <a class="md_modal_section_link" ng-click="terminateSessions()" my-i18n="settings_modal_terminate_sessions"></a>
-      </div>
+        <div class="md_modal_section_link_wrap">
+          <a class="md_modal_section_link" ng-click="logOut()" my-i18n="head_log_out"></a>
+        </div>
 
-      <div class="md_modal_section_link_wrap">
-        <a class="md_modal_section_link" ng-click="logOut()" my-i18n="head_log_out"></a>
       </div>
 
     </div>
diff --git a/app/partials/desktop/username_edit_modal.html b/app/partials/desktop/username_edit_modal.html
index 2c419535..bc71a8de 100644
--- a/app/partials/desktop/username_edit_modal.html
+++ b/app/partials/desktop/username_edit_modal.html
@@ -20,7 +20,7 @@
   <div class="md_simple_modal_footer">
 
     <button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
-    <button class="btn btn-md" ng-class="{disabled: profile.updating}" ng-click="updateUsername()" ng-bind="profile.updating ? 'username_edit_submit_active' : 'username_edit_submit' | i18n" ng-disabled="profile.updating"></button>
+    <button class="btn btn-md btn-md-primary" ng-class="{disabled: profile.updating}" ng-click="updateUsername()" ng-bind="profile.updating ? 'username_edit_submit_active' : 'username_edit_submit' | i18n" ng-disabled="profile.updating"></button>
 
   </div>