[PORTAL-7] Rebase

This rebasing includes common libraries and common overlays projects
abstraction of components

Change-Id: I9a24a338665c7cd058978e8636bc412d9e2fdce8
Signed-off-by: st782s <statta@research.att.com>

4 files changed, 1077 insertions, 0 deletions

diff --git a/ecomp-portal-FE-common/client/app/views/tabs/tabframe.html b/ecomp-portal-FE-common/client/app/views/tabs/tabframe.html
new file mode 100644
index 00000000..0155592a
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/tabs/tabframe.html
@@ -0,0 +1,22 @@
+<!--
+  ================================================================================
+  eCOMP Portal
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<iframe id= "tabframe-{{tab.title.split(' ').join('-')}}" scrolling='yes' frameBorder='0' width='100%' style='height: 90vh;' 
+src='{{tab.content | trusted}}'
+></iframe>
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.js b/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.js
new file mode 100644
index 00000000..5a5b7e49
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.js
@@ -0,0 +1,314 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+'use strict';
+(function () {
+    const HTTP_PROTOCOL_RGX = /https?:\/\//;
+    class  TabsCtrl {
+        constructor(applicationsService, $log, $window, conf, userProfileService, userbarUpdateService, $scope,$cookies,$rootScope,confirmBoxService,auditLogService) {        	
+        	// Tab counter
+            var counter = 1;
+            var tabLimit = 6;
+            this.conf = conf;
+            var cookieDomain = this.conf.cookieDomain;
+            // Array to store the tabs
+            $scope.tabs = [];
+            $scope.notificationShow=true;
+            $rootScope.showFooter = "";
+            $cookies.putObject('show_app_header', false,{domain: cookieDomain, path : '/'});
+
+
+            let noRefresh = function () {
+                    window.onbeforeunload = function(e) {
+
+                    	var isQtoHref = false;
+                    	try{
+                    		isQtoHref = e.srcElement.activeElement.href.includes("to");
+                    	} catch(err) {
+
+                    	}
+
+                        if ($scope.tabs.length > 1 && isQtoHref == false) {
+                            return "Changes you made may not be saved. Are you sure you want to refresh?";
+                        } else {
+                            return null;
+                        }
+                    }
+            }
+            // Add tab to the end of the array
+            var addTab = function (title, content) {
+            	if($scope.tabs.length===tabLimit){
+            		//alert
+            		confirmBoxService.showInformation('You have reached your maximum limit of tabs allowed.').then(isConfirmed => {});
+            	} else {
+            		// console.log(window.performance.memory);
+            		// var usedperc = (window.performance.memory.usedJSHeapSize/window.performance.memory.jsHeapSizeLimit)*100;
+            		// console.log('Current memory usage: '+usedperc+'%');
+            		if(title!=='Home' && content.indexOf('https') == -1){
+            			console.log('App URL: '+content+'. The application URL you are trying to open is not HTTPS. We recommend to use secured HTTPS URL while on-boarding the application.');
+            			//confirmBoxService.showInformation('The application URL you are trying to open is not HTTPS. We recommend to use secured HTTPS URL while on-boarding the application.').then(isConfirmed => {});
+            		}
+            		
+                    $scope.tabs.push({ title: title, content: content });
+                    counter++;
+                    //$scope.tabs[$scope.tabs.length - 1].disabled = false;
+                    $scope.selectedIndex = $scope.tabs.length - 1;
+                    if ($scope.tabs.length > 1) {
+                        noRefresh();
+                    }
+                    $cookies.putObject('cookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'});
+                    $cookies.putObject('visInVisCookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'});
+            	}
+            };
+            
+            //with APP ID
+            var addTab = function (title, content, appId) {
+            	if($scope.tabs.length===tabLimit){
+            		//alert
+            		confirmBoxService.showInformation('You have reached your maximum limit of tabs allowed.').then(isConfirmed => {});
+            	} else {     		
+            		if(title!=='Home' && content.indexOf('https') === -1){
+            			console.log('App URL: '+content+'. The application URL you are trying to open is not HTTPS. We recommend to use secured HTTPS URL while on-boarding the application.');
+            		}
+                    $scope.tabs.push({ title: title, content: content, appId:appId });
+                    counter++;
+                    $scope.selectedIndex = $scope.tabs.length - 1;
+                    if ($scope.tabs.length > 1) {
+                        noRefresh();
+                    }
+                    $cookies.putObject('cookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'});
+                    $cookies.putObject('visInVisCookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'});
+            	}
+            };
+            
+            // adjust title - trim the title and append ...
+            var adjustTitle = function (title) {
+            	var index = 15;
+            	var nonEmptyCharPattern = /(\s|\w)/;
+            	var adjustedTitle = title.substring(0,index);
+            	var ext = title.charAt(index).replace(nonEmptyCharPattern,'...');
+            	return adjustedTitle.concat(ext);
+            	
+            	
+            };
+            
+            //store audit log
+            $scope.auditLog = function(app) {
+                $log.debug('auditLog::auditLog: auditLog.ping() = ' + app);
+                var comment = '';
+                if(app.content==null || app.content=='')
+                	comment= app.title;
+                else
+                	comment = app.content;
+                auditLogService.storeAudit(app.appId, 'tab', comment);
+        	};
+            
+            // Remove tab by index
+            var removeTab = function (event, index) {
+              event.preventDefault();
+              event.stopPropagation();
+              $scope.tabs.splice(index, 1);
+              $cookies.putObject('cookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'});
+            };
+            
+          //adjust height of the tab due to the search popup being hidden 
+        	$scope.adjustTabStyle = function(title){
+        		if(title=='Home'){
+        			$(".w-ecomp-tabs").css('height',"50px");
+        		}else{
+        			$(".w-ecomp-tabs").css('height',"100%");
+        		}
+        	}
+        	
+           // select tab 
+            var selectTab = function (title) {
+            	$scope.adjustTabStyle(title);
+                if(title==='Home') {
+                    $rootScope.ContentModel.IsVisible=true;
+                    $rootScope.showFooter = true;
+                    $rootScope.tabBottom = 75;
+                    userbarUpdateService.setRefreshCount(userbarUpdateService.maxCount);
+                }
+                else {
+                    $rootScope.ContentModel.IsVisible=false;
+                    $rootScope.showFooter = false;
+                    $rootScope.tabBottom = 0;
+                }
+            };
+
+            // Initialize the scope functions
+            $scope.addTab    = addTab;
+            $scope.removeTab = removeTab;
+            $scope.selectTab = selectTab;
+            $scope.adjustTitle = adjustTitle;
+            
+
+            $rootScope.ContentModel = {
+            	    IsVisible : false,
+            	    ViewUrl : null,
+            	};
+            
+            
+        	var sessionActive = applicationsService.ping()
+        	.then(sessionActive => {
+            // $log.debug('TabsCtrl::addTab: applicationsService.ping() = ' + JSON.stringify(sessionActive));
+        	// For demonstration add 5 tabs
+               
+            var cookieTabs = $cookies.getObject('cookieTabs');
+        	if(cookieTabs!=null){
+        		for(var t in cookieTabs){
+        			// console.log('TabsCtrl::addTab: cookieTabs title: '+cookieTabs[t].title);
+        			if(cookieTabs[t].title!=null && cookieTabs[t].title==='Home'){
+        				cookieTabs[t].content = "";
+        				$rootScope.ContentModel.IsVisible=true;
+            			addTab( cookieTabs[t].title, cookieTabs[t].content,1) ;
+        			}else{
+            			addTab( cookieTabs[t].title, cookieTabs[t].content,cookieTabs[t].appId) ;
+        			}
+        				
+        		}
+        	} else {
+            for (var i = 0; i < 1; i++) {
+            	var content="";
+            	var title="";
+            	var appId=""
+            	if(i===0){
+            		title="Home";
+            		$rootScope.ContentModel.IsVisible=true;
+                    addTab(title, content,1);
+            	}else{
+                    addTab(title, content,appId);
+            	} 
+            }
+        	}
+            
+
+            
+            //$scope.tabs[$scope.tabs.length - 1].active = false;
+            //$scope.tabs[0].disabled = false;
+            $scope.selectedIndex = 0;
+        	});
+        	
+            $scope.$watchCollection(function() { return $cookies.getObject('addTab'); }, function(newValue) {
+            	// $log.log('Cookie string: ' + $cookies.get('test'))
+            	var tabContent = $cookies.getObject('addTab');
+            	if(tabContent!=null && tabContent.url!=null){
+            		var tabExists = false;
+            		for(var x in $scope.tabs){
+            			// console.log($scope.tabs[x].content);
+            			if($scope.tabs[x].title==tabContent.title){
+            				tabExists = true;
+            				//$scope.tabs[x].disabled = false;
+            				$scope.selectedIndex = x;
+                            // added dummy variable to get iframe reloded if tab is already opened.
+                            if(tabContent.url.indexOf('?')===-1){
+                                $scope.tabs[x].content=tabContent.url+'?dummyVar='+(new Date()).getTime();
+                            }
+                            else{
+                                $scope.tabs[x].content=tabContent.url+'&dummyVar='+(new Date()).getTime();
+                            }
+            			}
+            		}
+            		if(!tabExists){
+            	         addTab( tabContent.title, tabContent.url,tabContent.appId) ;
+            		}
+            		$cookies.remove('addTab');
+            	}
+            });
+        }
+    }
+    TabsCtrl.$inject = ['applicationsService', '$log', '$window', 'conf', 'userProfileService', 'userbarUpdateService', '$scope','$cookies','$rootScope','confirmBoxService','auditLogService'];
+    angular.module('ecompApp').controller('TabsCtrl', TabsCtrl);
+    
+    angular.module('ecompApp').directive('mainArea', function() {
+        return {
+            restrict: "E",
+            templateUrl: 'app/views/tabs/tabframe.html',
+            link: function(scope, element) {
+            	           	
+            	//var iframeId = "#tabframe-" + scope.$parent.tab.title.split(' ').join('-');
+            	// jQuery(iframeId).load(function() {
+            	//        alert("hello");
+            	//    }); //.attr("src",'{{tab.content | trusted}}' ); //src='{{tab.content | trusted}}'
+            	// jQuery(iframeId).attr('src', '{{tab.content | trusted}}');
+            	 
+            	//element.childNodes[0].on('load', function() {
+            	//	alert('hello');
+            	//});
+            }
+        }
+    });
+    
+   
+    
+    angular.module('ecompApp').directive('tabHighlight', [function () {
+        return {
+          restrict: 'A',
+          link: function (scope, element) {
+            // Here is the major jQuery usage where we add the event
+            // listeners mousemove and mouseout on the tabs to initalize
+            // the moving highlight for the inactive tabs
+            var x, y, initial_background = '#c3d5e6';
+
+            element
+              .removeAttr('style')
+              .mousemove(function (e) {
+                // Add highlight effect on inactive tabs
+                if(!element.hasClass('md-active'))
+                {
+                  x = e.pageX - this.offsetLeft;
+                  y = e.pageY - this.offsetTop;
+
+                  // Set the background when mouse moves over inactive tabs
+                  element
+                    .css({ background: '-moz-radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background })
+                    .css({ background: '-webkit-radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background })
+                    .css({ background: 'radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background });
+                }
+              })
+              .mouseout(function () {
+                // Return the inital background color of the tab
+                element.removeAttr('style');
+              });
+          }
+        };
+      }]);
+
+
+    
+})();
+
+function getParameterByName(name, url) {
+    if (!url) url = window.location.href;
+    name = name.replace(/[\[\]]/g, "\\$&");
+    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+        results = regex.exec(url);
+    if (!results) return '';
+    if (!results[2]) return '';
+    return (results[2].replace(/\+/g, " "));
+}
+
+function isCascadeFrame(ref) {
+	  // alert(ref.id);
+	   if (self != top) {
+		   var e = document.body;
+		   e.parentNode.removeChild(e);
+		   window.location = "unKnownError";
+		   }
+}
diff --git a/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.spec.js b/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.spec.js
new file mode 100644
index 00000000..b9fd0acc
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.spec.js
@@ -0,0 +1,81 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+'use strict';
+
+describe('Controller: TabsCtrl ',() => {
+    beforeEach(module('ecompApp'));
+
+    //destroy $http default cache before starting to prevent the error 'default cache already exists'
+    beforeEach(inject((_CacheFactory_)=>{
+        _CacheFactory_.destroyAll();
+    }));
+
+    let TabsCtrl, $controller, $q, $rootScope, $log, $window, $cookies,$scope;
+
+    beforeEach(inject((_$controller_, _$q_, _$rootScope_, _$log_, _$window_, _$cookies_)=>{
+        [$controller, $q, $rootScope, $log, $window, $cookies] = [_$controller_, _$q_, _$rootScope_, _$log_, _$window_, _$cookies_];
+    }));
+
+    var deferredApps, deferredUserProfile;
+    beforeEach(()=>{
+        deferredApps = $q.defer();
+        deferredUserProfile = $q.defer();
+        let applicationsServiceMock = jasmine.createSpyObj('applicationsServiceMock', ['getUserApps']);
+        applicationsServiceMock.getUserApps.and.returnValue(deferredApps.promise);
+
+        let userProfileServiceMock = jasmine.createSpyObj('userProfileServiceMock',['getUserProfile']);
+        userProfileServiceMock.getUserProfile.and.returnValue(deferredUserProfile.promise);
+
+        $scope = $rootScope.$new();
+        TabsCtrl = $controller('TabsCtrl', {
+            applicationsService: applicationsServiceMock,
+            $log: $log,
+            $window: $window,
+            userProfileService: userProfileServiceMock,
+            $scope: $scope,
+            $cookies: $cookies,
+            $rootScope: $rootScope
+        });
+    });
+
+    it('should populate this.apps with data from portals service getUserApps', ()=>{
+        var profile = {roles:'superAdmin',userId:'userid'};
+       deferredUserProfile.resolve(profile);
+       deferredApps.resolve([{name: 'portal1'},{name: 'portal2'},{name: 'portal3'}]);
+        $rootScope.$apply();
+        expect($scope.appsViewData.length).toBe(3);
+    });
+
+    it('should call $log error when getAllPortals fail', ()=>{
+        spyOn($log, 'error');
+        deferredUserProfile.reject('something happened!');
+        $rootScope.$apply();
+        expect($log.error).toHaveBeenCalled();
+    });
+
+    it('should open link in a new window when clicking app thumbnail', () => {
+        spyOn($window, 'open');
+        let someUrl = 'http://some/url/';
+        TabsCtrl.goToPortal(someUrl);
+        expect($window.open).toHaveBeenCalledWith(someUrl, '_self');
+    });
+    
+ 
+});
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/tabs/tabs.less b/ecomp-portal-FE-common/client/app/views/tabs/tabs.less
new file mode 100644
index 00000000..9f90d610
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/tabs/tabs.less
@@ -0,0 +1,660 @@
+.w-ecomp-tabs {
+  //.bg_portalWhite;//white for 1702
+  .bg_portalGray;  // gray for 1610
+
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: @page-main-bottom;
+  overflow-y: hidden;
+  top: @header-height;
+  padding-left: 0;
+  height:50px;
+  z-index:101;
+  .go-button {
+    .btn-green;
+    width: 96px;
+    position: absolute;
+    border-radius: 0px;
+  }
+
+  .tabs-container {
+    .content_justify;
+    position: relative;
+    padding: 15px 0 32px 0;
+    width: 100%;
+
+    .tabs-title {
+      //.a24r;
+      .dBlue24r;  // AT&T Dark Blue
+      margin: auto;
+      .content_justify;
+    }
+    .portals-list {
+      min-height: 70vh;
+      //display: flex;
+      justify-content: center;
+      flex-flow: row wrap;
+      width: 1170px;
+
+      margin: auto;
+      margin-bottom: 63px;
+
+      .app-gridster-header {
+        background-color: @portalWhite;
+      }
+
+      .app-gridster-footer {
+        background-color: @portalWhite;
+      }
+
+      .portals-list-item {
+        background-color: @portalWhite;
+        border-radius: 2px;
+        box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);
+        display: inline-block;
+        width: 360px;
+        height: 300px;
+        background-size: cover;
+        cursor: pointer;
+        margin: 15px;
+        overflow: hidden;
+
+        .portals-item-info {
+          background-color: @portalWhite;
+          height: 120px;
+          top: 180px;
+          position: relative;
+          box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);
+          padding: 16px;
+
+          .info-title {
+            //.a24r;
+            .dBlue24r;  // AT&T Dark Blue
+            margin-bottom: 4px;
+            
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+          .info-description {
+            .portalDBlue16r;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+          .info-button {
+            .btn-green;
+            width: 96px;
+            position: absolute;
+            bottom: 16px;
+            left: 16px;
+          }
+
+          &:hover {
+            opacity: .93;
+            z-index: 3;
+          }
+        }
+      }
+    }
+  }
+}
+
+.w-ecomp-main-disclaimer {
+  text-align: center;
+  .dGray14r;
+  bottom: -37px;
+  width: 100%;
+  line-height: 1.5em;
+
+}
+//.build-number {
+//  .o12i;
+//}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+
+
+.tab-container {
+  background: @portalLGray;
+  margin: 0;
+  padding: 0;
+  max-height: 40px;
+}
+.tab-container ul.nav-tabs {
+  margin: 0;
+  list-style-type: none;
+  line-height: 40px;
+  max-height: 40px;
+  overflow: hidden;
+  display: inline-block;
+  display: -webkit-flex;
+  display: flex;
+  padding-right: 20px;
+  border-bottom: 5px solid @funcBkgGray;
+}
+.tab-container ul.nav-tabs > li {
+  margin: 5px -14px 0;
+  -moz-border-radius-topleft: 28px 145px;
+  -webkit-border-top-left-radius: 28px 145px;
+  border-top-left-radius: 28px 145px;
+  -moz-border-radius-topright: 28px 145px;
+  -webkit-border-top-right-radius: 28px 145px;
+  border-top-right-radius: 28px 145px;
+  padding: 0 30px 0 25px;
+  height: 170px;
+  background: #c3d5e6;
+  position: relative;
+  -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
+  width: 200px;
+  max-width: 200px;
+  min-width: 20px;
+  border: 1px solid @portalGray;
+}
+.tab-container ul.nav-tabs > li:first-child {
+  margin-left: 0;
+}
+.tab-container ul.nav-tabs > li:last-of-type {
+  margin-right: 0;
+}
+.tab-container ul.nav-tabs > li > a {
+  display: block;
+  max-width: 100%;
+  text-decoration: none;
+  color: @portalBlack;
+  padding: 3px 7px;
+}
+.tab-container ul.nav-tabs > li > a span {
+  overflow: hidden;
+  white-space: nowrap;
+  display: block;
+}
+.tab-container ul.nav-tabs > li > a:focus, .tab-container ul.nav-tabs > li > a:hover {
+  background-color: transparent;
+  border-color: transparent;
+}
+.tab-container ul.nav-tabs > li > a .glyphicon-remove {
+  color: @portalDGray;
+  display: inline-block;
+  padding: 3px;
+  font-size: 10px;
+  position: absolute;
+  z-index: 10;
+  top: 7px;
+  right: -10px;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+}
+.tab-container ul.nav-tabs > li > a .glyphicon-remove:hover {
+  background: @portalLPurple;
+  color: @portalWhite;
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+}
+.tab-container ul.nav-tabs > li.active {
+  z-index: 4;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 30, color-stop(0%, @portalWhite), color-stop(100%, @funcBkgGray));
+  background-image: -moz-linear-gradient(@portalWhite, @funcBkgGray 30px);
+  background-image: -webkit-linear-gradient(@portalWhite, @funcBkgGray 30px);
+  background-image: linear-gradient(@portalWhite, @funcBkgGray 30px);
+}
+.tab-container ul.nav-tabs > li.active > a {
+  background-color: transparent;
+  border-color: transparent;
+  border-bottom-color: transparent;
+}
+.tab-container ul.nav-tabs > li.active > a:focus, .tab-container ul.nav-tabs > li.active > a:hover {
+  background-color: transparent;
+  border-color: transparent;
+  border-bottom-color: transparent;
+}
+.tab-container ul.nav-tabs .btn {
+  float: left;
+  height: 20px;
+  width: 35px;
+  min-width: 35px;
+  max-width: 35px;
+  margin: 10px 0 0 0;
+  border-color: @portalLBlue;
+  outline: none;
+  -moz-transform: skew(30deg);
+  -ms-transform: skew(30deg);
+  -webkit-transform: skew(30deg);
+  transform: skew(30deg);
+}
+.tab-container ul.nav-tabs .btn.btn-default {
+  background: #c3d5e6;
+}
+.tab-container ul.nav-tabs .btn.btn-default:hover {
+  background: #d2deeb;
+}
+.tab-container ul.nav-tabs .btn.btn-default:active {
+  background: #9cb5cc;
+}
+.tab-container .tab-pane {
+  padding: 0px 0px;
+  text-align: center;
+}
+.tab-container .tab-pane.active {
+  border-top: 1px solid #ddd;
+}
+
+.tab-container md-content {
+  background-color: transparent !important; }
+  .tab-container md-content md-tabs {
+    border: 1px solid #e1e1e1; }
+    .tab-container md-content md-tabs md-tab-content {
+      background: #f6f6f6; }
+    .tab-container md-content md-tabs md-tabs-canvas {
+      background: white; }
+  .tab-container md-content h1:first-child {
+    margin-top: 0; }
+.tab-container md-input-container {
+  padding-bottom: 0; }
+.tab-container .remove-tab {
+  margin-bottom: 40px; }
+.tab-container .demo-tab > div > div {
+  padding: 25px;
+  box-sizing: border-box; }
+.tab-container .edit-form input {
+  width: 100%; }
+.tab-container md-tabs {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
+.tab-container md-tab[disabled] {
+  opacity: 0.5; }
+.tab-container label {
+  text-align: left; }
+.tab-container .long > input {
+  width: 264px; }
+.tab-container .md-button.add-tab {
+  transform: translateY(5px); }
+
+.md-tab{
+	font-size: 13px;
+    line-height: 30px;
+    margin: 5px -3px 0;
+    border-top-left-radius: 88px 205px;
+    border-top-right-radius: 88px 205px;
+    padding: 0 30px 0 25px;
+    height: 40px;
+    background: @portalLGray;
+    position: relative;
+    box-shadow: 0 4px 6px rgba(0,0,0,.5);
+    width: 180px;
+    max-width: 200px;
+    min-width: 20px;
+    border: 1px solid #aaa;
+    text-transform: capitalize;
+    text-align: left;
+}
+
+md-tabs .md-tab {
+	color: #222;
+}
+
+md-tabs-canvas {
+    border-bottom: 5px solid #f7f7f7;
+    height: 40px;
+}
+.md-tab.md-active {
+  	z-index: 4;
+  	background-color: #f5f5f5 !important;
+}
+.md-tab:first-child{
+	margin-left: 10px;
+}
+md-ink-bar{
+	z-index: 5 !important;
+}
+
+.glyphicon {
+      position: fixed;
+      line-height: 4;
+}
+.close_button {
+	font-size: x-small;width: 10px;
+    margin-left: 130px;
+}
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+	.close_button {
+		font-size: x-small;width: 10px;margin-left: 130px;margin-top: 55px;
+	}
+}
+
+*,
+*:after,
+*:before
+{
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+
+.button-default
+{
+  .transition(@transitionDefault color);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  outline: none;
+  position: relative;
+}
+
+.show-notifications
+{
+  position: relative;
+
+  &:hover,
+  &:focus,
+  &.active
+  {
+    #icon-bell
+    {
+      fill: @colorWetAsphalt;
+    }
+  }
+
+  #icon-bell
+  {
+    fill: @colorAsbestos;
+  }
+
+
+
+  &.active ~ .notifications
+  {
+    opacity: 1;
+    top: 35px;
+  }
+}
+.notifications_li{
+    border-top: 1px solid #bdc3c7;
+    color: #7f8c8d;
+    cursor: default;
+    display: block;
+    padding: 10px;
+    position: relative;
+    white-space: nowrap;
+    width: 350px;
+}
+.notifications_li:hover{
+	background:#eee;
+}
+.notifications_detail{
+	margin-left: 10px;
+    white-space: normal;
+    width: 280px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.notifications_empty{
+    display: none;
+    text-align: center;
+}
+.notifications_title{
+    display: block;
+}
+
+.notifications_date{
+    color: #95a5a6;
+    font-size: .85em;
+    margin-top: 3px;
+}
+.notifications
+{
+  .border-radius(@borderRadius);
+  .transition(@transitionDefault opacity);
+  background: @colorClouds;
+  border: 1px solid @colorSilver;
+  left: 10px;
+  opacity: 0;
+ // position: absolute;
+  //top: -999px;
+
+  &:after
+  {
+    border: 10px solid transparent;
+    border-bottom-color: @colorPeterRiver;
+    content: '';
+    display: block;
+    height: 0;
+    left: 10px;
+    position: absolute;
+    top: -20px;
+    width: 0;
+  }
+
+  h3,
+  .show-all
+  {
+    background: @colorPeterRiver;
+    color: @colorWhite;
+    margin: 0;
+    padding: 10px;
+    width: 350px;
+  }
+
+  h3
+  {
+    cursor: default;
+    font-size: 1.05em;
+    font-weight: normal;
+  }
+
+  .show-all
+  {
+    display: block;
+    text-align: center;
+    text-decoration: none;
+
+    &:hover,
+    &:focus
+    {
+      text-decoration: underline;
+    }
+  }
+
+  .notifications-list
+  {
+    list-style: none;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+
+    .item
+    {
+      .transition-transform(@transitionDefault);
+      border-top: 1px solid @colorSilver;
+      color: @colorAsbestos;
+      cursor: default;
+      display: block;
+      padding: 10px;
+      position: relative;
+      white-space: nowrap;
+      width: 350px;
+
+      &:before,
+      .details,
+      .button-dismiss
+      {
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      &:before
+      {
+        .border-radius(50%);
+        background: @colorPeterRiver;
+        content: '';
+        height: 8px;
+        width: 8px;
+      }
+
+      .details
+      {
+        margin-left: 10px;
+        white-space: normal;
+        width: 280px;
+
+        .title,
+        .date
+        {
+          display: block;
+        }
+
+        .date
+        {
+          color: @colorConcrete;
+          font-size: .85em;
+          margin-top: 3px;
+        }
+      }
+
+      .button-dismiss
+      {
+        color: @colorSilver;
+        font-size: 2.25em;
+
+        &:hover,
+        &:focus
+        {
+          color: @colorConcrete;
+        }
+      }
+
+      &.no-data
+      {
+        display: none;
+        text-align: center;
+
+        &:before
+        {
+          display: none;
+        }
+      }
+
+      &.expired
+      {
+        color: @colorSilver;
+
+        &:before
+        {
+          background: @colorSilver;
+        }
+
+        .details
+        {
+          .date
+          {
+            color: @colorSilver;
+          }
+        }
+      }
+
+      &.dismissed
+      {
+        .transform(translateX(100%));
+      }
+    }
+  }
+
+  &.empty
+  {
+    .notifications-list
+    {
+      .no-data
+      {
+        display: block;
+        padding: 10px;
+      }
+    }
+  }
+}
+
+/* variables */
+@colorClouds: #ecf0f1;
+@colorSilver: #bdc3c7;
+@colorWhite: #fefefe;
+@colorPeterRiver: #3498db;
+@colorConcrete: #95a5a6;
+@colorAsbestos: #7f8c8d;
+@colorWetAsphalt: #34495e;
+
+@borderRadius: 2px;
+
+@transitionDefault: 0.25s ease-out 0.10s;
+
+/* mixins */
+.background-clip(@value: border-box)
+{
+    -moz-background-clip: @value;
+    -webkit-background-clip: @value;
+    background-clip: @value;
+}
+
+.border-radius(@value: 5px)
+{
+    -moz-border-radius: @value;
+    -webkit-border-radius: @value;
+    border-radius: @value;
+    .background-clip(padding-box);
+}
+
+.transform(@value)
+{
+  -webkit-transform: @value;
+  -moz-transform: @value;
+  -ms-transform: @value;
+  -o-transform: @value;
+  transform: @value;
+}
+
+.transition(@value: all 0.25s ease-out)
+{
+  -webkit-transition: @value;
+  -moz-transition: @value;
+  -o-transition: @value;
+  transition: @value;
+}
+
+.transition-transform(@transition: 0.25s ease-out)
+{
+  -webkit-transition: -webkit-transform @transition;
+  -moz-transition: -moz-transform @transition;
+  -o-transition: -o-transform @transition;
+  transition: transform @transition;
+}
+
+.tab-cross-sign{
+	position:relative;
+    margin-left: 126px;
+	top:-70px;
+	 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ 	 top:-70px;
+	}    
+}
+
+#tab-cross-sign-icon{
+    margin: 48px 0px 0px 0px; 
+    width: 16.1px;
+    border-bottom-width:0px;
+    padding: 6px 6px 6px 3px;   
+}